web前端概念

最新推荐文章于 2022-07-11 19:39:58 发布

k.omo

最新推荐文章于 2022-07-11 19:39:58 发布

阅读量1.1k

点赞数

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_56621561/article/details/121496315

版权

# 快捷键：

1.快速出代码结构的：

shift+!+回车

输入html:5+回车

2.保存：ctrl+s

3.全选：ctrl+a

4.复制：ctr+c

5.粘贴：ctrl+v

6.撤回：ctrl+z

7.注释：ctrl+/

# 三要素：

结构====html

表现====css

行为====js

# 创建站点（项目）的步骤

标签：

1.文章标题标签：h1-h6

2.段落：p

3.倾斜：i和em

4.加粗：b和strong

5.下划线：u

6.删除线:s和del

7.上标和下标:sup\sub

8.特殊

强制换行br

水平线：hr

9.特殊符号：

空格： ====常用

&emsp;=====空格比较大

版权：©

商标：®

大于号：>

小于号：<

10.列表

1.有序列表 ol+li

2.无序列表 ul+li

99.99%用无序

使用场景：新闻条、导航条

3.自定义列表 dl+dt和dd

使用场景：一般用来做图文混排效果

dd标签是对dt的解释说明

12.图片

img

属性：

src

alt

title

13.超链接a

属性

href

target

_self

_blank

# 表单

1.表单的作用：就是用来收集用户信息的。

表单标签：form

action属性：就是写服务器的地址的

method属性：提交方式

get

post

name属性：给表单起名字的

表单的控件：

文本输入框：input标签 type属性的值是text

密码输入框：input标签 type属性的值是password

提交按钮：input标签 type属性的值是submit value属性可以更改按钮的文字

重置按钮：input标签 type属性的值是reset

表单控件

文本输入框：<input type="text">

密码输入框：<input type="password">

提交按钮： <input type="submit">

重置按钮：<input type="reset">

普通按钮：

单选框:

如果要形成单选效果，必须起一样的名字 name属性起名字

属性：

checked：选中

disabled：禁用

多选：

一组多选的数据最好起一样的名字

下拉菜单：

select+option

属性：

selected：默认选中

上传文件框：<input type="file">

文本域（多行文本输入框）:

textarea标签

扩展：

1.label标签:

作用：扩大点击范围，用户点击文字可以定位到对应的框上面去

做法：

先把文字放到label标签里面

给框起id名字

把id名字写给for

2.隐藏域:

有一些数据想放到浏览器里面去，但是不想给用户看见

3.图像域：

表单新增

表单字段集(表单分组)：

fieldset:块级元素

默认有边框线

作用:做表单分组的

<legend>个人信息</legend>组标题

属性：align

left、right、center、justify（2端对齐）

# css

1.创建样式表的三种写法：

1.行内（内联）样式表：了解，不怎么用

位置：在标签名字的后面写style属性

2.内部样式表（课堂小案例一般用）

位置：在head标签里面写style标签

3.外部样式表（正式大项目）

位置：

第一步：在css文件夹之下创建一个css文件

第二步：需要在head里面引入外部css文件

2.更改某一个标签的样式的语法

选择器{属性:属性值;}

3.修改样式的单词

文字颜色：color

背景颜色：background-color

宽度：width

高度：height

文字大小：font-size

4.选择器：

标签选择器===直接写标签的名字

类选择器=====class .

id选择器====id # 有唯一性

通配符====*

后代====祖先后代{}

如果是空格所有的后代都可以找到

如果是大于号只能找儿子

群组======标志,

# 伪类选择器

常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active

```

/* 未访问的链接 */

a:link {

color: #FF0000;

}

/* 已访问的链接 */

a:visited {

color: #00FF00;

}

/* 鼠标悬停链接 */

a:hover {

color: #FF00FF;

}

/* 已选择的链接 */

a:active {

color: #0000FF;

}

```

# 选择器权重

行内样式表(1000) > id（100） > 类（10） > 标签（1） > 通配符（0）

后代：所有的选择器权重相加之和

