第一章 HTML主体结构

1.1 HTML主体结构

    
        
                        
            网页的内容    
    

1.2 HTML头部语法

1.2.1 title标签

    定义网页的标题

1.2.2 meta标签

属性	取值	作用
name	keywords	定义了网站的关键字信息，便于搜索引擎抓取
	description	定义页面的描述信息
charset	utf-8	定义页面的字符集
http-equiv	content-type	用于接收content中的信息
	refresh	定义页面的自动刷新属性

meta标签--使用实例

1.2.3 link标签

属性	取值	作用
rel (必填)	icon	定义当前文档与被连接文档间的关系 (图标)
	stylesheet (常用)	样式表
type	image/x-icon	链接网站图标的类型设置
	text/css	链接样式表的类型设置
href		被连接文档的地址

link标签--使用实例

链接网站图标：

链接样式表：

1.3 HTML实体符

实体符名称	写法一	写法二
左尖括号<	<	&#60;
右尖括号>	>	&#62;
空格		&#160;

写法一：

<    
    >    
       
    

第二章 文本标签

2.1 文本标签

2.1.1 标题标签

hn(n为1-6)，字体加粗，独立一行

标题标签--使用实例

    
标题一
    
标题二
    
标题三
    
标题四
    
标题五
    
标题六

2.1.2 文本格式标签

标签名称	代码	效果
换行	<br/>	简单的换行效果
段落	<p>...</p>	上下都间距两行
加粗	<b>...</b>	仅仅加粗显示
	<strong>...</strong>	加粗并强调
斜体	<i>...</i>	仅有斜体效果
	<em>...</em>	斜体并强调
下划线	<u>...</u>	在文字下方显示 一条线
删除线	<del>...</del>	在文字中间显示一条线
引用	<q>...</q>	短引用，并在文字两侧出现双引号
	<cite>...</cite>	长引用，文字显示为斜体
上标	<sup>...</sup>	包含的内容显示在文字的右上角
下标	<sub>...</sub>	包含的内容显示在文字的右下角
块状组合	<div>...</div>
行内组合	<span>...</span>
格式化标签	<pre>...</pre>	以代码原格式化输出文本

文本格式标签--使用实例

                    
                    
文本格式标签
        
            换行标签
        
            
这是一段内容
        
            加粗内容        加粗并强调内容
        
                    斜体内容        斜体并强调内容
        
            文本内容下划线        文本内容贯穿线
        
            x2        H2O        
            原格式输出文本，保留代码中的空格，enter键换行效果，            及代码的原形输出。        
                
            
    
     块状组合，支持CSS去设置宽高，自带换行效果
    
        行内组合，不支持设置宽高等，无换行效果    

2.2 列表标签

标签名称	代码	type属性取值	效果
有序列表	<ol><li>...</li></ol>	A,I(大写的i),i,1,a	以一种规则有序排列
无序列表	<ul><li>...</li></ul>	circle(空心圆圈)、square(实心方块)	无规则的进行排列
列表项	<li>...</li>
自定义列表	<dl>...</dl>
自定义列表头	<dt>...</dt>
自定义列表项	<dd>...</dd>

列表标签--使用实例

                    
                    
列表标签
        
            
    
            
     
无序列表
            
     
无序列表
            
     
无序列表
        
    
                
            
    
            
     
有序列表
            
     
有序列表
            
     
有序列表
        
    
                
            
    
            
     
      小明说：
     
            
     
      小红，你吃过了吗？
     
            
     
      小红说：
     
            
     
      嗯嗯，我吃过了啊。
     
        
    
    

2.3 文本特殊标签

标签名称	代码	属性	取值
文字滚动	<marquee>...</marquee>	direction (文字滚动的方向)	up,down,left,right
		loop (重复次数)	数字1.2.3……
文字转向	<bdo>...</bdo>	dir	ltr (文字默认转向)
			rtl (文字从右向左转动)
