web前端知识总结一（HTML+CSS）

文章目录

web前端知识总结一（HTML+CSS）
- 浏览器
- HTML基础
- - 换行标签
  - 水平线标签
  - 图片标签
  - 绝对路径
  - 相对路径
  - 视频标签
  - 链接标签
  - 锚点
  - 无序列表
  - 有序列表
  - 自定义列表
  - 表格
  - - 表格属性
  - 合并单元格
  - 表单
  - 字符实体
- CSS
- - 选择器
  - 文字样式
  - 文本样式
  - 背景属性
  - 元素显示模式
  - - 块级元素
    - 行内元素
    - 行内块元素
    - 元素显示模式转换
    - HTML嵌套规范注意点
  - CSS特性
  - - 继承性
    - 层叠性
    - 优先级
    - - 权重叠加计算
  - Pxcook软件
  - 盒子模型
  - - 内边距padding
    - 自动内减
    - 清除默认内外边距
    - 外边距折叠现象——塌陷现象
    - 行内元素的垂直内边距
  - 结构伪类选择器
  - 伪元素
  - 浮动
  - 清除浮动
  - 定位
  - - 子绝父相水平居中
  - 层级关系
  - - 属性z-index
  - 装饰
  - - 垂直对齐方式：vertical-align
    - 光标
    - 圆角
    - - 溢出部分显示效果overflow
    - 元素本身隐藏
    - 元素整体透明
    - 边框合并
    - Css画三角形技巧
    - 获得焦点伪类选择器
    - 属性选择器
  - 精灵图
  - 背景图大小
  - - background连写拓展
  - 阴影 box-shadow
  - 过渡transition
- DOCTYPE文档前置
- SEO标签
- favicon-标题图标
- base.-css
- - 引入字体-

浏览器

浏览器的渲染引擎(内核):浏览器中专门对代码进行解析渲染的部分。

渲染引擎不同，解析代码时的速度、性能、效果也不同。不同浏览器，解析效果存在差异。

HTML基础

HTML：超文本标记语言。

vscode：html页面：！快捷键生成html模板。

Ctrl+D 多个光标出现

换行标签

”br“

水平线标签

“hr”

加粗
下划线
倾斜
删除线

图片标签

img scr=“” alt=“” title=“” width=“” hight=“”

alt:替换文本——当图片加载失败，显示alt文本；成功，不显示。

title:提示文本——鼠标悬停显示文本。

只设置一个width或hight，另一个没设置会自动等比例缩放（图片不会变形）。

设置两个不当图片会变形。

绝对路径

D://123,gif

相对路径

./123,gif 下级路径 images/123.gif 上级路径 …/

视频标签

“video src=“./video.mp4” controls /video”

属性：scr 路径 controls 显示播放额控件 autoplay 自动播放 loop 循环播放

谷歌可以让视频自动播放但需要静音状态 muted

支持格式：MP4、WebM、Ogg

链接标签

<a href=“./。。.html”</a

<a href=“#”</a空标签

锚点

<a href=“#center”“跳转到中部“

<h2 id="center"我是中部

<a href=“” target=“_self” </a _

_target :目标网页打开形式 1、_self默认值在当前窗口跳转（覆盖原网页）2、在新窗口中跳转

无序列表

ul>li ——ul只允许包含li标签

去掉列表符号

ul{

list-style：none；

}

有序列表

ol>li——ol只允许包含li标签

自定义列表

dl 整体 >dt 主题>dd 主题的每一项内容

 <dl><dt>帮助中心</dt><dd>购物中心</dd><dd>购物指南</dd></dl>

dd 默认显示缩进

dl 标签中只允许包含dt/dd

表格

table 整体>tr 每行>td 单元格

<table><caption>学生成绩单</caption><thead><tr><th>姓名</th><th>成绩</th></tr></thead><tbody><tr><td>qwe</td><td>100</td></tr></tbody><tfoot></tfoot>
</table>

表格属性

css属性border width height

表格标题 caption默认居中

表头单元格 th 表示第一行默认加粗居中

thead 表示头部 tbody 表示主题 tfoot 表示底部

合并单元格

跨行合并 rowspan =“2” 跨列合并colspan=“2”

只能跨单元格，不能跨thead、tbody、tfoot

表单

input 标签 type属性：

text 文本框默认
password密码框
radio单选框：name属性——有相同的name分为一组，一组只能有一个被选中；check属性默认选中
checkbox多选框：check属性默认选中
file文件选择：multiple 属性多文件选择
submit提交按钮
reset重置按钮
button普通按钮：value=“按钮名字“

placeholder属性：占位符提示用户输入内容的文本（=“请输入密码”）