3.和文字相关的样式

1.文字的颜色color

常见的色值写法

写颜色单词

rgb===取值区间在0-255之间

十六进制写法取值区间0-9a-f #00ff00

2.文字的大小font-size，默认情况下浏览器的文字大小是16px，不建议下12px以下，一般建议文字大小最好是偶数

3.文字的加粗font-weight

方式一：100-900 100是最细的 900是最粗的 400是正常值，是默认常见数值是400 500 和700

方式二：lighter变细 normal正常 bold加粗

4.调整字体font-family

在谷歌浏览器里面默认的字体是微软雅黑

字体可以写多个，中间通过逗号隔开。

首先会先找第一个字体，如果能用就用，不能用就往后依次去找。如果都找不见就采用默认。

注意点：如果是汉字或者有2个单词及以上都需要加引号

5.文字倾斜font-style

normal====正常，默认值===常用

italic===倾斜

6.文字修饰线 text-decoration:

overline;==上划线

underline==下划线

line-through===删除线、管穿线

none====没有线（常用）

7.如何让文字水平居中

text-align：调整文字的水平对齐方式

center：居中（常用，重要）

left：左对齐

right：右对齐

justify:2端对齐（了解）

8.让单行文字垂直居中（行高属性）

line-height

1.如果行高的值和高度一样，那就正好居中

2.如果行高的值小于高度，偏上

3.如果行高的值大于高度，偏下

如果是多行文字line-height调整的是行与行之间的距离。

9.首行缩进text-indent

一般用em单位写

首行缩进

em单位===相对单位，相对于父亲的文字大小

1em=font-size的大小

假设font-size大小是20px 那么1em=20px 2em=40px

假设font-size大小是30px 那么1em=30px 2em=60px

默认情况下1em是16px，因为默认情况下font-size是16px

注意：首行缩进可以写负数，如果写了负数那么字就向左走，就出屏幕了。

10.了解即可

/* 字间距 */

 /* letter-spacing: 10px; */

 /* 词间距 ===按空格来认*/

word-spacing: 30px;

11.大小写转换（了解即可）

text-transform: lowercase;将大写转成小写

text-transform:uppercase;将小写转成大写

text-transform:capitalize;首字母大写

# 浮动

div标签的特点：独占一行的

浮动的作用：就是实现横向排列效果的

float

特点：

给一个元素加了浮动之后这个元素就漂浮起来了，就不占位置了。后面的元素就会自动向前补齐

1.清除浮动====清除上一个浮动的元素对我造成的影响

clear:left;

clear:right;

clear:both;

# 和背景相关的样式

背景颜色：background-color

背景图片：background-image

背景图是否平铺：background-repeat

repeat：平铺====默认

no-repeat：不平铺

repeat-x：横向平铺

repeat-y：纵向平铺

背景图的位置：background-position：x y;（重要）

1.写方位名词：left、right、top、bottom、center

2.写像素单位

3.写百分比

x轴正数向右，负数向左 y轴正数向下，负数向上。

如果只写x，那么y默认是center

背景的固定：background-attachment（了解）

scroll====滚动，默认值

fixed====固定

简写方式（复合写法）：

background:颜色图片的路径平铺位置;

顺序可以随便写。

3.精灵图（雪碧图sprite）：在一个大图上有多个小图

好处：减少对服务器的请求次数，提高加载速度，减小图片大小

核心：利用背景位置来实现。

背景的位置：background-position

背景的固定：background-attchment

背景图的起点：background-origin

border-box：边框上

padding-box：内间距（默认）

content-box：内容上

背景图的裁切：background-clip

border-box：边框上（默认）

padding-box：内间距

content-box：内容上

背景图的大小：

1.可以写px值

2.可以写百分比

3. cover========等比放大，直到铺满盒子为止。可能会导致图片显示不完整

contain====等比放大，只要有一个边铺满了，就立即停止。可能会导致铺不满盒子

多背景图的设置

通过逗号写url

注意：尽量写成简写方式

