目录
Html5 + Css3知识点Gitee地址
Html5 + Css3知识点Gitee地址
html5css3知识点: 尚硅谷—HTML5+CSS3知识点
介绍
属性
属性：在标签中（开始标签或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性用来设置标签中的内容如何显示
属性和标签名或其它属性应该使用空格隔开
属性名不能瞎写，应该根据文档中的规定来编写
有些属性有属性值，有些没有，如果有属性值，属性值一个使用引号引起来
进制：
十进制（日常使用）
-特点：满10进1
-计数：0 1 2 3 4 5 6 7 8 9 19 11 12 13 ...19 20
-单位数字：10个 （0-9）
二进制（计算机底层的进制）
-特点：满2进1
-计数：0 1 10 11 100 101 110 111
-单位数字：2个（0-1）
-扩展：
-所有数据在计算机底层都会以二进制的形式保存
-可以将内存想象为一个有多个小格子组成的容器，每一个小格子中可以存储一个1或者一个0
这一个小格子在内存中被称为1位（bit）
8bit = 1byte(字节)
1024byte = 1kb(千字节)
1024kb = 1mb(兆字节)
1024mb = 1gb(吉字节)
1024gb = 1tb(特字节)
1024tb = 1pb
八进制（很少用）
-特点：满8进1
-计数：0 1 2 3 4 5 6 7 10 12 ... 17 20
-单位数字：8个（0-7）
十六进制（一般显示一个二进制数字时，都会转换为十六进制）
-特点：满16进1
-计数：0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b 1c 1d 1e 1f 20...
-单位数字：16个（0-f）
字符编码
泡泡 -> 1100100100(编码)
1100100100 -> 泡泡 （解码）
-所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
所有一段文字在存储到内存中时，都需要转换为二进制编码
当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
-编码
-将字符转换为二进制的过程称为编码
-解码
-将二进制码转换为字符的过程称为解码
-字符集（charset）
-编码和解码所采用的规则称为字符集
-乱码问题：
-如果编码和解码所采用的字符集不同就会出现乱码问题
-常见的字符集：
ASCII
ISO88591
GB2312
GBK
UTF-8：在开发时我们使用的字符集都是UTF-8
2、实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊字符
比如：多个连续的空格，比如字母两字的大于和小于号
如果我们需要在网页中书写这些特殊字符，则需要使用html中的实体（转义字符）
实体的语法：
&实体的名字;
> 大于号
< 小于号
© 版权符号
3、 meta标签
可以通过meta标签来设置网页的字符集，避免乱码问题
文档声明（doctype)
-文档声明用来告诉浏览器当前网页的版本
-html5的文档声明
<!doctype html>
<!Doctype HTML>
meta标签主要用于设置网页中的一些元数据，元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
discription 用于指定网站的描述
网站的描述会显示在搜索引擎的搜索结果中
title标签的内容会作为搜索结果的超链接上的文本显示
4、语义化标签
在网页中HTML专门用来负责网页的结构
使用在使用html标签时，应该关注的是标签的语义，而不是它的样式
标题标签：
h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下标题标签只会使用到h1~h3,h4~h6很少用
标题标签都是块元素
在页面中独占一行的元素称为块元素（block element)
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
p标签表示页面中的一个段落
p也是一个块元素
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline elment)
strong标签表示强调，重要内容！
blockquote 表示一个长引用 （块元素）
q表示一个短引入 （行内元素）
br标签表示页面中的换行
表单标签
form表单域
label标签
input标签
select下拉列表标签
textarea标签
5、6、语义化标签
块元素（block element)
-在网页中一般通过块元素来对页面进行布局
-
行内元素(inline elment)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会再行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器在解析网页时，会自动在网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body以外的子元素
布局标签（语义化标签）
header 表示网页的头部
main 表示网页的主体内容一个页面中只会有一个main
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时使用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中的文字
7、 列表
列表（list）
1.铅笔
2.尺子
3.橡皮
在html中也可以创建列表，html列表一共有三种。
1、有序列表
2、无序列表
3、定义列表
有序列表，使用ol标签来创建无序列表
使用li表示列表项
无序列表，使用ul标签来创建无序列表
使用li表示列表项
定义列表，使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之前可以互相嵌套
8、超链接
超链接可以让我们从一个页面跳转到其他页面，
或者是当前页面的其他的位置
使用 a 标签来定义超链接
属性：
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
target属性：用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的页面中打开超链接
在开发重可以将#作为超链接的路径的占位符使用
可以使用 javascript:; 作为href属性，此时点击这个超链接什么也不会发生
可以直接将超链接的href属性设置为#，这样点击超链接以后
页面不会发生跳转，而是跳到当前页面的顶部的位置
可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值
id属性（唯一不重复的）
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
11、图片标签
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
属性：
src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所失败
width 图片的宽度（单位是像素）
height 图片的高度
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意：
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片的格式：
jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动态
- 一般用来显示照片
gif
- 支持的颜色比较少，支持简单透明，支持动态
- 颜色单一的图片，动图
png
- 支持的颜色丰富，支持复杂透明，不支持动态
- 颜色丰富，复杂透明图片（专为网页而生）
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
效果一样，用小的
效果不一样，用效果好的
12、内联框架
内联框架，用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框
13、音视频
audio 标签用来向页面中引入一个外部的音频文件的
音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
- 如果设置了autoplay 则音乐在打开页面时自动会播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径
（多个source，浏览器先选择第一个，若第一个不支持则展示第二个，第二个不支持，第三个embed不推荐使用，很旧的标签， 若都不支持，最后展示文字）
使用video标签来向网页中引入一个视频
-使用方式和audio基本上是一样的
CSS
CSS简介
网页分成三个部分：
结构(HTML)
表现(CSS)
行为(JavaScript)
CSS
- 层叠样式表
- 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来说设置样式
而最终我们能看到只是网页的最上边的一层
- 总之一句话，CSS用来设置网页中元素的样式
使用CSS来修改元素的样式
第一种方式(内联样式，行内样式)：
- 在标签内部通过style属性来设置元素的样式
- 问题：
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中复制一遍
并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
- 注意：开发时绝对不要使用内联样式
02、CSS语法
CSS中的注释，注释中的内容会自动被浏览器所忽略
CSS中的基本语法:
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素
比如 p的作用就是选中页面中所有的p元素
声明块，通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾
03、常用选择器
字体属性
文本属性
CSS引入
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值()
例子：#box{} #red{}
类选择器
作用：根据元素的class属性选中一组元素
语法： .class属性值
通配选择器
作用：选中页面中的所有元素
语法： *
class 是一个标签属性，它和id类似，不同的是class可以重复使用
可以通过class属性为元素分组
可以同时为一个元素指定多个class属性
4、复合选择器
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
！选择同时拥有多个类名的元素：中间没有空格 ！！！！
5、关系选择器
为div的子元素设置一个字体颜色红色
（为div直接包含的span设置一个字体元素）
子元素选择器
作用：选中指定元素的指定元素
语法： 父元素 > 子元素
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
选择下一个兄弟
语法：前一个 + 下一个
选择下边所有的兄弟
语法： 兄 ~ 弟
父元素
- 直接包含子元素的元素叫做父元素
子元素
- 直接被父元素包含的元素是子元素
祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
兄弟元素
- 拥有相同父元素的元素是兄弟元素
6、属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值元素的元素
7、伪类选择器
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素、鼠标移入的元素...
- 伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type
- 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
8、a元素的伪类
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
由于隐私的原因，所以visted这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
9、伪元素选择器（重点）
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用
:last-of-type
!!!! CSS扫描顺序从右到左 ！！！！
其它特性
CSS3滤镜——filter函数（了解）
calc函数（了解）
10、样式的继承
！！width具有继承性，height不具有继承性
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承
11、选择器的权重
样式的冲突
- 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important，则此时该样式会获取到最高的优先级，甚至超过内联样式
注意：在开发中这个玩意一定要慎用！
12、单位
长度单位，
像素
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 所以同样的200px在不同的设备下显示效果不一样
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素随父元素的改变而改变
em
- em是相对于元素的字体大小来计算的
- 1em = 1font-size
- em会根据字体大小的改变而改变
rem
- rem是相对于根元素的字体大小来计算
13、颜色
颜色单位：
在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、gree……
但是在css中直接使用颜色名是非常的不方便
RGB值：
- RGB通过三种颜色的不同浓度来调配出不同的颜色
&nbs
最低0.47元/天 解锁文章
扫一扫
1688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