使用type 按钮属性需要配合form标签使用————单标签按钮

button 标签双标签“

button

/button

type属性=submit reset button

select标签：下拉菜单

option标签：下拉菜单的每一项属性：selected：默认选中

textarea文本域标签：属性 cols=""规定文本域内的宽度 rows=“”规定文本域内的可见行数

label标签：使用方法①：男

使用方法②：女

没有语义布局标签div span

有语义的布局标签（header 头部 nav导航 footer底部 aside侧边栏section网页区块article网页文章

字符实体

空格	&nbsp
小于号	&lt
大于号	&gt
和号&	&amp
引号	&quot
单引号	&apos
分	&cent
元	&yen
欧元	&euro
小节	&sect
版权	&copy

CSS

选择器

标签选择器：p{}

类选择器：.one{}

id选择器：#two{}

通配符选择器：*{}

文字样式

font-size

font-weight：normal bold 100-900、是否倾斜

font-style：normal 倾斜italic

font-family：宋体

**样式的层叠问题：**同一标签设置相同的属性，样式层叠，最下面的生效。

**字体font属性连写：**font：style weight size family； font：100px 微软雅黑；

文本样式

1、文本缩进：text-indent：数字+px 数字+em（1em=当前标签font-size的大小）

默认字号：16px 首行缩进2字大小 text-indent：2em；

2、文本水平对齐方式：text-align： left center right——适应文本、span、a、input、img

3、**文本修饰：**text-decoration：下划线 underline 删除线line-through 上划线overline 无装饰线none

text-decoration：none 清除a标签下划线

**字体和文本样式：**行高 line-height：数字+px 当前标签font-size 的倍数；可以取消上下间距如果同时设置行高和font连写注意覆盖问题：font：size weight size/line-height family

垂直居中：设置行高属性值=自身高度属性值

盒子标签水平居中 margin：0 auto；一般针对固定宽度的盒子，没有设置宽度，会默认占满父元素的宽度

CSS复合选择器：

后代选择器：空格隔开选择器1 选择器2{css}

子代选择器：选择器1>选择器2{css}

并集选择器: 选择器1，选择器2{css}

交集选择器：p标签添加了box类 p.box{css}

hover 伪类选择器：作用：选中鼠标悬停在元素上的状态，设置样式 a：hover{css}

任何一个标签都能添加伪类

vscode emment语法：div、.red、#one、p.red#one、ul>li、ul>li{li的内容}、ul>li*3、div+p同级、

背景属性

背景颜色：background-color：pink #ccc rgba(0,0,0,0.1) a是透明度0-1 快捷键：bdc+tab

背景图片：background-image：url（‘’）；

背景平铺：background-repeat ：repeat 默认水平垂直方向都平铺 no-repeat 不平铺 repeat-x 沿水平方向平铺 repeat-y 沿垂直方向平铺

背景位置：background-position：水平方向位置垂直方向位置

水平 left center right 垂直 top center bottom

坐标：原点（0,0） x轴水平向右 y轴垂直向下

例：background-position：right bottom；

background-position：50px 100px；

background-position: -50px -100px；

背景相关属性连写：

background：color image repeat position；

例：background：pink url(./image.png) no-repeat bottom center; 背景图位置如果是英文单词可以颠倒顺序

background：pink url(./image.png) no-repeat 100px 50px;

显示图片的效果：

法1、写上img标签

法2、div+背景图片：需要设置div的宽高

元素显示模式

块级元素

宽度默认父容器高度默认内容撑开独占一行可以设置宽高 div、p、h、ui、li、 dl、dt、dd、form、header、Nav、footer。。。

行内元素

一行可显示多个、不可设置宽高、宽高由内容撑开 a、span、b、u、i、s、strong、ins、em、del。。

行内块元素

一行可以显示多个可以设置宽高 input textarea button select。。

特殊：img有行内块元素特点，但Chrome显示inline

元素显示模式转换

display：block 转换块级元素较多

display: inline-block:转换成行内块元素较多

display：inline 转换行内元素少

HTML嵌套规范注意点

块级元素作为大容器，可以嵌套文本块级元素行内元素行内块元素

注：p标签不要嵌套div、p、h等块级元素

a标签可以嵌套任意标签元素

但不能嵌套a标签

CSS特性

继承性

子元素默认继承父元素样式的特点（控制文字的属性都能继承，不是控制文字的都不能继承）

继承失效情况：

1、a标签的color 的继承会失效

2、h系列标签的font-size会继承失效

层叠性

1、给同一标签设置不同样式，样式会层叠叠加，共同作用在标签上