用多背景的时候背景颜色需要单独写出来，必须放到简写的后面

# 边框：

border：单一写法：

border-width:边框的粗细

border-style:边框的样式

solid:实线

dashed：虚线

dotted：点线

double：双线

border-color：边框的颜色

简写方式（复合写法）：

border:粗细样式颜色;

# 盒子模型====盒子组成部分

我们可以把所有的标签都看作是盒子。

内容填充物(内间距) 边框外间距

目前我们写的width指的就是内容区的宽度

padding：内间距，内容与盒子的距离

border：边框

margin：外间距，盒子与盒子的距离。

6.padding的写法：

padding：10px;如果只写一个值，那就是上下左右都一样

padding:10px 20px;如果2个值，上下左右

padding:10px 20px 30px;如果3个值上左右下

padding:10px 20px 30px 40px；如果4个值上右下左。

padding不支持负数

7.margin的写法

同padding

margin支持负数

如果是正数向右，如果负数向左走（左右left）

正数是向下，负数向上(上下放下top)

# 命名规则

起名字的时候不要用汉字

不要以数字开头 a1 1a

特殊符号可以使用_和$符号

一定要见名知意 animal dongwu a b

起名尽量用驼峰命名:gongsiJieshao GongsiJieshao

小驼峰：从第二个单词开始首字母大写

大驼峰：每一个单词的首字母都大写

# ps操作

1.调出标尺 crtl+r 视图===标尺

2.鼠标放到标尺上右键把单位选成像素

3.在窗口====信息

快捷键：

alt+滚轮方法缩小视图

空格+左键拖拽

左侧菜单:

第一个:移动工具

第二个：矩形选框工具====量宽高的

第五个：右键选择成切片工具=====裁图的

倒数第三个：吸色工具

清除切片：视图=====清除切片

# 通栏

做大板块的时候宽度一般都和浏览器保持同宽

# 版心

永远保持在浏览器的最中间

# 元素类型

块元素：block 大标签

1.能加宽高

2.独占一行,竖着排列

3.如果不设置宽度，默认宽度和父亲保持同宽

4.一般是用来划分区域的。

常见标签：p div h ul ol li dl dt dd form hr

行内（内联）元素:inline 小标签

1.不能加宽高

2.横着排列

3.宽度和高度如果不写，默认是跟着内容走的。

4.有时候给行内加上下的内外间距会不生效。

常见标签：a span i em b strong u s del sup sub

行内块元素:inline-block

1.能加宽高

2.横着排列

3.行内块元素默认有3-5的间距

常见标签：img input

一般做布局：大标签套小标签

注意点：如果一个元素浮动了，那么不管这个元素是什么类型他都可以加宽高。

2.元素类型之间的相互转换 display

转块元素：display:block;

转行内：display:inline;

转行内块：display:inline-block

3.控制元素的显示和隐藏 display

none=====隐藏,隐藏之后就不占位置了，后面的元素会向前补齐。

block====显示（一般用block，当然也可以用inline-block）

4.vertical-align属性

top====顶线

middle====中线

baseline===基线（字母x的最底部）

bottom====底线

前提要求：元素必须是行内块元素

可以实现元素的垂直对齐方式

应用：头像+昵称

# 定位：

1.调位置

2.实现覆盖效果

1.绝对定位

position：absolute

特点：

1.漂浮起来，不占位置，后面元素向前补齐======（脱标====脱离文档流）

2.有层叠性

默认情况下后面的元素会覆盖前面的元素

可以通过z-index调整层

层的值可以是正数也可是负数，值越大，层越高

3.参照物

有定位的祖先元素，如果都没有定位就是浏览器窗口的第一屏

口诀：子绝父相

使用场景：覆盖

2.相对

1.不会脱标

2.有层叠性（同绝对）

3.参照物是自己原来的位置

3.固定：fixed

1.会脱标

2.有层叠性（同绝对）

3.参照物：浏览器窗口

使用场景：左右2侧导航广告

4.粘性：sticky

不滚动就是相对，滚动就是固定

使用场景：上方导航

