HTML总结

苏坡聪

已于 2022-07-07 15:55:50 修改

阅读量347

点赞数

文章标签： html 前端 javascript

于 2022-07-02 16:00:05 首次发布

本文链接：https://blog.csdn.net/weixin_52627566/article/details/125574042

版权

基本术语

元数据

meta 主要设置网页中的一些元数据，元数据不是给用户看的

chatset 指定网页字符集 utf-8

name 指定数据名称

content 指定数据内容通过内容搜网址

name:keywords 表示网站关键字

desctiption 内容简介

<meta name="description"

content=“京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。”/>

title 优先显示

编码格式

刷新三秒重定向到指定网址
Document

实体

实体：具体的方法比如表示空格的方法

语法：&实体名字

&nbsp 空格

标题

标题：h1到h6逐级递减

一个页面一般只允许出现一次h1因为权重仅次于tetle

标题分组：

将相关的标题放到一起

块元素和行内元素

块元素

独占一行

作用：一般用于网页的布局

块元素什么都能放

特例：

标签不可以包裹块元素，浏览器会自动矫正

行内元素

作用：只要用于包裹文字

一般放于块元素中

常用标签

文字标识

斜体

表示强调

strong：字体加粗

引用

blockquote：缩进两个空格

q:加上“”

br：换行

结构化语义

header ：网页头部

main：主体部分（唯一）

footer ：表示底部

aside：侧边栏

article：独立的文章

nav：和导航有关

div：用来表示一个块

span:行内元素，包裹文字

列表

常见列表
1.无序列表
ul
2.有序列表
ol
3.定义列表
dt
dl框架 dt子项 dd格子
列表可以作为横向的导航栏，嵌套a标签

技巧：ctrl+alt加上下左右：写多行

超链接

跳转到锚点

（其他位置）

通过a标签的id跳转

<a href=“#bottom"却底部
<a id=“bottom” href=”#"去顶部
<a href="javascript:;“占位无效果
<a href=”#"占位刷新
属性：
htef：设置跳转路径

跳转到其他网站

<a href="https://www.baidu.com"超链接

跳转到本地页面

<a href="列表.html"链接2相对路径
行内元素一般是不能嵌套块元素的，
a标签除外，可以嵌套除本身的所有元素

链接打开时的位置

target:

可选值：
_self 默认值当前页面打开
_blank 新页面打开

<a href="https://www.baidu.com" target="_blank">超链接</a>
加载图片
<img src="" alt="加载不出显示"></img>

属性

src：图片路径
alt：加载不出使用
width:图片的宽度
height：图片的高度
只要修改一个会等比缩放
在开发中一般不修改图片的大小，一般通过工具更改，一般是大图变小（不失帧）

图片格式

-jpeg（jpg）
优点：主要用于照片（支持颜色丰富）
缺点：不支持动图和透明效果
-gif
优点：支持动图和简单透明
缺点：支持颜色较少
-png
优点：颜色丰富，支持透明
缺点：不支持动图
-webp
优点:具备所有优点，
缺点：但文件很小，兼容性不好

效果一样用小的不一样的用好的

base64编码
将图片转换为编码
用于压缩图片

内联框架
作用：用于在当前页面引入其他页面

<iframe src="javascript:;" frameborder="1" width="500px" height="600px"></iframe>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=" allowFullScreen="true"></iframe>

src：页面地址
frameborder：控制边框1表示有，0没有
allowFullScreen="true"是否允许全屏

音频标签
audio
默认情况下用户不能控制播放

-controls 允许控制
-autoplay 自动播放
-loop 循环播放

开发中使用source指定文件路径
兼容问题
不兼容会一直往下走找到兼容为止

<audio controls>
浏览器不支持（所有全不兼容时输出）
        <source src="" autoplay>
        <source src="">
        IE8兼容ie8
        <embed src="" type="inf/mp3">
    </audio>

视频标签

 <video controls>
        <source src="./bgm/am/yc.mp4">
    </video>

外部库
http://www.fontawesome.com.cn/icons/qq/

使用

<i style="font-size: 500px" class="fa fa-camera-retro fa-5x"></i> fa-5x
<i style="font-size: 500px; color: rgb(210, 20, 20);" class="fa fa-qq" aria-hidden="true" ></i>

