HTML5的基础知识

一个小码农爱编码

于 2023-09-09 15:03:14 发布

阅读量91

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_63262511/article/details/132777697

版权

html5新增便签

1.语义化

语义化的最大作用是方便浏览器更快的识别，利用SEO优化（网站排名）

div(未语义化) span（未语义化） header（头部）（语义化） footer（尾部）（语义化）

语义化标签的意思是标签用英语单词表示

2.语义化标签

header 头部

footer 尾部

section 某个区域

aside 侧边栏

article 区块

nav 导航

3.多媒体标签

1.video 视频（引入视频）

属性

1.controls 显示控制条（属性名和属性值一样）：可以控制播放视频

2.autoplay 自动播放（被禁用）

3.width 宽度

4.height 高度

5.loop 循环播放

6.src 资源路径

7.muted 静音播放

8、poster 视频封面属性值是图片封面的地址

file:///D:/javaweb%E5%AD%A6%E4%B9%A0/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/movie.mp4?lastModify=1694242957

兼容写法

2.audio 音频

1.src 资源路径

2.controls 显示播放

3.loop 循环播放

4.autoplay 自动播放

层级设置最高 z-index:9999;

兼容写法

4.下拉框标签details

外部显示标题

5.小结：

-音频标签和视频标签使用方法基本一样

-浏览器支持程度不一样，现代浏览器（除了IE浏览器）都支持，

-谷歌浏览器音频和视频的自动播放都禁止了，需要手动

-可以给视频标签加muted属性来静音，音频不可以（可以用js）

-视频标签使用最多的，经常设置自动播放，不使用controls控件，循环和设置大小属性

注意事项

1.能用标签实现就不用css,能用css就不用js

2.新增的便签，大部分浏览器都支持，但是IE浏览器9以下不支持

3.pc端的项目建议还是使用div+css，移动端使用HTML5新增的标签

4.属性名与值相同，可以简写，直接写属性名，不用写值

5.属性里面的宽高可以不写单位，默认px，但是style样式里面的宽高要写单位

口诀：

1.有浮动必清浮动

2.布局，从整体到局部，从上到下，从左到右

宽度自适应

100% - 已用的宽度

width: calc(100% - 400px);

框架级--属于标签 iframe

、<iframe

边框

frameborder="1"

width="200"

height="200"

src="本地网页"></iframe>

表单标签

表单：收集用户信息，发送给后端，进行交互

input 重点type类型 8个

1.text 文本

2.password 密码

3.button 按钮

4.radio 单选相同name值

5.checkbox 多选

6.file 上传

7.reset 重置

8.submit 提交

html5新增的input表单类型，进行提交时会帮我们自动判断是否符合要求

1.email 邮箱

2.url 网址

3.date 日期 year 年

4.time 时间

5.month 月

6.week 周

7.color 颜色

8.number 数字

9.tel 号码

10.search 搜索

hidden 隐藏
range 进度条

css 3.0 （只支持移动端 pc端有部分样式会失效）

面试题：重置浏览器默认样式，你会选择标签选择器还是通配符选择器？

答：重置浏览器默认样式通常选择标签名重置，而不会选择通配符选择器，

因为通配符会全选当前页面所有标签去重置，标签名可以直接具体到某个

标签去重置样式，从而性能提升

新增选择器

1.属性选择器

标签自带属性

a img form input

选择具有att属性值等于text的元素

input[type="text"]{

boarder="1px solid red";

}

选择具有att属性的元素

input[type]{

boarder="1px solid red";

}

选择att属性值以one开头的元素

div[class^="one"]{

}

选择att属性值以one结尾的元素

div[class$="one"]{

}

选择att属性值带有one的元素

div[class*="one"]{

}

小结：

1.权重：类选择器，伪类选择器，属性选择器权重都是一样的 10

2.利用属性选择器就可以不用类选择器或者id选择器

3.属性选择器可以选择att属性值以某个命名开头或结尾或带有的元素

2.结构伪类选择器

1.参照父元素，从父元素的第一个子元素计算位置·

匹配父元素第一个子元素

ul li:first-child{

}

匹配父元素最后一个子元素

ul li:last-child{

}

匹配父元素第n个子元素 n从1开始

ul li:nth-child(n){

}

在.box中的第2个ul标签中的第一个li标签的开头加一个”你好“文字，这是内联元素

.box ul:nth-child(2) li:nth-child(1)::before{

content:"你好“；

}

在.box中的第2个ul标签中的第一个li标签的结尾加一个”你好“文字，这是内联元素

.box ul:nth-child(2) li:nth-child(1)::after{

content:"你好“；

}

2.参照父元素，指定类型元素开始计算位置