2、给同一标签设置相同演示，样式会层叠覆盖，最后的样式生效

注：样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

！important写在属性值的后面，分号的前面

不能提升继承的优先级，只要是继承优先级最低

实际开发不建议使用

！important如果不是继承，权重最高

权重叠加计算

（0，0,0,0，）行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数

都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效。

Pxcook软件

获取图片内部盒子的尺寸和颜色的工具

盒子模型

内容content 内边距padding 边框border 外边距margin

边框border：1px soild #ccc;

border就是给边框描线

快捷键：bd+tab

soild 实线 dashed虚线 dotted点线

边框border+方位名词 border-left border-right

border-width border-style border-color

内边距padding

padding：上右下左

padding：上左右下

padding：上下左右

自动内减

box-sizing：border-box 浏览器自动计算多余大小，自动在内容中减去

不需要手动减法，不想被盒子撑大

清除默认内外边距

margin：0；

padding：0；

所有标签都可能添加内边距或border 都内减模式

box-sizing：border-box；

}

外边距折叠现象——塌陷现象

子元素margin-top作业在父元素上，导致父元素一起往下移动

解决方法：1、给父元素设border-top或者padding-top（分隔父子元素的margin-top）

2、给父元素设置overflow：hidden

3、子元素转成行内块元素

4、设置浮动

行内元素的垂直内边距

如果想通过margin或padding改变行内标签的垂直位置，无法生效

行内标签的margin-top和bottom 不生效

行内标签的padding-top或bottom不生效

margin和padding只能改变左右边距

结构伪类选择器

根据元素在html结构关系查找元素

E:first-child{} 匹配父元素中第一个子元素，并且是E元素

E:last-child{}匹配父元素中最后一个子元素，并且是E元素

E:nth-child（n）{}匹配父元素中第n个子元素，并且是E元素

E:nth-last-child(n){}匹配父元素中倒数第n个子元素，并且是E元素

公式：偶数 2n、even 奇数2n+1、2n-1、odd 找到前五个：-n+5 找到从第5个往后：n+5

li:first-child a{}

li:first-child a:nth-child(3){}

伪元素

：：before：在父元素内容最前添加一个伪元素

：：after：在父元素内容最后添加一个伪元素

必须设置content属性才能生效

伪元素默认是行内元素，宽高不生效

.father::before{content:"老鼠“；}

浮动

浏览器解析行内块或行内标签时，如果标签换行书写会产生一个空格的距离

float：left right

浮动元素会脱离标准流，在标准流不占位置

浮动:在一行排列，设置宽高生效——浮动后的标签具有行内块特点

浮动不能text-align:center 或者margin：0 auto；

清除浮动

浮动——子元素不能撑开标准流的块级父元素

1、直接设置父元素高度

2、给父元素内容最后添加一个块级元素，给块级元素设置clear：both

会让html结构变复杂

3、单伪元素清除法

.clearfix::after{

content:‘’;

display:block;

clear:both;

height:0;

visibility:hidden;

}

直接给标签加类清除浮动

4、双伪元素清除法

//清除浮动 .clearfix::before解决外边距塌陷问题

.clearfix::before,.clearfix::after{

content：‘ ’；

display：table；

}

//真正清除浮动的标签

.clearfix::after{

clear:both;

}

5、父元素设置overflow：hidden

定位

position属性：+ top left bottom right属性

静态static 默认值，标准流加top、left…不变

相对relative ：相对之前的位置进行移动

场景：父绝子相小范围移动

绝对absolute ：子绝父相

先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；有父级，但父级没有定位，以浏览器窗口为参照物为进行定位。

1.脱标，不占位

2、改变标签的显示模式特点：具体行内块特点（在一行共存，宽高生效）

固定fixed：

1、脱标-不占位置

2、改变位置参考浏览器窗口

3、具备行内块特点

子绝父相水平居中

.box{

position：absolute;

第一种：margin:0 auto;

第二种：left:50%;

//margin-left:-150px;

top:50%;

//margin-top:-150px;

位移居中：transform：translate（-50%，-50%); 位移自己的高度、宽度的一半代替margin-left-top

}

层级关系

标准流<浮动<定位

相对、绝对、固定默认层级相同，此时html中写在下面的元素层级更高，会覆盖上面的元素

属性z-index

整数；取值越大，显示顺序越靠上

装饰

垂直对齐方式：vertical-align

属性值**:baseline默认基线对齐 top 顶部对齐 middle中部对齐 bottom底部对齐**

浏览器遇到行内和行内块标签当做文字处理，默认按基线对齐

vertical-align：middle+text-align：center 居中

父text-align 子vertical-align

光标

属性：cursor