网页分为几个部分
结构（html)
表现(css)
行为(js)
css:
1.内联样式.行内样式
在标签的内部通过style属性设置, style="样式的name : value ;"使用;间隔
缺点:
标签的样式只会对一个标签生效
当样式修改时需要每一个标签单独的修改属性(开发时不要使用)
2.内部样式
将style编写到head标签中
通过css 的选择器来选中元素并为其设置样式
可以同时为多个标签设置样式并且修改时只要修改一处就可以生效
缺点:
只能作用在一个页面，如果多个页面使用同一个样式需要复制样式(样式不可以跨页面使用)

3.外部引用(使用最佳）
将css代码编写到外部的css文件中，通过link标签引入外部css文件哪些页面需要就对其引用即可
-将样式编写到外部css文件中可以使用浏览器的缓存机制从而使页面的加载速度变快提高用户体验

选择器

通配符

*：表示元素

元素选择器

p{}给p标签写样式

类选择器

.box

id选择器

#box
快捷

//输入p.
<p class=""></p>

分组选择器

h1,span{//两个标签都会修改
font-size:15px;
}

关系型选择器

元素关系
父元素
–直接包含子元素的叫做父元素
子元素
–直接被父元素包含的元素是子元素
祖先元素
–直接或间接包含后代元素的叫祖先元素
–一个元素的父元素也是它的祖先元素
后代元素
–直接或间接被祖先元素包含的元素叫后代元素
–子元素也是后代元素
兄弟元素
–拥有相同的父元素的元素叫兄弟元素

最多有三代关系

<div>//父元素
   <p>子元素
       <span></span>后代元素
   </p>
</div>

<div class="er">
        divvvvvv
        <p>
            pppppp
            <span>span</span>
        </p>
    </div>

子元素选择器

p是div的子元素，span是p的子元素
div.er>p>span{
color: blue;
}

后代选择器

span是div的后代
div.er span{
color: blue;
}

兄弟选择器

span1
span2

p + span{ //与p最近的兄弟元素
color: blue;
}
p ~ span{//p的所有兄弟元素
color: blue;
}

属性选择器

p title=“abc”>fjdsjfksj

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素

p[title=abc]{}

[属性名^=属性值]选择以指定值开头的元素

p[title^=abc]{}

[属性名$=属性值]选择以指定值结尾的元素

p[title$=abc]{}

[属性名*=属性值]选择含有某值的元素（不在乎包含值的位置，只要有就可以）

p[title*=abc]{}

选择器结合

div.div{//表示标签时div并且class是div的元素

color: blue;
}

<div class="div">1</div>
<p class="div">2</p>
<div class="div">3</div>

document.querySelector('div#div> span.ll')//表示id为div的div，兄弟元素为，class为ll的span标签

div.removeChild(document.querySelector('div#div> input.ll,span.ll'))//删除id为div的div，兄弟元素为，class为ll的span标签，或者class为ll的input标签

伪类

伪类选择器

元素是标签

不存在的类

-用来描述一个元素的特殊状态
比如:第一个子元素最后一个子元素被点击的元素鼠标移入-伪类一般使用:开头
:first-child第一个元素*/l

:last-child倒数第一个元素

:nth-child()选中第n个子元素特殊值
n第n个 n的取值范围是o-正无穷

2n或even是取偶数的元素
2n+1或add是取奇数的元素

:first-of-type 选中该类型的第一个元素

:not(:first-of-type) 过滤该类型的第一个元素

ul>li:first-child{
color: red;
}

伪元素选择器

元素是标签的内容

表示页面中一些特殊并不真实存在的元素(特殊的位置)伪元素使用::开头

::first-letter表示第一个字母
::first-line 表示第一行
::selection被选中的
::before在结尾加
::after在开头加东西

p: :first-letter{font-size: 25px;
}

div: :after{
content: 'll ';
color: aquamarine;
}
I
div: : before(//在div前面添加}}
content: ‘}}’;
color: aquamarine;
}

a的伪类

未被访问的链接

a:link{color: red;}

*表示访问过后的链接

a : visited{color: blue;}

visited 因为隐私的原因只能修改颜色，将访问的链接变得很大，别人就知道是什么网址了

鼠标伪类

鼠标悬停

：hover

鼠标点击

：active

