重新学习HTML+CSS文档参考 W3C MDN HTML的标签元素的结构元素标签的类型行内元素块级元素行内块

文档参考

W3C MDN

HTML的标签

HTML不区分字母大小写，但建议小写

元素的结构

元素标签的类型

行内元素

不独占一行,行内元素宽高由内容撑开,无法设置宽高

块级元素

独占一行,可以设置宽高

行内块级元素

不独占一行,可以设置宽高

以上的除块级元素,其他宽高默认是由内容决定

隐藏元素

display:none

不会占据空间,元素还在html里没有移除

visibility:hidden

元素不可见,但占据空间

利用rgba中的a透明度隐藏(设置为0)

这个是对单独元素的设置透明,不会影响子元素

opacity设置透明

这个是直接整个设置透明,如果你还有一些子元素的话,子元素透明度也会变更

特殊的标签

!DOCTYP

<!DOCTYPE html>   //声明html的版本,告诉浏览器什么版本就用什么版本来解析

head

给网页添加一些配置信息

body

我们能看到的元素都是放到body元素中

:::info 所有的标签都可以使用div或者span去代替,因为不同的标签只是使用了不同的css样式或者是一些js的行为.我们还需要他们的原因是语义化 :::

a标签 :::info a标签也可以填写替他的url地址 ::: a. 下载链接 b.mailto:邮箱地址
link
1. href //外部资源的链接
2. rel指定链接资源的类型
  1. icon //站点图标
  2. stylesheet //CSS样式资源e

可替换资源

类似于img和script标签都是属于可替换资源,把请求到的资源替换掉当前标签的内容

常见的全局属性

id
class
title
style

什么是SEO

:::info SEO是搜索引擎优化的一种方案,而很多的搜索引擎是不公开他们爬网页的算法.但我们通过总结的出来的SEO优化方案,因为爬虫爬的也是网页的代码.我们针对一些特定的代码做优化即可. :::

使用语义化标签,配置head信息等等

认识字符编码

由于计算机只能处理0和1.所以我们需要一些标准把我们的自然语言转换为机器语言.而自然语言又有很多种.所有需要制定多种的标准.但有一个万国码UTF-8.

理解字符编码

CSS美化

有两种方式

对样式的美化
对布局的美化

这两个你是可以同时美化的

CSS文件导入

//两种方式
@import url("路径")
@import "路径"

常见的css快捷语法

font-size   //fz
background-color  //bgc

有关于文本的css属性

text-decoration

none //没有装饰,一般是去a标签的装饰
underline //下划线,a标签默认自带
line-through //~~删除线~~

text-align

right
left
center
justify

这个text-align可以给img和input设置,并且有效果.意思就是只能给子元素是行内或行内块的元素设置该属性才能生效

#parent {
			height: 600px;
			background-color: red;
			text-align: center;
}
.child {
			display: inline-block;
			background-color: aqua;
			width: 200px;
			height: 200px;
}

vertical-align

这个属性会影响每一行盒中行内元素的对其方式,默认值是基线对其

底部多几像素都是因为基线对齐,因为行内元素都需要预留一点空间.我们可以更改对齐的方式或者更改成block也可以解决这个问题.

letter/word-spacing

字母/文字之间的间距

有关于字体的CSS属性

font-size

设置字体大小,

font-family

设置网页字体,一般只需要设置一次,因为有继承,我们可以给根元素设置一次即可

font-weight

字体的加粗值,可以设置1-1000的值

font-style

可以设置字体的斜体

line-height

行高严格的定义:两行文字基线之间的距离

CSS的选择器

常用选择器

类选择器
id选择器
属性选择器
标签选择器
兄弟选择器

<div class=".one"></div>
<div></div>
<div></div>


.one+div{
  //会选中.one下面第一个div
}
.one~div{
  //除了.one以外下面所有的div都被选中
}

通用选择器 //不建议使用因为使用的原理是给标签遍历然后依次添加属性.(浪费性能)

动态选择器(伪类)

就是所谓的伪类选择器,因为每一个标签都可以有不同的状态

:link //还没访问
:visited //访问过后
:hover
:actived //鼠标点击,但没有松手
:focus //一般是给input选中后的一个伪类选择器

如果要一起使用的话,这个是有顺序要求的LVHA

伪元素

