使用Vscode软件编写，它包含Emmet插件：可以自动生成html代码片段
1. 第一个网页
内容：
！+tab键 ；html：页面，页面结构；或者html:5+tab键 可以生成标准的文档结构；
<!doctype html>文档声明：告诉浏览器当前文档使用的HTML标准是HTML5，不写会导致浏览器进入怪异渲染模式。
文档头:,文档头内部的内容不会显示到页面上。
：文档的元数据：附加信息 : charset指定网页内容编码。(计算机中只能存储数字)，utf-8为字符编码表； 解决适配手机端的问题； 解决IE浏览器的问题，若使用ie浏览器，告诉使用内核为edge的。 网页标题：放在中的元素/标签/标记 ：
元素=起始标记+结束标记+元素内容（在页面要显示的东西）+元素属性（不适必须写，可以描述额外信息）；
属性：属性名城+属性值
局部属性：某些元素特有的属性
全局属性： 所有元素通用的属性
没有结束标签的元素：空元素
， , <。。。/>表示空元素，斜杠为闭合标记，老版本html中使用元素的嵌套
元素不能相互嵌套
父元素，子元素，祖先元素，后代元素，兄弟元素（有同一个父元素）
超链接
2.语义化
（1）每一个HTML元素都有具体的含义
a元素：超链接； p元素：段落； h1元素：一级标题；。。。
（2）所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定
重要：选择什么元素，取决于内容的含义，而不是显示出的效果
为什么需要语义化？
（1）为了搜索引擎优化（SEO）（为了让搜索引擎理解网页）
搜索引擎：百度，搜搜，Bing，Google：
工作原理：每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。
（2）为了让浏览器理解网页
阅读模式， 语音模式，
3. 文本元素
HTML支持的元素：HTML5元素周期表
##h:
标题：head
：表示一级标题到6级标题
vscode常用做法：
ctrl+回车：换下一行；ctrl+shift+回车：换上一行;
hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级标题}:生成6个标题，$可以表示不同的级
##p
段落：paragraph
Vscode操作：
p3>{文字}
乱数假文：
p6>lorem1,1代表生成一个单词
##span
【无语义】元素，仅用于样式的设置，（css设置样式时要有元素）
以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）。
现在：HTML5中已经弃用了这种说法。
直接采用：display：block； display：inline；
调试，在浏览器中点击右键检查，或者f12.
##pre
预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格，回车，换行，制表tab），在页面显示时，会被折叠为一个空格。
**例外：**在pre元素中的内容不会出现空白折叠；在pre元素内部出现的内容，会按照源代码格式显示到页面上。钙元素通常用在网页上显示一些代码，其功能的本质是它有一个默认的css属性。
缩进：选中+tab；减缩进：选中+shift+tab
》显示代码时，通常外面套code元素，code表示代码区域。
4. HTML实体字符
实体字符：html Entity（MDN中有）
实体字符通常用在页面中显示一些特殊字符
1.&单词；
2.&#数字；
常见字符：
小于：<；大于：>；空格：#nbsp；版权符号：©；&符号:&
5. a元素
超链接：
1. href属性：引用
href（hyper reference）：通常表示跳转地址
1普通链接.跳转地址
2.锚链接：跳转某个锚点（锚链接，比如当前页面的目录链接跳转，不刷新）
Vscode简写：
(
{章节1}）+p>lorem, 其中h2和p是兄弟元素
重复：((
{章节1})+p>lorem)*6+tab
递增：((
{章节KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲)+p>lorem)*6+ta…"]*6>{章节$}+tab
id属性：全局属性，表示元素在文档中的唯一编号
部分内容一起修改：鼠标中间按住不动框选+修改的内容
3.功能链接：点击后触发某个功能(前缀+冒号)
（1）执行JS代码，javascript:
弹出你好
（2）发送邮件：mailto:
给我发送邮件
要求用户计算机上安装有邮件发送软件：exchange
（3）拨号：tel：
给我拨打电话
要求用户计算机上安装有拨号软件，或使用的是移动端访问
2. target属性：表示跳转窗口位置
target取值：
_self: 在当前页面窗口中打开，默认值
_blank:在新窗口中打开
直播
6.路径的写法
站内资源：当前网站的资源
站外资源：非当前网站的资源
站外资源：绝对路径
绝对路径的书写格式：
url地址：
协议名：//主机名：端口号/路径
schema://host:port/path
协议名：http, https, file(本地文件)
主机名：域名、IP地址
端口号： 若协议是http协议，默认端口号80；若协议是https：默认端口为443
当跳转目标和当前页面协议相同时，可以省略协议（比如都为http时）
站内资源：相对路径
相对路径的书写格式
以./开头，./表示当前资源所在的目录
可以书写…/表示返回上一级目录
相对路径中：./可以省略
7. 图片元素
img元素：image缩写，空元素,
src属性：source，绝对路径：（复制图片地址，不用保存图片），相对路径：直接用资源；
alt属性：当图片资源失效时，将使用该书信的文字替代图片。
与a元素连用
<a …>
<img …>
与map元素连用,地图可以划分区域
map子元素：area, 形状shape是什么，coords代表坐标(圆形circle：x, y, 物体中心；矩形rect：左上角，右下角；多边形poly:)（可以qq截图测量）
8.多媒体元素
video
audio
后续笔记再持续更新，今天写累了，先写到这里，有错误的地方也请大家评论指出，互相学习。
9484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