选择器的权重(优先级)

操作选择器选择了同一个元素并设置相同的属性会发生冲突

p{
color: red !important;
}

0.!important的优先级是最高的
1.内联样式1,0,0,0
2.id选择器0,1,0,0
3.类和伪类选择器0,0,1,0
4.元素选择器0,0,0,1
5.通配选择器 0,0,0,0
6.继承的没有优先级继承：是祖先随子元素样式改变

技巧看作用范围，就近原则

单位

/*长度单位

1.像素
-显示器是由一个一个发光的小点组成，不同的像素，大小不同，像素越小屏幕越清晰
同样的px像素值在不同设备下显示的也不同
2.百分比
百分比可以随着父元素的变化而变化
3.em
em是相对于元素的字体大小来计算1em=1font-size
em会根据设置的字体大小改变而改变

rem是根据根元素的字体大小而改变的，html的字体多大他就多大

.box1{
font-size: 5opx;
width: 2em;
background-color:blueviolet;
}

颜色

.box{
width: 300px;height: 300px;/*i颜色
在css中可以使用颜色名字来设置颜色
RGB值取值范围:
0-255之间
0%-100%
语法:rgb(红,绿,蓝)
RGBA表示透明度
RGBAa--代表透明度0-1

十六进制rgb值颜色浓度00-ff
如果﹔两位重复可简写
#aabbcc
#abc

色相：颜色盘
HSL
h色相0-360s 
s饱和度0%-100%
l颜色亮度0%-100%
HSLA
h色相
s 饱和度
l颜色亮度
a 透明度*/
    
background-color: hs1(255,80%,80%);
background-color: rgba( 125，0，0,. 3 );    
background-color: rgb(o，o，255);
}

文档流( normal flow)

所有创建的元素都在文档流中排列
–创建的元素状态
1.在文档流中
2.不在文档流中
元素在文档流中的特点

块元素

独占一行默认宽度是填充整个父容器
默认高度是被内容撑开（子元素）

行内元素

不独占一行只占本身的大小
行内元素会在页面中从左向右水平排列如果一行之中不能全部装下
则元素会换到第二行继续自身从左向右排列
行内元素的默认高度和宽度都是被内容撑开

盒子模型

盒子模型，盒模型，框模型(box modle)
css将页面中的所有元素都设置为了一个矩形的盒子

页面布局，将盒子放到不同的位置
所有盒子都有以下组成

盒子大小

宽度：width+2*padding+2*boder
高度： height+2*padding+2*boder

内容区

content

元素中所有的子元素与文本内容都在内容区排列内容区的大小由width和height决定
元素中所有的子元素与文本内容都在内容区排列

边框

border

边框，盒子边缘，边框里边属于盒子的内部，边框外面处于盒子的外部，边框的大小会影响盒子的大小
设置边框

border-width 宽度
border-color颜色
border-style样式

border的简写

border的简写
border: 1px solid red;
border-top:1px solid red;
border-right
border-bottom
border-left
border:1px solid red;
border-right:none;

/*border-width: 10px 2px 5px 5px;border-width可以指定四个值分别代表上右下左
三个值：上，左右，下
两个值：上下，左右
一个值:上下左右

除了
border-width
border-xxx-width
XXX== top right bottom left来定某一个边的值

/*
border-width:10px;
border-color :red;
border-style :solid; */

border-color : 上颜色右颜色下颜色左颜色;
如果不指定border-color默认使用color 的属性颜色

边框线

border-style :solid;

solid–实线
dotted 点状虚线
dashed 虚线
double双线

内边距

padding

内容区和边框之间的距离是内边距

四个方向的内边距

padding-top
padding-right
padding-bottom
padding-left

.box{
width: 200px;height: 200px;
background-color: brown;
    border: 1px solid orange;
    padding-left: 100px;
    padding-top: 100px;
    padding-right : 10opx;
    padding-bottom: 10opxT}

注意事项：

-内边距的大小，会影响盒子的大小
-背景颜色会被延申到内边距上
-一块盒子的大小由内容区的大小+内边距的大小+边框的大小

外边距

.box1{
width: 200px;height : 200px;
background-color: blueviolet;border : 1px solid red;
margin-right : 1000px;
}

margin

-外边距不会影响盒子的大小
-影响盒子的位置

