HTML5进阶

1.语义化标签

1.1语义化的意义

根据内容的结构，选择合适的标签，便于开发者阅读和机器阅读，写出更加优雅的代码，为浏览器的爬虫和机器进行更好的解析。

1.2 HTML5新增了一些语义化标签

header： 用于定义文档或者章节头部。

nav： 用于定义导航连接部分

footer： 用于定义文档或者章节的底部

article：用于定义文档的文章（帖子、新闻、博客）

section： 用于定义一个文档的章节 小的部分

aside： 用于定义与当前页面文章无关的附属信息

address：用于地址

2.表格

2.1涉及标签

table：用于定义表格

caption：用于定义表格的标题

tr：行标签

th：定义列标题，文字加粗且居中

td： 单元格

thead：表格头部、一般不用
tbody：表格主体、一般不用
tfoot：表格底部、一般不用

table 只能嵌套tr或者caption，tr 只能嵌套td或者th，td和th可以嵌套任意标签

2.2标签的属性

table上的属性

*border：一般设置1 或者’ ',1代表有边框线；
*cellspacing：单元格边框之间的间隙
*cellpadding: 单元格内部填充间隙

td th 的属性：
colspan：行合并
例：将第三行的2，3行合并
实现代码：

<table border="1">
        <tr>
            <th>aaa</th>
            <th>bbb</th>
            <th>ccc</th>
        </tr>
        <tr>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>aaa</td>
            <td colspan="2">colspan=2</td>
            
        </tr>
    </table>

效果：

aaa	bbb	ccc
aaa	bbb	ccc
aaa	colspan=2

rowspan：列合并
例：将第1列的2.3列合并
实现代码：

<table border="1">
        <tr>
            <th>aaa</th>
            <th>bbb</th>
            <th>ccc</th>
        </tr>
        <tr>
            <td rowspan="2">rowspan=2</td>
            <td>bbb</td>
            <td>ccc</td>
        </tr>
        <tr>
            
            <td>bbb</td>
            <td>ccc</td>
        </tr>
    </table>

效果：

aaa	bbb	ccc
rowspan=2	bbb	ccc
	bbb	ccc

注意 如果单元格中没有内容，出现该单元格被压缩的情况，那么在当前的单元格内写上  ；

3表单

在网页山提供一个图形界面，用于收集用户数据。
3.1 表单元素

form
作为表单在form包含的内容下，使用提交submit按钮可提交表单下的内容
>>input(内联).

type：
*text: 普通文本输入框
*password：密码输入框
*radio单选框，单选需要name值相同，设置checked为默认选中
*checkbox: 勾选框 设置checked为默认选中
*file 上传按钮

以下为了解
email： 邮箱输入框
url：地址输入框
number：数字输入框
search：
img图片按钮
date：日期
range：进度条
color：选择颜色
time：时间
以下功能和button一样也可以用、但为了语义化、一般不建议用
submit 提交
reset 重置

常用属性
placeholder：输入框提示

value: 输入框的值 输入框的数据

label 设置点击绑定

*for=“属性”；该属性值为表单元素的id
提示：id是所有标签都有的一个属性，并且该值唯一。

textarea
文本作用框 js控制 一般不给属性

select 下拉选项
内嵌标签option
selected为默认选中
例：

   <select name="" id="">
        <option value="beijing">北京</option>
        <option value="beijing">上海</option>
        <option value="beijing" selected>成都</option>
   </select>

效果：

按钮button
button 普通按钮
submit 提交
reset 重置

4.锚点

使用id绑定，可以实现：
超链接
打电话
发短信
发邮件
运行 JS

5.内联框架

iframe 嵌套网页可以在网页内展示另外一个网页