目录
一.关键字
| 关键词 | 英文 | 解释 |
|---|---|---|
| ul | 无序列表 | |
| ol | 有序列表 | |
| div | 一个容器 | |
| span | 写文本 | |
| 块级标签 | Block-level tags | 独占一行 |
| 行级标签 | Row-level label | 挤在一行 |
| frame | 框架 | 一个页面打开多个网页 |
| iframe | 内联框架 | 可以把页面放在一个页面里面 |
| form | 表单 |
二.使用Table标签和Form表单元素完成一个个人简历的网页编写
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table cellspacing="0" border="1px">
<tr>
<td colspan="7" align="center" style="font-size: 20px;font-weight: bold;background-color: gray;">
个人性息表填写
</td>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td colspan="2">
(中)<input type="text" name="中文名">
</td>
<td>性别</td>
<td colspan="2">
<input type="radio" name="性别" value="男">男
<input type="radio" name="性别" value="女">女
</td>
<td rowspan="4">
<img src="666.jpg" style="width: 100px;"><br/>
<input type="file" name="文件上传">
</td>
</tr>
<tr>
<td colspan="2">(英)<input type="text" name="英文名"></td>
<td>民族</td>
<td colspan="2">
<input type="text" name="民族">
</td>
</tr>
<tr>
<td>政治面貌</td>
<td colspan="2">
<select>
<option value="自由群众">自由群众</option>
<option value="共青团员">共青团员</option>
<option value="共产党员">共产党员</option>
</select>
</td>
<td>身份证号码</td>
<td colspan="2">
<input type="text" name="身份证号码">
</td>
</tr>
<tr>
<td>出生日月</td>
<td colspan="2">
<input type="text" name="出生年月日">
</td>
<td>出生地</td>
<td colspan="2">
<input type="text" name="出生地">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td colspan="2">
<input type="radio" name="婚姻状况" value="已婚">已婚
<input type="radio" name="婚姻状况" value="未婚">未婚
<input type="radio" name="婚姻状况" value="其他">其他
</td>
<td>兵役</td>
<td colspan="3">
<input type="radio" name="兵役状况" value="已役">已役
<input type="radio" name="兵役状况" value="未役">未役
<input type="radio" name="兵役状况" value="免役">免役
原因:<input type="text" name="免役原因">
</td>
</tr>
<tr>
<td colspan="7">
兴趣爱好:
<input type="checkbox" name="游泳">游泳
<input type="checkbox" name="做饭">做饭
<input type="checkbox" name="读书">读书
<input type="checkbox" name="打篮球">打篮球
<input type="checkbox" name="跑步">跑步
<input type="checkbox" name="做家务">做家务
<input type="checkbox" name="志愿者">志愿者
<input type="checkbox" name="打游戏">打游戏
<input type="checkbox" name="睡觉">睡觉
</td>
</tr>
<tr>
<td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">
联系信息
</td>
</tr>
<tr>
<td colspan="4">
目前居住通信地址:
<input type="text" name="目前居住通信地址">
</td>
<td colspan="3">
户籍所在地地址:
<input type="text" name="户籍所在地地址">
</td>
</tr>
<tr>
<td>邮箱</td>
<td colspan="2">
<input type="text" name="邮箱">
</td>
<td>本人手机号</td>
<td>
<input type="text" name="本人手机号">
</td>
<td>紧急联系人手机号</td>
<td colspan="2">
<input type="text" name="紧急联系人手机号">
</td>
</tr>
<tr>
<td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">
个人介绍
</td>
</tr>
<tr>
<td colspan="7">
<textarea></textarea>
</td>
</tr>
</table>
</body>
</html>
三.使用form完成一篇带目录导航的文章编写
<!DOCTYPE html>
<html>
<head>
<title>目录</title>
</head>
<body>
<h1>0926慕课第二天</h1>
<ul>
<li><a href="0926渡课第二天.html#h1" target="daohang">关键字</a></li>
<li><a href="0926渡课第二天.html#h2" target="daohang">使用Table标签完成一个课程表的编写</a></li>
<li><a href="0926渡课第二天.html#h3" target="daohang">回答问题</a></li>
<li><a href="0926渡课第二天.html#h4" target="daohang">描述A标签和IMG标签</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0926慕课第二天</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
<body class="stackedit">
<div class="stackedit__html"><h1><a name="h1" id="_0"></a>一.关键字</h1>
<table>
<thead>
<tr>
<th>关键词</th>
<th>英文</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEO</td>
<td></td>
<td>搜索引擎优化</td>
</tr>
<tr>
<td>拓展名</td>
<td>extension</td>
<td>用不同方式打开文件</td>
</tr>
<tr>
<td>合并列</td>
<td>colspan</td>
<td>左右单元格合并</td>
</tr>
<tr>
<td>合并行</td>
<td>rowspan</td>
<td>上下单元格合并</td>
</tr>
<tr>
<td>表格</td>
<td>table</td>
<td></td>
</tr>
<tr>
<td>元素</td>
<td>element</td>
<td>标签</td>
</tr>
<tr>
<td>属性</td>
<td>property</td>
<td>设置标签</td>
</tr>
<tr>
<td>样式</td>
<td>style</td>
<td></td>
</tr>
</tbody>
</table><h1><a name="h2" id="Table_16"></a>二.使用Table标签完成一个课程表的编写</h1>
<pre><code> <table border="1px">
<thead>
<tr>
<td></td>
<td></td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">上午</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>1</td>
<td></td>
<td rowspan="2"></td>
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</code></pre>
<h1><a name="h3" id="_84"></a>三.回答问题</h1>
<h2><a id="a_HTML_86"></a>a. 什么是HTML的标签语义化？</h2>
<blockquote>
<p>语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。<br>
1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。<br>
2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。<br>
3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。<br>
4.支持多终端设备的浏览器渲染。</p>
</blockquote>
<h2><a id="bSEOHTML_93"></a>b.什么是SEO优化，在HTML标签中如何体现？</h2>
<blockquote>
<p><strong>什么是SEO</strong>？<br>
SEO，简称搜索引擎优化（网站优化）。就是通过对网站优化，迎合搜索引擎的标准，得出的一个自然的优化。搜索引擎竞价优化，就是付费给搜索引擎，根据搜索引擎的关键字的竞价，得出一个网站优化。网站的关键字你出价越高，可能就会排到前面。有些很热的关键字，每次的点击价格高得吓人。所以根据企业网站的需要，可以选择SEO,也可以选择搜索引擎竞价优化。当然我个人还是比较喜欢SEO，觉得SEO对于网站长远发展也有一定的优势。</p>
<p><strong>SEO优化之HTML代码优化最重要的5个标签</strong><br>
1.Title 标签<br>
标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直是搜索引擎的抓取重点。通常，搜索引擎抓取Title标签出于两个目的：作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的，对我们做SEO来说都非常重要。<br>
一般来说，Title标签中的单词最好保持在3~6个左右，最好包含关键字。但Title标签中的单词不要全部都是关键字，因为这样可能会造成页面关键字堆砌，导致过度优化。所选单词应简洁明了、具有描述性，要与网页内容具有很大的相关性，并且每个不同的页面都应该包含Title标签。<br>
2.Meta Description标签<br>
对Title标签优化之后，接下来就是对Meta Description标签的优化。Meta<br>
Description标签可以说是对Title标签的进一步解释，可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta<br>
Description标签，并且Meta<br>
Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似，该部分内容也应具有描述性，与网页内容具有相关性，可包含关键字，但不可过多。<br>
3.Heading标签<br>
Heading标签包含了H1、H2、H3等等，是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰，有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签：从H1开始，依次往下添加。但不可添加太多Heading标签，否则会适得其反。<br>
4.Strong和B标签<br>
相信大多数朋友都知道Strong和B标签都有加粗的意思，但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗，而Strong标签不仅是对文字加粗，并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看，是有很大的区别的。<br>
上文中所提到的Heading标签页具有加粗效果，那么这三种标签到底该怎么用？其实，Heading标签一般用于文章大标题以及每段的小标题，而Strong标签一般用于文章段落中的重点词汇，而B标签一般只是强调一种视觉效果。<br>
5.ALT标签<br>
ALT标签是一种图片标签，它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求，只要在网页中出现图片的部分添加上该属性即可，但其标签内容应与相应页面内容具有相关性，长度不得过长，一般1~5个单词即可。</p>
</blockquote>
<h2><a id="C_113"></a>C.什么是浏览器的兼容问题？</h2>
<blockquote>
<p>浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。</p>
</blockquote>
<h1><a name="h4" id="AIMG_115"></a>四.描述A标签和IMG标签</h1>
<h2><a id="HTML_a__116"></a>HTML< a >标签</h2>
<p>< a > 标签定义超链接，用于从一张页面链接到另一张页面。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>herf</td>
<td>网址</td>
<td>链接的目标</td>
</tr>
<tr>
<td>target</td>
<td>_blank</td>
<td>在新窗口打开（默认在本页面）</td>
</tr>
<tr>
<td>title</td>
<td>文字提示</td>
<td>鼠标停留在a上有文字提示</td>
</tr>
</tbody>
</table><h2><a id="HTML_img__123"></a>HTML< img >标签</h2>
<p>< img > 标签定义向网页中嵌入一幅图像。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>alt</td>
<td>文字</td>
<td>图片不显示时替代的文本</td>
</tr>
<tr>
<td>src</td>
<td>路径或网址</td>
<td>图片地址</td>
</tr>
<tr>
<td>height</td>
<td>数字px</td>
<td>图片高度</td>
</tr>
<tr>
<td>widh</td>
<td>数字px</td>
<td>图片宽度</td>
</tr>
<tr>
<td>title</td>
<td>文字</td>
<td>文字提示</td>
</tr>
</tbody>
</table></div>
</body>
</html>
<!DOCTYPE html>
<html>
<frameset cols="25%,75%">
<frame src="目录.html">
<frame src="0926渡课第二天.html" name="daohang">
</frameset>
</html>
四.题目
a.Table页面布局和Div布局的区别和为什么要使用Div布局？
table布局比较局限，div 比较开放，设计样式比较多，效果美观，table好处是所有浏览器都兼容div缺点是兼容性很麻烦
div布局的优点是比较方便简洁，代码比较少，制作和维护也比较容易
b.表单标签中nam属性和value属性各代表的含义?
name
①在单选按钮中，name值相同的单选按钮被归为一组，在该组中只有一个按钮的checked属性为true。
②总的来说，input的name属性用于提交一个form表单数据时，对数据的引用：
如用GET方式发送数据时，你能在URL地址中看到xxx.html?atext=123
③可以用于CSS中设置该类name值的元素的样式。
④通过js的document.getElementsByTagName(“atext”)和jQ的$(".atext")等可以获取name属性值为atext的元素对象。
value
HTML 标签 定义和用法value 属性为 input 元素设定值。对于不同的输入类型，value 属性的用法也不同。
①type=“button”, “reset”, “submit” - 定义按钮上的显示的文本。
② type=“text”, “password”, “hidden” - 定义输入字段的初始值。
③ type=“checkbox”, “radio”, “image” - 定义与输入相关联的值 。
④注释： 和 中必须设置 value 属性。注释：value 属性无法与 一同使用。