HTML是HyperText Markup Language（超文本标记语言）的简称，它是一种用于创建网页的标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。
注意：html标签不区分大小写，但是推荐全小写
html文档的后缀名
.html和.htm两种都可以，没有区别。
标签的分类
围堵标签：有开始标签和结束标签，例如<html></html>
自闭标签：开始标签和结束标签都在一个标签中，如<br/>
标签的嵌套
标签可以嵌套，但是嵌套的层级不能错乱
正确案例：<p><a></a></p> 错误案例：<p><a></p></a>
标签的属性
标签的内部是可以定义属性的，属性由键值对组成，值需要用双引号引起来，多个属性用空格隔开
<标签名称 属性名1="属性值" 属性名2="属性值"></标签名称> <p id="p1" name="p1"></p>
HTML文档的基本结构
HTML文档也叫web页面。
HTML注释以<!--开头，以-->结尾，其中内容可以为一行或多行。 注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码
<!-- 声明当前文档是html5文档 --> <!DOCTYPE html> <!-- html,根元素 ，围堵标签--> <html> <!-- head,头元素： 作用： 1、用于指定HTML文章中的一些元数据，例如元数据 meta：定义页面的编码格式，title:定义页面的标题 2、引入外部的资源文件--未来讲解 --> <head> <meta charset="utf-8" /> <title>这是我的第一个HTML页面</title> </head> <!--body，主体：浏览器显示的内容都将在这里编写格式化代码的快捷键：ctrl+shift+f（英文状态下使用） --> <body> hello html 这是我的第一个HTML页面 </body> </html>
HTML常用标签
1.文本标签
1）标题标签 h1--h6:字体逐渐缩小
一般用在文章的标题上。
<h1>1级标签</h1> <h2>2级标签</h2> <h3>3级标签</h3> <h4>4级标签</h4> <h5>5级标签</h5> <h6>6级标签</h6>
2）段落标签
一般用在正文。
<p>正文</p>
3) 换行标签
一般用在段落中强制换行。
<p>牡丹才是正国色，<br/>花开时节动京城</p> 页面显示为： 牡丹才是正国色， 花开时节动京城
4）水平线标签
一般用来分隔内容。
<hr color="" size=""/>
5）范围标签
一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使用。
<p><span style="color:red;"></span></p>
2.图片标签
1) 基本属性
<img src="" title="" width="" height=""/>
2) 设置图片的热点区域
<img src="" usemap="#test" /> <map name="test"> <!-- shape是形状 coords是坐标（多个值之间用逗号隔开） --> <area shape="" coords="" href="" titile="" /> </map>
3.列表标签
一般用在导航上
1) 无序列表
<!-- 推荐ul标签中只有li --> <ul> <li> </li> </ul>
2) 有序列表
<ol> <li> </li> </ol>
4.定义描述标签
一般用在图文混编的场景中
<!-- dl用于包裹dt、dd --> <dl> <!-- dt用来放图片或标题 --> <dt></dt> <!-- dd用来补充对dt的描述说明 --> <dd></dd> </dl>
5.布局标签 层 div
一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。
6.标签分类
html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
区分的简单方法：是否独占一行。
块状元素和行内元素的区别：
1、 块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素会排列到同一行里，其宽度随元素的内容变化而变化。
2、块级元素可以设置宽高；行内元素设置宽高无效。
3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖 直方向的padding没有效果。
以上标签的分类
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol--li，
无序列表标签 ul--li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
超链接
超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能
页面间的跳转
<!-- target有两个值：默认为_self，在当前页打开 常用值_blank，在新页面打开 --> <a href="目标资源路径" target="打开资源的位置">点一点</a>
锚链接
当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一 屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。
这个定位可以实现本页面间的锚链接，也可以实现不同页面间的锚链接。
<a href="#锚点名称" target="_self">锚链接</a> <!-- 目标位置定义锚点：<a name="锚点名称"><a/> 若为跨页面的锚点，则<a href="锚点页面名称.后缀名#锚点名称" /> -->
表格标签
规则表格
<!-- table:定义表格 常用属性： height：高度 width：宽度 border：边框 cellpadding：内容与单元格之间的距离 cellspacing：单元格和单元格之间的距离 --> <table border="1" cellpadding="0" cellspacing="0" width="90%" height="280p×"> <!-- tr:定义行 常用属性： align：文率水平方向上的对齐方式， 有三个取伯，默认left-左对齐 center-居中对齐 right-右对齐 --> <tr> <!-- th和td标签都用来定文单元格， th：一般用来定义表头单元格 td:一般用来定义表头单元格 常用属性：valian文本垂直方向上的对齐方式 top顶部对齐 bottom底部对齐 middle垂直居中 --> <th align="center">序号</th><th>商品名称</th><th>价格</th> </tr> </table>
不规则表格--跨行和跨列
<!-- 合并3列 --> <td colspan="3"><td/> <!-- 合并3行 --> <td rowspan="3"><td/>
表格的高级标签--标题标签和逻辑分区标签
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="280p×"> <!-- 表格的标题标签 --> <caption></caption> <!-- 逻辑标签：thead、tbody、tfoot 如果没有设置，默认所有行在tbody下 --> <tr> <th align="center">序号</th><th>商品名称</th><th>价格</th> </tr> </table>
表单
概念：用于采集用户输入的数据。用于和服务器进行交互。
<!-- method共七种提交方式，get和post常用 get： 请求参数会在地址栏中显示，会封装到请求行中 请求参数大小有限制 不太安全 post： 请求参数不会在地址栏中显示，回封装到请求体中 请求参数没有大小限制 比较安全 enctype:表单中有上传文件时必备属性，且取值为multipart/form-data --> <form action="指定提交数据的URL" method="post" enctype="multipart/form-data"> <!-- 添加表单项元素 表单项中的数据要提交，必须指定其name属性 --> </form>
表单项元素中的一些属性：
id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色
表单项元素
文本框、密码框、单选按钮、复选框、文件域、日期-h5中的新特性、隐藏域、下拉列表框、文本域
<!-- type：输入框的显示形式，默认为text placeholder：文本框中显示的提示文字，用户输入时提示文字自动消失 --> <input type="text" id="name1" name="name1" placeholder="请输入用户名" /> <!-- type="password"为密码框，输入内容后显示的是黑色实心圆，而非明文 required:表示用户必须填写，没有填写提交表单失败并给出提示 --> <input type="password" id="pas" name="pass" required /> <!-- type="radio"为单选按钮，成组出现，name相同为一组，同组互斥 checked表示默认选中 --> <input type="radio" name="gender" value="男" checked/> <input type="radio" name="gender" value="女" /> <!-- type="checkbox"为复选框，成组出现，name相同为一组，同组可多选 checked表示默认选中 --> <input type="checkbox" name="hobby" value="swim" checked/>游泳 <input type="checkbox" name="hobby" value="movie" checked/>电影 <input type="checkbox" name="hobby" value="music" />音乐 <!-- type="file"为文件域 multiple：表示可以同时上传多个文件 --> <input type="file" name="file1" multiple="multiple" /> <!-- type="date"：表示年月日 type="datetime-local"：表示年月日时 --> <input type="date" name="day" /> <!-- type="hidden"为隐藏域，页面看不见效果 作用：隐藏一些用户不关心但程序书写需要的值 --> <input type="hidden" name="id" value="0002" /> <!-- select下拉列表框，name属性 option：select中是选项 value表示值，selected表示默认选中 --> <select name="month"> <option value="1">1月</option> <option value="2" selected>2月</option> <option value="3">3月</option> </select> <!-- textarea为文本域 cols：指定列数，每一行有多少个字符 rows：默认多少行 readonly：表示只读，内容不可修改 disabled：表示不可用，样式呈现灰色 --> <textarea rows="10" cols="10" readonly disabled> </textarea>
按钮
<!-- type： submit：提交按钮，提交到form的action指定路径 image：等于提交按钮，没有value属性，有src属性 reset：清空表单中所有用户输入，回到默认原始状态，相当于刷新了页面 button： 普通按钮，没有任何功能 --> <input type="submit" value="登录" id="loginBtn" /> <button type="submit">登录</button> <input type="image" src="image/login.gif" id="loginBtn1" /> <input type="reset" value="重置" id="resetBtn" /> <button type="reset">重置</button> <input type="button" value="普通按钮" id="btn" /> <button type="button">按钮</button>
标签
<!-- label:指定输入项的文字描述信息 label的for属性一般会和input的id属性对应， 对应之后点击label区域，回让inpu输入框获取焦点 --> <label for="name1">用户名：</label> <input id="name1" />
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
例如京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。
<!-- iframe：定义内嵌框架 常用属性： src="URL"：该URL指向不同的网页 height、width定义高宽，默认以像素为单位，也可使用百分比 frameborder：定义是否显示边框，设置为0，即移除边框 name：框架名称 iframe显示一个目标链接的页面，目标链接的属性必须使用iframe的属性，如下： 点击查询链接时，百度页面将在本页内嵌框架中显示 --> <p><a href="https://www.baidu.com" target="content">查询</a></p> <iframe name="content" src="src/message.html" width="100%" height="100%"></iframe> <!-- 框架集 --> <frameset cols="" rows=""> <frame src="" /> </frameset>
常用的布局组合标签
div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局
HTML4与HTML5的区别
HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言第4和第5版 本.HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代,为了在移动设备上支持多媒体。
HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。被认为是互联网的核心技 术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互 都进行了规范。
HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页 标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将 劣势转化为优势，整体推动整个移动端网页方面的发展。
HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> </head> </html> HTML5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> </html>
HTML5中新增的语义标签
| 标签 | 描述 |
| article | 定义页面独立的内容区域。 |
| aside | 定义页面的侧边栏内容。 |
| bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| details | 用于描述文档或文档某个部分的细节 |
| dialog | 定义对话框，比如提示框 |
| summary | 标签包含 details 元素的标题 |
| header | 定义了文档的头部区域 |
| footer | 定义 section 或 document 的页脚。 |
| nav | 定义导航链接的部分。 |
| progress | 定义任何类型的任务的进度。 |
| section | 定义文档中的节（section、区段）。 |
| time | 定义日期或时间。 |
| wbr | 规定在文本中的何处适合添加换行符。 |
HTML5表单
form新属性
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <input>标签，以及以下类型的 <input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="" autocomplete="on"> 姓名:<input type="text" name="name"><br> 电话: <input type="text" name="phone"><br> 邮箱: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> 测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。 有些浏览器可能不自动支持，需要自己启用。
input 新属性
list属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<input list="companys"> <datalist id="companys"> <option value="alibaba"> <option value="baidu"> <option value="tencent"> <option value="zijie"> <option value="didi"> </datalist>
multiple属性
multiple 属性是一个 boolean 属性
multiple 属性规定 <input>元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input>标签：email 和 file
上传多个文件: <input type="file" name="img" multiple>
placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。 简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的<input>标签：text, search, url, telephone, email 以及 password。
<input type="text" name="userName" placeholder="请输入用户名">
required
required 属性是一个 boolean 属性，required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的<input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
用户名: <input type="text" name="username" required>
HTML5新的表单元素
| 标签 | 描述 |
| datalist | input标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| keygen | 规定用于表单的密钥对生成器字段。 |
| output | 标签定义不同类型的输出，比如脚本的输出。 |
HTML5中新的input类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们 了。即使不被支持，仍然可以显示为常规的文本域。
HTML5中新增的音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放 的。
然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用<audio>元素
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio> PS：control 属性供添加播放、暂停和音量控件。 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。 <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用 第一个支持的音频文件
目前<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
音频格式的MIME类型
| Format | MIME-type |
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
HTML5中新增的视频
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video> <video> 元素提供了 播放、暂停和音量控件来控制视频。 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的 视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时 保留特定的空间，页面就会根据原始视频的大小而改变。 <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
当前<video>元素支持三种视频格式： MP4, WebM, 和 Ogg:
| Format | MIME-type |
| MP4 | video/mp4 |
| Ogg | audio/ogg |
| WebM | video/webm |
HTML5中已经移除的元素
- frame
- frameset
- noframes
HTML中的转义符号
| 转移符号 | 描述 |
|
|
转义为空格 |
| < | 转义为小于号< |
| ≤ | 转义为小于等于号≤ |
| > | 转义为大于号> |
| ≥ | 转义为大于等于号≥ |
| © | 转义为版权符号 ? |