HTML和CSS
HTML表示内容的结构超文本标记语言（Hyper Text Markup Language）
CSS则决定结构的样式层叠样式表（Cascading Style Sheet）
解析与渲染
解析：输入的内容使计算机能够读懂
渲染：使解析的内容通过浏览器转化为用户能够明白的内容
元素的组成部分
元素的组成的部分：开始标签/元素内容/结束标签
标签称为元素标签
属性分为属性值和属性内容属性包含在开始标签里面
空元素：没有元素内容与结束标签的元素也叫自闭和元素（img）
元素的三种层次关系：父子关系兄弟关系祖先后代关系
语义化标签
与div没有本质上的区别都是用来划分区域只是拥有自己的含义
header：页面的头部
nav：导航
article：文章的主题内容
aside：文章的附加内容（广告）
footer：页面的底部
section 表示页面一个整体的一部分主题

解码器字符的编码集

viewpot 视口（可视化窗口）

乱序明文 lorem数量用于生成乱码

p标签不能成为P元素的父元素也不能包含标题（h）和语义化标签（div）

DOCTYPE html告诉浏览器适用什么版本的浏览器打开必须在第一行
charset 告诉浏览器以什么什么方式来解析文本

超链接

锚点：同一个页面之间的相互跳转

用ID选择器实现

功能链接：邮件a href=“mailto：2905764944@qq.com”>给我发邮件

电话a href=“tel：123543546”>给我发邮件

新建页面 target=“_blank ”

不新建页面且替换当前页面 target=“_self”

返回顶部a href="#“

外部样式优点：复用批量修改

绝对路径：

当网站部署到服务器后，网站中的所有资源都可以通过一个地址（路径）访问

书写格式：协议：//域名/目录

适用场景：访问外部资源只能适用绝对路径

访问内部资源：若网站已经部署到服务器可以使用绝对路径，并可以省略协议和域名

相对路径相对于当前资源的位置只能用于访问站内资源

书写格式： ./路径

./表示当前资源所在的目录，必须作为相对路径的开始，可省略

…/表示返回上一级目录

文本元素

1个汉字=2个字符=4个字节

blockquote：整段的引用（整段缩进）

q：小段文本的引用（自带引号）

cite：对参考文献的引用（标签：1.文献的引用《自带斜体》2.搜索引擎可以识别内容来自于哪里。

属性：1.属性值不会显示到页面 2.普通浏览器不识别 3.阅读浏览器能识别告知来自于哪里）

abbr：对缩写的引用（鼠标放在缩写的内容上能显示自己输入的全称）

strong：重要的文本

b：应突出显示的文本

em：强调的文本（斜体）

i：应区别对待的文本

strong和b的区别（都是加粗）区别：1普通浏览器上不识别 2阅读浏览器能识别会加重strong的读音 3 搜索引擎会可以识别strong（增加元素的权重）

em和i的区别：1普通浏览器上不识别 2阅读浏览器能识别会加重em的读音 3 搜索引擎会可以识别em（增加元素的权重）

快速选择所有要修改的元素：双击元素名并Ctrl+D

批量修改快捷键：ctrl+d

批量复制（内容不同）：

选中要复制的内容（多个）alt+双击（选择）

复制快捷键：ctrl+c

粘贴快捷键：ctrl+v

全选快捷键：ctrl+a

撤销快捷键：ctrl+z

剪切快捷键：ctrl+x

无语义标签

div 无语义用于表示一块区域

span 无语义仅用于给一小段文本添加样式在一行内显示

pre 预格式化保留文字在源代码中的格式适用场景数学和化学的公式

实体字符

空白折叠：在HTML代码中，多个空格和回车会合并成一个空格。

如何实现多个空格？

解决方式：实体字符

书写格式：&开始分号结束

字符的书写格式 &实体名字或&实体编号

显示结果描述实体名称实体编号

空格 &nbsp &#160