-四个方向

margin-top
上外边距:设置一个正值元素会向下移动
margin-right
默认情况 margin-right 不会产生任何效果，没用
margin-bottom
下外边距设置一个正值其下边的元素会向下移动
margin-left
左外边距设置一个正值元素会向右移动

magin 可以设置负值如果负值则元素会向相反的方向移动

注意事项：

-元素在页面中按照自左向右顺序排列
默认情况下如果设置上外边距和左外会移动元素自身
设置下和右会移动其他元素
magin简写和padding一样

水平布局

米色说明他还占着该位置

子元素在父元素的水平方向位置由

margin-left
border-left
padding-left
width
padding right
border-rigth
margin-right

共同决定

margin-left+ border-left …=父元素的宽度(必须满足)上面全加上

以上等式必须满足，如果相加等式不成立，则成为过度约束，等式自动调整

调整情况如果七个值中

没有auto的情况―浏览器会自动调整margin-right的值使等式成立
如果一个宽度和一个外边距的值设置为auto 则宽度调整到最大值而外边距的值为0
如果将三个值都设置成auto 宽度最大，外边距的值为0 宽度（width）优先
在网页中实现水平感中一般使用，宽度固定，值而两个外边距的值设置为auto

解决移出问题

overflow

用于解决溢出

子元素是在父元素的内容区排列
如果子元素的大小超过了父元素，那么会溢出使用overflow属性;来解决溢出
可选值:

visible:默认值子元素会从父元素溢出在父元素的外部显示
hidden :溢出的内容会被裁剪不会显示
scroll :生成滚动条通过滚动条来查看完整内容
auto:根据需要生成滚动条，（如果内容上不需要向左的，就不产生）

外边距折叠

垂直外边距的折叠

两个盒子，一个top往上，一个bottom往下

兄弟元素

-相邻的垂直方向的外边距会发生重叠现象-兄弟元素

计算规则

-取垂直外边距的较大值（两者都是正值)
-如果都是负值取两者中绝对值较大的
-如果是一正一负取两者的和

.box1{//垂直方向 向下
background-color: blueviolet;
margin-bottom: 100px;
}
.box2{//向上
background-color: rgb(43，226，217);
margin-top: 100px;
}

父子元素

-父子元素

-相邻的外边距子元素设置的值会传递给父元素

会撑大父元素

-必须要处理的

行内元素的盒模型

-不支持设置高度和宽度
-可以设置padding，**padding-top不行会被消除，但会覆盖border部分，**其他方向都行，
不会影响垂直布局，内容还是在上面，不会向下移动
-border哪个方向都行
-能用margin-left移动，margin-right：会占位但不会移动，其他的没效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCG2KGLT-1656748757013)(D:\buchangyon\Typora\img\image-20220702150729008.png)]

块转行，行转块

display

修改
可选值:

inline将元素设置为行内元素
block 将元素设置成块元素
inline-block 将元素设置成行内块元素**（可以设置大小，不占同一行）**
table设置成表格
none元素不在页面中显示，不占页面

隐藏元素

visibility 属性
可选值

hidden不显示但是依旧占据页面位置
visible 默认值

盒子尺寸

.box1{
width: 100px;
height: 100px;
background-color: aqua;
padding: 100px;
border: 1px solid red;
}

其他的属性不再改变盒子的大小

box-sizing

固定盒子大小

