阅读 44

html基础知识记录(一)

(说明:该文档中的内容为平常积累与其他博客和视频中积累的内容,如果有错误,还请指出,看到后会进行修改)

html5支持标签快速查询

www.html5star.com/manual/html…

CSS属性兼容性查询

www.caniuse.com/

vscode快速生成代码:

(按下鼠标中键拖动可批量选中代码)

格式:

(h\[id="id\[id="id"]*5>{$个内容})*2

相当于

1个内容

2个内容

3个内容

4个内容

5个内容

1个内容

2个内容

3个内容

4个内容

5个内容

乱数假文(vscode)

快捷用法:Lorem单词数

例如:

Lorem20

结果:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus vitae repudiandae commodi blanditiis ad ut fugiat sequi eius neque soluta!

取消缩进

shift+Tab

html实体字符

1) &单词

    例如:

        小于:  <

        大于:>

        空格: 

        版权:©

        &符号:&

2) &#数字(不常用)

map元素

www.w3school.com.cn/tags/tag\_m…

左上角为原点,水平方向为x,垂直方向为y

(可以理解为:类似于canvas的使用方法)

figure元素

figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示 网站制作 页面上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

例如:

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
复制代码

音视频格式兼容:

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio> 
复制代码

列表元素:

有序列表:

ol>li

无序列表:

ul>li

定义列表:

dl>dt (dt:标题)

dl>dd (dd:术语描述)

容器元素

header:页头

footer:页脚

article:通常表示整篇文章

section:文章章节

aside:侧边栏

nav:导航

元素包含关系

块级元素可以包含行级元素,行级元素不可包含块级元素

例如:

h元素(标签)中不可包含p元素(标签)

h元素(标签)中不可包含div元素(标签)

字体

字体分为衬线字体和非衬线字体

选择器

元素选择器:直接是元素(标签)的名字 

(PS:一般情况下不建议常用,因为后期如果界面改动较大时,改起来会不太方便)

id选择器:#id

类选择器:.class

通配符选择器:*

属性选择器:[属性值=值] 

伪类选择器:例如: :hover, :link

ps:{
一般顺序为:

    1) link(未访问状态),

    2) visited (访问过后的状态)

    3) hover (鼠标悬停状态)

    4) active (激活状态,鼠标按下但未松开时的状态)

}

伪元素选择器:例如: ::before,::after

选择器组合

    1) 包含选择器: 空格 (例如:#header p (id为header下p元素))

    2) 子元素选择器:> (例如:div > span)

    3) 相邻选择器:+(例如:.red+li (class为red且下一个为li的元素))

    4) 兄弟元素选择器:~ (例如:.red+li (class为red且下一个为li的元素的兄弟元素(该元素之后)))

    5) 并列:逗号(例如:.red, .content)

层叠

1. 重要性:(从高到低)

    1)!important (尽量不用)

    2) style中的普通样式(包含CSS文件与style属性中的样式)

    3) 浏览器默认样式

2. 特殊性

    看选择器:选择器选中越窄,越特殊

    具体规则:通过选择器,计算一个四位数(256进制,每255进1,从0开始)

        1) 第一位:如果样式为 内联样式 ,计数器+1  (例如:html文件中的

,则该background-color:red的计数器第一位为1)

        2) 第二位:所有id选择器数量 (例如:css文件中的 #content{background-color:red},则该background-color:red的计数器第二位为1)

       3) 第三位:所有类选择器,属性选择器,伪类选择器数量(例如:.class、[]、:class)

       4) 第四位:所有元素选择器,伪元素选择器的数量(例如:div、::after)

3.比较源次序

    代码书写靠后的胜出(个人比较常用)

继承

css中的大部分字体属性、文字内容属性会从父元素继承到子元素中

所以:一般设置某html页字体,选中body,然后,在body中设置字体信息即可

属性值得计算过程

 1) 确定声明值

      没有冲突的声明,直接作为css属性

 2)层叠冲突

      对样式表存在冲突的声明,使用层叠规则,确定css的属性值

 3)使用继承

      如果仍然还没有值,则对可以使用继承的值使用继承,继承父元素的值

 4) 使用默认值
如果还没有值,则使用默认值

两个特殊的css值

值为父元素的值: inherit (例如:color:inherit)

初始值:initial (例如:color:initial)

行盒和块盒

1) 行盒: disaplay:inline

  1. 块盒:display:block

3) 行内块:display:inline-block

行盒的盒模型

显著特点

1)盒子沿着内容延伸

2) 行盒不能设置宽高

3) 内边距(padding)水平方向有效,垂直方向仅会影响背景,不会实际占据空间

4) 边框(border)水平方向有效,垂直方向不会实际占据空间

5) 填充 (margin) 水平方向有效,垂直方向不会实际占据空间

行内块的盒模型

1) 不独占一行

2)盒模型中的所有尺寸都有效

常规流布局

又名:常规流,文档流,普通文档流,常规文档流

上下边距的合并

两个常规流块盒,上下外边距相邻,会进行合并

详情请见:(BFC原理)zhuanlan.zhihu.com/p/25321647·

浮动(float:兼容性高)(float的大部分功能flex可以替代)

排列

1)left:左浮动,元素靠上靠左

2)right:右浮动,元素靠上靠右

3)默认:none

4)浮动盒子在包含快中排列时,会避开常规流盒子

5)常规流盒子在排列式,无视浮动盒子

  1. 外边距合并不会发生

基本特点

1) 当一个元素浮动后,元素必定为块盒

2)浮动元素的包含快,盒常规流一样,为父元素的内容

盒子尺寸

1)宽度为auto时,表示适应内容宽度

2)  高度为auto是,与常规流一致,适应内容高度

3)margin为auto时,为0

4)行盒在排列时,会避开浮动盒子

5)  如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字(该行叫做匿名行盒)

高度坍塌

1)高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动

2)  清除浮动:css属性:clear 

     - 默认:none

     - left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方

     - right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方

     - both:清除右浮动,该元素必须出现在前面所有浮动盒子的下方

3)不使用清除浮动,解决高度坍塌问题:

      在浮动的父元素上添加属性:overflow: hidden;

文章分类
前端
文章标签