< 小于符号 &lt &#60

》大于符号 &gt &#62

& 并且符号 &amp &#38

引用CSS

4种样式

使用外部样式表

使用内部样式表

使用行内（内嵌）样式表

使用外部样式表的特点

1 实现了内容结构和表现形式代码分离，方便复用和维护

2 使HTML代码更加明净，有利于程序员和搜索引擎的阅读

3 是开发页面的常见做法

使用内部样式表的特点

将CSS代码写到html文档的style元素当中

适用场景：测试时使用

1 没有了样式表文件在某些时候可以提升效率

2 多个页面难以共享样式不利于代码复用

3 html&css代码复杂不利于程序员和搜索引擎阅读

4 在某些对效率要求苛刻或测试的场景下使用

使用行内样式表的特点

CSS代码写在某个元素开始标记的style属性中行内样式不写选择器

1 JavaScript操作的是行内样式

2 在测试的场景下使用

3 没有了样式表文件在某些时候可以提升效率

4 多个页面难以共享样式不利于代码复用

5 html&css代码复杂不利于程序员和搜索引擎阅读

mark标签给文本加背景颜色

CSS术语

CSS规则选择器{声明块}

CSS选择器

选择器选中的都是离{}最近的元素前面的内容都是这个元素的条件

基本选择器

1 元素选择器书写格式元素名{声明块}

2 通配符选择器书写格式： * {声明块} 例子：*{color：red；}

效果：*号匹配0到多个字母

3 类选择器书写格式：.类名{声明块} 类名匹配html标签中class的属性值

4 id选择器（留给JS使用权重高） #id名{声明块} id名与html标签中的id属性值相匹配

注：一个页面id值不可以重复

5 组合选择器（并集选择器）书写格式：类名，元素名，id名{声明块}

命名规范（使用范围{id，类名}）

1 不要以数字开头

2 包含的字符（字母，数字，下划线，连字符）

3 区分大小写（大小写敏感）

层次选择器

1 子集选择器书写格式：父元素>子元素{声明块}

2 后代选择器书写格式：祖先元素+空格+后代元素{声明块}

3 兄弟选择器书写格式：兄弟元素+“+”或者“~”+兄弟元素{声明块}

兄弟元素1+兄弟元素{声明块}只选中紧挨兄弟元素1后面的第一个兄弟元素（相邻选择器）

兄弟元素1~兄弟元素{声明块}选中兄弟元素1后的所有兄弟元素

伪类选择器

n从0开始

1 选中第N个元素书写格式：元素:nth-child(n){声明块} n是第几个元素

例子：p:nth-child(3){ color:red;} （）适用场景：所有兄弟元素的名字相同

注：若所有兄弟元素的名字不相同，可能会无法选中元素

方式2：书写格式：元素：nth-of-type（n）{声明块}

适用场景：所有兄弟元素名可以不相同

注：先筛选类型，在结果中选中第N个元素

2 选中第一个元素书写格式：元素：first-child{声明块}

3 选中最后一个元素书写格式：元素：last-child{声明块}

4 选中奇数项元素书写格式：元素：nth-child(odd){声明块} ：元素nth-child（2n+1）{声明块}

5 选中偶数项元素书写格式：元素：nth-child（even）{声明块} ：元素nth-child（2n）{声明块}

否定伪类选择器

除了第N个元素：书写格式：元素：not（：nth-child（n））{声明块}

除了多个元素：书写格式：元素：not（：nth-child（n），：nth-child（n））{声明块} n为需要除去的元素

扩展

选中前m个元素书写格式：元素：nth-child（-n+m）

动态伪类选择器

a标签4种状态（按顺序进行书写）

1 未访问：link

2 已访问：visited

3 激活（焦点框）：focus

4 悬停（移入）：hover

5 点击：active

书写顺序：A方案：1245 B方案：2145

盒模型概述

盒子的分类

ie盒模型