/*默认情况盒子的尺寸右内容区边框和内边距共同决定

box-sizing:用来设置盒子尺寸的方式(width 和 height的作用)

可选值:

content-box 内容区大小
width height作用于内容区的
border-box 外边框
width height作用于盒子可见框的大小
box-sizing:border-box;

轮廓和阴影

轮廓

outline

.box1 : hover{
outline: 10px red solid;}

outline和 border、的区别就是轮廓不会改变可见框的大小

阴影

box-shadow

阴影box-shadow用来设置阴影效果阴影不会影响页面的布局

第一个值:水平偏移量设置阴影的水平位置正值向右下移动负值向左移动
第二个值:垂直偏移量设置阴影的垂直位置正值向下移动负值向上移动
第三个值:阴影的模糊半径
第四个值:阴影的颜色

圆角

border-radius

设置圆角border-xxx-xxx-radius

例如:border-top-left-radius
/*border-top-left-radius : 20%;
border-radius: 50%;

左上右下右上左下四个值:

左上，右上右下，左下三个值:
左上，右上/左下，右下两个值:

浮动

不再是块元素
左浮动不会向上移动
下边的元素会自动补齐

通过浮动可以使元素向其父元素的左侧或右侧移动使用

float

可选值:

none 默认值儿素不浮动
left元素向左浮动
right元素向右浮动

注:元素设置浮动后将脱离文档流水平布局等式不强制要求成立

不占用文档流的位置由下边的元素会从文档流中自动向上移动

浮动的特点:

1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动，不会上下移动
3.浮动元素默认是不会从父元素中移出
4.浮动元素向左或者向右移动时，不会超过他前边的浮动元素
5.脱离文档流的元素–块元素
6.浮动不会覆盖文字

不再区分块元素和行内元素

将不再独占一行
默认宽度和高度将会被内容撑开
-如果是左浮动，能用margin-left移动，margin-right：会占位但不会移动，其他的没效果，右浮动相反
-padding上下左右都能用
-border上下左右都能用

脱离文档流后不再区分块和行内

网页布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header,
        main,
        footer {
            width: 1000px;
            margin: 0 auto;
        }

        /*设置头部*/
        header {
            height: 150px;
            background-color: sienna;
        }

        /*设置主体*/
        main {
            height: 500px;
            background-color: bisque;
            margin: 10px auto;
        }


        nav,
        article,
        aside {
            float: left;
            height: 100%;
        }

        nav {
            width: 200px;
            background-color: aqua;
        }

        article {
            width: 580px;
            background-color: cadetblue;
            margin: 0 10px;
        }

        aside {
            width: 200px;
            background-color: cornflowerblue;
        }

        footer {
            height: 150px;
            background-color: darkorange;
        }
    </style>
</head>

<body>
    <!-- 创建头部 -->
    <header></header>
    <!-- 主体 -->
    <main>
        <!-- 右侧导航栏 -->
        <nav></nav>
        <!-- 中间的内容 -->
        <article></article>
        <!-- 右边的边栏 -->
        <aside></aside>

    </main>
    <!-- 网页的底部 -->
    <footer></footer>

</body>

</html>

定位

定位(position):

-定位是一种高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-使用position属性来设置定位

可选值:

static 默认值:元素静止没有开启定位
relative开启元素的相对定位
absolute开启元素的绝对定位
fixed开启元素的固定定位
sticky开启元素的粘滞定位

相对定位

以自身左上角为原点

当元素的position的值设置成relative开启相对定位-相对定位的特点:
元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化

position : relative;

-偏移量（offset)top
定位元素和定位位置的上边的距离
bottom
定位元素和定位位置的下边的距离
top和bottom控制了元素的垂直方向的位置（使用其一就可以>- top值越大元素越向下
bottom值越大元素越向上

Ieft
定位元素和定位位置的左边的距离
right
定位元素和定位位置的右边的距离

left right控制了元素的水平方向的位置

left值越大元素越靠右
right值越大元素越靠左

绝对定位

绝对定位:
position 属性设置成absolute开启绝对定位绝对定位的特点:

1.开启绝对定位后如果不设置任何偏移量，元素的位置不会发生任何变化
2.开启绝对定位后元素会从文档流脱离（相当于浮动，下面的元素会向上补齐）
3.绝对定位会改变元素的性质行内变成块块的高度会被内容撑开，相当于浮动
4.绝对定位可以使元素提升一个层级
5.绝对定位元素是相对于其，最近的包含块进行定位的
包含块：有定位属性的父级元素
如果所有的祖先元素都没有开定位那么则定位到根元素就是它的包含块根元素( html初始包含块)

固定定位

也是一种绝对定位，大部分都和绝对定位一致

唯一不同就是固定定位永远参照于浏览器的视口进行定位

固定定位的元素不会随网页的滚动条滚动

苏坡聪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML总结

meta 主要设置网页中的一些元数据，元数据不是给用户看的chatset 指定网页字符集 utf-8name 指定数据名称content 指定数据内容通过内容搜网址name:keywords 表示网站关键字desctiption 内容简介content=“京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。”/>title 优先显示编码格式刷
复制链接

扫一扫