注释，注释中的内容不会在网页中显示，只会显示在源码中
通过注释可以对代码进行解释说明，也可以隐藏页面中一些不希望显示的内容
作为一个程序员，要养成良好的编写注释的习惯，注释要求简单明了
注释不能进行嵌套！
<!--这是很重要的内容不要删-->
HTML的基本语法：
标签：
一个标签，也被称为是一个元素
成对出现：<标签名>标签体</标签名>
自结束标签： <标签名>
自结束标签： <标签名 />
<div>标签体<div>
<div/>
属性：
在开始标签（或自结束标签）中可以为元素设置属性，
属性用来描述元素，属性是一个名值对结构，属性名=“属性值”
一个元素可以同时指定多个属性，多个属性之间使用空格分离
有些属性，属性名和属性值相同，此时可以省略属性值
html中不区分大小写，但是建议用小写
<input type="text" name="username">
<input type="radio" checked>
元素之间的关系：
父元素
- 直接包含子元素的元素是父元素
子元素
- 直接被父元素包含的元素
祖先元素
- 直接或间接包含后代元素的元素是祖先元素
- 父元素也是祖先元素
后代元素
- 直接或间接被祖先元素包含的元素是后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同的父元素的元素是兄弟元素
title表示标题标签，文字会显示到标签页上，
搜索引擎在抓取页面中，会通过title的内容来识别网页的主要内容
这部分主要是SEO相关的知识（SEO搜索引擎优化）
<title>标题标签</title>
标题标签
一共有6级标题，从h1~h6
h1最大，h6最小，从语义上讲，h1最重要，h2其次，h3再次…
注意：对于html标签来说，我们关注的是标签语义，而不是它的样式
在SEO中h1的重要性仅次于title，搜索引擎也会通过h1来识别页面的主要信息，
通常一个页面只有一个h1
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
p 标签表示一个段落
<p>我是一个段落</p>
br 标签表示换行
<br>
hr 表示水平线
hr
可以通过实体在网页中来表示一些特殊符号
https://www.w3school.com.cn/html/html_entities.asp
实体：
https://html.spec.whatwg.org/multipage/named-characters.html#named-character-
语法：&实体的名字;
常用：
< 小于号
> 大于号
空格
© 版权符号
a<b>c
陌之宇真 帅！
标签列表：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
列表
有序列表
- 使用ol来创建有序列表
- 在ol中使用li来表示列表项
<ol>
<li>芹菜</li>
<li>萝卜</li>
<li>大闸蟹</li>
</ol>
无序列表
- 使用ul来创建无序列表
- 在ul中使用li来表示列表项
<ul>
<li>芹菜</li>
<li>萝卜</li>
<li>大闸蟹</li>
</ul>
定义列表
- 定义列表用来描述一些内容
- 使用dl来创建一个定义列表
使用dt来定义被描述的内容
使用dd来对内容进行描述
<dl>
<dt>内容<dt>
<dd>对内容进行描述<dd>
<dl>
列表之间可以互相嵌套
<ul>
<li>
鱼香有肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉丝</li>
</ol>
</li>
<li>宫保鸡丁</li>
<li>西红柿炒番茄</li>
</ul>
<dl>
<dt>陌之宇</dt>
<dd>日本知名歌舞伎</dd>
<dt>大闸蟹</dt>
<dd>宁波著名大螃蟹</dd>
<dd>以擅长横着走路著称</dd>
</dl>
网页除了需要被人看以外，还需要爬虫程序爬取，
w3c就希望能够帮助程序更好的爬取这个页面
于是它就添加了很多不同的语义化标签来帮助程序来识别页面
main 主要内容，一个页面中最好只有一个main标签
header 头部内容
footer 底部内容
article 表示一个独立的内容
aside 侧边栏，和主体独立的内容
nav 表示导航
section 独立的区块
通过这些语义化标签，可以对网页中的不同内容进行描述，
方便爬虫程序识别页面，但是大部分情况下我们不会大量使用这些标签
实际开发中，比较常见的情况是，使用div代替所有标签
预格式（保留文本自身的格式）
在网页中，那些需要保留原本格式的内容，需要使用pre标签，
对于我们来说使用最多的场景就是在网页中编写代码
实际使用过程中，还会结合code一起使用
<pre>
锄禾日当午
汗滴禾下土
飞流直下三千尺
疑是银河落九天
</pre>
<code>
<pre>
alert("Hello")
console.log("哈哈")
</pre>
</code>
img
- 图片标签，用来向页面中引入图片
- 是自结束标签
- 属性：
src 表示要引入图片的路径
- 需要一个路径作为参数
alt 是对图片的描述
- 帮助搜索引擎来识别图片
- 如果不写alt，则搜索引擎不会对图片进行收录
width
- 图片的宽度
height
- 图片的高度
- width和height两个属性只修改一个时，另外一个会等比例缩放
- 实际开发如果需要修改图片大小，建议只修改一个
<img src="1.gif" alt="大松鼠" width="1000">
图片的格式：
jpg
- 支持颜色丰富，不支持透明
- 用来显示照片
gif
- 支持的颜色少，支持简单透明，支持动图
- 用来显示颜色单一的图片，或动图
png
- 支持的颜色，支持透明
- 用来显示颜色丰富的图片，支持透明效果
- 在网页中使用的比较多
webp
- 是谷歌专门为浏览器推出的一种格式
- 兼具上述格式所有优点，部分浏览器不支持这种格式（越来越少了）
base64
- 通过base64来对图片进行编码，编码后可以直接在网页引入图片
- 通过base64对图片编码后，图片可以和网页一起加载，加快图片的加载速度
- 可以使用base64来加载一些对速度要求比较高的图片，但是不要大量使用
选择图片的原则：
- 图片大小一致，用显示效果好，
- 显示效果一致，用最小的
- 保证效果的同时，确保图片小
路径有两种：
1.绝对路径
https://img0.baidu.com/it/u=3288444602,3967521966&fm=253&fmt=auto&app=120&f=JPEG?w=665&h=500
2.相对路径
- 相对路径，用来引入我们自己项目内的图片
- 相对路径需要使用 ./开头 或 …/开头
./表示当前目录
./可以省略
../表示当前目录的上一级目录
几个../就表示上几级
<img src="https://img0.baidu.com/it/u=3288444602,3967521966&fm=253&fmt=auto&app=120&f=JPEG?w=665&h=500">
<img src="1.gif" alt="">
<img src="../图片/webp/an.webp" alt="">
- 使用a标签来定义一个超链接
- 通过超链接可以跳转到其他的页面
- 属性：
href：指定要跳转到位置- 需要一个路径作为参数
target：指定页面打开的位置 - 可选值：
_self 默认值，在当前页面打开链接
_blank 在新的标签页打开链接
- 需要一个路径作为参数
<a href="https://lilichao.com" target="_blank">lilichao.com</a>
<a href="./02_图片标签.html" target="_self">超链接</a>
内部跳转的超链接，通过修改href属性可以使超链接在页面内部进行跳转。
# 表示跳转到页面的顶部
#id 表示跳转到页面的指定位置
<a href="#p3">去xxx</a>
<p id="p1">xxx</p>
<a href="#">回到顶部</a>
id属性
- 在网页中可以为元素设置一个id属性，作为元素的唯一标识
<p id="p1"></p>
iframe
- 内联框架，用来向一个网页中引入另一个网页
- 属性：
src 来指定要引入的网页的路径
<iframe name="hello" src="https://lilichao.com" width="600" height="600"></iframe>
<iframe src="./02_图片标签.html"></iframe>
在html中，元素可以被分为块元素和行内元素
- 块元素（block）
- 块元素会独占页面的一行自上向下垂直排列
- 块元素用来对网页进行布局，将一个页面分成一块一块的
- 最常用的块元素：div
- 行内元素（inline）
- 行内元素只会占自身的大小，自左向右水平排列
- 行内元素一般用来放置文字
- 最常用的行内元素：span
- 替换元素
- img iframe
- 元素的嵌套规则：
- 块元素中可以放置块元素，也可以放置行内元素
- 行内元素中尽量不要放置块元素
- a元素中可以放置除它自身外的任何元素
- p元素中不能放置块元素
注意：浏览器在渲染页面时，会自动修复html中的语法错误
9546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