普通盒模型

区别：当设置元素的宽高的时候计算规则不同

普通盒模型设置宽高时只给内容盒设置

ie盒模型设置宽高时是给边框盒设置

不同元素产生的盒子类型可能不同

box-sizing: 设置盒子的计算规则;

content-box 默认值普通盒模型标准盒模型

border-box 改为ie盒模型

适用场景：当宽度为100%的基础上有添加了其他子盒子的尺寸出现超出的情况下更改盒子的计算规则来实现横向内容全部展示

一个元素，产生什么样的盒子，取决于他的displa属性

display：none 不生成盒子（标签有页面不显示）

display：inline 行盒（多个标签可以在一行显示）

display：block 块盒（一个标签独占一行）

背景色渲染区域包括边框+内边距+内容区域

padding的取值

1个值表示四个方向值相同

《padding的缩写方式》

padding：10px 上下左右

padding：10px 20px；上下，左右

padding：10px 30px 20px 上，左右，下

padding：10px 20px 30px 40px 上，右，下，左

《margin的缩写方式》

margin：10px 上下左右

margin：10px 20px；上下，左右

margin：10px 30px 20px 上，左右，下

margin：10px 20px 30px 40px 上，右，下，左

盒模型当中只有外边距可以给负值

《border样式》

style

soild 实线

dashed 虚线

dotted 点线

double 双实线

border-radius:10px 圆角边框

border-radius:10px 上下左右

border-radius:10px 20px 左上右下，右上左下

border-radius:10px/20px Y轴为10px X轴为20px

透明色：transparent

边框的颜色与文本的颜色相同

边框的默认大小为3px（双实线）

@import只能引用css文件 link可以引用其他文件

宽高

宽高默认值为auto

最小宽度：min-width

最大宽度：max-width

最小高度：min-height

最大高度：max-height

当内容超出设置的尺寸时内容的展示方式

overflow:hidden 隐藏超出部分的内容（只显示填充盒区域的内容）

overflow:scroll 添加滚动条（两个方向都会添加）

overflow-y:scroll 添加纵向滚动条

overflow:visible 显示超出部分内容（默认值）

overflow：auto 超出内容方向添加滚动条

字体加粗:font-weight

文本的断词规则（换行）

英文，数字的断词规则是空格和标点符号

中文的断词规则是空格和标点符号

改变断词规则

word-break：break all 不按断词规则但是固定宽度占满后还是会换行

word-break：normal 默认断词规则

用css实现单行省略号和多行省略号

子盒子

border-box：边框盒包含边框（border）内边距（padding）内容（content）

padding-box：填充盒包含内边距（padding）内容（content）

content-box：内容盒包含内容（content）

url：统一资源路径

设置背景的起始渲染区域，格式：

background-origin:padding-box【从填充盒左上角开始渲染】

background-origin:border-box【从边框盒左上角开始渲染】

background-origin:content-box【从内容盒左上角开始渲染】

设置背景的显示区域，格式

background-clip:border-box【从边框盒开始显示】

background-clip:padding-box【从填充盒开始显示】

background-clip:content-box【从内容盒开始显示】

outline（轮廓）

优点：不占像素

缺点：不可以单独设置四个方向边框的样式四个方向的样式一致

继承和层叠

什么是继承

继承（inherit）是指子元素会自动拥有父元素的某些css属性

可继承属性：文本类（文字标点符号能添加的样式）字体类

继承必须有传递性

继承发生的场景

一个元素的某个CSS属性只有满足下面两个条件才会继承父元素

1 该属性是可继承的属性

2 该属性样式表中没有声明

强制继承

强制继承也叫做显示继承是指将CSS属性设置为inherit

这样做通常有两个原因

1 为了继承有些不可继承的属性

2 为了继承已被声明过的属性

单位

em是所在标签的字体大小的倍数

rem是相对于根元素（html）字体大小的倍数

