Html基础
１ 复习昨天知识
１.1 单标签
◆注释标签 ctrl+/
◆水平线标签 <hr>
◆换行标签 <br>
１.2 双标签
◆段落标签 <p></p>
◆h1-h6 值只能取到6 h1在页面中只能出现一次。
◆文本标签 <font></font>
◆图片标签
<img src=”图片的来源” alt=”替换文本” title=”提示文本” width=”宽” height=”高”>
◆ <strong></strong> <b></b>
<em></em> <i></i>
<ins></ins> <u></u>
<del></del> <s></s>
<sup>上标</sup> <sub>下标</sub>
１.3 路径
◆相对路径
★文件和图片（html）在同一文件夹（目录）时，直接写文件名
★图片在上一级目录，..+/+文件名
★图片在下一级目录，文件夹名+/+文件名
◆绝对路径
１.4 超链接
<a href=”去往的路径” title=”提示文本” target=”_self | _blank”>链接文本</a>
◆锚链接
◆空链 <a href=”#”>
◆链接优化写法 <base target=”_blank”>
１.5 特殊字符
空格
< <
> >
©
¥
１.6 列表
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
２ 新知识
２.1 !+tab html5的标签结构
２.2
Charset 编码
Ascll
Ansi
Unicode
Gbk
Gb2312
Big5
Utf-8 通用字符集
２.3 关键字{keywords给搜素引擎看的（比如百度关键词）
}
(我们在前端看不到)
２.4 网页描述{网页描述：description（比如百度关键词）查找到后，对网页的介绍}
２.5 网页重定向
２.6 链接外部样式表
２.7 设置icon图标
３ 表格
展示数据。 是对网页重构的一个有益补充。
<table> 表格
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>
◆属性：
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。
３.1 表格的标准结构
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
３.2 表头和单元格合并
◆ 表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
３.3 表格标题、边框颜色、内容垂直对齐
◆表格标题 <th></th>用法和td一样
标题的文字自动加粗水平居中对齐
◆边框颜色
◆内容垂直对齐方式
Valign=”top | middle | bottom”
４ 表单
表单的作用是收集信息。
表单的组成
◆提示信息
◆表单控件
◆表单域
属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。
◆文本输入框
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未**状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
◆密码输入框
★注意：文本输入框的所有属性对密码输入框都有效。
◆单选框
★只有将name的值设置相同的时候，才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性：
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
◆多选框
Checked=”checked” 设置默认选中项
◆多行文本框
Cols 控制输入字符的长度。
Rows 控制输入的行数
◆ 文件上传控件
◆文件提交按钮
★：可以实现信息提交功能
◆普通按钮
★不能提交信息，配合JS使用。
◆图片按钮
<!-- 图片按钮 -->
★图片按钮可实现信息提交功能
◆重置按钮
★将信息重置到默认状态
◆表单信息分组
<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
html5补充表单控件
５ 标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
-标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；