# 透明度

1.rgba=====只能让背景色透明，里面的内容不变

2.opacity=====背景和内容一起透明

IE：filter:alpha(opacity=30);取值区间：0-100

3.transparent透明色，一般让某一条边框线变成透明会用到。

# 盒子居中

方式一：

子绝父相 margin:auto; left:0;right:0;top:0;bottom:0;

方式二：

子绝父相

水平居中：left:50%;margin-left:负的自身宽度的一半。

垂直居中：top:50%;margin-top:负的自身高度的一半。

# 锚点

实现页面中不同位置的快速跳转

核心：

超链接结合id选择器

# 表格

table标签上的属性：

border：加边框线的

width:给表格加宽度

height：给表格加高度

bordercolor:边框线的颜色

cellspacing：单元格与单元格之间的间距，一般是写0

cellpadding:内容与格子的间距，一般是写0

align：调整表格的位置

left：靠左显示

center：居中

right：靠右显示

bgcolor:表格的背景颜色

tr标签上的属性：

height:调整高度

bgcolor:调整这一行的背景颜色

align:水平方向

left：靠左显示

center：居中

right：靠右显示

valign：垂直方向

top\center\bottom

td标签上的属性：

width：手动加宽

height：手动加高，如果这个格子里面放不下文字了，那么就会把这个撑大

bgcolor:调整这个格子的背景颜色

align:

valign:

合并：

1.跨列合并：竖着的线没有了，那就是跨列合并

colspan

2.跨行合并，横着的线没有了，那就是跨行合并

rowspan

1.表格新增的一些东西

1)th标签

一般做表格第一行都是加粗和居中的，所以建议把td换成th

2)caption标签

表格的标题，默认居中

一般写在table的第一句话

3）表格行分组标签

thead====表格的头表格的第一行

tbody===表格的身体

tfoot===表格的脚

如果我们自己没有做分组，默认浏览器会把所有的内容放到tbody里面去

一个表格可以有多个身体，只能有一个头和一个脚

4)表格列分组（了解）

把前2列分成一组

5）table上新增属性

rules：规定画哪种类型的线

行线：rows

列线：cols

组线：groups

所有线：all

2.表格新增css属性

border-collapse: collapse;

清除格子与格子的间距

合并边框线

border-spacing:0;清除格子与格子的间距

table-layout: fixed;

固定单元格的宽度，不让单元格随着内容自动分配宽度

表格默认情况下：单元格的宽度是由内有多少进行自动分配

empty-cells:空格子显示方式。

hide：隐藏

show：显示=====默认

# BFC

BFC:block format context(块级格式化上下文)

前提条件：只有块级元素才会涉及这个概念

BFC其实就是一个独立的渲染区域

BFC的布局规则(特点)：

1.在BFC里面的盒子会在垂直方向上排列

2.盒子垂直方向的距离是由margin决定的

3.每个元素margin的左侧，与包含块border左侧相接触

===========================

4.BFC就是一个页面上隔离的独立的容器，容器里面的子元素不会影响到外面的元素.

5.BFC的区域不会和浮动的元素重叠(浮动的元素不会覆盖bfc区域的元素)(应用：左右布局、双飞翼布局)

6.计算BFC高度的时候浮动的元素也参与计算。（高度塌陷问题）

7.属于同一个BFC的2个相邻的盒子会发生外边距重叠。（外边距重叠：父子关系兄弟关系)

BFC的触发条件

1. 根元素html就是一个BFC。

2. 加了浮动也会触发BFC

3. 定位为绝对和固定的时候

4. overflow:hidden\auto\scroll

5. display为：inline-block、flex、table-cell、table-caption、inline-flex

# 选择器

1.属性选择器

标志：[]

[属性名字]======只要标签带有这个属性名字即可

[属性名字="属性值"]=====精准查找必须是这个属性值才可以（要求属性值必须写完整）

[属性名字~="值"]====只要属性值当中包含这个单词即可（以空格区分单词）

[属性名字*="值"]=====只要属性值当中包含这个字母即可

