格式： 作用： 便于浏览器识别其网页版本

格式： < !-- – > 作用： 在网页中显示出来 提高可读性，便于编程人员阅读 注意： 不能在注释中嵌套注释

01 根标签

格式： < html > < /html > 作用： 网页中所有内容都写在根标签里面

02 子标签

head标签

格式： < head > < /head > 作用： 不会在网页中显示出来，主要帮助浏览器或搜索引擎解析网页

title标签

格式： < title > < /title > 作用： 显示在浏览器的标题栏，搜索引擎主要根据title判断网页主要内容

meta标签

格式： < meta > 作用： 设置网页元数据

body标签

格式： < body > < /body > 作用： 网页主体 在浏览器中显示出来

属性： 在标签里面通过名值对方式实现 修饰渲染网页

格式: &实体名字; ;(空格) 在浏览器中，多个空格情况被浏览器解析为一个空格 & gt;大于号 & lt;小于号 & copy;版权符号

标题标签： < h1 > – < h6 > 标签越来越不重要 （搜索引擎越来越不关注）

块元素 独占一行标签 (block element) ， 主要对网页进行布局

行内元素 不会独占一行元素 ，主要来包裹文字

列表（list）：

超链接(a)： 超链接让我们从一个页面到其它页面或页面中其它位置,超链接是行内元素 （可以嵌套块元素）不能嵌套自身，其它都可以嵌套

图片(img)： 向当前页面引入一个图片

格式： 内联框架 < iframe src="">< /iframe> 作用： 向当前页面引入了其他页面

CSS思维导图1： CSS思维导图2： CSS思维导图3： CSS思维导图4：

内联样式(行内样式)： 在标签内通过style属性设置元素样式 例：< p style=“color:red; font_size:30px;”>

内部样式表： 将样式编写在head的style标签里，然后通过CSS选择器来选中元素并设置各种样式 例： < style> p{color:red;} 好处： 可以同时为多个标签设置样式，并且修改时只需要改一处

外部样式表： 可以将CSS样式编写在一个外部的CSS文件中，然后通过link标签引入CSS文件 例： < link rel=“stylesheet” href=""> 好处： 外部样式表通过link标签引入，只有想使用的网页就可以使用，可以在不同页面之间进行复用。将样式编写到CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

注释： /* */ 多行注释

元素选择器 作用： 根据标签名选定指定元素 语法： 标签名{} 例子： p{} h1{} div{}

id选择器 作用： 根据元素的id属性值选中一个元素 语法： #id属性值{} 例子: #red{} #box{}

类选择器 class: class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组 作用: 根据元素的class属性值选中一组元素 语法: .class属性值{} 例子: .blue{} .red{}

通配选择器 作用： 选中页面所有元素 语法: *｛｝

(复合)交集选择器 作用: 选中同时符合多个条件的元素 语法: 选择器1选择器2选择器3…选择器n{} 注意点: 交集选择器中如果有元素选择器，元素选择器放在开头 例子： div.red.a{}

（复合）选择器分组(并集选择器) 作用: 同时选择多个选择器对应的元素 语法： 选择器1,选择器2, …选择器n{}

关系选择器

属性选择器

伪类选择器

伪元素选择器

像素： 屏幕（显示器）实际上是由一个一个小点点构成

百分比： 百分比可以设置属性相对父元素的百分比

em: 相对元素字体大小来计算 1em=font-size = 16px(一般情况)

rem: 相对于根元素字体大小 < html font-size >