:first-of-type 匹配父元素指定类型元素第一个

:last-of-type 匹配父元素指定类型元素最后一个

:nth-fo-type(n) 匹配父元素指定类型元素第n个 n从1开始

3. 关于n的公式 n从0开始

2n 偶数 even

2n+1 奇数 odd

5n 5的倍数

n+5 从第五个开始计算，包括第5个，

-n+3 前3个元素，包括第3个

/* 匹配父元素中的奇数位子元素 */

.box ul li:nth-child(odd){

background-color: aqua;

}

.box ul li:nth-child(2n-1){

background-color: aqua;

}

/* 匹配父元素中的偶数位子元素 */

.box ul li:nth-child(even){

background-color: rgb(127, 16, 218,0.8);

}

.box ul li:nth-child(2n){

background-color: rgb(127, 16, 218);

}

伪元素

::after放在最后

::before 放在前面

::first-letter 第一个字母

::first-line 第一行

利用伪元素制作蒙版效果

.img1::before{

width: 193px;

height: 207px;

content: "";

position:absolute;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.5);

z-index: 2;

display: none;

}

.img1:hover::before{

display:block;

}

怪异盒模型

盒宽高：content（内容）+padding+border

给盒子加这个样式，给盒子设置内边距，盒子宽高不会改变

box-sizing:border-box;

值和标准盒模型一样，不推荐使用

box-sizing:content-box;

三种隐藏方式

1.display:none; 隐藏在文档中不占空间 display:block; 显示

2.visibility:hidden; 隐藏在文档中占空间 visibility:visible;显示

3.opacity:0; 隐藏在文档中占空间 opacity:1; 显示

4.overflow:hidden; 文本溢出隐藏

元素的透明度

1.opacity:0; 影响父元素的所有子元素 0-1

2.background-color:transparent；影响父元素的背景颜色，只能全透明

3.background-color：rgba(0,0,0, .5) 影响父元素的背景颜色， 0-1

css 2D转换

1.平移

x,y取50%的值，50%是本身宽高的50%，而不是父元素的

transform:translate(x,y)

应用：

未知父元素的宽高，进行水平垂直居中

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

2.旋转

旋转45度 deg表示角度

transform:rotate(45deg);

3.缩放

扩大1.5倍,没有单位，数字代表倍率

transform:scale(1.5)

transform:scale(n)

4.倾斜

transform:skew(30deg);

注意：

1.旋转和平移不能同时使用，后面的会将前面的掩盖，导致前面属性失效，

可以使用复合写法同时实现

5.复合写法

平移旋转缩放倾斜

transform:translate(x,y) rotate(45deg) scale(1.5) skew(30deg);

6.6个值的矩阵

a:水平缩放

b:水平倾斜

c:垂直倾斜

d:垂直缩放

e:水平移动

f:垂直移动

transform:matrix(a,b,c,d,e,f)

7.过渡效果

过渡效果要给过渡的元素，不要写在hover中，不然会导致鼠标移出时没有动画

检测属性过渡时间过渡效果延迟过渡时间

transition: top 1s linear 2s;

all,检测所有属性

transition:all 1s linear 2s;

linear 匀速

ease-in 开头快

ease-in-out 开头结尾快中间匀速

ease-out 结尾快

注意:

做隐藏 hove时不要用display:none；，会掩盖transition属性，

导致设置过渡效果不生效，可以用透明度opacity:0；

8.中心点转换

中心点默认

transform-origin:center,center;

x,y可以调数值

transform-origin:x,y;

让图片变的模糊

数值越大越模糊

filter:blur(2px)

css 2D转3D

需要给父元素加透视才能实现3D效果

1.景深，

n代表数值,值越大，效果越小，值越小，效果越大 800px-1200px

perspective:n;

2.给父元素加3D空间舞台

transform-style:preserve-3d;

3. 3D旋转平移

1.transform:translateX(200px) x轴平移200px transform:rotateX(45deg) 绕x轴旋转45度

2.transform:translateY(200px) y轴平移200px transform:rotateY(45deg) 绕y轴旋转45度

3.transform:translateZ(200px) z轴平移200px transform:rotateZ(45deg) 绕z轴旋转45度

#####

4.背面不可见

backface-visibility:hidden;

复合写法：

x y z的值只有0和1 ,0代表不动，1代表动，45deg代表旋转45度

transform:rotate3D(x,y,z,45deg)

calc 自动计算宽高

100%是父元素的宽高，200px，是除本身外已使用的宽高，

减号两边记得用空格隔开

width: calc(100% - 200px);

height:calc(100% - 200px);

方位优先级

上大于下

左大于右

动画 @keyframes 重点