rem适用场景：1 移动端开发

vw（viewpointwidth）vh（viewpointheight）：取视口的百分比列子：width：5vw （取视口的百分之5）

取值单位的分类

1 固定单位，绝对单位：px

2 相对单位：em rem vw vh %

层叠概述

什么是层叠

当相同属性名不同属性值应用到同一个元素当中就会发生声明冲突浏览器会自动触发层叠机制

层叠的过程

1 比较优先级

优先级与来源和重要性有关

来源：开发者样式表浏览器默认样式表用户样式表其中用户样式表优先级最高浏览器默认样式表优先级最低

重要性：若属性值后有（！important），则表示一条重要声明，否则，表示普通声明

2 比较特殊属性

每一个声明都有一个特殊性（specificity）

一个声明的特殊性，取决于规则适用范围的大小

规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

行内样式》id选择器》类选择器》》伪类选择器元素选择器》通配符选择器（特殊性从高到低）

具体规则

在比较特殊性时，每一个冲突的声明，会生成4个数字abcd 以比较特殊性

a越大特殊性越高若a相同比较b

a:若声明是行内样式则为1 否则为0

b：规则中id选择器的个数

c：规则中类选择器，伪类选择器和属性选择器的个数

d：规则中元素选择器，伪元素选择器的个数

3 比较源次序

2021-03-21相关推荐

训练日记 | 2021.03.21 | 天梯赛选拔赛
选拔赛用的是第十八届浙大城院程设竞赛 A - Genshin and KFC 直接输出 B - Codeforces 题意:判断段位有没有改变,如果有就输出"(原段位 to 现段位)&qu ...
2021.03.30【2021省赛】模拟比赛总结
2021.03.30[2021省赛]模拟比赛总结地址: https://gmoj.net/senior/#contest/home/3350 T1: 神奇纸牌(uno) T2: 凌乱平衡树 (tr ...
2021.8.21 网易秋招开发笔试（题目 + java代码）
2021.8.21 网易秋招开发笔试一.题目: 二.程序 //采用的是深度优先搜索 import java.util.HashMap;public class wangyi {public stat ...
Go、Rust、C++和Zig语言的生产力对比 | Gopher Daily (2021.03.28) ʕ◔ϖ◔ʔ
每日一谚:Goroutines and channels are big ideas. They're tools for program construction. Go技术生态掉入Go nil坑 ...
2021.03.17 pokémon小游戏开发记录与周总结
2021.03.17 pokémon小游戏开发记录与周总结此篇仅包含部分项目代码,只是个人的学习总结. 文章目录 2021.03.17 pokémon小游戏开发记录与周总结前言一.前期准备二. ...
2022.03.21飞扬的小鸟
2022.03.21飞扬的小鸟 (题目来源:https://www.luogu.com.cn/problem/P1941 ) 题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不 ...
2021.03青少年软件编程（Python）等级考试试卷（二级）
2021.03青少年软件编程(Python)等级考试试卷(二级) 一.单选题(共25题,共50分) 1.对于字典infor = {"name":"tom", & ...
2021.1.21课程摘要（逻辑教育-王劲胜）
2021.1.21课程摘要逻辑教育-13期-Python基础班-王劲胜一.字符串二.运算符三.作业讲解逻辑教育-13期-Python基础班-王劲胜一.字符串 1.字符串的方法 • len( ...
2021.03.24正则匹配符号
2021.03.24 正则表达式 from re import fullmatch 正则是一种用来处理文本数据的一种工具.(一般用于处理复杂的文本问题) 1)检测输入的数据是否是手机号? 2)检查输入 ...
2021.1.21——星露谷作物计算器的可视化
2021.1.21--星露谷作物计算器的可视化前言目标 excel表格代码效果图总结前言书承上文,之前做的计算器,仅仅是在调用excel里的数据,生成图表并放回到excel表里,每次要查 ...

2021-03-21

超链接