1.创建文件所需要注意事项
- 可以以中文命名，不使用中文。
- 不使用特殊字符。
- HTML文件名推荐使用小写。
- 如果是多个单词创建的文件名，推荐使用驼峰命名法，每个单词首字母大写 HelloWorld
- 创建完HTML文件后依然是文本文件格式，那么需要将系统中隐藏已知文件类型扩展名勾选掉。
2.HTML主体结构
<!DOCTYPE html> <!--声明头-->
<html><!--头标签--><head></head><!--体标签--><body></body>
</html>
3.<head>标签中常用的标签
<head lang="en"><!--lang是language的意思,lang="en" 属性对页面声明主要语言，en表示英文，zh-cn表示中文。搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你得站点是中文站，这些都是HTML规范，越规范，越容易被收录-->
<title></title>设置页面字符串
<meta charset="utf-8" /> 设置页面字符集
<meta http-equiv="content-type" content="text/html;charset=utf-8" />设置页面字符集（HTML4）
<!--.html text/html 指的是文件mime类型.css text/css.jpg image/jpeg.jpeg image/jpeg.png image/png.gif image/gifwww.baidu.com 文件mime类型
-->
<!--http-equiv 告知浏览器的行为-->
<meta http-equiv="refresh" content="5;url=https://www.lmonkey.com" /> 设置5秒后自动跳转到学习猿地
<meta http-equiv="refresh" content="5" />设置浏览器5秒刷新一次
<!--name 告知浏览器的内容-->
<meta name="keywords" content="关键字1,关键字2"/> 设置网站关键字，多个关键字之间用英文状态下的逗号分割
<meta name="description" content="描述的内容" />设置网站的描述
<link />定义两个文档之间连接的关系
<!--rel = "表示文档与被连接文档之间的关系"type = "被连接文档的类型"href = "被连接文档的地址"
-->
<link rel="icon" type="" href=""/>加载标题icon图标
<!--了解级别-->
<link rel="stylesheet" type="text/css" href="" />加载CSS样式
<style></style> 加载CSS样式
<script></script> 加载JS脚本
<!--阻止移动浏览器自动调整页面大小-->
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<!--name = "viewport" 说明此meta标签定义视口的属性initial-scale = 2.0 意思是将页面放大两倍width = device-width 告诉浏览器页面的宽度的能与设备的宽度
-->
<meta name="viewport" content="width=device-width,maximun-scale=3,minimum-scale=0.5" />
<!--允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半-->
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<!--禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放。user-scalable=no是禁止缩放-->
4.<body>标签中常用的标签
4.1. 文本与文本格式标签
<p></p> <!--段落标签-->
<b></b> <!--加粗-->
<strong></strong> <!--强调某段文本-->
<em></em> <!--强调某段文本-->
<i></i> <!--斜体-->
<br/> <!--换行-->
<hr /> <!--水平线-->
<u></u> <!--下划线标签-->
<del></del> <!--删除线标签-->
<hn></hn> <!--h族标题标签 n 1 ~ 6-->
<bdo></bdo> <!--覆盖默认的文本方向 dir="ltr | rtl" ltr left to right rtl right to left-->
<sub></sub> <!--下标文本-->
<sup></sup> <!--上标文本-->
<details></details> <!--交互式控件、可见的或者隐藏的补充细节-->
<summary></summary> <!--为details定义标题-->
<dialog></dialog> <!--定义对话框或窗口 open="true"-->
<pre></pre> <!--原格式输出-->
<figure></figure> <!--用于对元素进行组合。多用于图片与图片描述组合-->
<mark></mark> <!--标记文本-->
<figure><img src="img.gif" alt="figure标签" title="figure标签" /><figcaption>figure的标题</figcaption>
</figure>
<mark></mark>定义带有记号的文本，它会给你要突出显示的文本下加个背景色。如：<p>你是<mark>大长腿</mark>吗？</p>4.2. 语义化标签
布局中使用
<div></div> 块状元素 代表一个区块 H4
<span></span> 行内元素 H4
<header></header> 头部标签 H5
<footer></footer> 底部标签 H5
<nav></nav> 导航标签 H5
<address></address> 地址 H5
<section></section> 块状元素 H5
<article></article> 文章标签 H5
<aside></aside> 侧边栏 H5
4.3. 列表标签
<ul></ul> 无序列表
<ol></ol> 有序列表
<li></li> 为有序或无序列表定义列表项
<dl></dl> 定义列表
<dt></dt> 定义列表中的一个项目
<dd></dd> 为定义列表项作描述
4.4. 超链接标签
<a></a>
<!--常用属性-->
<!--href = "" 用于定义需要跳转页面的地址target = "" 定义页面打开的方式常用的值：_self默认，当前窗口打开链接的文档_blank,在新窗口中打开文档
-->
<!--
锚点：快读定位到页面中需要的位置
如何实现
在要到达的a标签中设置id属性，属性名自定义
在点击的a标签的href属性中使用#自定义属性名即可实现关联
-->
<a href="#one">点击跳转的地方</a>
<a id="one">到达的地方</a>
4.5. 多媒体标签
<img /> 图像标签src="要引入图片的地址"width="设置图片的宽度"height="设置图片的高度"alt="当图片加载失败时用于替换的文字信息"title="设置标题"usemap="关联地图"
<map></map> 定义图像映射(图片带有可点击区域)name 定义映射名称 (与usemap属性进行关联)
<area /> 定义映射区域shape定义形状coords 坐标点href 跳转的地址target 跳转方式
<audio></audio> 音频标签src 引入音频地址controls 播放控件loop 循环播放
<source />用来加载媒介资源src
<video></video>controlsposter 视频在点击播放前用于显示的图片loop<embed /> 用来引入媒体srcwidthheight
<progress></progress> 进度条标签min 最小值max 最大值value 当前值
<meter></meter> 定义范围内度量min 最小值max 最大值value 当前值low 警告的最小值high 警告的最大值optimum 良好值
4.6. 表格相关标签及属性
- 表格相关标签
<table></table> 表格
<caption></caption> 表格标题
<tr></tr> 表格的行
<th></th> 表头单元格
<td></td> 表格的单元格
<thead></thead> 表格头部
<tbody></tbody> 表格主体
<tfoot></tfoot> 表格底部
table标签常用属性
| 属性 | 描述 | 说明 | | :---------: | :--------------------------------------: | :---------------------: | | width | 表格宽度 | | | height | 表格高度 | | | align | 表格在页面的水平摆放位置 | 取值：left/center/right | | background | 表格的背景图片 | | | bgcolor | 表格的背景颜色 | | | border | 表格边框的宽度（以像素为单位） | 表格默认没有边框 | | bordercolor | 表格边框颜色 | 当border >= 1时起作用 | | cellspacing | 单元格之间的间距 | | | Cellpadding | 单元格内容与单元格边界之间的空白距离大小 | |
tr(行)标签常用属性
| 属性 | 描述 | | :-----: | :------------------------------------: | | height | 行高 | | align | 行内容的水平对齐方式left/center/right | | valign | 行内容的垂直对齐方式left/middle/bottom | | Bgcolor | 行的背景颜色 |
td(单元格)标签常用属性
| 属性 | 描述 | | :----------: | :---------------------------------------: | | width/height | 单元格的宽度和高度 | | align | 设置水平对齐方式，取值left/center/right | | valign | 设置垂直对齐方式，可取值top/middle/bottom | | bgcolor | 单元格的背景颜色 | | colspan | 设置单元格跨列 | | rowspan | 设置单元格跨行 |
4.7. 表单相关标签
<form></form>用于为用户输入创建HTML表单
<!--必须属性：action -- 浏览者输入数据被传送到的地方，比如一个PHP页面method -- 数据传送的方式get -- 此方式传递数据量少，但是传递的信息会显示在网址上。(搜索的)post -- 此方式传递信息多，而且不会把传递的信息显示在网址上。(跟用户相关的信息)
-->
<input />为用户定义需要使用的表单项
<!--name -- 此表单项的名称value -- 此表单项的值type -- 代表一个输入域的显示方式(输入型、选择型、点击型)
-->
<input type="text" name="" value="" /> 普通文本域
<input type="password" name="" value="" /> 密码域
<input type="radio" name="" value="" />单选
<!--name名称保持一致 才能参数排斥checked属性可以使单选和复选框做默认选中
-->
<input type="checkbox" name="" value="" /> 复选
<label></label>为input元素定义标注(绑定元素)
<input type="file" name="" value="" />文件上传
<!--如果表单项中出现文件上传选项那么需要左两件事
第一：表单的传输方式必须为post方式
第二：更改表单传输编码格式 在form标签中增加属性enctype="multipart/form-data"-->
<input type="submit" name="" value="" />提交按钮
<input type="image" src="" title="" alt="" />用图片代替提交按钮
<input type="reset" name="" value="" />重置按钮
<input type="hidden" name="" value="" />隐藏域
<input type="button" name="" value="" />按钮
<button></button> 提交按钮
<button type="submit"></button>提交按钮
<button type="button"></button>按钮
<textarea></textarea> 多行文本输入域
<select></select>下拉列表
<option></option>为下拉列表定义列表项
<!--selected 让某一个下拉列表默认选中
-->
<!--H5新增类型-->
<fieldset></fieldset>将表单内的相关元素分组
<legend></legend>为fieldset定义标题
<optgroup></optgroup>为下拉列表定义分组
<datalist></datalist>定义可选数据列表
<input type="email" name="" value="" /> 邮箱验证表单
<input type="url" name="" value="" /> URL验证表单
<input type="number" name="" value="" /> 数值表单
<input type="range" name="" value="" /> 滑块验证 范围验证
<input type="search" name="" value="" /> 搜索域
<input type="color" name="" value="" /> 颜色选取
<input type="tel" name="" value="" /> 电话表单
<input type="date" name="" value="" /> 日期
<input type="time" name="" value="" /> 时间
<input type="week" name="" value="" /> 周
<input type="month" name="" value="" /> 月
<input type="datetime-local" name="" value="" /> 完整的时间格式格式
<!--表单中常用的属性-->
<!--
readonly 输入域可以选择，但是无法修改。(只读)
disabled 输入域无法获取焦点，无法选择，以灰色显示 (禁用)
selected 为下拉列表定义默认选种
autofocus 自动获取焦点属性
placeholder 表单提示信息
required 用于强制用户必须为该表单赋值，否则提示信息
min 用于设定表单的最小值 number range
max 用于设定表单的最大值 number range
multiple 设定当前表单允许同时选中多个文件，适用于input[type=file]
pattern 用于自定义验证规则(需要配合正则的语法)
step 设定跳步的数值或者设定2个数值之间的间隔
novalidate 取消表单验证，适用于form标签
formaction 用于在提交按钮中修改当前表单的提交页面
formmethod 用于在提交按钮中修改当前表单的提交方式
formenctype 用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用)
tabindex 切换索引属性
-->
4.8. HTML全局属性
contentEditable 内容可编辑属性
designMode 页面可编辑属性
4.9. HTML框架标签
<frameset></frameset>代替body标签定义框架页(H5取消)<!--rows 水平切割cols 垂直切割-->
<frame />定义frameset标签中每个框架页的内容(H5取消)<!--src 引入新页面的地址name 为该页面起名-->
<iframe></iframe>在页面中开一块空间连接一个子页面<!--frameborder 设置边框src 引入页面地址width 宽度height 高度-->
: STL算法：排序（sort）)