[属性名字^="值"]=====属性值必须以这个值开头

[属性名字$="值"]=====属性值必须以这个值结尾

2.结构伪类（重点）

:first-child====找第一个

:last-child=====找最后一个

:nth-child()

数字=====找第几个

2n+1(odd)====奇数

2n(even)====偶数

:nth-last-child()====倒着数

======特殊=====

:root======找html标签，等价于html{}

:empty======找空标签的，（标签里没有内容）

3.目标伪类

:target

需要结合锚点一起去用

当目标被激活之后做一些。。。。

4.否定伪类

:not(要否定的对象)

除了谁之外的

5.动态伪类

:link

:visited

:hover

:active

:focus====获得焦点之后

6.UI状态伪类

:enabled====可用状态

:disabled===禁用状态

:checked====默认选中状态

::selection======鼠标滑过之后的高亮显示（一定要写2个冒号）

7.层级选择器

找后代:(空格)

找儿子：（大于号>）

找兄弟:

+(找亲弟弟====紧紧挨在一起的下一个)

~（找所有的弟弟===在下方的都算）

8. !important=====提权重，权重最高（写在属性的后面）

# 盒子阴影

box-shadow：水平位置垂直位置模糊度阴影大小颜色内外(不写就是外，inset就是内)

# 文字阴影

text-shadow：水平位置垂直位置模糊度颜色

阴影可以写多阴影，之间通过逗号隔开

3.自定义字体

1.先把素材赋值到项目下

2.@font-face{font-family:"自定义名字";src:url(“素材路径.ttf”)}

# iconfont的使用

阿里巴巴矢量图标库

1.先link引入素材里面的iconfont.css文件

2.找一个标签，给标签写class名字 class="iconfont xxxx"

这个标签尽量用小标签比如 span i b。。。。

# 圆角

border-radius:10px;

如果写四个值:顺时针方向，上右下左

# 常见浏览器

谷歌chrome=====内核（webkit）======前缀：-webkit-

-wbekit-box-shadow:

火狐firefox====内核(Gecko)======前缀：-moz-

IE======Trident=======前缀：-ms-

欧朋opera=====presto=====前缀：-o-

苹果safari=====webkit====前缀：-webkit-

# 高度自适应

父元素的高度由内容撑开：（子元素撑开父元素）

高度不写:内容特别少的时候或者有内容的时候整块区域就看不见了。

一般建议写最小高度：min-height

当内容比较少的时候或者没有内容的时候也会保证有一个最低盖度存在，这块区域会显示出来，当内容多的时候会自动的撑大。

子元素跟随父元素

子元素写100%，目前而言并不完美（如果加了padding或者border就会撑大会超出。）

# 宽度自适应

宽不写或者写width:auto;

如果写了width：100%其实相当于写死了内容的宽度。

# 渐变

：由一个颜色过渡到另外一个颜色

2.线性渐变====从一个方向过渡到另外一个方向

background:linear-gradient(to bottom.red,green;)

如果不加前缀：会尝试所有的浏览器上运行

方向需要写to，意思是到

如果加了前缀：仅允许在这个浏览器运行

不能写to了，意思是从

还可以写角度

加了前缀的：0deg 从左到右逆时针

不加前缀的：0deg 从下到上顺时针

3.径向渐变=====从一个点向外扩散

radial-gradient (起点，颜色1，颜色2)

起点值的写法：

方位名词：left.right.bottom.center

px单位：x y

百分比：x y

如果加了起点必须写前缀

不加起点，默认是center,可以不写前缀

大小：

colsest====最近

farthest===最远

边：side

closest-side:最近边

farthest-side:最远边

closest-corner:最近角

farthest-corner:最远角

4.重复性渐变

线性渐变的重复：repeating-linear-gradient(方向，)

径向渐变的重复：-webkit-radial-gradient()

# 过渡

transition:;

运动曲线； ease:逐渐慢下来====默认

ease-in:加速

ease-out:减速

ease-in-out:先加速后减速

linear:匀速