属性值：default 箭头默认 pointer 小手，提示点击 text工字型选择文字 move 十字光标移动

圆角

属性：border-radius

取值：数字+px 百分比

border-radius：左上右上右下左上10px 20px 40px 80px

border-radius：左上右上坐下右下 10px 40px 80px

border-radius：左上右下右上左下

圆：border-radius：50%

**胶囊：**border-radius：盒子高度的一半

溢出部分显示效果overflow

属性overflow

属性值 visible 默认溢出可见 hidden溢出隐藏 scroll一直显示滚动条 auto是否溢出自动显示或隐藏滚动条

元素本身隐藏

1、visibility：hidden 占位隐藏

2、display：none不占位隐藏

元素整体透明

属性 opacity

属性值0-1之间的数字

边框合并

让相邻表格边框进行合并，得到细线边框效果

代码border-collapse：collapse；

table{border：1px soild #ccc;   /加给table标签/border-collapse;}th,td{border:1px solid #ccc;}

Css画三角形技巧

1、设置盒子

2、设置四周不同颜色的边框

3、将盒子宽高设置为0，仅保留边框

div{width:0;height:0;/transparent:透明/border-top:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;
}

获得焦点伪类选择器

input：focus{background-color：#ccc；
}

表单控件获取焦点时默认会显示外部轮廓线

属性选择器

例：input[type=“text”]{}

精灵图

项目中将多张小图片，合成一张大图片，这张大图片成为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

1、创建盒子，设置盒子尺寸和小图尺寸相同

2、将精灵图设置为盒子的背景图片

3、修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y;

背景图大小

background-size: 宽度高度；

取值：

数字+px

百分比

contain等比例缩放，不超出盒子最大盒子可能会留空白

cover 覆盖，刚好填满整个盒子会使图片显示不全

background连写拓展

background：color image repeat position/size；

background-size和background连写设置，需要主要覆盖问题；

解决：1、要么单独样式写连写下面

2、要么单独的样式写连写里面

阴影 box-shadow

取值： h-shadow 水平偏移量

v-shadow 垂直偏移量

blur 模糊度

spread 阴影扩大

color 阴影颜色

inset 阴影改为内部阴影

过渡transition

取值：过渡的属性 all：所有能过渡的属性都过渡具体属性名：width ：只有width能过渡

过渡时长数字+s

注：

1、过渡需要：默认状态和hover状态样式不同，才能有过渡效果

2、transition属性给需要过渡的元素本身加

3、transition属性设置在不同状态中，效果不同

①给默认状态设置，鼠标移入移出都有过渡效果

②给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

.box{width:200px;
height:200px;
background-color:pink;
//transition:width 1s;
transition:all 1s;
}
.box:hover{width:600px;background-color:red;}

DOCTYPE文档前置

!DOCTPYE html 文档类型说明，告诉浏览器该网页的ht-ml版本

html lang=“en” 标识网页使用的语言作用：搜索引擎归类+浏览器翻译 zh-CN简体中文/en英文

字符编码 <meta charset=“UTF-8” 标识网页使用的字符编码作用：保存和打开字符编码统一设置，否则会乱码 GBK/G-B2312

SEO标签

meta name=“title” content=“…”

title：网页标题标签例：百度搜索出来的标题链接标签

description：网页面试标签标题链接下面标签

keywords:网页关键词标签

favicon-标题图标

link rel=“shortcut icon” href=“(ico图标路径) favicon.ico” type=“image/x-icon"

网页标签页上的图标

base.-css

/* 把我们所有标签的内外边距清零 */

{
margin: 0;
padding: 0;
/* css3盒子模型 /
box-sizing: border-box;
}
/ em 和 i 斜体的文字不倾斜 /
em,
i {
font-style: normal
}
/ 去掉li 的小圆点 */
li {
list-style: none
}

img {
/* border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 /
border: 0;
/ 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}

button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}

a {
color: #666;
text-decoration: none
}

a:hover {
color: #c81623
}

button,
input {
/* “\5B8B\4F53” 就是宋体的意思这样浏览器兼容性比较好 /
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
/ 默认有灰色边框我们需要手动去掉 */
border: 0;
outline: none;
}

body {
/* CSS3 抗锯齿形让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}

.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}

.clearfix {
*zoom: 1
}

引入字体-

网址：https://www.dafont.com/

下载字体，导入文件

建立一个css，这里直接用字体名字命名

[外链图片转存中…(img-touaXkuP-1661866594447)]

引入页面css和字体css[外链图片转存中…(img-6uSaz2XU-1661866594449)]

[外链图片转存中…(img-InbgtfRg-1661866594450)]