网页组成元素
文字 图片 链接 视频 音频
标签分类：
1,双标签
<标签名>内容</标签名>
比如：<body></body>
2,单标签
<标签名 />
单标签也称空标签
<br />
标签关系：
1，嵌套标签（父子级关系）
2，并列关系
<head></head>
<body></body>
<!doctype>：这句话告诉我们使用哪个版本的html,使用的html还是xhtml标准
<mete charset="utf-8">
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2313
gb2313 是简体中文，包括6763个汉字
BIG5繁体中文 港澳台等用
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则是包含全世界所有国家需要用到的字符
html标签的语义化
白话：所谓的语义化，就是指标签的含义
--------------------------------html 标签--------------------------------
排版标签：
####标题标签：
head 缩写 h
<h></h>作为标题使用，并且依据重要性传递减
<h1~6></h1~6> 递减
段落标签：
paragraph 段落 缩写p
<p></p>
水平线标签：
horizontal 横线 缩写hr
<hr /> 单标签
换行标签
break 缩写 br
<br />
盒子标签
division 分割 缩写div
<div></div>
span 范围，跨度
<span></span>
div和span的区别：
1、div占用的位置是一行
2、span占用的是内容有多宽就占多宽的空间距离
3、div内的span无需命名css选择器伪类 例子：div的伪类 span{ 属性}
文本格式化标签
标签：
加粗：<b></b><strong></strong> （XHTML推荐使用strong）
斜体：<i></i><em></em>（XHTML推荐使用em）
删除线：<s></s><del></del>（XHTML推荐使用del）
下滑线：<u></u><ins></ins> （XHTML不赞成使用 u）
属性：
<标签名 属性1="属性值1" 属性2="属性值2" ...> 内容 </标签名>
1,标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
2,属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
3,任何标签的属性都有默认值，省略该属性则取默认值
4,采取格式 键值对 key="value"的格式
比如：
<hr width="500" color="100" />
图像标签
<img src="图像URL" />
属性：
src URL 图像的路径
alt 文本 图像不能显示时替换的文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度，修改宽或高会等比缩放另一个
height 像素 设置图像的高度
border 数字 设置图像边框的宽度
像素：xhtml不支持百分比像素设置
连接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，
其中_self为默认值，_blank为在新窗口中打开方式。
锚点：
锚点定位适合于较长的界面，可以点击某个关键词从而迅速到达界面的某个位置
1，使用<a href="#id名">链接文本</a>，创建锚点链接文本
2，使用相应的id名标注跳转目标的位置
base 标签：
base 可以设置整体链接的打开状态，例如a标签中的target属性，设置打开状态为_blank
<base /> 是单标签
在<head></head>编写<base />
<base target="_blank">
特殊字符标签
。。。。。
注释标签：
<!-- 注释内容 -->
路径：
路径分为两种：
1，绝对路径
2，相对路径
1，图像文件和html文件为于同一个文件夹，只需输入图像文件的名称即可
如：<img src="logo.gif" />
2，图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开
如：<img src="img/img01/logo.gif" />
3，图像文件位于HTML文件的上一级文件夹，在文件夹之前加“../”,如果是上两级，则需要使用“../../”以此类推
如：<img src="../logo.gif" />
列表标签：
无序列表ul：无序列表的各个列表之间没有顺序级别之分，是并列的。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
注意：
1，<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字是不允许的
2，<li>与</li>之间相当于一个容器，可以容纳所有元素。
3，无序列表会带有自己的样式属性，放下那个样式，让css来
有序列表ol：有序列表即为有列表顺序的列表，其各个列表项按照一定的顺序排列定义
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
自定义列表:定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何
项目符号。
<dl>
<dt>名词1(定义标题)</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表格table(表格不是用来布局的，只是用来处理数据):
1，表格创建
<table>
<tr>
<td>单元格内的文字</td>
....
</tr>
....
</table>
在上面的语法中，table,tr,td 他们是创建表格的基本标签，缺一不可，
table:用于定义一个表格
tr:用于定义表格的一行，必须嵌套在table标签中，在table中包含几对tr，就有几行表
td:用于定义表格中的单元格，必须嵌套在tr中，一对tr中包含几对td，就表示该行中有多少列
2,表格的属性
border 设置边框(默认border="0"无边框)
cellspacing 单元格与单元格边框之间的间距(默认cellspacing=2)
cellpadding 单元格内容与单元格边框之间的间距(默认cellpadding=1)
width 表格宽度
height 表格高度
align 表格在网页中水平对齐方式(left、center、right)
3，表头标签：
可以使用<th></th>替代相应的单元格标记<td></td>即可
效果会加粗并且居中显示
4，表头和表体区别
通过thead和tbody进行区分表头表体
<table>
<thead>
<tr>
<td>单元格内的文字</td>
....
</tr>
....
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
....
</tr>
....
</tbody>
</table>
5,表格标题
表格的标题：
caption
定义和用法
caption 元素定义表格标题
<table>
<caption>我是表格标题</caption>
</table>
caption 标签必须紧随table标签之后，我只能对每个表格定义一个标题，通常这个标题会被居中于表格之上。
6，合并单元格
跨行合并：rowspan
跨列合并：colspan
表单标签：
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框，复选框，提交按钮，重置按钮等。
提示信息，一个表单中通常还需要包含一些说明性的文档，提示用户进行填写和操作
表单域：一个容器，用来容纳所有的表单控件和提示信息，
input：<input />是一个单标签
属性：
type：(text,password,radio,checkbox,button,sumbit,resetm,image,file)
name:控件名称
value:input控件中的默认文本值
size:控件在界面中显示的宽度
checked:定义选择控件默认被选中的项
maxlength：控件允许输入的最多字符数
注意：
1、radio单选框，checkbox复选框：如果是一组，我们通过相同的name值来实现
2、image图像按钮，通过src=""设置
通过type不同来显示输入框的样式
label标签：label标签为input元素定义标注(标签)
作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
使用方式：
用label直接包裹：
1，只有一个input元素时可以直接包裹：
<label><input type="text"/></label>
2，如果多个标签时：通过for id的格式来进行
<label for="twoid"></label><input type="text" id="twoid"/>
textarea控件(文本域)
如果需要输入大量的信息是，就需要用到textarea标签，通过textarea控件可以轻松地
创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
下拉菜单（select控件）：
使用select控件定义下拉菜单的基本语法格式如下：
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
<option>选项</option>
。。。
</select>
注意：
1、select中至少包含一对option
2、在option中定义select="select"时，当前项即为默认选中项
表单域(from)：
表单域是用来包裹各个表单控件用的：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</from>
常用属性：
1,action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于
指定接收并处理表单数据的服务器程序的url地址
2,method用于设置表单数据的提交方式，其取值为get或post
3,name用于指定表单的名称，以区分同一个页面中的多个表单
注意：每个表单都应该有自己表单域。
html5新增的标签：
常用的标签：
header:定义文档的页眉头部
nav:定义导航链接的部分
footer:定义文档或节的页脚 底部
article:定义文章
section:定义文档中的节(section、小区段)
aside:定义其所处内容之外的内容侧边
datalist:标签定义选项列表。与input元素配合使用
具有提示功能，类似百度搜索
使用：
<input type="text" value="输入明星" list="star"/>
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>刘德华</option>
<option>刘德华</option>
</datalist>
fieldset:元素可将表单内的相关元素分组，打包,和legend搭配使用
使用：
<fieldset>
<legend>
用户登录
</legend>
用户名：<input type="text" />
</fieldset>
常用的新增的input type属性：
email
tel
url
number
search
range 自由拖动滑块
time 小时分钟
date 年月日
datetime 时间
month 月年
week 星期年
常用新属性
placeholder：占位符
autofocus:加载时自动获取焦点
multiple：多文件上传
autocomplete:规定表单是否应该启用自动完成功能，有2个值，一个是on,一个是off
on代表记录已经输入的值(记录保存下来的字，下次输入时提示)
1,需要提交按钮
2,需要设置名字
required:表示必填项，不能为空
accesskey:规定激活(使元素获取焦点)元素的快捷键 采用alt+字母的形式
多媒体标签：
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频
audio属性
autoplay：自动播放才可以使用
controls:控制器
loop:播放次数，-1无限循环
<source>标签：src设置音乐
video属性
autoplay：自动播放才可以使用
controls:控制器
loop:播放次数，-1无限循环