下拉分组	<details>...</details>
	<summary>...</summary>	设置下拉分组的名称	文本
文字缩写	<abbr>...</abbr>	title	text

文本特殊标签--使用实例

                    
                            
文本特殊标签
        
            
    
     滚动起来吧，皮卡丘
    
        
            
            文字的转向
        
            LAMP是一个优秀的架构        
            
    
            
                 
     
下拉分组
            
     
                
      
分组一
                
      
分组二
                
      
分组三
            
     
        
    
    

第三章 链接标签

链接标签，用于定义一个超链接a，连接到另一个页面

属性	取值	作用
href (必须)	url (#表示空链接)	链接的文件或页面地址
title	text	鼠标悬浮超链接上时显示的信息
target	_self	在本窗口打开
	_blank	在新窗口打开
	_top	在顶级窗口打开
	_parent
	framename	在相应的窗口名打开
id (以前用的是name)		定义一个锚点

链接标签--使用实例

                    
                            
链接标签
        百度
        百度
        
            跳到版块二        
            
    
     版块一
    
        
    
     版块二
    
    

锚点使用步骤：

1. 定义一个锚点 <a id="maodian"></a>
2. 使用锚点 <a href="#maodian">使用锚点</a>

第四章 多媒体标签

4.1 音视频标签

音频标签audio与视频标签vedio都具有以下特征：

属性	取值	描述
src	url	音视频文件的地址
autoplay	true | false | 只写autoplay	文件自动播放 (谷歌浏览器不支持)
controls	true | false | 只写controls	控制器
poster (视频标签)	url	视频播放前的预览画面

4.2 资源标签

source

属性	取值	描述
src	url	资源地址
type	audio/mpeg,video/mp4, embed/	资源的类型

4.3 插件标签

embed

多媒体标签--使用实例

                    
                    
多媒体标签
        
            
            
            
            
    
                
            
    
                
                

第五章 图片标签

img

5.1 图片标签

属性	取值	描述
src (必须)	url	图片所在地址
alt	text	图片加载失败时的提示信息
title	text	鼠标悬浮图片上显示的信息
usemap	url	使用图片映射功能

图片标签--使用实例

                        
                    
图片标签
            

5.2 图像映射标签

标签	属性	取值	作用
<map>...</map>	name	text	定义图像映射的名称，用于与img标签相关联
<area> (永远嵌套在map中使用)	shape	rect(矩形) circle(圆形)	定义可选区域的形状
	coords	坐标值	可选区域的坐标 (矩形四个值，圆形三个值，值中间用英文逗号隔开)

图像映射--使用实例

area标签定义一块可选区域，map中定义一个name名称，img标签使用usemap属性取值为map的name名称进行相关联。

                    
                    
图片映像标签
                
                

第六章 表格标签

在H5中，table内标签的多数属性都不再使用，全都用CSS去修饰。

thead,tbody,tfoot三个标签要使用一个时，其余两个必须使用，且标签中必须包含tr标签。使用顺序为，thead->tfoot->tbody。

标签	属性	取值	描述
table	border	数值	设置边框的粗细
	cellspacing	数值	单元格之间的距离(外边距)
	cellpadding	数值	内容与单元格的距离(内填充)
	align	left | center | right	定义表格整体的位置
caption			表格的标题
th	与td拥有属性一致		列头标签
tr	不支持合并		行标签
td	align	left | center | right	定义文字的水平方向
	valign	top | middle | bottom	定义文字的垂直方向
	bgcolor	颜色选择	设置背景颜色
	rowspan	数值	跨行合并
	colspan	数值	跨列合并
thead			定义表头
tbody			定义标题
tfoot			定义表尾

表格标签--使用实例

                    
                    
表格标签
        
    
                 
      表格标题            
                  
     
     
                      
                           
行标题1
                           
行标题2
                           
行标题3
                      
                 
                                              
                      
                           
单元格1
                           
单元格2
                           
单元格3
                      
                 
                                              
                      
                           
单元格4
                                                                            
                 
            
    

第七章 表单标签

7.1 表单标签

7.1.1 表单form

属性	取值	描述
action (必须)	url	定义一个url，提交时向这个链接发送数据
method (发送数据的方式)	get	地址栏可见，不安全
	post	地址栏不可见，较安全
enctype	multipart/form-data	提交类型 (只有当表单有文件上传，即type="file",才是用)

7.1.2 表单项input

属性	取值	描述
type	text	定义文本框
	password	定义密码框
	radio	单选
	checkbox	多选
	submit	提交按钮
	reset	重置按钮
	button	普通按钮
	hidden	定义隐藏域
	file (muiltiple)	定义文件上传
	image	图片
	range	定义范围
	time	时间
	week	周
	month	月
	date	日期
	color	颜色选择器
	url	路径
	number	数字
	email	邮箱
	search	定义搜索
name	text	表单项名称
value	text	表单项的值
size	数值	定义输入框的大小
readonly		为输入框设置只读属性
disabled		为输入框设置禁用属性
checked		为输入框设置默认选中项
accesskey	字母	为输入框设置快捷键 (Alt+所设置字母)
tabindex		通过数字定义tab切换顺序
maxlength		定义输入框输入内容的最大长度
min	数值	定义最小值
max	数值	定义最大值
placeholder	text	给输入框预设一段文字

value属性的注意事项：

1. 不能与type="file"一起使用；与type属性为radio、checkbox使用时，必须加上value值；
2. 对于文本框、密码框、隐藏域，value值定义的是文本框中的默认内容；
3. 对于按钮、提交按钮、重置按钮，value值定义的是按钮上的文字；
4. 对于单选框、复选框，value值定义的是input元素被点击的结果。

input表单项--使用实例

                    
                    
input表单
        
    
                 姓名:
     
     
            密码:
     
     
            性别:
     男                        
                     
     女
     
            爱好:            
     跑步            
     读书            
     做饭            
     旅游
     
                        
                 邮箱:
     
     
            数字:
     
     
            颜色:
     
     
                        
                 网址:
     
     
            日期:
     
     
            时间:
     
     
            周:
     
     
            月:
     
     
            范围:0
     20
     
            隐藏:
     
     
                        
                 文件上传:
     
     
            
                 
             
    
    

7.1.3 下拉框select

属性	取值	描述
name	text	定义下拉框的表示名称
size	数值	定义下拉框的可见数量
multiple		设置多选，默认数量为4个 (默认为单选)

下拉框的子标签option

属性	描述
value	定义传送向服务器的值
selected	设置下拉框的默认选中项

下拉框--使用实例

                    
                    
下拉框select
        
    
            
                     下拉框一                下拉框二                下拉框三                下拉框四                下拉框五                下拉框六                    
    
    

7.1.4 文本域textarea

textarea没有value值，默认内容写在标签中间，不要留有空格。

属性	描述
name	定义文本域的名称
rows	定义文本域的行数
cols	定义文本域的列数

文本域--使用实例

                    
                    
文本域textarea
        
            文本域内容    

7.2 H5新增表单标签

7.2.1 fieldset标签

将表单内的相关元素分组，用legend标签定义标题

7.2.2 datalist标签

定义可选的数据列表，与input搭配使用

使用步骤：

1. datalist标签定义一个id名称
2. input标签使用list属性进行相关联

7.2.3 optgroup标签

定义选项组，可用于下拉列表，用label属性定义分组名称

HTML5新增表单标签--使用实例

                    
                    
H5新增表单标签
        
    
            
                 
     
                
      
HTML5新增表单
                搜索:
                      
                      
                  
     
     
                        
                 
                                         列表一                    列表一                    列表一                                                    列表二                    列表二                    列表二                                                    列表三                    列表三                    列表三