HTML学习随笔

落日映苍穹つ 2022-03-10 06:20 386阅读 0赞

### 一.HTML简介 ###

#### 1.HTML是什么？ ####

HTML,Hyper Text Markup Language超文本标记（标签）文本。由各种标签组成，用来制作网页，告诉浏览器该如何显示页面。

#### 2.HTML的作用？ ####

(1)制作页面，控制页面和内容的显示。  
(2)插入图片，音频，视频，动画等多媒体文件。  
(3)通过链接检索数据。  
(4)使用表单获取用户信息，实现交互。

#### 3.HTML的版本？ ####

W3C,World Wide Web Consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML是W3C制定的标准。  
两个版本：HTML 4.01 HTML5(H5)  
官网：[http://www.w3school.com.cn/][http_www.w3school.com.cn]

#### 4.HTML的后缀名？ ####

HTML文件是以.html或.htm结尾。

### 二.HTML文档结构 ###

#### 1.基本结构 ####

###### 1.1 简介 ######

(1)HTML标签是由尖括号包围的关键字，如 `<html>`，通常是成对出现的，如`<html></html>`  
(2)以`<html>`为根标签，包含：`<head>`头部,`<body>`身体（主体）部分。  
(3)头部提供关于网页的相关信息，如标题，文档类型，字符编码，关键字等摘要信息。  
(4)主体部分提供页面的具体内容，真正显示在页面中  
(5)标签名不区分大小写，一般为小写。

###### 1.2 开发工具 ######

记事本Notepad、Sublime、Notepad++、DreamWeaver、VSCode、WebStorm、HBuilder等

###### 1.3 浏览器 ######

常见的浏览器：IE（微软），Chrome（谷歌），Firefox（火狐），Safari（苹果）  
浏览器的作用：读取HTML文件，并以网页的形式显示。  
浏览器不会直接显示HTML标签，而是使用标签来解释网页的内容。

#### 2.标签 ####

###### 2.1 标签组成 ######

一个完整的HTML标签的组成：  
<标签名 属性名=“属性值”>内容</标签名>  
属性值要用引号引起来，一般使用双引号。

###### 2.2 标签分类 ######

根据标签是否关闭，分为：关闭型和非关闭型；  
关闭型：有结束标签，即成对出现，如：`<title></title>`、`<body></body>`、`<h1></h1>`等。  
非关闭型：没有结束标签，如：`<meta>`、`<br>`等。  
根据是否独占一行，分为：块级标签和行级标签；  
块级标签：显示为块状，独自占一行。如`<h1></h1>`、`<hr>`  
行级标签：在行内显示，可以与其他内容在一行显示；如`<span></span>`

#### 3.注释 ####

注释在浏览器中不会显示，只是用来标注解释，但通过源代码是可以看到的，如：

#### 4.实体字符 ####

也称为特殊字符，用于显示一些特殊的符号，如：<,>,&,空格等  
语法：

&实体字符名字；

常用实体字符：

<         <         小于号       less than
    
    >         >         大于号       greater than
    
                      空格         space  
    对于连续的空白字符（包括空格，缩进和换行等），在浏览器中显示时只会显示为一个空格。
    
    &        &         与
    
    "       "         双引号
    
    ©       ©         版权符号     copyright
    
    ®                  注册符号     register
    
    ×                关闭符号

注：实体字符名称区分大小写，即大小写敏感；

#### 5.文档类型 ####

在HTML文档的第一行，使用`<!DOCTYPE>`声明HTML文档的类型。  
用来告诉浏览器页面的文档类型，指定使用的HTML版本规范。  
目前基本上使用HTML5,即`<!DOCTYPE html>`

### 三.常用标签 ###

#### 1.常用标签 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>含义及说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>br</td> 
   <td>换行标签，非关闭型</td> 
  </tr> 
  <tr> 
   <td>p</td> 
   <td>段落标签，关闭型，块级标签，前后有明显间隔</td> 
  </tr> 
  <tr> 
   <td>h1、h2…h6</td> 
   <td>标题标签，按照h1到h6逐渐变小，加粗显示</td> 
  </tr> 
  <tr> 
   <td>pre</td> 
   <td>预格式化文本标签，保留编码时的格式</td> 
  </tr> 
  <tr> 
   <td>div</td> 
   <td>分区标签，常作为容器来使用，一般用来做页面布局，块级标签</td> 
  </tr> 
  <tr> 
   <td>span</td> 
   <td>范围标签，默认无样式，一般用来设置行内的特殊样式</td> 
  </tr> 
  <tr> 
   <td>ol、li</td> 
   <td>有序列表，有顺序的项目列表</td> 
  </tr> 
  <tr> 
   <td>ul、li</td> 
   <td>无序列表，无顺序的项目列表</td> 
  </tr> 
  <tr> 
   <td>dl、dt、dd</td> 
   <td>定义列表，对术语，图片等进行描述定义的列表</td> 
  </tr> 
  <tr> 
   <td>hr</td> 
   <td>水平线标签，非关闭型，块级标签</td> 
  </tr> 
  <tr> 
   <td>img</td> 
   <td>图像标签，用来插入图片，非关闭型，行级标签</td> 
  </tr> 
 </tbody> 
</table>

###### 1.1 有序列表 ######

ol:ordered list  
li:list item

默认为阿拉伯数字，从1开始标记，可以通过属性进行修改；  
· type属性：设置列表前的符号标记，取值：数字1（默认）、字母a或A、罗马数字i或I

· start属性：设置起始值，值必须为数字

###### 1.2 无序列表 ######

ul:unordered list  
li:list item

默认为实心圆作为符号标记，可以通过属性进行修改；  
· type属性：设置列表的符号标记，取值：disc实心圆（默认）、circle空心圆、square正方形、none不显示符号

###### 1.3 定义列表 ######

dl:definition list  
dt:definition title  
dd:definition description

###### 1.4 水平线标签 ######

hr:horizontal  
常用属性：  
· color：水平线的颜色  
颜色的两种写法：  
(1)颜色的名称：如red,green,blue,black,white,yellow,orange等。  
(2)16进制的RGB(red,green,blue),用法：\#RRGGBB,每个颜色的范围是0-255，转换为16进制为00-FF，如\#FF0000、\#000000、\#FFFFFF、\#FF7300等

· size：水平线的粗细，数值

· width：宽度  
宽度的两种写法：  
(1)像素，绝对值（固定值）  
(2)百分比，相对于父容器宽度的百分比

· align：对齐  
取值：center中间（默认）、left左侧、right右侧

###### 1.5 图像标签 ######

img:image

常见的图片的格式：jpg、png、gif、bmp

常用属性：  
· src:source指定图片的路径（来源），必须有  
如果图片与HTML页面在同一个文件夹中，可以直接写图片名称  
习惯上，会将多个图片放到统一的文件夹中，如images,此时需要在图片名称前添加文件夹的名称，并用‘/’隔开，如：images/yuxuange.png

· alt：当图片无法显示时显示的提示信息

· title：当鼠标停留图片上时显示的提示信息

· width/height：设置图片的宽度和高度，默认为图片的原始尺寸。  
注：如果只设置了其中的一个属性，则另一个按比例缩放。如果同时设置宽和高，可能会导致图片变形。  
两种写法：  
(1)像素，绝对值（固定值）  
(2)百分比，相对值，相对父容器的尺寸的百分比

#### 2.其他标签 ####

为了更好的语义化：

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th>含义及说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>i</td> 
   <td>斜体标签，italic</td> 
  </tr> 
  <tr> 
   <td>em</td> 
   <td>强调的内容，在浏览器中显示时一般为斜体</td> 
  </tr> 
  <tr> 
   <td>address</td> 
   <td>地址，在浏览器中显示时一般为斜体，块级标签</td> 
  </tr> 
  <tr> 
   <td>b</td> 
   <td>加粗显示，bold</td> 
  </tr> 
  <tr> 
   <td>strong</td> 
   <td>强调的内容，在浏览器中显示时一般为粗体</td> 
  </tr> 
  <tr> 
   <td>del</td> 
   <td>删除线</td> 
  </tr> 
  <tr> 
   <td>ins</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>sub</td> 
   <td>下标</td> 
  </tr> 
  <tr> 
   <td>sup</td> 
   <td>上标</td> 
  </tr> 
  <tr> 
   <td>bdo</td> 
   <td>文本方向，通过属性dir来设置方向</td> 
  </tr> 
  <tr> 
   <td>abbr</td> 
   <td>文字缩写，通过属性title来设置当鼠标停留在文字上时显示的提示信息</td> 
  </tr> 
  <tr> 
   <td>small</td> 
   <td>比当前字号小一号</td> 
  </tr> 
  <tr> 
   <td>big</td> 
   <td>比当前字号大一号</td> 
  </tr> 
 </tbody> 
</table>

#### 3.头部标签 ####

· meta：定义网页的摘要信息，如字符编码，关键字，描述，作者等。

<meta charset="UTF-8">
    
    <meta name="keywords" content="欢迎来到文羽轩阁">
    
    <meta name="description" content="JUST DO IT">
    
    <meta name="author" content="文羽轩阁">
    
    <meta http-equiv="refresh" content="2;url=http://www.baidu.com">

· title：定义网页的标题。

<title>文羽轩阁</title>

· style：定义内部CSS样式。

<style>
        h1{
            color: red;
        }
    </style>

· link：引用外部CSS样式文件。

<link type="text/css" href="外部CSS样式文件的路径">

· script：定义或引用脚本。

<script>
        alert("欢迎来到文羽轩阁")
    </script>

· base：定义基础路径。默认以当前页面文件所在位置为相对路径的参照。

<base href="images/">

#### 4.标签嵌套 ####

一个标签嵌套在另一个标签中  
在WebStorm中的输入的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        
        <meta charset="UTF-8">
        
        <title>文羽轩阁</title>
    </head>
    <body>
        <div style="width:200px;height:200px;background: pink">
            <p>欢迎来到文羽轩阁</p>
        </div>
        <p style="width: 200px;height: 200px;background: aquamarine">
            <div>Hello,Perfect World</div>
        </p>
    </body>
    </html>

浏览器渲染后显示的页面代码与编码有所不同。

但是，浏览器开发者模式下的代码是：  
![浏览器开发者模式下的代码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70]  
当出现这种情况，您就需要考虑下标签嵌套顺序了。

浏览器提供的开发工具，用来帮助开发人员查看和调试页面。  
打开方式：  
· 在页面单击鼠标右键–检查/审查元素/查看元素  
· 快捷键 F12

浏览器开发者模式下的常用工具：  
· Elements：从浏览器的角度查看页面，浏览器渲染页面时的结构内容。  
· Console：控制台，显示各种警告和错误信息。

在头标签中，故意错误加入：

![Console中的错误提示][Console]  
· Network：查看网络的请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源耗费的时间。

### 四.超链接 ###

#### 1.简介 ####

使用超链接可以通过一个页面跳转到另一个页面，实现页面间的导航。

当鼠标移动到超链接文本上时，鼠标箭头会变成一只小手。

超链接有三种类型：  
· 普通链接/页面间链接：跳转到另一个页面  
· 锚链接，跳转到锚点  
· 功能性链接，实现特殊功能

#### 2.基本用法 ####

使用`<a>`标签创建超链接

语法：

<a href="链接地址" target="链接打开位置">链接文本或图像</a>

常用属性：  
· href：链接地址/路径  
路径分为两种：  
相对路径：相对当前文件的所在路径。  
`.`代表当前路径；`..`代表上一层路径  
绝对路径：以根开始的路径。如：[http://www.w3school.com.cn/][http_www.w3school.com.cn] ,D:/新建文件夹/index.html等

· target：链接打开位置  
取值：  
\_self：在原窗口打开；  
\_blank：在新窗口打开；  
\_parent：在父层框架打开；  
\_top：在顶层框架打开；  
自定义：在自定义窗口打开；

#### 3.锚链接 ####

##### 3.1简介 #####

点击链接会跳转到指定位置（锚点：ancthor）

锚链接的分类：  
· 页面内的锚链接  
· 页面间的锚链接

##### 3.2 页面内的锚链接 #####

步骤：  
（1）定义锚点（标记）

（2）链接锚点

##### 3.3 页面间的锚链接 #####

#### 4 功能性链接 ####

· 加载图片

<a href="images/wenyuxuange.png">文羽轩阁图片</a>

· 发送邮件

<a href="mailto:wenyuxuange@123456.com">发邮件给文羽轩阁</a>

· 加载脚本语言

<a href="javascript:alert('欢迎来到文羽轩阁')">欢迎来到文羽轩阁</a>

#### 5 URL ####

###### 5.1 简介 ######

URL:Uniform Resource Locate统一资源定位符，用来定位资源所在位置，最常见的就是网址。

###### 5.2 组成 ######

一个完整的URL是由8个部分组成：

https://baike.baidu.com/item/html5/4234903?fr=aladdin#2

· 协议 protocol 如：  
http：超文本传输协议：Hyper Text Transfer Protocol  
https: 更加安全的传输协议  
ftp：文件传输协议：File Transfer Protocol，用来访问服务器上的文件，实现文件的上传和下载  
file：文件协议，用来访问本地协议

· 主机名 hostname 服务器地址,如：

· 端口号 port 位于主机名的后面，使用冒号隔开  
不同的协议使用不同的端口号，如http使用端口号为80，https使用端口号为443，ftp使用端口号为21  
如果使用的是默认端口，则端口可以省略。若未使用默认端口，则必须加上端口号

· 路径 path 目标文件所在的路径结构，如：

· 资源 resource 要访问的目标文件

· 查询字符串 query string，也称为参数。  
在资源后面使用问号开头的一组名称组，名称和值之间是以=隔开，多个参数之间是以&隔开

· 锚点 ancthor 在资源后面使用\#开头的文本

· 身份认证 authentication，指定身份认证

### 五.表格 ###

#### 1.简介 ####

表格是一个规则的行列结构，每个表格由若干行组成，每行由若干单元格组成。

#### 2.基本结构 ####

###### 2.1 table标签 ######

用来定义表格  
常用属性：  
· bolder 设置边框，默认值为0，无边框  
· width/height 设置宽度/高度  
· align 设置水平对齐方式，取值：left（默认），center，right  
· boldercolor 设置边框颜色  
· bgcolor 设置背景颜色  
· background 设置背景图片  
· cellspacing 间距，单元格与单元格之间的距离，默认值为1  
· cellpadding 边距，单元格内容与边界之间的距离

###### 2.2 tr标签 ######

用来定义行，table row  
常用属性：  
· align 设置水平对齐方式，取值：left（默认），center，right  
· valign 设置垂直对齐方式，取值：top，middle（默认），bottom  
· bgcolor 设置背景颜色  
· background 设置背景图片

###### 2.3 td标签 ######

用来定义单元格，table data  
常用属性：  
· align 设置水平对齐方式，取值：left（默认），center，right  
· valign 设置垂直对齐方式，取值：top，middle（默认），bottom  
· bgcolor 设置背景颜色  
· background 设置背景图片

###### 2.4 注意 ######

表格必须由行组成，行必须由单元格组成，数据必须放到单元格中

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table</title>
    </head>
    <body>
        <table border="3" width="400px" height="200px" align="center" boldercolor="red" bgcolor="#ffc0cb" cellspacing="0">
            <tr align="center" valign="top" bgcolor="#deb887">
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
            </tr>
            <tr align="right">
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
            </tr>
            <tr valign="bottom">
                <td>文羽轩阁</td>
                <td align="right" valign="top">文羽轩阁</td>
                <td>文羽轩阁</td>
                <td>文羽轩阁</td>
            </tr>
        </table>
    </body>
    </html>

效果图如下：  
![表格效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 1]

#### 3.合并单元格 ####

也称为表格的跨行跨列

两个属性  
· rowspan 设置单元格所跨的行数，如rowspan=2，表示跨越2行。  
· colspan 设置单元格所跨的列数，如colspan=3，表示跨越3列。

步骤：  
（1）在跨越的单元格中设置rowspan/colspan属性  
（2）将被跨越的单元格删除

必须要保证每行的实际列数是相等的，否则表格可能会错乱

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table</title>
    </head>
    <body>
        <table border="1" width="500px" height="300px">
            <tr align="center">
                <td colspan="4">文羽轩阁1</td>
    
            </tr>
            <tr>
                <td rowspan="3" align="center">文羽轩阁1</td>
                <td>文羽轩阁2</td>
                <td colspan="2" rowspan="2" align="center">文羽轩阁3</td>
            </tr>
            <tr>
                <td>文羽轩阁2</td>
            </tr>
            <tr>
                <td>文羽轩阁2</td>
                <td>文羽轩阁3</td>
                <td>文羽轩阁4</td>
            </tr>
        </table>
    </body>
    </html>

效果图如下：  
![合并单元格效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 2]

#### 4.高级标签 ####

###### 4.1 caption标签 ######

表格的表名，是table标签下的

###### 4.2 thead标签 ######

表格的头部，table head

###### 4.3 th标签 ######

表格的头部标题，一般用在thead标签中，设置头部的标题，替代td标签。  
与td标签的区别：加粗和居中对齐

###### 4.4 tbody标签 ######

表格的主体，table body

###### 4.5 tfoot标签 ######

表格的底部，table foot

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table</title>
    </head>
    <body>
    <table border="1" width="500px" height="300px" align="center">
        <caption align="center"><h3>108将</h3></caption>
        <thead bgcolor="cyan">
           <th>座次</th>
           <th>绰号</th>
           <th>姓名</th>
           <th>星宿</th>
        </thead>
        <tbody bgcolor="grey" align="center">
            <tr>
               <td>1</td>
               <td>及时雨</td>
               <td>宋江</td>
               <td>天魁星</td>
            </tr>
            <tr>
               <td>2</td>
               <td>玉麒麟</td>
               <td>卢俊义</td>
               <td>天罡星</td>
            </tr>
            <tr>
               <td>3</td>
               <td>智多星</td>
               <td>吴用</td>
               <td>天机星</td>
            </tr>
            <tr>
               <td>4</td>
               <td>入云龙</td>
               <td>公孙胜</td>
               <td>天闲星</td>
            </tr>
            <tr>
               <td>5</td>
               <td>大刀</td>
               <td>关胜</td>
               <td>天勇星</td>
            </tr>
            <tr>
               <td>6</td>
               <td>豹子头</td>
               <td>林冲</td>
               <td>天雄星</td>
            </tr>
        </tbody>
        <tfoot bgcolor="pink" align="center">
            <tr>
               <td>总人数</td>
               <td colspan="3">6</td>
            </tr>
        </tfoot>
    </table>
    </body>
    </html>

效果图如下：  
![高级标签效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 3]

### 六.表单 ###

#### 1.简介 ####

表单是一个包含若干表单元素的区域，用于读取不同类型的用户信息  
表单元素允许用户在表单中输入信息的元素，如：文本框，密码框，单选按钮，复选框，下拉列表，按钮等

#### 2.表单结构 ####

###### 2.1 表单语法 ######

<form action="表单提交地址" method="提交方式" enctype="">
        多个表单元素
    </form>

###### 2.2 form标签 ######

用于定义表单，可以包含多个表单元素

重用属性：  
· action 提交数据给谁处理，即为处理数据的程序，默认为当前页面

· method 提交数据的方式，取值：get（默认）,post  
get与post的区别：  
get：以查询字符串的形式提交，在地址栏中能看到，长度有限制，不安全  
post：以表单数据组的形式提交，在地址栏中不可看到，长度无限制，安全

· enctype 提交数据的编码格式，取值为：application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）

##### 3.表单元素 #####

大多数表单元素都是使用`<input>`标签来定义的，通过设置属性type来定义不同的表单元素

<table> 
 <thead> 
  <tr> 
   <th>表单元素类型</th> 
   <th>含义及说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>单行文本框，默认值</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>密码框，输入时以点号显示，安全</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单选按钮，只能选择其中一个</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>复选框，可以同时选择多个</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>提交按钮，提交表单数据</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置按钮，重置表单元素的初始值</td> 
  </tr> 
  <tr> 
   <td>image</td> 
   <td>图片按钮，可以使用图片作为按钮，也具有提交的功能</td> 
  </tr> 
  <tr> 
   <td>button</td> 
   <td>普通按钮，默认无功能</td> 
  </tr> 
  <tr> 
   <td>file</td> 
   <td>文件选择器，选择上传的文件</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>隐藏域，在页面上不会显示，但数据可以提交，用来储存数据</td> 
  </tr> 
 </tbody> 
</table>

###### 3.1 单行文本框 ######

常用属性：  
· name 名称：重要，如果没有指定name，则该表单元素的数据是无法提交的

· value 初始值

· size 宽度

· maxlength 最大字符数，默认是无限制

· readonly 只读，readonly=“readonly”，可简写readonly，即为只写属性值  
· disabled 禁用，disabled=“disabled”，可简写disabled，即为只写属性值，完全被禁用  
readonly的数据可以提交，disabled的数据不可以提交  
提交表单的两个条件：  
（1）必须有name属性  
（2）非disabled

###### 3.2 单选按钮 ######

常用属性：  
· name 名称：多个radio的name的属性值必须相同，才能实现互斥（单选）  
· value 值  
· checked 是否选中，两种状态：选中、未选中 checked=“checked”，可简写checked

###### 3.3 复选框 ######

常用属性与radio类似

###### 3.4 文件选择器 ######

常用属性：  
· name 名称  
· accept 设置可选文件的类型，用来限制上传的类型  
使用MIME格式字符串对资源类型进行限制  
常见的MIME类型：  
（1）纯文本：text/plain,text/html,text/xml  
（2）图像：image/jpeg,image/png,image/gif

#### 4.特殊表单元素 ####

<table> 
 <thead> 
  <tr> 
   <th>表单元素类型</th> 
   <th>含义及说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>select</td> 
   <td>下拉列表</td> 
  </tr> 
  <tr> 
   <td>option</td> 
   <td>下拉列表选项</td> 
  </tr> 
  <tr> 
   <td>optgroup</td> 
   <td>选项组，用来对option进行分组</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>文本域/多行文本框，用来创建多行文本框</td> 
  </tr> 
 </tbody> 
</table>

###### 4.1 下拉列表 ######

select常用属性：  
· name 名称  
· size 行数，同时显示多个选项  
· multiple 允许同时选择多个选项  
· disabled 禁用

option常用属性：  
· value 选项值  
· selected 设置默认选中项

optgroup常用属性：  
· label 分组的标题

###### 4.2 文本域 ######

常用属性：  
· name 名称  
· rows 行数  
· cols 宽度  
· readonly 只读

#### 5. 其它表单元素 ####

###### 5.1 label标签 ######

为表单元素提供标签，当选中label标签中的文本内容时会自动将焦点切换到与之关联的表单元素  
常用属性：  
· for 必须将该属性值设置为与之关联的表单元素的id属性相同  
注意：几乎所有的HTML标签都具有id属性，且id值必须唯一

###### 5.2 button标签 ######

也表示标签，与`<input type="button">`按钮类型

语法：

<button type="按钮类型">按钮文本或图像</button>

常用属性：  
· type 按钮的类型，取值：submit（默认），reset，button

###### 5.3 fieldset和legend标签 ######

fieldset标签，对表单元素进行分组  
legend标签，对fieldset分组添加标题的

### 七.内嵌框架iframe ###

#### 1.简介 ####

使用iframe可以在一个页面中引用另一个页面，实现复用

#### 2.基本用法 ####

语法：

常用属性：  
· src 引用的页面  
· width/height 宽度/高度，像素或百分比  
· framebolder 是否显示表框，取值：“1”显示，“0”不显示，隐藏  
· scrolling 是否显示滚动条，取值：yes，no，auto  
· name 设置框架名称

#### 3.在框架中打开链接 ####

### 八.HTML5简介 ###

#### 1.发展 ####

W3C于1992年12月发布HTML 4.0.1标准  
W3C于2014年10月发布HTML 5标准

#### 2.特点 ####

· 取消了过时的标签，如font标签，center标签等，它们仅用于展示外观的  
· 增加了一些更具有语义化的标签，如header标签，footer标签，aside标签等  
· 增加新的功能标签，如audio标签（音频标签），video标签（视频标签），canvas标签（绘图标签）等  
· 增加了一些表单控件，如email、date、url、search等  
· 可以直接在浏览器会话（canvas），无需flash  
· 增加本地存储的支持

#### 3.兼容性 ####

[http://caniuse.com][http_caniuse.com] 提供各浏览器版本对HTML5和CSS3规范的支持度

### 九.HTML5的新增内容 ###

#### 1.结构相关标签 ####

用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置  
· article 定义一个独立的内容，完整的文章  
· section 定义文档的章节，段落  
· header 定义文章的头部，页眉，标题  
· footer 定义文章的底部，页脚，标注  
· aside 定义侧边栏  
· figure 定义图片区域  
· figcaption 定义图片区域的标题  
· nav 定义导航菜单区域

结构标签只是表明各部分的角色，并无实际外面样式，与普通的div相同

#### 2.语义相关标签 ####

###### 2.1mark标签： ######

标注，用来突出显示文本，默认添加黄色背景

###### 2.2 time标签： ######

定义日期和时间，便于搜索引擎智能查找

###### 2.3 details和summary标签： ######

默认显示summary标签中的内容，点击后显示details标签中的内容  
注意：并不是所有的浏览器都兼容

###### 2.4 meter标签： ######

计数仪，表示量度  
常用属性：  
· max 定义最大值，默认为1  
· min 定义最小值，默认为0  
· value 定义当前值  
· high 定义限定为高的值  
· low 定义限定为低的值  
· optimum 定义最佳值

规则：  
（1）如果optimum大于high，则表示值越大越好：  
· 当value大于high时，为绿色  
· 当value在low与high之间时，为黄色  
· 当value在小于low时，为红色  
（2）如果optimum小于low，则表示值越小越好：  
· 当value在小于low时，为绿色  
· 当value在low与high之间时，为黄色  
· 当value大于high时，为红色  
（3）当optimum介于low与high之间，则表示值在low与high之间最好  
· 当value在low与high之间为绿色，否则为黄色

###### 2.5 progress标签 ######

进度条，表示运行中的进度  
常用属性：  
· value 定义当前值  
· max 定义完成的值

#### 3.表单相关 ####

###### 3.1新增表单元素 ######

新增以下type类型  
· email 接收电子邮件  
· url 接收URL  
· tel 接收电话号码，目前仅支持移动设备  
· search 搜索文本框  
· number/range 接收数字/数字滑块，包含min，max，step属性  
· date/month/week/time/datetime 日期时间选择器，兼容性不好  
· color 颜色拾取

作用：  
（1）具有格式校验功能  
（2）可以移动设备的键盘关联

###### 3.2 新增表单属性 ######

form标签的属性：  
· autocomplete 是否启用表单的自动完成功能，取值：on（默认）、off  
· novalidate 提交表单时不进行验证，默认为会进行表单验证

###### 3.3 新增表单元素属性 ######

新增表单元素属性：input/select/textarea  
· placeholder 设置提示文字信息  
· required 是否为必填项  
· autocomplete 是否启用该表单元素的自动完成功能  
· autofocus 设置初始焦点元素  
· pattern 使用正则表达式（RegExp），进行数据校验  
· list 使文本元素具有下拉列表的功能，需要配合detaillist和option标签使用  
· form 可以将表单元素写在form标签外面，然后通过该属性来关系指定表单

#### 4.多媒体标签 ####

###### 4.1 audio标签 ######

在页面中插入音频，不同的浏览器对音频格式的支持是不一样的  
常用属性：  
· src 指定音频文件的来源  
· controls 是否显示控制面板，默认不显示  
· autoplay 设置是否自动播放，默认不是自动播放  
· loop 设置是否循环播放，默认不循环  
· muted 是否静音  
· preload 是否预加载，取值：none不预加载，auto预加载（默认），metadata只预加载元数据。如果设置了autoplay属性，则该属性无意义  
可以结合source标签来使用，指定多个音频格式的音频文件，浏览器会检测到第一个能可用的音频文件进行播放

###### 4.2 video标签 ######

常用属性与audio类似

[http_www.w3school.com.cn]: http://www.w3school.com.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70]: /images/20220310/78ea1d635e474e8a96fea48cba1386de.png
[Console]: /images/20220310/646112aa87364938b9f5f23835e47388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 1]: /images/20220310/71b48af5a8654530aae99e67d4fcf30f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 2]: /images/20220310/9ebd0875a1d942b592b5dcc9cf251a2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NTU5Nw_size_16_color_FFFFFF_t_70 3]: /images/20220310/31c37ad05d0f4310b5ce4c06cb080b1a.png
[http_caniuse.com]: http://caniuse.com