HTML(Hyper text markup language)：超文本标记语言。
一、HTML文档结构：
<!------ HTML文档结构 ------>
<!-- 声明文档类型 -->
<!doctype html>
<!-- 根标签 -->
<html>
<!-- 头标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 主体标签 -->
<body>
</body>
</html>
二、HTML普通标签
1、段落标签
<!-- 段落标签 -->
<p>文本内容</p>
特点：上下自动生成空白行。换行(br标签)不会生成空白行。
2、文字标签
<!-- 文字标签 -->
<font>文本内容</font>
文本格式化标签：
- 文本加粗标签
<!-- 文本加粗标签 -->
<!-- 工作中尽量用strong -->
<strong>加粗内容</strong>
<b>加粗内容</b>
- 文本倾斜标签
<!-- 文本倾斜标签 -->
<!-- 工作中尽量用em -->
<em>倾斜内容</em>
<i>倾斜内容</i>
- 删除线标签
<!-- 删除线标签 -->
<!-- 工作中尽量用del -->
<del>删除线内容</del>
<s>删除线内容</s>
- 下划线标签
<!-- 下划线标签 -->
<!-- 工作中尽量用ins -->
<ins>下划线内容</ins>
<u>下划线内容</u>
- 标题标签
h1~h6，h1定义最大的标题，h6 定义最小的标题；
h1 在一个页面里只能出现一次；
<!-- 标题标签 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
3、图片标签
<!-- 图片标签 -->
<img src="图片的来源" alt="替换文本" title="提示文本" width="图片宽度" height=
"图片高度"/>
src：图片的来源，必写属性；
alt：替换文本，图片不显示的时候显示的文字；
title：提示文本，鼠标放到图片上显示的文字；
width：图片宽度；
height：图片高度；
4、超链接标签
- 超链接
<!-- 超链接标签 -->
<a href="去往的路径" title="提示文本" target="跳转方式"/>
href：去往的路径(跳转的页面)必写属性；
title：提示文本，鼠标放到链接上显示的文字；
target=”_self”：默认值，在自身页面打开(关闭自身页面，打开链接页面)
target=”_blank”：打开新页面(自身页面不关闭，打开一个新的链接页面)
- 锚链接
1、先定义一个锚点：
2、超链接到锚点：回到顶部
- 空链
<a href=”#”>
- 链接优化写法，让所有超链接都在新窗口打开：
<base target=”_blank”>
- 特殊字符
<!-- 空格 -->
<!-- <(小于) -->
<
<!-- >(大于) -->
>
<!-- 版权 -->
©
<!-- 人民币符号 -->
¥
5、列表标签
- 无序列表
<!-- 无序列表 -->
<ul type=”circle”>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
type=”square”：小方块；
type=”disc”：实心小圆圈；
type=”circle”：空心小圆圈；
- 有序列表
<!-- 有序列表 -->
<ol type=”1">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
type=”1,a,A,i,I”，
start=”3” 决定了开始的位置。
- 自定义列表
<!-- 自定义列表 -->
<dl>
<dt>小标题</dt>
<dd>解释标题1</dd>
<dd>解释标题2</dd>
</dl>
6、表格标签
- 表格标签：展示数据，是对网页重构的一个有益补充。
快速创建表格：table>tr*3>td*3
<!-- 表格标签 -->
<!-- 表格 -->
<table border="1" width="300" height="300" cellspacing="0" cellpadding="10" align=
"center" bgcolor="green">
<!-- 行 -->
<tr>
<!-- 列 -->
<td align="center">张三</td>
<td>18</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”：表格的背景颜色
- 表格的标准结构(了解就行，对seo更友好)
<!-- 表格的标准结构 -->
<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>
- 表头和单元格合并
<!-- 表头和单元格合并 -->
<table border="1" width="300" height="300" align="center">
<!-- 表头 -->
<caption>表头信息</caption>
<tr>
<!-- 合并同一行上的单元格 -->
<td colspan="2">米奇 6</td>
<!-- <td>6</td> -->
<!-- 合并同一列上的单元格 -->
<td rowspan="3">前端</td>
</tr>
<tr>
<td>米奇</td>
<td>6</td>
<!-- <td>前端</td> -->
</tr>
<tr>
<td>米奇</td>
<td>6</td>
<!-- <td>前端</td> -->
</tr>
</table>
colspan=”2”：合并同一行上的单元格
rowspan=”2”：合并同一列上的单元格
- 表格标题、边框颜色、内容垂直对齐
<!-- 边框颜色 -->
<table border="2" bgcolor="red" width="300" height="300" align="center" cellspacing="0">
<tr>
<!-- 标题：使内容加粗居中 -->
<th>米奇</th>
<th>6</th>
<th>前端</th>
</tr>
<tr>
<!-- 内容垂直对齐方式 -->
<td valign="top">米奇</td>
<td>6</td>
<td>前端</td>
</tr>
<tr>
<td>米奇</td>
<td>6</td>
<td>前端</td>
</tr>
</table>
表格标题 用法和td一样：使标题的文字自动加粗水平居中对齐；
边框颜色：bordercolor=“red”；
内容垂直对齐方式：
valign=”top | middle | bottom”
练习
细线表格
<!-- 细线表格 -->
<table width="300" height="300" bgcolor="green" cellspacing="1">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
细线课程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>细线课程表</title>
</head>
<body>
<table width="500" height="300" bgcolor="green" cellspacing="1" align="center">
<caption>课程表</caption>
<tr bgcolor="white">
<th colspan="2"></td>
<!-- <td></td> -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr bgcolor="white">
<td rowspan="2">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr bgcolor="white">
<!-- <td></td> -->
<td>2</td>
<td>体育</td>
<td>音乐</td>
<td>几何</td>
<td>画画</td>
<td>舞蹈</td>
</tr>
<tr bgcolor="white">
<td rowspan="2">下午</td>
<td>1</td>
<td>体育</td>
<td>画画</td>
<td>音乐</td>
<td>语文</td>
<td>音乐</td>
</tr>
<tr bgcolor="white">
<!-- <td></td> -->
<td>2</td>
<td>英语</td>
<td>舞蹈</td>
<td>体育</td>
<td>唱歌</td>
<td>体育</td>
</tr>
</table>
</body>
</html>
```html
## 三、HTML表单标签
**表单的作用是收集信息**
- 表单域
```html
<!-- 表单域 -->
<form action="1.php" method="get">
属性：
action：处理信息；
method=“get | post”
get通过地址栏传输信息，安全性差；
post 通过1.php来处理信息，安全性高
- 文本输入框
<!-- 文本输入框 -->
用户名：<input type="text" name="username" value="大前端" maxlength="6" readonly="readonly" disabled="disabled">
name=“username”：输入框的名称；
value=“大前端”：默认值，将输入框的内容传给处理文件
maxlength=“6” ：限制输入字符长度；
readonly=“readonly”：将输入框设置为只读模式(不能编辑)
disabled=“disabled”：输入框为未激活状态；
- 标注
<!-- label(table) 标签的使用 -->
<label>
输入账号：
<input type="text" name="username">
</label><br/>
<label for="two">
输入账号：
<input type="text" name="username1">
<input id="two" type="text" name="username2">
</label>
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
- 用lalbe 直接进行包裹input 就可以了
- 如果label里面有多个表单，想定位到某个 可以通过for id 的格式来进行
- 密码输入框
<!-- 密码输入框 -->
密码：<input type="password" name="pwd">
文本输入框的所有属性对密码输入框都有效
- 单选框
<!-- 单选框 -->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
只有将name的值设置成相同的时候，才能实现单选效果；
checked=”checked”：设置默认选择项
- 下拉列表
<!-- 下拉列表 -->
省(市)：<select multiple="multiple">
<option>河北</option>
<option>山西</option>
<option>山东</option>
<option selected="selected">北京</option>
</select>
属性：
multiple=“multiple”：将下拉列表设置为多选项；
selected=“selected”：设置默认选中项
- 下拉列表分组
<!-- 下拉列表分组 -->
市(区)：<select>
<optgroup label="北京市">
<option>昌平区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option>大兴区</option>
</optgroup>
</select>
<select>
<optgroup label="广州市">
<option>昌平区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option>大兴区</option>
</optgroup>
</select>
：对下拉列表进行分组；
label=""：分组的名称
- 多选框
<!-- 多选框 -->
<input type="checkbox" checked="checked">喝酒
<input type="checkbox" checked="checked">抽烟
<input type="checkbox" checked="checked">烫头
checked=“checked”：设置默认选中项
- 多行文本框
<!-- 多行文本框 -->
<textarea cols="30" rows="10"></textarea>
cols：控制输入字符的长度；
rows：控制输入的长度
- 文件上传控件
<!-- 文件上传控件 -->
<input type="file">
- 文件提交按钮
<!-- 文件提交按钮 -->
<input type="submit">
可以实现提交信息功能
- 普通按钮
<!-- 普通按钮 -->
<input type="button" value="普通按钮">
不能提交信息，配合JS使用
- 图片按钮
<!-- 图片按钮 -->
<input type="image" src="按钮.jpg">
图片按钮，可以实现提交功能
<!-- 重置按钮 -->
<input type="reset">
将信息重置到默认状态
- 表单信息分组
<form action="1.php" method="get">
<!-- 表单信息分组 -->
<fieldset>
<legend>分组信息</legend>
</fieldset>
</form>
<fieldset></fieldset>：对表单信息进行分组；
<legend></legend>：表单信息分组名称
四、HTML5标签
常用新标签：
- header：定义文档的页眉 头部；
<header>语义：定义文档的页眉 头部</header>
- nav：定义导航栏；
<nav>语义：定义导航栏</nav>
- footer：定义文档或节的页脚底部；
<footer>语义：定义文档或节的页脚底部</footer>
- article：定义文章
<article>语义：定义文章</article>
- section：定义文档中的节(section、区段)
<section>语义：定义区域</section>
- aside：定义其所处内容之外的内容 侧边
<aside>语义：定义其所处内容之外的内容 侧边</aside>
新增的type属性值：
- datalist：标签定义选项列表。请与input元素配合使用该元素
<!-- input里面用list -->
<input type="text" value="输入明星名字" list="star">
<!-- datalist里面用id来实现和input链接 -->
<datalist id="star">
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option>
</datalist>
- fieldset：可将表单内的相关元素分组、打包 和legend搭配使用
<fieldset>
<!-- 标题 -->
<legend>用户登录</legend>
用户名：<input type="text">
<br/>
<br/>
密 码：<input type="password">
</fieldset>
- 网址控件
<!-- 网址控件 -->
<input type="url">
- 搜索控件
<!-- 搜索控件 -->
<input type="search">
- 日期控件：年月日
<!-- 日期控件 -->
<input type="date">
- 月份控件：获得年月
<!-- 月份控件 -->
<input type="month">
- 星期控件：获得星期
<!-- 星期控件 -->
<input type="week">
- 时间控件：小时 分钟
<!-- 时间控件 -->
<input type="time">
- 邮件控件
<!-- 邮件控件 aa@aa.com -->
<input type="email">
- 数字控件
<!-- 数字控件 -->
<input type="number" step="5">
- 滑块控件
<!-- 滑块控件 -->
<input type="range" step="50">
- 颜色控件
<!-- 颜色控件 -->
<input type="color">
常用新属性
- placeholder：占位符提供可描述输入字段预期值的提示信息 ：当用户输入的时候，里面的文字消失，删除所有文字，自动返回
<!-- 占位符 -->
<input type="text" placeholder="请输入用户名">
- autofocus： 规定当页面加载时 input 元素应该自动获得焦点
<!-- 自动获得焦点 -->
<input type="text" autofocus>
- mutiple：多文件上传
<!-- 多文件上传 -->
<input type="file" multiple>
- autocomplete：规定表单是否应该启用自动完成功能
<!-- 自动记录 -->
1、autocomplete 首先需要提交按钮
2、这个表单您必须给他名字
<input type="text" autocomplete="off">
- required： 必填项，内容不能为空
<!-- 必填，不能为空 -->
<input type="text" required>
- accesskey：规定激活（使元素获得焦点）元素的快捷键：采用alt+字母的形式
<!-- 使元素获得焦点 -->
<input type="text" accesskey="s">
多媒体标签
- embed（会使用）：
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
优酷，土豆，爱奇艺，腾讯、乐视等等
- 先上传
- 在分享
- audio：
HTML5通过标签来解决音频播放的问题。
<!-- 通过src指定音频文件的路径即可 -->
<audio src="bgground.mp3" autoplay="autoplay" controls loop="-1"></audio>
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay：自动播放
controls：是否显不默认播放控件
loop：循环播放，loop = 2就是循环2次；loop 或者loop = "-1"是无限循环
多浏览器支持的方案，如下图
<!-- 为了浏览器兼容，我们需要做三种声音文件 ogg mp3 wav -->
<audio controls autoplay>
<source src="bgground.mp3" />
<source src="bgground.ogg" />
<source src="bgground.wav" />
您的浏览器不支持声音
</audio>
- video：
HTML5通过标签来解决音频播放的问题。
<!-- 通过src指定视频文件的路径即可 -->
<video>src="mp4.mp4" autoplay controls></video>
同样，通过附加属性可以更友好的控制视频的播放
autoplay：自动播放
controls：是否显示默认播放控件
loop：循环播放
width：设置播放窗口宽度
height：设置播放窗口的高度
<!-- 为了浏览器兼容，我们需要做三种视频文件 ogg mp4 webM -->
<audio controls autoplay>
<source src="ogg.ogg" />
<source src="mp4.mp4" />
<source src="webM.webM" />
您的浏览器不支持视频播放
</audio>