::first-line
::first-letter
::after
::before

伪元素的content属性一定要写,不写是不会显示的

常见的CSS继承属性

如果自己元素有这个属性,会优先使用这个属性,不管继承过来的属性权重有多高

CSS选择器的优先级

!important //10000
内联样式 //1000
id选择器 //100
类选择器 //10
标签选择器 //1
通用选择器 //0

选择器可以累加的

盒子模型

content-box

width

默认值为auto,而auto针对每个元素的值都不一样

height

默认值也是auto

padding

padding调整与元素内容的距离.也会影响盒子的宽高.可以改成border-box解决

margin

可以调整元素与元素之间的距离,margin边距左右是不会折叠,上下会折叠,解决方案是开启BFC

如果你给一个块级元素盒子设置宽度,因为块级元素是要占据一整行的,margin-right就会补充掉后面的.然后如果你设置了margin:0 auto的话.左右两边auto就会平均分配

border-box

表单

input

text

文本类型

button

按钮

submit

按钮的不同的提交方式,会和form元素中的action属性配合使用

reset

重置按钮,会把其他的表单内容清空 ,button元素也可以添加这个type="reset"属性

flie

上传文件表单

label

点击指定的label元素触发自动聚焦

<label for="username">
  用户名:<input id="username" type="text">   //点击lable里的任何元素.都会自动聚焦指定的input
  //定义id为了label属性可以捆绑
    
  </input>
</label>

结构伪类

:nth-child(n)

中n可以取自然数0,1,2,3.......,也可以写2n,4n+1等等写法,把自然数带进去即可

从前往后数

div:nth-child(3){//第三个元素得是个div元素才能选中
  color:red
}

nth-last-child(n)

后面数

:nth-of-type

会去除别的干扰元素选择指定的元素

<div></div>
<div></div>
<p></p>
<div></div>//这个会被选中,因为去除了p元素,原理类似于获取了div的所有元素,并在指定的下标添加对应属性
<div></div>
<div></div>
div:nth-of-type(3){
  color:red
}

root

选中html根标签元素

empty

选中内容空的元素

<div></div>   //因为标签内容为空,所以被empty选中
:empty{
  color:red
}

border图形

border也是可以画图形的,最简单的就是三角形

<div></div>
div{
      width: 200px;
			height: 200px;
			border: 100px solid red;
			border-left-color: transparent; //设置为透明色
			border-right-color: transparent;
			border-bottom-color: transparent;
			box-sizing: border-box;
}

Web Font

引用一些自定义的字体,操作系统没有的字体自己可以在网上下载并且放到项目目录中

<body></body>
@font-face{
  font-family:"why";//这里设置引入的字体名字,然后在外面的font-family中使用该名字
  url("");//字体的路径引入
}
body{
  font-family:"why";   //font-family是有继承性的
}

CSS精灵图

精灵图里含有很多个小的图片然后使用图片定位原理达到一张图就可以弄出多张图的效果

类似于上图,最简单的优势就是减少发送请求

i{
  background-img:url("精灵图路径");
  background-repeat:no-repeat;//不重复
  display:inline-block;//因为i标签是一个行内元素,不能设置宽高
  //得找到指定的精灵图中的图片的宽高
  width:;
  height:;
  background-position:;//量好指定的位置,这个可以借用一些工具网站量
}

CSS元素定位(position)

:::info 脱离文档流,不会影响文档流得元素 :::

static

position的默认值,如果是这个值得话top,left,right,bottom这些值是没有效果

relative

相对定位,会相对与自己得位置去调整

absolute

设置后会脱离标准流,定位得位置会是里绝对定位中最近得那个脱标元素不管是不是行内元素还是块元素,都可以设置宽高

fixed

相对于浏览器视口得位置定位,脱离标准流,不管是不是行内元素还是块元素,都可以设置宽高

sticky

是结合相对定位和固定定位的一个属性,由于以前的浏览器兼容性很差很少使用这个属性.但现在我们基本不会考虑这个问题.

相对定位不会脱离文档流,然后再固定定位就会黏到浏览器指定位置的视口中(所以需要这个功能需要指定一个top值或者bottom值)

定位的公式

auto的取值

auto的取值是最终会交给浏览器去决定,一般的会有一下决定

行内元素->包裹内容
块级元素->包含块的宽度(可以理解成父元素)
行内块元素->包裹内容

