学习的思维导图
HTML第一天.png
1. 浏览器的分类和内核
| 浏览器名称 | 浏览器内核 |
|---|---|
| Microsoft Edge、IE（微软） | Trident |
| Firefox（火狐） | Gecko |
| Google Chrome（谷歌） | Blink |
| Safari（苹果） | Webkit |
| Opera（欧朋） | Blink，早期为 Presto |
说明：
- 浏览器的内核相当于汽车的发动机，负责将代码转换成用户眼中的界面
- 浏览器市场份额：https://tongji.baidu.com/data/browser。其中，Google Chrome浏览器占据的市场份额最大
- 国内的浏览器，如QQ浏览器（Blink）、360浏览器（Blink、Trident）和UC浏览器（Webkit、Trident）等，均是采用上述浏览器的内核。
2. Web标准
制定标准的原因：不同的浏览器对应不同的工作原理与解析方法，那么就会出现差别，为了解决这种矛盾，需要制定一套标准来规范Web的开发。
- 网页的结构（.html），负责网页的内容整理和分类，是网页的骨架
- 网页的样式（.css），负责设置网页的板式、颜色和文字大小
- 网页的行为（.js），负责网页的动态交互效果
2.1 HTML骨架
HTML：Hyper Text Markup Language，超文本标记语言
作用：主要是通过HTML标签对网页的文本、图片和音频等内容进行描述。
HTML有固定的基本格式：
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页的主要内容
</body>
</html>
2.1.1 HTMl标签的分类
双标签 ：<div></div>
单标签 ：<br/>、<hr/>、<img/>，均属于功能性标签
说明：标签之间存在嵌套关系和并列关系
2.1.2 基本骨架说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>：用于告知浏览器当前使用的HTML版本，解析时需要使用相应版本的HTML
<meta charset="UTF-8">：用于指定当前编码和解码的标准
2.2 标签学习
（1）标题标签：header，权重从h1-h6依次递减，也属于字体格式化标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
（2）段落标签：paragraph，<p></p> 用于包裹一段文本
<p>我爱我的祖国</p>
（3）水平线标签：horizontal，<hr/>
（4）换行标签：break，<br/>，由于在html中直接换行是不会在网页中显示出来，需要使用换行标签来实现换行的效果
（5）字体格式化标签
- 文字倾斜：em、i
- 文字加粗：strong（常用于强调某些文字）、b
- 贯穿线（删除线）：del、s
- 下划线：ins、u
说明：语义化的标签便于搜索引擎（谷歌搜索、百度搜索等）识别相应的内容，如果网页的语义更好，那么这个网页在搜索引擎中的排名也就靠前。搜索引擎不关注具体的样式及视觉效果，而是关注标签本身的语义化。所以，推荐使用语义化强的标签， em、strong、del 和 ins 标签。
如下所示：
<em>公元221年</em>
<i>公元221年</i>
<strong>自信</strong>
<b>自信</b>
<del>原价：998</del>
<s>原价：998</s>
<ins>汉朝</ins>
<u>汉朝</u>
（6）图片标签
<img src="图片的路径" alt="替换图片的说明文本" title="图片标题">
属性：
- src：图片的路径，可以为相对路径、绝对路径、网络地址
- alt：当图片加载失败时，用文字说明代替图片
- title：当鼠标移动到图片上方后显示的标题
- width（宽度）、height（高度）、border（边框）
- style：样式属性，包含width（宽度）、height（高度）、border（边框）
（7）链接标签
<a href="链接的地址" target="链接的打开方式"></a>
属性：
href：链接跳转的地址
地址分类：
- 站外跳转，绝对地址跳转，需要添加合法的地址（http/https协议），如：https://www.baidu.com/；此外，也可以是电脑本地文件的绝对地址
- 站内跳转，相对地址跳转，从当前文件去找目标文件的过程，两个文件在同一个文件下（同级目录）
- 锚点跳转，页面内部跳转：从页面的某一块区域跳转到另外一块区域
在需要跳转的标签上添加 id=""，如：<p id="myId"></p>，然后在a标签的href属性中填写自定义的 id 名：<a href="#myId"></a>
target：链接的打开方式
- _self：默认值，覆盖当前页面打开
- _blank：新窗口打开页面，
说明：根据具体的场景来使用链接打开方式，不可以一味地使用某一种。
2.3 标签的属性
语法：写在标签内部，如果是双标签，则写在开始标签里面
格式：属性名="属性值"
属性可以多个并存，属性与属性之间使用空格分开
<hr color="red">
<h1 class="box" style="width: 200px"></h1>
2.4 路径说明
- 绝对地址：从盘符、http协议出发去找目标文件的过程
<img src="http://......">
<img src="c://......">
- 相对地址：从当前文件出发去找目标文件的过程
（1）同级目录：
如果当前文件和目标文件在同一个文件的话，路径直接写目标文件的名称即可。
如果当前文件和目标文件不在同一个文件的话，那么需要先找到目标文件对应的文件夹。
（2）非同级目录：
上一级目录：../ 用于跳出当前目录
下一级目录：文件夹名/
2.5 列表
（1）无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
特点：列表之间没有顺序，实际工作中常用
（2）有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
特点：列表之间有顺序，实际工作中不常用
（3）自定义列表
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
说明：
- ul、ol 的子元素（子标签）必须是 li，li 标签相当于一个容器，可以在 li 中嵌套其他的标签（可以容纳所有标签），包括（ ul、ol ）
<ul>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
- ul、ol 中直接输入其他标签或者文字的做法是不被允许的
- dl 中只能嵌套 dt 、dd，直接在 dl 中输入其他标签或者文字的做法也是不被允许的
- dl 、dt 标签相当于一个容器，可以容纳所有元素
2.6 注释
不会被浏览器解析，在源代码中显示一段文字，用来提示该段代码的作用
语法：
<!-- 被注释的内容 -->
Windows快捷方式：ctrl + /；Mac OS中快捷方式：command + /
取消注释快捷方式：ctrl + z 或者 ctrl + /，command + /
2.7 特殊字符
| 特殊符号 | 格式 | 描述 |
|---|---|---|
| < | < |
小于号 |
| > | > |
大于号 |
| & | & |
和号 |
| ￥ | ¥ |
人民币 |
<p></p>
<p></p>
网友评论