定义动画动画名称自己定义

1.动画帧

@keyframes move{

/* 动画帧 */

/* 开始 */

0%{

transform: translateX(0);

}

/* 结束 */

25%{

transform: translateX(800px);

}

50%{

transform: translateX(800px) translatey(400px);

}

75%{

transform: translateX(0) translatey(400px);

}

100%{

transform: translateX(0) translate0(400px);

}

2.过渡帧

相当于0%-100%

@keyframes move{

过渡帧

开始

from{

transform: translateX(0);

}

结束

to{

transform: translateX(1200px);

}

3.使用动画 animation: move 4s infinite;

move是动画名，4s是过渡时间 infinite循环

div{

width: 200px;

height: 200px;

border-radius: 50%;

background-color: aqua;

animation: move 4s;

}

animation8大属性

（1）动画名称

animation-name: ;

（2）时间

animation-duration:2s ;

（3）运动曲线匀速先快后慢 linear匀速 ease默认 ease-in 先快后慢

animation-timing-function: linear;

steps(n）帧数 n代表帧数

（4）延迟时间

animation-delay: 3s;

（5）重复次数 count重复次数 infinite无限次数是否逆向播放或者数字

animation-iteration-count: 5;

animation-iteration-count: infinite;

（6）是否逆向播放默认正常:normal 反方向alternate

animation-direction:alternate;

（7）动画结束时的状态默认：backwards 回到起始状态如果想停留结束状态：forwards

animation-fill-mode: forwards;

（8）是否暂停播放暂停：paused 默认 running 不暂停

animation-play-state: paused;

复合写法

名称时间运动效果延迟时间重复次数逆向播放结束状态

animation: name duration timing-function delay iteration-count direction fill-mode ;

1.animation可以设置多个动画，用逗号隔开

animation:move 2s easa infinite , text 3s easa;

1.animation可以不设置运动函数，使用steps(n) 代替，n表示整个动画的帧数

浏览器

以浏览器内核划分

谷歌苹果欧朋 IE 火狐（谷歌火狐欧朋）

总结：

前端开发，如果要兼容各种浏览器，只需要关注浏览器内核，移动端兼容主流浏览器，只需要处理谷歌内核浏览器就行

视口

视口，就是浏览器显示页面内容的屏幕区域

布局视口

一般移动端设备浏览器都，默认了一个布局视口，用于早期pc端页面在手机上显示的问题，苹果，安卓基本将这个视口设置为980px，所以手机上的网页大多都能在手机上查看，只不过网页元素看起来特别小，解决办法就是自己手动缩放网页
视觉视口

字面意思，它是用户真正看到网站区域

我们可以通过缩放去操作视觉视口，布局视口任然保持原来的宽度
理想视口

为了使网站在移动端有最理想的浏览阅读体验而设定

对设备来讲就是最理想的视口，需要我们手动在<head>头部添加一个视口标签

写移动端网页必须在头部加<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">标签

meta 视口标签 name="viewport"

content 属性

width 宽度设置 viewport宽度，跟移动端一致

user-scalable 用户是否可以缩放 yes/no

initial-scale=1.0 初始缩放比 1.0

maximum-scale=1.0 最大缩放比1.0

minimum-scale=1.0 最小缩放比1.0

移动端开发选择技术栈

单独制作移动端网页（主流）

通常情况下，移动端网站域名为m. 比如京东的移动端域名是多快好省，购物逛京东！

打开移动端设备，通过判断设备，如果是移动端的设备打开就跳转到移动端网站
响应式页面兼容移动端（其次）

响应式网站：即Pc端和移动端共用一套网站代码，在不同屏幕下样式会自动适配

移动端常见布局

流式布局（百分比布局）
fiex弹性布局（推荐） flex

3.响应式布局 media媒体查询

4.混合布局 rem

响应式移动端布局

媒体查询（media)

1.内部写法

bootstrap (前端比较流行的响应式UI框架)

/* 移动端 and 两边记得空格隔开，否则会失效*/

@media screen and (max-width:600px) {

}

/* 中间区域平板 and 两边记得空格隔开，否则会失效*/

@media screen and (min-width:600px )and (max-width:1199px) {

}

/* pc端 and 两边记得空格隔开，否则会失效*/

@media screen and (min-width:1200px) {

}

2.外部写法 href里面是css样式

media="screen and (min-width:600px) and (max-width:1199px)">

流式布局（常见布局）

通过盒子的宽度用百分比进行伸缩，不受固定像素的限制

css3中只有3个带@符合

定义动画

@keyframes aa{

}
定义第三方字体

@font-face{

font-family: ;

src: url();

}

3.定义媒体查询

@media screen{

}

弹性布局

定义display：flex； float, clear, vertical-align 失效

1.块元素，内联，适配

块元素设置弹性布局

display: flex;

行内元素

 display: inline-flex;

移动端适配必须加上-webkit前缀。

 display: -webkit-flex;
  display: flex;

2.文字水平基线对齐的方式

文字水平中间对齐

vertical-align: middle；

文字水平顶部对齐

vertical-align: top ；

文字水平底部对齐

vertical-align: bottom ；

3.flex 6属性口诀：容6 项6 或者父6子6

父元素的6个属性

1.flex-direction x轴的排列方向

1.行排列

row（默认值）：左排列
row-reverse：右排列

2.列排列 x轴与y轴替换
column：从上往下排列
column-reverse：从下往上排

2.flex-wrap 换行

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

3.flex-flow 排列和换行的复合写法，默认左对齐不换行

flex-flow: row nowrap;

4.justify-content x轴的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐不改变顺序
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目到边框的间隔大一倍。
space-evenly：项目之间的间隔与项目到边框的间隔相等。

5.align-items y轴的单行对齐方式

flex-start：y轴的顶部对齐。
flex-end：y轴的底部对齐。
center：y轴的中心对齐。
baseline: 项目的第一行文字的基线对齐。（子元素高度不同，文本在同一个水平显示）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6.align-content y轴的多行对齐方式

flex-start：与y轴的起点对齐。
flex-end：与y轴的终点对齐。
center：与y轴的中点对齐。
stretch（默认值）：轴线占满整个y轴。
space-between：与y两端对齐，轴线之间的间隔平均分布。
space-around：子元素两侧的间隔都相等。所以，子元素之间的间隔比子元素到边框的间隔大一倍。

项目的属性、

1 order属性排列

项目的排列顺序。数值越小，排列越靠前，默认为0。可以写负值

order:0;

2 flex-grow属性放大比例

定义项目的放大比例

默认为0，即如果存在剩余空间，也不放大。

flex-grow: 0;

1.如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。

2.如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3 flex-shrink属性缩小比例

定义了项目的缩小比例，不支持负值

默认为1，即如果空间不足，该项目将缩小。

flex-shrink:1;

1.如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

2.如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，为0者不缩小。

4 flex-basis属性固定宽度

设置固定宽度，默认auto 子元素原来的大小

flex-basis: auto;
flex-basis: 300px;

5 flex属性放大缩小固定宽度的复合写法

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

放大缩小固定宽度的复合写法

flex:none;
flex:0,1,auto;

6 align-self属性

允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

css新增设置背景

颜色和图片的大小，占取空间，裁切属性（不属于背景属性，背景属性只有5种）

设置背景大小，可以写固定数值x y，也可以写百分比

background-size:100px 200px;

background-size:100%;

以左上角进行缩放

background-size: contain;

以中心点进行缩放

background-size: cover;

规定背景图片占的空间默认padding-box

background-origin:padding-box; 占据padding+content空间

background-origin:content-box; 占据内容空间

background-origin:border-box; 占据padding+content+boeder空间

规定背景颜色 | 图片裁切的空间默认是border-box

background-clip:border-box; 不裁剪

background-clip:padding-box; 裁剪边框部分

background-clip:content-box; 裁剪边框部分+内边距部分

渐变

1.线性渐变

默认从上到下

从左到右

对角

角度

重复渐变

2.径向渐变

默认椭圆

圆形渐变

重复渐变

css3新增文本特征属性

省略号

强制不换行

white-space: nowrap;

溢出隐藏

overflow: hidden;

溢出部分用省略号代替

text-overflow:ellipsis;

裁切

强制不换行

white-space: nowrap;

溢出隐藏

overflow: hidden;

裁切文本，不会出现省略号

text-overflow:clip;

溢出换行（常用于英语）

单词过长溢出换行

word-wrap: break-word;

单词过长溢出不换行，默认

word-wrap: normal;

谷歌浏览器高清截屏

F12+ shift+ctrl+p + 搜索capt......

overflow溢出属性

1.溢出隐藏 overflow:hidden;

2.溢出滚动条 overflow:scroll;

3.overflow-x: visible|hidden|scroll|auto|no-display|no-content;

visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。

4.overflow-y: visible|hidden|scroll|auto|no-display|no-content;

visible	不裁剪内容，可能会显示在内容框之外。
hidden	裁剪内容 - 不提供滚动机制。
scroll	裁剪内容 - 提供滚动机制。
auto	如果溢出框，则应该提供滚动机制。
no-display	如果内容不适合内容框，则删除整个框。
no-content	如果内容不适合内容框，则隐藏整个内容。