一、介绍
1.html涉及的三种语言
HTML：内容层，负责页面的内容
CSS：样式层，负责页面的样式
JS：交互层，负责页面的行为/交互
2.html的含义
hyper text markup language 超文本标记语言
hyper：文本、图像、超链接、视频、音频
markup：html的语法
3.HTML的特点：
（1）以.html或.htm为后缀
（2）用浏览器解析语法（默认从上往下执行，从左往右执行）
（3）页面可以嵌套JS脚本
二、html语法规则
1.<!DOCTYPE html>
doc：文本文档 type：类型
<!DOCTYPE html>
<html> 包裹页面
<head> 页面的头部
<meta charset="utf-8">
<title>模板文件</title> 页面的标题
<link rel="stylesheet" href="../css/bootstrap.css"/> 引入css文件
<script src="../js/bootstrap.bundle.js"></script> 引入js文件
</head>
<body>
</body>
</html>2.html标签
标签名：用尖括号包裹
双标签：<head>页面内容</head>
单标签 <br/>，现在H5语法规则不需要写斜杠
3.html注释
语法格式<!--内容-->
注释不可以嵌套，不能再<>里写注释，ctrl+/表示注释，再按一次取消注释
三、html标签
1.文本样式标签
<b>加粗</b> strong
<q>双引号</q>
<i>斜体</i> em
<del> 删除线</del> s
<u>下划线</u>
<mark>高亮标记</mark>
<sup>上标字</sup>
<sub>下标字</sub>
2.换行标签
<br>或<br/>单标记标签
在编辑器中，回车是不能让文本换行的，需使用<br>标签让文本换行
3.转移字符
圈c 版权声明 ©
圈r 注册商标 ®
TM 商业商标 ™
关闭符号 ×
圈关闭符号 ⊗
除号 ÷
大于号 >
小于号 <
空格
空格的折叠现象:在编辑器中，多个空格或回车是无法生成多个空格或换行效果，这叫做空格的折叠现象，多个空格或回车会折叠成一个空格或换行显示，想要生成空格可以使用
4.段落标签
<p>段落</p>,单独成行，上下有垂直的间距
lorem用于生成假文，先输入lorem出现提示回车会按tab键补全代码
5.标题字标签
<hn>标题</hn>,单独成行，有上下垂直的间距
h1~h6，h1最大，h6最小，h4的字号与普通文本的字号一样
6.水平分割线标签
<hr>或<hr/>,水平分割先
页面中会添加一条独占一行的灰色的分割线
四、分区元素
1.块分区 div
div 单独成行，块级元素，无样式
div是最简单的块级元素，是最基本的分区元素
div将页面进行分区划分成几个块
div可以包裹body里的任意元素
2.行分区 span
span 行内元素，无特殊样式
可以设置页面中一行中的特殊样式
五、图片与超链接
1.标签属性
属性：也叫特征，用来描述标签某一方面的特征
标签属性：一个标签可以有多个属性，用来设置页面的不同样式
属性规则：
属性的声明必须放在开始标签中；
一个标签可以有多个属性；
多个属性之间用空格隔开；
属性之间没有顺序之分；
属性与属性之间用等号连接；
属性值用双引号包裹。
2.图片标签
（1）常见的图片类型：
jpg/jpeg 普通图片
png 透明图片
gif 动图
webp 新出的，谷歌的图片格式
（2）图片标签
<img>或<img/>，单标记标签
属性：
src 图片资源路径/url
alt 图片加载不出来替换的文字内容
width 图片的宽度
height 图片的高度
如果设置的宽高不符合本身的宽高，会使图片失真——会变形，为解决该问题，宽和高只设置一个
（3）url
统一资源定位符，uniform resource locator，资源路径
绝对路径：使用网络资源时，会用绝对路径
优点：节省本地服务器的存储空间
缺点：资源不稳定，当远程服务器把资源删掉之后，本地服务器就搜索不到了
相对路径：参照物是当前html
./ 表示当前目录 ，可以省略不写
../ 表示上一级目录
3.超链接
<a href = "">超链接</a>，可以跳转到其他页面
属性：
href 表示资源路径，如果开始写页面不知道跳转哪里，用#符占位，如果书写正确的情况下，按住alt可以跳转到其他页面
target 表示跳转到哪里
值：_blank 表示跳转到新的一个空白页面
_self 表示在当前页跳转，默认值
锚点：表示在当前页面定义一个位置，使用a标签，页面会在这个位置显示
定义锚点方式 <h3 id="h">跳转到这里了</h3>
超链接 <a href = "#h">跳转到那里了</a>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
