一、转义字符
在HTML中，<、>、&（<、>用于区分标签，&用于转义）等特殊字符由于有特殊含义，在页面上可能无法正常显示，就需要在HTML文档中使用特殊转义字符来表示。
转义字符也可称为字符实体，对于同一个特殊字符，可以使用实体名称或者实体编号表示
二、表单标签
HTML表单用于收集用户输入
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
1、form标签
<form></form> 用于创建HTML表单，常用属性如下：
action：规定表单提时，表单数据提交的URL
method：规定用于发送form-data的HTTP方法，常用属性值为get、post
2、input元素
<input /> 元素是最重要的表单元素，根据input元素的不同type类型，表现形式也是不一样的
3、label 标签
<label></label> 用于为input标签提供标注
点击label文本，浏览器会自动将焦点转到和标签相关的表单控件上
label标签的for属性值应当与相关元素的id属性值相同
示例
<form> <label for="like">点赞</label> <input type="radio" name="like" id="like" /> <br /> <label for="collect">收藏</label> <input type="radio" name="collect" id="collect" /> </form>
4、select 标签
<select></select> 用于创建下拉列表
select元素中的 <option></option> 标签用于定义列表的可选项
<select> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select>
5、button 元素
<button></button> 用于定义普通按钮
三、语义化标签
HTML标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，更利于开发者、程序和其他设备对于标签的理解。
语义化在盲人软件、机器翻译等方面发挥着重要作用，同时搜索引擎会通过语义化标签增强文章的SEO搜索。
下表为部分常见的语义化标签：
四、Head标签
head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>
常见Head头
1、title 标签
<title></title> 用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
例：
<title>uiu的日志_uiuing's_CSDN博客-前端开发,后端开发,大数据领域博主</title>
2、link标签
<link /> 用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标
<link rel="icon" type="image/png" href="/static/images/favicon.ico">
<link /> 是空元素，仅包含属性，只能存在于head部分
3、style标签
<style></style> 用于给文档引入 CSS 样式信息，将样式表包含在 style 开始与结束标签之间
4、script 标签
<script></script> 用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本
<script> // JavaScript 代码 </script>
也可以通过script的src属性链接外部脚本文件
<script src="/static/js/main.js"></script>
5、mate 标签
<meta /> 提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
name 和 content 属性通常一起使用，以键值对的方式给文档提供元数据，其中 name 的属性值作为元数据的名称，content 作为元数据的值
keywords 和 description 这两个名称使用频率最高，是搜索引擎优化的主要方式之一
charset 属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等
http-equiv 属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：
- content-type ：规定文档的字符编码，等同于charset属性设置字符编码
- default-style ：设置默认CSS样式表组的名称
- refresh ：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）
6、base 标签
<base /> 用于为页面中的所有相对链接设置默认URL或默认 target 属性
<base href="https://www.uiuing.com" target="_blank" />
五、CSS引用方式
CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。
CSS遵循W3C规范，实现了跨浏览器的标准化。
1、行内样式
直接使用HTML元素的style属性引入CSS样式
<p style="color: #000;">uiu</p>
2、内嵌样式
使用标签引入样式
<style> p { color: #000; } </style>
3、外部样式
链接样式 导入确实比较方便，当然也是最常用的，但在比较大的工程之中我常使用 导入样式 ，我认为这可以让我的代码得到更方便的管理
3.1 链接样式
在 <head></head> 标签中，使用 <link /> 标签链接外部的CSS文件
link 标签的 href属性设置为目标链接的 CSS 文件路径，rel 属性设置为 stylesheet 表示链接样式表，type 属性设置为 text/css
<link rel="stylesheet" href="style.css" type="text/css" />
3.2 导入样式
使用 @import url() 引入CSS文件
在CSS文件中直接使用 @import url()
在HTML文件中需要在 <style></style> 标签中使用 @import url()
在HTML初始化时，@import url() 导入的CSS会被直接导入到 HTML 或 CSS 文件中，成为文件的一部分
<!-- HTML文件中导入 --> <style> @import url(style.css); </style>
/* CSS文件中导入 */ @import url(style.css);
六、CSS背景属性
在前端开发过程中，为了页面的美观，往往都会给HTML元素添加背景，使用CSS（层叠样式表）背景属性能够在页面美化的同时，实现页面的表现与内容分离。
1、background-size 属性
- contain
保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域
- cover
保持图片纵横比不变，最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示
2、background-repeat 属性
- repeat（默认）
允许水平和垂直方向重复（平铺）背景图片
- repeat-x
只允许水平方向重复（平铺）背景图片
- repeat-y
只允许垂直方向重复（平铺）背景图片
3、background 属性
简写属性可以在一个属性声明中设置一个或多个背景属性
background: #000 url('bannner.png') no-repeat cover;
上面代码的意思为：黑色背景、背景图片为：bannner.png、关闭平铺、保持图片纵横比不变
七、CSS文本属性
通过CSS文本属性可以给文本设置颜色、字号、行间距、对齐、段落缩进等样式，将页面的正文与标题区分开，同时能够丰富整个页面布局。
1、color 属性
用于设置文本的颜色，可设置的值有：
- 颜色英文名，如 red
- 十六进制值，如 #FFFFFF
- RGB值，如 rgb(255, 0, 0)
- rgba值 ，如 rgba(255, 0, 0, 0.9)
2、font-size 属性
用于设置文本字体大小，可以设置为绝对大小，单位为px ，也可设置为相对大小，单位为 rem 、em 等
字体大小未设置时默认字体大小为 16px
3、font-weight 属性
用于设置文本的粗细，可设置的值有：
4、font-family 属性
用于规定文本使用的字体名或字体族名列表，字体名在列表越往前优先级越高。
如果浏览器不支持第一个字体，则会尝试下一个，以此类推
font-family: "PingFang SC","Hiragino Sans GB","Arial,Microsoft YaHei","Verdana","Roboto","Noto,Helvetica Neue","sans-serif";
5、text-align 属性
用于设置文本的水平对齐方式，可设置的值有
- center（居中对齐）
- left（左对齐）
- right（右对齐）
文本方向是从左到右则默认左对齐，文本方向是从右至左则默认右对齐
6、line-height 属性
用于设置行间距，可设置的值如下
- 数字 ：行间距为当前字体大小乘此数字
- 固定值 ：设置固定的行间距，如20px
- 百分比 ：行间距为当前字体大小乘百分比
7、text-indent 属性
用于指定首行缩进值，可设置的值如下
- 固定值 ：设置固定首行缩进，如20px
- 百分比 ：首行缩进值为父元素宽度乘此百分比
8、letter-spacing 属性
用于设置字间距，设置固定值为字间距，如10px
9、word-spacing 属性
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px
10、text-decoration 属性
用于设置文本的装饰线，是下表属性的简写
/* 表示为黑色波浪形下划线 */ text-decoration: underline wavy black;
11、text-transform 属性
用于设置文本大小写字母，常用属性如下
- uppercase ：全部文本均为大写字母
- lowercase ：全部文本均为小写字母
- capitalize ：文本的每个单词首字母为大写字母
12、writing-mode 属性
设置文本在水平或垂直方向的排布方式
- horizontal-tb ：文本流在水平方向从上到下排列，文字方向为水平方向
- sideways-lr ：文本流在垂直方向，从下至上、从左至右排列
- sideways-rl ：文本流在垂直方向，从上至下、从右至左排列
- vertical-lr ：文本流在垂直方向，从上至下、从左至右排列，文字方向为水平方向
- vertical-rl ：文本流在垂直方向，从上至下、从右至左排列，文字方向为水平方向，跟古诗阅读顺序一致
13、white-space 属性
用于设置文本的空白符处理方式，属性值如下
