HTML学习笔记
1990年李爵士发明了WWW（万维网）= URL、HTML、HTTP。
万维网是基于互联网实现的输入地址就能访问网页的技术。
CRM学习法
copy -- 抄文档、抄别人
run -- 跑起来、
Modify -- 加入自己的想法，然后再跑起来
HTML的语法
标签语法
<!DOCTYPE html> //文档类型
<tag attr=value>内容</tag>
<tag attr>内容</tag>
<tag attr=value>
<!DOCTYPE html> 文档类型
<html lang="en"> html标签，可以把lang改成zh-CN
<head>
<meta charset="UTF-8"> 文件字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 告诉IE使用最新内核
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 禁用缩放 兼容手机
<title>Document</title>
</head>
<body>
</body>
</html>
章节标签
表示文章的层级
标题标签 h1~h6、章节标签 section、文章标签 article、段落标签 p、头部标签 header、底部标签 footer、主要内容 main、
旁支标签 aside、划分 div
全局属性：所有标签都有的属性
class、contenteditable、hidden、id、style、tabindex、title
id可能并非唯一，不到万不得已不用id，因为id不报错。
默认样式：
Elements -> Style -> user agent stylesheet(浏览器)
CSS reset 默认样式已经不符合需求了。
常见的CSS reset，可以选择进入大厂首页，Chrome开发者工具，找类似代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
内容标签：
ol + li（有序列表）、ul + li（无序列表）、 dl + dt + dd（description list） 、pre（当需要保留空格、table时使用）、hr（分割线）、br（换行）、a（超链接）、em（强调）、strong（重要）、code（显示代码）、quote（引用标签）、blockquote（块级引用元素）
HTML重点标签
a标签
属性：href、target、download、rel=noopener
作用：跳转外部页面、跳转内部锚点、跳转到邮箱或电话等
yarn global add http-server
http-server . -c-1 预览网页
a的href的取值
网址：https://google.com 、http://google.com、//google.com
路径：/a/b/c 以及 a/b/c、index.html 以及 ./index.html
伪协议：javascript:代码;（javascript:;空的伪协议）、mailto:邮箱、tel:手机号、id：href=#XXX
a的target的取值
_blank（在空白页面打开）、_top（在顶级窗口打开）、_parent（在当前链接的上一层打开）、_self（默认值，在当前页面打开）
target="xxxx"给窗口命名。
a的download：作用不是打开页面，而是下载页面（但不是所有浏览器的都支持）。
iframe标签：内嵌窗口，以及很少使用了。
table标签
<tr></tr> //table row
table相关标签：table、thead、tbody、tfoot、tr、td、th、
相关的样式：table-layout、border-collapse、border-spacing
img标签（永远不要让图片变形）
作用：发出get请求，展示一张图片
属性：alt（替换）、height、width、src
事件：onload、onerror
响应式：max-width: 100%
form标签
作用：发get或post请求，然后刷新页面
属性：action、autocomplete、method、target
事件：onsubmit
input标签
作用：让用户输入内容
属性：类型 type：button、checkbox、email、file、hidden、number、password、radio、search、submit、tel、text
其他 name、autofocus、checked、disabled、maxlength、pattern、value、placeholder
事件：onchange、onfocus、onblur
验证器：HTML5新增功能 required
其他的输入标签：textarea多行文本，select+option下拉菜单。label（表示用户界面中某个元素的说明。）
注意事项：一般不监听input的click事件，form里面的input要有name，form里面要放一个type=submit才能触发submit事件
其他标签：video、audio、canvas、svg 这些标签有一定兼容性问题