这篇文章收录了html中常用元素以及好用的快捷键！
1 html结构
一个完整的html结构包含哪几部分结构？
- 文档声明
- html元素
- head元素
- body元素
1.1 文档声明
<!DOCTYPE html>
- html文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别html文档
- 必须放html文档最前面，省略了会出现兼容问题
1.2 html元素
-
一个文档只能有一个，所有元素的根元素
-
w3c标准建议为html元素增加一个lang属性，作用：
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
1.3 head元素
内容是一些元数据（描述数据的数据）
一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标等等
-
title元素 网页标题
-
meta元素 字符编码（常见ASCll、Unicode、utf-8/16/32）(所有网页目前都需要采用utf-8编码，为了浏览器在解析时能正确解析出来内容，因此我们要告诉浏览器用utf-8去解析/解码)
-
link元素 可以设置图标或引入外部样式文件
link元素的rel属性不能省略，用来指定文档与链接资源的关系
一般rel若确定，相应的type也会默认确定，所以可以省略type
网页图标支持的图片格式：ico、png
-
base元素 与a元素搭配使用
1.3 body元素
2 body内常用元素
2.1 列表
浮动一开始不是用来设置布局的（浮动的滥用）
是用来图文混排的
3组常用展示列表的元素
- 有序列表ol、li
- 无序列表ul、li
- 定义列表dl、dt、dd
ol和ul子元素只能是li
dl的子元素只能是dt和dd
2.2 表格
- table
- tr（table row）
- td （table define）
table>tr>td
表格的其它元素
tbody 表格内容
caption 表格标题
thead 表头
tfoot 页脚
单元格合并
td设置这些属性
- colspan 跨行
- rowspan 跨列
记得合并后删去原来的单元格
2.3 表单
- form
- input 单标签
- textarea
- select、option
- button
- label 优化用户体验（for id）
- fieldset、legend 表单外围
inupt有多种type
input的type="reset"时可以重置表单(记得在同一个form元素中)
input的autoFocus属性，当页面加载时，自动聚焦
input的name和value属性，提交到服务器时，当参数传递给服务器
模拟百度搜索引擎
<form action="https://www.baidu.com/s">
<input
type="text"
placeholder="请输入内容"
name="wd"
>
<input type="submit" value="百度一下">
</form>
传统表单提交
- 将所有input包裹到form中
- form的action属性=服务器地址
- input/button类型是submit
- 点击submit，自动将所有数据提交到服务器
弊端：
1.提交会进行页面的跳转，这就意味着服务器端要提前将这个页面写好，并且将这个已经写好的页面返回给前端，前端直接展示（服务端渲染）
2.不方便进行表单数据的验证
前后端分离表单提交
- 通过js获取到所有表单的内容
- 通过正则表达式进行表单的验证
- 发送ajax请求，将数据传给服务器
- 验证成功后，服务器后会返回结果，需要前端解析这个数据，并且决定显示什么内容
而大型公司用传统表单提交更多见，因为大公司都希望做SEO，并且这种方式（SSR服务器渲染）首屏渲染速度更快
请求方式
最常用2种
- get
- post
get
?参数1&参数2
由于服务器和浏览器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1kb
post
- 发送给服务器的参数全部放在请求体中
- 理论上，post传递的数据量没有限制（具体还得看服务器处理能力）
推荐个播放器vlc
2.4 h元素
有助于网站的SEO（search engine optimization）优化，可以促进关键词排名
- 搜索引擎爬取网站数据时，选择的是h1标签爬取关键词
- 建议一个网页最多只有一个h1元素，多了有可能会被搜索引擎认为作弊，视为k站
魏则西事件，有家广告公司利用了这点害死了魏则西
2.5 字符实体
比较常用的
- 空格  
- 大于号 >
- 小于号 <
- & &
2.6 sapn元素
- 区别普通文本，便于控制文本样式
- 行内元素之间有空格是因为html代码中的换行符
2.7 div元素
2.8 img元素
- 单标签
- alt属性：图片加载失败时显示文本
web常用图片格式
png：静态图片，支持透明
jpg：静态图片，不支持透明
gif: 动态图片，支持透明
像素
图像显示的最小单位
每个像素都可以表示一种颜色
2.9 a元素
a元素不一定是跳转：
如果href属性值是资源的下载地址的话就会下载资源
如果是邮箱地址也可能发送邮箱
- target属性 _self当前窗口打开 _blank新窗口打开
与base元素搭配
- 抽取多个a元素相同的属性
- 当a元素的href属性没有值时，使用base元素的href值，有的话就用a自己的
锚点链接
点击a元素在网页内跳转
- 定位元素设id
- a元素的href属性值为#id
伪链接
没有指明具体链接地址的链接
如果点击暂时不做任何事，可以写成下面这种形式
<a href="#" onclick="return false"> </a>
<a href="javascript:"></a>
所以有时候可以把链接当做按钮来使用
当href="#"时，点击会跳到顶部
与img元素结合
图片链接
2.10 iframe元素
网页里嵌套网页
2.11 标签语义化
好处：
- 维护成本低
- 组员沟通间成本低
- 让搜索引擎更好的识别更加重要的信息
百度搜索引擎只识别后端渲染
而谷歌搜索引擎前端渲染和后端渲染都识别
所以谷歌做的更好
3 URL
全称Uniform Resource Locator，统一资源定位符
3.1 基本格式
协议://主机地址/路径
protocol://hostname/path
更具体更完整的格式
protocol://hostname[:port]/path/[;parameters][?query]#fragment
http默认端口是80，ftp默认端口是21
端口可以理解为不同的服务窗口
3.2 协议
不同的协议，代表着不同的资源查找方式，资源传输方式
常见协议
http 超文本传输协议，访问的是远程的网络资源，https协议相当于http协议的安全版本
file 访问本地计算机上的资源，不用加主机地址
ftp 访问的是共享主机的资源
mailto 访问的是电子邮件地址
4 Emmet语法
可以理解理解代码生成快捷键
html
生成子代元素 div>span
生成兄弟元素 div+span
生成分组 ()
生成数字 $
生成内容 {}
生成多份 *
css
- w100
- w100+h100
- 属性首字母
5 html5
狭义概念
说的是html新的元素和特性
广义
html5新的标准，包括最的html 元素+css新特性+js
5.1 新增语义化元素
- nav
- header
- section
- article
- footer
- aside
5.2 媒体元素
在h5之前用flash插件
- video
- audio
video
- src
- control 工具栏
- autoplay （有兼容问题，谷歌不支持自动播放，加上muted就可以）
- muted 静音
- loop 循环
audio
- src
- control 工具栏
- autoplay （有兼容问题，谷歌不支持自动播放，加上muted就可以）
- muted 静音
- loop 循环
source元素
- 如果存在兼容性问题，可以将多个音/视频格式的数据源放到source元素中
- 通过src指定数据来源
5.3 input元素拓展
- placeholder
- multiple
- autofocus
对于type值也有拓展
- date
- time
- number
- tel
- color
- 等等
6 常用快捷键
- Ctrl+Enter 写完换行
- Ctrl+F 搜索（代码找变量/网页找元素）
- Alt+Shift+下 向下复制当前行
- Alt+Shift+F 代码格式化
