HTML+CSS超详细讲解+超详细思维导图 超浅显易懂 复习、学习小助手
HTML（结构）
1.文档声明
格式： <!doctype html>
作用： 便于浏览器识别其网页版本
2.注释
格式： < !-- – >
作用： 在网页中显示出来 提高可读性，便于编程人员阅读
注意： 不能在注释中嵌套注释
3.标签（元素）
01 根标签
格式： < html > < /html >
作用： 网页中所有内容都写在根标签里面
02 子标签
head标签
格式： < head > < /head >
作用： 不会在网页中显示出来，主要帮助浏览器或搜索引擎解析网页
title标签
格式： < title > < /title >
作用： 显示在浏览器的标题栏，搜索引擎主要根据title判断网页主要内容
meta标签
格式： < meta >
作用： 设置网页元数据
body标签
格式： < body > < /body >
作用： 网页主体 在浏览器中显示出来
4.属性（名值对）
属性： 在标签里面通过名值对方式实现 修饰渲染网页
5.实体（转义字符）
格式: &实体名字;
  ;(空格) 在浏览器中，多个空格情况被浏览器解析为一个空格
& gt;大于号
& lt;小于号
& copy;版权符号
6.语义化标签
标题标签： < h1 > – < h6 > 标签越来越不重要 （搜索引擎越来越不关注）
块元素 独占一行标签 (block element) ， 主要对网页进行布局
行内元素 不会独占一行元素 ，主要来包裹文字
列表（list）：
- 有序列表 ol
- 无序列表 ul
- 定义列表 dl
超链接(a)： 超链接让我们从一个页面到其它页面或页面中其它位置,超链接是行内元素 （可以嵌套块元素）不能嵌套自身，其它都可以嵌套
图片(img)： 向当前页面引入一个图片
7.内联样式
格式： 内联框架 < iframe src="">< /iframe>
作用： 向当前页面引入了其他页面
8.音视频
CSS（表现）
CSS思维导图1：
CSS思维导图2：
CSS思维导图3：
CSS思维导图4：
1.设立样式方式
内联样式(行内样式)： 在标签内通过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文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
2.注释
注释： /* */ 多行注释
3.选择器
-
元素选择器
作用： 根据标签名选定指定元素
语法： 标签名{}
例子： 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{} -
关系选择器
-
属性选择器
-
伪类选择器
-
伪元素选择器
4.像素/百分比/em/rem
像素： 屏幕（显示器）实际上是由一个一个小点点构成
百分比： 百分比可以设置属性相对父元素的百分比
em: 相对元素字体大小来计算 1em=font-size = 16px(一般情况)
rem: 相对于根元素字体大小 < html font-size >