贝塞尔曲线

步长：steps（数字）====分几步走完

6.2d变形 transform

坐标轴： x y

位移 translate

translateX()

translateY()

translate(x,y)

# 旋转

rotate

rotateX()=====围绕x轴转，中间横线

rotateY()====围绕y轴转

rotate()====围绕中心点旋转

# 缩放

scale

scaleX()===横轴放大，放大宽

scaleY()====放大高

scale(x,y)

如果只写一个值，那就是x和y一起缩放

# 倾斜

skew

注意点:如果多属性一起用，中间通过空格隔开，最好先移动，后旋转或者缩放。

# 动画

创建动画

@keyframes 起名字{

from{}

to{}

@keyframes 起名字{

0%{}

100%{}

}

使用动画

animation-name:;动画名字

animation-duration:; 动画时间

animation-delay:;延时

animation-timing-function:;运动曲线

animation-iteration-count:infinite;无限次运动次数

animation-direction:; 运动方向

reverse反方向

alternate来回运动，先正着走，再反着走，正反交替

normal默认值，正着走

alternate-reverse===先反再正

animation-play-state:;动画的播放状态(一般要结合鼠标使用)

paused===暂停

running===运动

简写方式:animation:名字时间延时曲线次数方向;(挨个往后写，时间不能乱写)

# 3d坐标轴

x轴：向右正。向右负

y轴：向下正，向上负

z轴：向前正，向后负

![image-20211119195416400](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211119195416400.png)

![image-20211119195530617](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211119195530617.png)

透视（景深）：实现近大远小，需要建一个父亲，perspective值为900-1200之间

![image-20211122164034803](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211122164034803.png)

# 怪异盒子（IE盒子）

box-sizing:border-box;

内间距和边框不会撑大盒子，而是在width在基础上缩小。内容区减小

. width指的是内容+内间距+边框的总和

标准盒子：(w3c官方盒子)

box-sizing:content-box;(默认的)

width指的是内容的宽度

内间距和边框会撑大盒子的，是在width的基础上加大。

# 弹性盒子

2.作用：是用来控制子元素的布局方式

a 容器===父元素

b 项目===子元素

3.形成弹性盒子的语句：在父元素上写display：flex；

4.特点：

a 当父元素变成弹性盒子之后，子元素默认横向显示

b 如果子元素总宽度大于父元素，那么不会超出父盒子，也不会自动换行，而是会挤压

c margin：auto是生效的

d 当父元素变成弹性盒子之后，子元素都能直接设置宽高。

5.设置主轴方向：

flex-direction

row：X轴横向排列 == 默认

row-reverse== X轴反向排列从右到左

column：Y轴纵向排列

col-reverse== Y轴反向排列从下到上

元素都是沿着主轴排列的

默认主轴是X轴

6.设置子元素在主轴的对齐方式（排列方式）

justify-content

flex-start；---左对齐

flex-end；---右对齐

center；---居中

space-between---主轴上面两端对齐，元素与元素之间的距离自动分配

space-around：自动分配距离、左右间距都一样（常用）

space-evenly：自动分配剩余空间、所有的距离都一样

7.设置子元素在侧轴（交叉轴)的对齐方式

align-items

flex-start:侧轴的开始位置

flex-end:侧轴的结束位置

center:侧轴的中间位置

stretch拉伸，如果子元素不设置高高度或者度，就会拉伸,高度或者宽度会和父元素一样====默认值

baseline:和flex-start一样

8.设置子元素是否换行flex-wrap

nowrap:不换行

wrap：换行

wrap-reverse：反向换行

9.设置多行对齐方式

align-content

flex-start：侧轴开始位置对齐，没有行间距

flex-end：侧轴结束位置对齐，没有行间距

center：侧轴的中间位置对齐，没有行间距

space-between：2端对齐，中间自动分配

space-around：自动分配间距

stretch拉伸===默认

##### 写在子元素上的

align-self：控制自己在侧轴的对齐方式

a) auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"

b) stretch=======元素被拉伸以适应容器。（如果没有宽度、高度）

