HTML+CSS超详细讲解+超详细思维导图超浅显易懂复习、学习小助手_html+css讲义

作者：酷酷是懒虫 | 2024-07-15 08:28:51

踩

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.实体（转义字符）

格式: &实体名字;
&nbsp ;(空格) 在浏览器中，多个空格情况被浏览器解析为一个空格
& 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{}
关系选择器
属性选择器
伪类选择器
伪元素选择器