伪类和伪元素,Emmet语法,CSS特性,列表,HTML-表格,HTML-表单元素,CSS属性元素类型,盒子模型等
伪类和伪元素
伪类(pseudo-classes)
动态伪类(dynamic pseudo-classes)
- :link:未访问
- :visited:已访问
- :hover:移动上方
- :active:点击时
- :focusa:聚焦时
ps:
- a元素可以设置以上五种属性(顺序lvfha)
- strong元素有hover/active
- focus用于a/input,格式:元素:focus
- ==去掉a元素聚焦状态的两种方==式:设置a:focus{outline:none}(隐藏);为a设置tabindex属性=-1(tabindex:表示tab键选中元素的顺序,为-1时表示不被选中)
- 网页中利用tab键可以focus内容
- 在给a设置(a{color:red})时相当于给a的所有动态伪类都设置了color=red
目标伪类(target)
元素状态伪类(UI element state )
- :enable
- :disable
- :checked
格式:
<button ==disabled==>我是按钮
ps:设置过程中:
- 伪类写法(==:disabled {}==)
- 属性选择(==button[disabled]==)
== button一般不常用==
结构伪类(structural)
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :nth-child(num):正向数子元素的第num个
(区分: 交集选择器+结构选择器 是p元素且是p同一级别的第三子元素->p:nth-child(3);后代选择器+结构选择器:p元素后代的第三个子元素->p :nth-child(3)) - :nth-last-child(num):倒向数第num个(num=-n+3->表示倒数3个)
- :nth-of-type(num):指定元素下的第几个元素(只看指定元素)
- :nth-last-of-type:倒数指定元素的第几个元素(只看指定圆度)
- :nth-child(num):正向数子元素的第num个
ps:num形式(具体数字;跟字母[2n偶数,2n+1奇数等])
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
- :first-child,等同于:nth-child(1)
- :last-child,等同于:nth-last-child(1)
- :first-of-type,等同于:nth-of-type(1)
- :last-of-type,等同于:nth-last-of-type(1)
- :only-child,是父元素中唯一的子元素
- :only-of-type,是父元素中唯一的这种类型的子元素
- :root:给html设置属性==html{}
- :empty->内容为空的元素(空格不算为空)
否定伪类(negation)
- :not(x)->不含某个元素的样式设置
- x是一个简单选择器,包括:元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
- ==否定选择器只支持简单的选择器不支持组合==
伪元素
伪元素表示:
- :first-line、::first-line->首行文本设置属性(可使用:word-spacing、letter-spacing、text-decoration、text-transform、line-height
字体属性,颜色属性,背景属性) - :first-letter、::first-letter->对首字母设置属性(可使用:word-spacing、letter-spacing、text-decoration、text-transform、line-height,text-decoration、text-transform、letter-spacing、word-spacing(适当的时候)、line-height、float、vertical-align[只有当float是none时])
- :before、::before->用来在元素之前插入内容
- :after、::after->用来在元素之后插入内容分
- befor,after其中的content属性不能省略
- content插入内容可以是文字[“文字”],可以使图片[url{‘’}]
- display属性可以改变元素的特性使其变为行内元素,解决不能设置宽高的问题
为了区分伪元素和伪类,建议伪元素使用::
Emmet语法
- 生成html代码两种方式
- !+enter
- html:5
- 生成子代元素>
- 生成兄弟元素+
- 生成多个元素*num
- 上一级元素^
- 分组”()
- 属性(id属性(#id_name),class属性(.class_name),普通属性([title=”name”]))
- 数字$
- 内容{}
- 隐氏标签(默认情况下.name表示div,ul中.name表示li,table中.name表示tr)
- CSS
- 宽高w200+h200+m20+p40
- fz:20->font-size:20px
- fw700->font-weight:700
- lh20px->line-height:20px
- bgc->background-color:#
- dib->display:inline-block
==Emmet语法不留空格==
CSS特性
- 继承:某些属性可以继承(color,font-size,line-height等),某些不能继承(width),==不能继承的元素给他设置inherit使其强制继承或者单独给该元素设置属性==
- 继承可以通过浏览器进行查看
- CSS继承的是==计算值==,并不是当初写属性时的指定值(字面值)
- 层叠
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS属性的使用方式不对
- 元素不支持CSS属性(span元素默认不支持height,width)
- 浏览器不支持CSS属性(旧的浏览器不支持CSS3的属性)
- 被同类型的CSS属性覆盖
ps:充分利用浏览器的开发者工具进行调试(增加修改样式)查错
列表
列表元素
- 有序列表:0l.li
- 无序列表:ul,li
- 定义列表:dl,dt,dd(后两者是兄弟关系)
ps:
- 列表操作过程中存在左边的间距:margin-block-start: 1em;浏览器默认设置的结果
CSS列表属性
- list-style-type:设置li元素前面标记的样式
- disc(默认实心)(实心圆)、circle(空心圆)、square(实心方块)
- decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)
- lower-alpha(小写英文字母)、upper-alpha(大写英文字母)
- none(什么也没有)
- list-style-image:设置某张图片为li元素前面的标记,会覆盖list-style-type的设置
- list-style-position:设置li元素前面标记的位置,可以取outside、inside2个值(表示列表标记符号是否在内容)
- list-style(以上三者的缩写属性,不分先后顺序)一般设置为none无处列表前面的符号
HTML-表格
表格元素
- table表格
- border(边框高度)
- cellspadding(单元格内部的间距)
- cellspacing:单元格之间的间距
- width:表格的宽度
- height:表格的高度
- align:表格的水平对齐方式(left,right,center)
- tr表格中的行
- td行中的单元格
- tbody
- caption
- thead
- tfoot(一般不用)
- th表格的表头单元
- tr th td属性:
- ==设置细线边框的方式==
- ==给table设置相框合并border-collapse:collapse==
- ==css样式设置表格居中:[margin 0 auto]==
- border:宽度 dashed/solid color
- border-spacing:设置单元格之间的距离,设置在table中
HTML-表单元素
form表单
action用于提交表单数据的请求url
method请求方法(提交数据浏览器发送的是http请求)
- get默认方式
- 请求URL后面以?的形式跟上发给服务器的参数,多个参数之间用&隔开,
- 由于浏览器和服务器对URL长度有限制,因此在URL后面附带的==参数是有限制==的,通常不能超过1KB
比如
http://ww.test.com/login?phone=123&password=234&sex=1
- post
- 发给服务器的参数全部放在==请求体==中
- 理论上,post传递的数据量没有限制(具体还得看服务器的处理能力
- 通过浏览器进行查看:检查->手机虚拟->network->ALL->点击左侧选项->点击head->查看请求体
- get默认方式
target在什么地方打开erl(一般不写)
enctype
- 规定在向服务器发送请求之前如何对数据进行编码
- 取值
- application/x-www-form-urlencoded:默认的编码方式
- ==multipart/form-data:文件上传时必须为这个值,并且method必须是post==
- text/plain:普通文本传输
accept-charset:规定表单提交时使用的字符编码默认unknown(一般不写)
- input(单行文本输入框,单选框,复选框,按钮等元素)
- type(类型)
- text文本输入框,明文输入
- password文本输入框,密文输入
- radio单选框
- checkbox复选框
- button按钮
- reset重置
- submit:提交表单数据给服务器
- file:文件
- maxlength 允许输入的最大字数
- placeholder:占位字符
- readonly只读
- disabled禁用
- checked默认被选中(type为radio和checkbox才可用)
- autofocus:当页面加载时自动聚焦
- value取值->一般有输入的input不用设置value值,必须设置的是select,checkbox,select等
- form设置所属的form属性(填写form元素的id)一旦使用了此属性,input元素及时不写form元素内部,.他的数据也能提交给服务器
- type(类型)
- textarea(多行文本框)
- cols
- rows
- resize(可选值)
- both(默认)
- horizontal
- vertical
- select,option(下拉选择框)
- select
- multiple可以多选
- size显示多少项
- option
- 默认被选中
- select
- button按钮
- label表单元素的标签(一般和input绑定使用)
- fieldset表单元素组
- legend:fieldset的标题
ps:
checked属性应用在radio和checkbox
selected应用在select元素中
input的value值
- 设置按钮的文字
- 设置radio和checkbox被选中时,提交给服务器的值
- 设置文本输入框的默认值
假设服务器那边规定phone是手机,password是密码,code是验证码
但是前端页面这边密码的name写成了pwd,那么后果是:服务器接收不到密码值文件上传的必要条件
- method=”post”
- enctype=”multipart/form-data”
- input要有name值
->
id和name值不一定要一致,name值是由服务器(后台)决定的
checkbox的name和value值都是由服务器决定的,同一种类型的checkbox,name值要保持一致
重置提交的前提(二者的value值可以省略):
- 1.==type是reset类型==
- 2.==所有的内容必须在一个整体form元素==
==有name属性,才会提交给服务器==
==按钮的两种表达==
- input元素->type=”button”(显示按钮通过value设置)
- button元素->type(默认submit
radio必须设置相同的name值才能设置单选框
input和label的关系
- 给label的for属性和input的id属性绑定相同的名称,将二者关联起来,点击其中一个功能都会执行
去除input的tab选中效果
- 设置outline:none
- 设置tabindex=-1
表单提交:将用户在input中输入的内容提交给服务器(两种方式)
- 传统的表单提交(SU优化)
- 将所有的input放在form中
- form设置action(服务器的地址)
- input/button类型是submit
- 点击submit,自动将所有的数据提交给服务器
- 弊端:
- 会进行页面的跳转(意味着服务器必须提前将一个页面写好,前端直接展示这个页面)[服务器提前将页面写好:==服务器渲染==]
- 不方便进行表单数据的验证
- 前后端分离
- 传统的表单提交(SU优化)
根据元素的显示(都不能在同一行显示)类型,html元素可以分为两类
- 块级元素
- 独占父元素的一行
- 常见元素有:div,p,h1-h6,ul,ol,li,dl,dt,dd,table,form,article,aside,footer,header,hgroup,main,nav,section,blockquote,hr等
- 行内元素
- 多个行内元素可以在同一行显示
- 常见的元素:span,strong,a,imag,code,iframe,label,input,button,canvas,embed,object,video,audio等
- 块级元素
根据元素的内容(是否浏览器会替换元素)类型,分为两类
- 替换元素(replace elements):元素本身没有实际内容,浏览器根据元素的类型和和属性来决定元素的具体显示内容
- img,input,iframe,video,embed,canvas,audio,object等
- 非替换元素(non-replace elements)
- div,p,pre,h1-h6,ul,ol,li,dl,dt,dd,table,form,article,aside,footer,header,hgroup,main,nav,section,blockquote,hr,a,strong,span,code,lable,等
- 替换元素(replace elements):元素本身没有实际内容,浏览器根据元素的类型和和属性来决定元素的具体显示内容
元素分类总结
元素分类 | 是否替换 | 具体元素 | 默认特征 |
---|---|---|---|
块级元素(block-level elements) | 替换元素 | ||
块级元素(block-level elements) | 非替换元素 | div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等 | 独占父元素的一行;可以随意设置宽高;高度默认由内容决定 |
行内元素(inline elements) | 替换元素 | img、input、iframe、video、embed、canvas、audio、object等 | 跟其他行内级元素在同一行显示;可以随意设置宽高 |
行内元素(inline elements) | 非替换元素 | a、strong、span、code、label等 | 跟其他行内级元素在同一行显示;不可以随意设置宽高;宽高由内容决定 |
CSS属性
- 块级元素的由来display
- block(==浏览器会默认给div/p/h1…元素设置了display:block==)
- inline(将block元素传回到行内元素)
- none(隐藏元素不占据空间)
- ==inline-block==
- 可以设置和其他元素在同一行
- 可以设置宽度和高度
- inline-block详解
- 可以让元素同时剧本块级,行内级元素的特征
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 宽高默认由内容决定
- 对外来说他是行内级元素
- 对内来说是块级元素
- 常见用途
- ==让行内级非替换元素(a,span)能够虽是设置宽高==
- ==让块级元素能够和其他元素在同一行显示==
- 可以让元素同时剧本块级,行内级元素的特征
- 浮动会触发==BFC==(BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。)
- visibility能控制元素的可见性
- 常见的两个值:
- visible:显示元素
- hidden:隐藏元素
- visible:hidden和display:none的区别
- visible:hidden看不见元素,还占着原来的位置
- disable:none不仅看不见元素,而且元素框也会被移出,不会占据任何位置
- 常见的两个值:
- overflow 用于控制内容溢出时的行为
- visible溢出内容依然可见
- hidden溢出的内容直接裁剪
- scroll溢出的内容被裁剪时,可以通过滚动机制进行查看(会一直显示滚动条区域,滚动条占用的空间属于width,height)
- auto自动根据内容是否一出来提供滚动机制
overflow-x和overflow-y两个属性可以分别设置水平和垂直方向(建议使用overflow,有些浏览器不支持)- 元素之间的空格(行内元素在编辑时会有回车显示空格),解决方案
元素代码之间不要留空格注释掉空格1
2<span>span11</span><!--
--><span>span2</span>设置父元素的font-size为0,然后在元素中重新设置自己需要的fongt-size(此方法在Safari不适用)- ==给元素添加float属性==
- 注意:
- 块级元素,inline-block(行内级元素)
- 一般情况下可以包含任何元素
- 特殊情况下p元素不能包含其他块级元素
- 行内元素(a,span,strong)
- 一般情况下只能包含行内元素
- 块级元素,inline-block(行内级元素)
盒子模型(Box Model)
- 内容相关属性
- width
- min-width
- max-width
- height
- min-height
- max-height
- 内边距属性
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding:padding-top,right,bottom,left顺序
- 按照顺时针方向设值:top、right、bottom、left
- 如果缺少left, 那么left就使用right的值
- 如果缺少bottom, 那么bottom就使用top的
- word-break
- 外边距相关属性
- margin-top
- ==如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素==
- margin-right
- marin-bottom
- 如果块级元素的底部线和父元素的底部线重写,并且父元素的高度是==auto==,那么这个块级元素的margin-bottom值会传递给父元素
- margin-left
- margin:是margin-top、margin-right、margin-bottom、margin-left的简写属性
- ==margin的上下折叠==(垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做==collapse==(折叠)
- 水平方向上的margin(margin-left、margin-right)永远不会collapse
- 合并规则两个值进行比较,取较大的值
- ==防止margin collapse==?
- ==只设置其中一个元素的margin==
- ==父子块级元素之间margin的折叠==
- ==如何防止出现margin的上下传递问题==
给父元素设置padding-top\padding-bottom给父元素设置border- 触发BFC: 设置父元素的overflow为非visible[auto(推荐)]
- 给父元素设置padding
- ==触发BFC(block-format-content块级格式化上下文)的方式:==
- 设置overflow为非visible
- 设置浮动(float)
- ==margin上下同时设置会出现外边距合并==
- ==margin左右同时设置会进行叠加==
- 建议
- margin一般用来设置兄弟之间的间距
- padding一般用来设置父子之间的间距
- margin-top
- 英文单词默认是不能断开的,所以才会出现溢出div的情况,
- 1.通过设置word-break使其换行(==wordbreak:break-all==)
- 2.英文字母中间添加空格
- border边框
- 边框属性
- 边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width是上面4个属性的简写属性
- 边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
- 边框样式
- border-top-style、border-right-style、border-bottom-style、border-left-style
- border-style是上面4个属性的简写属性
- border-style取值
- none
- dotted一系列点
- dashed虚线
- solid
- double边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值
- groove雕刻在画布之内
- ridge画布中凸出来
- inset:嵌在画布内
- outset:inset相反
- border-top,border-right,border-bottom,boder-left(按照顺时针方向)
- border-top:2px solid red
- 边框颜色,宽度,样式,的编写顺序随意
- border统一设置四个方向的
- border: 2px solid #f00;
- 边框宽度
- 边框形状
- 立体矩形(设置宽高以及其中两个边框样式)
- 梯形(设置宽高和背景以及四个边框)
- 三角形
- (设置宽高为0,以及四个边框样式[其中三个颜色设置为透明tranparent]
- 设置上三角在设置下三角时可以通过transform旋转生成下三角
- 设置圆(通过border-radius,设置百分数50%)
- 圆角半径属性(顺时针方向)单位pt
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border---radius定义的是四分之一椭圆的半径
- 第一个值是水平半径
- 第二个值是垂直半径
- ==border-radius可以设置百分比==
- 参考的是border-box的宽度
- border-radious:是4个值的顺序是top-left、top-right、bottom-right、bottom-left(顺时针方向)
1
2border-radius: 10px 20px 30px 40px/15px 25px 35px 45px ;
斜线/前面是水平半径,后面是垂直半径
- 边框属性
- 行内非替换元素不起作用的属性
- width
- height
- margin-top
- margin-bottom
- 以下属性对行内非替换元素的效果比较特殊
- padding-top,padding-bottom,上下方向的border
- 使用在行内元素中元素padding上下和border上下设置只是扩大了span的空间并覆盖上下的元素内容,而不占据空间,上下块也并不会发生上下移动,
- outline属性
- outline设置元素的外轮廓
- ==不占用空间==
- ==默认显示在boder的外面==
- 相关属性:
- outline-width
- outline-style:取值和border一样
- outline-color
- outline:outline-width、outline-style、outline-color的简写属性,跟border用法类似
- 应用实例
- 去除a元素,input元素的focus轮廓效果
- outline设置元素的外轮廓
- box-shadow
- box-shadow可以设置一个或者多个阴影
- 每个阴影用
表示 - 多个阴影之间用逗号隔开,从前到后叠加
的常见格式: box-shadow: 64px 38px 50px 8px rgb(221, 44, 142) inset,50px 50px 10px 20px rgb(64, 223, 112);1
2
3
4
5
6
7
8
9
10
11
12
13
14<shadow> = inset? && < length>(2,4) && <color>?
(1)第1个<length>:水平方向的偏移,正数往右偏移
(2)第2个<length>:垂直方向的偏移,正数往下偏移
(3)第3个<length>:模糊半径(blur radius)
(4)第4个<length>:延伸距离
(5)<color>:阴影的颜色,如果没有设置,就跟随color属性的颜色
(6)inset:外框阴影变成内框阴影
ps:
1.正则表达式中?表示0个或者1个
2.<>里面的内容换具体的内容eg:red
3.&&表示此符号连接的内容之间先后顺序
4.(2,4)表示可输入2到4个数值
```
- 每个阴影用
- box-shadow可以设置一个或者多个阴影
ps:box-shadow设置时
(1)若水平偏移为0,竖直不等于0,则设置三边阴影
(2)w=0,h=0,设置出来四周阴影
1 | - text-shadow类似box-shadow,用于给文字添加阴影效果 |
1.设置2dao3个length
2.(2,3)分别是x,y,blur-radius(模糊半径)
3.color颜色
ps:相对于box-shadow没有inset,没有缩放长度
1 | - box-sizing属性:设置盒子模型中宽高的行为 |
水平居中:设置块级元素本身
margin:0 auto
居右
margin:auto 0
### 快捷键
- Alt+shift+F,代码格式化
- alt+下键,将内容下移
- 颜色设置中#666(相同的数字代表灰色)
- [颜色选择网址](https://flatuicolors.com/)
- [web前端资源网"学习网址"](http://www.webqdkf.com/)
- [网站模板](https://72k.us/file/21793581-422825200)
本文链接: https://sparkparis.github.io/2020/03/24/HTML-%E7%AC%94%E8%AE%B03/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!