c) center========侧轴的居中位置

d) flex-start======侧轴的开始位置

e) flex-end=======侧轴的结束位置

f) baseline==========侧轴的基线位置，实现效果与开始位置一样

1. order:排序，控制子元素的排列顺序，数字越大越往后排，默认0，支持负数

2. flex：设置子元素如何分配空间

a) flex：1把剩余空间全部分配给当前元素

b) 如果每一个子元素都有flex：1，那就是平均分配

c) 如果有3个子元素：分别设置flex：1、flex：2、flex：3。那么就是把整个盒子分成了6份，第一个占1份，第二个占2份，第三个占3份。

3. flex-shrink：======元素是否挤压，一般用于制作移动端的横向滚动。

a) 0=====不挤压

b) 1=====挤压（默认值）

a) flex是一种简写方式。完整写法如下：

![img](file:///C:\Users\Lenovo\AppData\Local\Temp\ksohtml\wps5642.tmp.jpg)

![img](file:///C:\Users\Lenovo\AppData\Local\Temp\ksohtml\wps5643.tmp.jpg)

![img](file:///C:\Users\Lenovo\AppData\Local\Temp\ksohtml\wps5644.tmp.jpg)

# h5新增标签

块元素：

header===一般是用来写头部的

footer===一般是用来写脚的，底部

nav====一般是用来写导航

section类似于div，划分板块、

main一般是来划分内容区的

artical:文章板块

aside：侧边栏

figure：一般是是用来做图文混排的，相当于di dd dt，结合 fig caption标签用

hgroup：标题组标签

行内元素：（一般不建议使用，因为有一定的兼容问题）

mark：标记标签，默认自带黄色背景色，可以实现高亮显示

time：时间，可以做新闻条后面的时间

## 新增表单type值：

email:限制用户必须输入email类型

如果你没有输入任何内容的话，则会默认直接验证通过

只要输入内容必须遵循邮箱的格式

url:限制用户必须输入url类型的值

number:数字

range：产生一个滑动条

search：产生一个有搜索意义的表单

当用户输入东西之后默认会有一个x，可以清空当前输入框中自己输入的数据

color：产生一个颜色选择的表单

========以下这些有很大的兼容问题，不推荐使用=======

time：限制用户必须输入时间类型

moth：限制必须输入月类型

week：限制必须输入周类型

datetime-local：选取本地时间

date：日期

### 新增标签属性值

placeholder:输入框中默认提示的内容（常用）

required：必填项，不填无法提交的（常用）

用在number和range上的属性：

step：步长，一次走几个数字

min:最小值

max：最大值

autofocus：自动聚焦，一个页面只能有一个

autocomplete：是否自动提示信息(要结合name属性和提交按钮一起使用才能看到效果)

on==开启

off==关闭

pattern：属性值是正则表达式（常用）

![image-20211122141025041](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211122141025041.png)

novalidate:取消验证====加在form上

multiple：上传多个文件

新增标签

data

![x](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211122115708685.png)

datalist====数据列表，可以模拟下拉菜单效果， datalist单独写是不会有任何的效果的。必须和input框绑定在一起

绑定方式：在list属性当中写id名字

![image-20211122143112567](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211122143112567.png)

## 视频标签

video

src:路径

controls：播放的控件

loop：循环播放

autoplay：自动播放

谷歌要想实现自动播放，要结合静音muted一起才可以

poster：封面图

常见支持的视频格式：

MP4

ogg

webm

![image-20211122153331822](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20211122153331822.png)

音频标签：audio（同上）

MP4===mpeg4

ogg

MP3

wav

k.omo

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端概念

# 快捷键： 1.快速出代码结构的： shift+!+回车输入html:5+回车 2.保存：ctrl+s 3.全选：ctrl+a 4.复制：ctr+c 5.粘贴：ctrl+v 6.撤回：ctrl+z 7.注释：ctrl+/# 三要素：结构====html 表现====css 行为====js# 创建站点（项目）的步骤...
复制链接

扫一扫