z-index

这个属性只会和定位属性的元素才能生效.

浮动

浮动元素不能和行内元素进行层叠,行内元素会被浮动元素推出

将行内级元素的空格删除

删除换行
将父元素的设置font-size:0,子元素就要设置回来

Flex布局

flex布局是一种按行或者按列的一种一维布局方案

container设置的属性

flex-direction

修改主轴的方向

row
row-reverse
column
colun-reverse

flex-wrap

wrap
wrap-reverse

flex-flow

flex-direction和flex-flow的缩写

justify-content(主轴方向控制)

flex-start标签
flex-end
center
space-between
space-around

align-itms(单行交叉轴排布)

弹性盒子中的高度去掉的话,stretch属性会有拉伸效果,align-items的默认值是stretch

align-content(交叉轴间隔控制)在多行剩余空间

item设置的属性

order

调整item的顺序

algin-self

交叉轴单个item的排布方式

flex-grow

给item分配剩余空间

flex-shrink

给item分配压缩的空间

CSS动画

transform

translate的使用

平移元素

div{
  transform:translate(10px);//x轴平移10px,y轴平移0px
  transform:translate(10px,10px);//x轴平移10px,y轴平移10px
  transform:translateY(10px);
  transform:translateX(10px);   //XY这种写法只写一个,否则会覆盖
}

translate设置百分比的话是相对于自身的宽度和高度的.x轴就是宽度,y轴就是高度

scale

元素的x,y方向的二维缩放

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /*  /
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

Animation动画

Animation动画分为两步

只用keyframe定义动画序列
然后配置动画序列的名称,持续时间,动画曲线等

HTML语义化元素

header
section
- article
aside
footer

HTML的其他新增元素

audio

video

 <video src="视频资源地址" controls autoplay width="600">
  <source src=""></source> //这个是为了兼容性,如果video中的src地址中无法解析就会解析source中src的,这里可以写多个source
  <p>不支持视频解析,请更换浏览器</p>    //如果都不支持的话提示用户
</video>

新增的全局属性

data-*

<div data-name="zhangsan"></div>


//name:"zhangsan"
const dataset = document.queryslector("div").dataset

BFC

简介

margin为什么垂直方向会折叠,就是因为BFC中定义了margin在同一个BFC中,垂直方向就是会折叠.这是BFC其中之一的特点

解决高度塌陷的问题

使用BFC解决高度塌陷问题的话需要满足的两个条件

媒体查询

指定的设备或者指定的特性(例如屏幕像素),才会生效这个css文件

@import url(./index.css) (max-width:800px)  只有在最大宽度为800的时候才生效index.css这个文件
<link media="(max-width:800px)" href="./index.css"></link>//link的方式
  @media 规则{  //默认值为all
    div{
      color:red;
    }
}

CSS预处理器

less转换成CSS的方式

npm lessc工具
vscode插件
cdn

Less定义变量

@test:#f5f5f5 //定义变量
  div{
    color:@test    //使用变量
}

Less元素嵌套

div{
  div{
    p{
      
    }
  }
}

搭配结构伪类

div{
  div.item{
    &hover{
      //给div.item添加
    }
    &nth-child{
      //给div.item添加
    }
  }
}

移动端适配的方案

百分比方案

百分比的方案最大的弊端就是百分比是按照包含块的.这就会导致自适应只能依靠父元素的宽度.

rem加动态html的font-size

@media screen and (min-width:375px){
  font-size:24px;
}
@media screen and (min-width:414px){
  font-size:28px;
}

可以使用媒体查询动态使用font-size

js方案

使用到js的话就是操作DOM来操作,js获取视口宽度.动态设置font-size值.

 //1.获取html元素,后面设置html的font-size值
const html = document.documentElement
//动态获取视口宽度,设置font-size的值
function resize(){
  //获取html的视口宽度
  let htmlVW = html.clientWidth
  //设置fontsize的值,一般设置的值为html的视口宽度除以10
  let fontSize = htmlVW / 10 + "px"
  //给html设置行内样式
  html.style.fontSize = fontSize
}
//首次调用初始化
resize()
//视口监听,每监听到视口有改变及调用resize函数
window.addEventListener("resize",resize)

VW方案

如果你的视口宽度为414,1vw就等于4.14px