本文总结了常用的html元素，以及其特性，还有一些可能会用到的内容，还总结了css的大部分常用内容，透彻的解析了原理内含，内容比较多，还有一些内容会以后补充，欢迎大家收藏！
html其实是使用各种标签来表示不同的文本所代表的信息，全称为超文本标记语言 (Hyper Text Markup Language)，
不同的标签有其对应的语义，所以选择对应的标签是一种更好的习惯，也能使整体结构更加清晰，例如：
// 根据w3c中对语义标签的定义
非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。
语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容：表单、表格、图片。
- <em> 来强调重点
- <b> 来吸引对文字的注意
- <mark> 来标记关键词或短语
- <strong> 来表明文本具有重要意义
- <cite> 来标记书籍或其他出版物的标题
- <i> 来表示西方文本中的技术术语、音译、思想或船名
- <br> 回车
- <hr> 生成分割线，可通过内置属性设置样式，不过兼容性不好
- <s> 删除线
- <sub> 将其内容变为下标格式，如：===>C8H10
- <u> 下划线，
- <p> 表示一段文本，文本段落
- <a> 锚元素（超连接），可以起到跳转作用
- href：超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
- 使用文档片段链接到页面的某一段
- 使用文本片段链接到某一段文字
- 使用媒体片段链接到某个媒体文件
- 使用 URL 链接到一个电话号码
- 使用 URL 链接到一个邮箱地址
- 如果 web 浏览器不能支持其他 URL 协议，网站可以使用
- rel：该属性指定了目标对象到链接对象的关系
- href：超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
- <form> 用于向目标提交表单
- ：指定目标url，这个值可被<button>或<input>的提交事件改变
- ：浏览器使用这种 HTTP 方法来提交 表单：
- post：表单数据会包含在表单体内然后发送给服务器
- get：表单数据会附加在 属性的 URL 中，并以 作为分隔符
- dialog：如果表单在元素中，提交时关闭对话框
如下图，样式都没有什么特别的，只是增强了语义性，更容易阅读：
- <article>元素规定独立的自包含内容，文档有其自身的意义，并且可以独立于网站其他内容进行阅读(如：文章详情页)，下面是一个例子：
- <section> 元素被定义为相关元素块
- <header> 元素为文档或节规定页眉
- <footer> 元素为文档或节规定页脚
- <nav> 元素定义导航链接集合
- <aside> 元素页面主内容之外的某些内容（比如侧栏）
<embed> 元素（少用）
所有主要浏览器均支持 元素, 元素将外部内容嵌入文档中的指定位置，而此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供
大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 通常是不明智的。
以下为一个例子：
它的src可以选择图片、视频、音频、html文件等，但是它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，可是大多数浏览器不再支持 Java Applet 和插件。所有浏览器均不再支持 ActiveX 控件。在现代浏览器中，对 Shockwave Flash 的支持也已关闭。自然而然就很少用到此元素了
<object>元素（少用）
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素，如音频、视频等
基本语法如下：
如果浏览器不支持 Flash，将无法播放视频。
与<embed> 有点类似，但在当前，有些浏览器支持<embed>不支持<object>，而有些浏览器相反，所以这两种方式用的并不多。
<audio>
用于播放音频，基本语法如下：
如果只需要一个音频源文件，则可以省略source：
还可以使用元素来进一步解决兼容性问题：
内含属性：
- autoplay：布尔值属性，是否自动播放
- controls：此属性只有声明或不声明，表示是否显示播放控制器
- currentTime：获取当前文件播放到的事件
- disableRemotePlayback：布尔值属性，用来禁用在远程设备上进行进度控制的能力
- duration：视频总长度
- loop：布尔值属性,是否循环播放
- muted：布尔值属性,是否默认静音
- src：嵌入的音频的 URL
事件：
- ：输入缓冲区已准备好进行处理
- ： 属性已更新
- ：视频停止播放，因为媒体已经到达结束点
- ：媒体的首帧已加载完成
- ：元数据已加载完毕
- ： 浏览器开始加载资源时触发
- ：播放已暂停
- ：播放已开始
- ：由 属性指示的播放时间已更新
<video>
用于播放视频的标签，基本语法如下：
和音频的使用大致类似，不过属性有所不同
最好的兼容性写法也大致相同：
内部属性：
- autoplay：布尔值属性，是否自动播放
- controls：此属性只有声明或不声明，表示是否显示播放控制器
- controlslist：当浏览器显示播放控制器时，属性会帮助浏览器选择在控制面板上显示哪些 元素控件。
允许的值有 (禁止下载)、 （禁止全屏）和 （禁止远程播放）。
- disablepictureinpicture：布尔值属性，防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式
- height：视频显示区域的高度，单位是CSS 像素
- loop：布尔值属性,是否循环播放
- muted：布尔值属性,是否默认静音
- playsinline：布尔值属性，是否位于包含块内播放（原播放区域），没有此属性并不意味着视频始终是全屏播放的
- poster：海报帧图片 URL，用于在视频处于下载中的状态时显示，如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报帧来显示
- src：要嵌到页面的视频的 URL
- width：视频显示区域的宽度，单位是CSS 像素
事件：
- ：输入缓冲区已准备好进行处理
- ： 属性已更新
- ：视频停止播放，因为媒体已经到达结束点
- ：媒体的首帧已加载完成
- ：元数据已加载完毕
- ： 浏览器开始加载资源时触发
- ：播放已暂停
- ：播放已开始
- ：由 属性指示的播放时间已更新
块级元素独占一行，可以换行可以包含行极元素
行级元素一行不能换行，不能包含块级元素，a元素除外
随着语义化标准的完善，有了新的总结：
- 容器元素（如div）可以包含任何元素
- a元素几乎可以包含任何元素
- 有些元素有固定子元素，如ul>li、ol>li、table>dl>dt>dd
- 标题元素无法包含容器元素、段落元素
内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中
例如需要其他网站的内容时，我们的网站禁止访问，就可以使用此元素内嵌要访问的网站，再用这个网站访问自己的内容
比如访问bilibili视频
然后放入代码中
使用object元素与embed元素实现
type为互联网媒体类型（MIME）
不过现在几乎都不支持flash了
input
select
类型选择器（标签）与伪元素选择器（::before）：权重最低
类选择器与伪类选择器：权重第二
id选择器：权重最高
!important：此声明将覆盖任何其他声明，不过尽量少使用，以免破环元素间的样式联系，当两条相互冲突的带有 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用
赋值：
自己为元素属性赋的值(没有冲突)
层叠冲突：
若有重复则以后赋的值为准
若有多处赋值冲突，则需要比较权重来得到最终值
最终此div的font-size为12px
继承：
若没有赋值，则会向上查看父元素的此属性值，有则继承此属性值
不过如背景等非文本属性是无法继承的
默认值：
元素的所有属性不是默认为空的，而是都有初始值，若没有赋值也没有可继承的值，则会使用默认值
a和b是常量，n的值会从0开始依次递增:first-of-type选中第一个指定类型的子元素:last-of-type选中最后一个指定类型的子元素:nth-of-type(an+b)选中第「an+b」个指定类型的子元素
a和b是常量，n的值会从0开始依次递增
LOVE准则
即以 :link、:hover、:visited、:active的顺序来设置属性，这样可以避免样式的冲突（根据所需要的优先级），比如如果:active在:hover前配置，那点击时鼠标还是悬于此元素上，那样还是显示:hover的样式而不是:active的样式
该属性是一个布尔属性，可以设置到任何元素上，它可以让该元素变为可编辑的状态
在实际开发中，通常用于制作富文本框
基本语法如下，设置了此属性则此div的内容可以改变：
用于指定一个元素在文档中的定位方式
相对定位RELATIVE
元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
绝对定位ABSOLUTE
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素（一般为相对定位relative）偏移，来确定元素位置
固定定位FIXED
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变
粘性定位STICKY
元素根据正常文档流进行定位，然后相对它的*最近滚动祖先*（nearest scrolling ancestor）和 containing block（最近《包含块》块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 、、 和 的值进行偏移
例子
以下列场景为例，通过查看有left和left为0、不停的改变position来看效果，代码如下：
position为relative时
以下为分别盒子b的left为0和为20px（后面一致）
此时为相对定位，刚开始，b随a一起向右，此时left为0，所以相对于b自己位置也还是那里，然后b的left变为20px，相对于b自己本身的位置再向右移动了20px
position为absolute时
看似和上面一样，其实原理不一样，刚开始b随a一起向右，此时left为0，b相对于a左右并没有移动，所以此时它们左边依然是重合的，然后left变为20px，由于a为相对定位，所以b相对于a进行移动，向右移动20px
position为fixed时
由于是固定定位，所以b直接相对于视口定位，不管其他的了，所以left为0时，直接与左边视口重合，left为20px后，也是相对于视口向右移动了20px
position为sticky时
此时为粘性定位，很明显b的父元素并没有滚动能力，再往上看
确实没有一个具有滚动的祖先元素，所以b没有参照物，left不起作用
使用一个变量来代替经常使用的属性值
定义变量名：使用 开头即可
变量值：正确可用的即可
var(预选值，备选值)
rgb(r,g,b)：
由红（0-255）、绿（0-255）、蓝（0-255）三原色的占比来配置颜色
rgba(r,g,b,alpha)：
由红、绿、蓝三原色的占比来配置颜色，加上a来配置透明度，默认为1不透明
hsl(h<角度>,s<百分比>,l<百分比>,alpha)：
根据颜色的色调、饱和度和亮度分量在 sRGB 颜色空间中表示颜色。可选的 alpha 组件表示颜色的透明度，如下：
hwb(h<角度>,w<百分比>,b<百分比>,alpha)：
根据颜色的色调、白度和黑度来表示 sRGB 色彩空间中的颜色。可选的 alpha 组件表示颜色的透明度，如下：
box，一个元素在页面会形成一个矩形区域，类似盒子
盒子类型：
行盒：display为inline，内容不可换行，一行到尽头
块盒：display为block，独占一行，相当于一大行（可换行）
行块盒：display为inline-block，内容不可换行，但可以直接设置宽高
盒子的组成：
无论行盒或块盒，都是一样的结构组成
如上，margin（外边距）、border（边框）、padding（内边距）、content（内容，width、height设置的就是此内容，也叫内容盒）共同组成盒子模型
不过行盒有其特殊之处：
- 行盒的内容盒：
行盒的宽高是源于内容的大小与长度所决定的，并不能由自己设置，如下：
- 行盒的内边距padding：
水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变（可以说不能得到想要的效果，无效）
- 边框border：
和内边距差不多，水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变
- 外边距margin：
也是水平方向有效，会挤压文本内容，垂直方向会以文本内容为中心对背景大小进行改变
空白折叠：
行盒与行块盒都会产生空白折叠，即两个行盒或行块盒挨着时，它们之间会有一个空格间隔，而且不能消除
不过在Vue中好像没有这个空白，Vue 模板在编译时，可能会移除某些空白字符。如果你没有在 标签之间放置明显的换行符或空格，Vue 可能会自动处理掉这些空白间隔
box-sizing
用于指定width、height等设置的是内容盒还是边框盒
box-sizing: content-box（默认）
此时设置的width、height就是内容盒
box-sizing: border-box
此时设置的width、height就是边框盒
盒子模型的背景
背景图片默认覆盖到整个border，可以使用background-clip来设置覆盖范围
所有元素默认情况下都是常规流布局
总体规则：
- 块盒独占一行
- 行盒水平依次排列
包含块（containing block）：
每个盒子都有它的包含块，包含块决定盒子的排列区域，一般情况下，盒子的包含块为其父盒子的内容盒
块盒常规流
每个盒子的宽度必须等于包含块的的宽度（高度不适用）
宽度默认值为auto，margin默认值为0
它们的auto代表吸收其他空间，比如包含块宽度为100px，而b的宽度只有50px，此时设置margin为auto，两边的外边距就会吸收多余的50px，这也是常规流块盒水平居中的做法，（margin垂直方向的auto为0）
如下：
不过width的吸收能力要大于margin，如下：
块盒的高度
高度的auto指的是适应内容的高度：
百分比取值
一般的width、margin、padding的百分比取值都是以包含块的宽度为基准的
（至于为什么设置这个padding-top见下面外边距合并）
高度的百分比
- 若包含块有高度、不依赖子元素撑开（不为auto），则以包含块高度为基准
- 若包含块依赖子元素撑开，则百分比无效
外边距合并
若两元素（包括兄弟元素、父子元素）的外边距相邻（没有border、padding等隔开），则会取较大的一个外边距成为它们共同的外边距，如上面：
父元素也会共用这个20px的margin-top
会时元素变为块盒（设置display为block），默认值为none
此时元素的包含块与常规流一致，也是父元素的内容盒
- float:left 左浮动，元素处于包含块左上
- float:right 右浮动，元素处于包含块右上
- margin的auto代表margin为0
- 宽度的auto代表自适应内容宽度
- 高度的auto代表自适应内容高度
- 百分比设置也与常规流一致
- 浮动盒子在包含块中排列时会避开常规流盒子
- 行盒在排列时会避开浮动盒子（文字环绕），而块盒在排列时会无视浮动盒子
高度坍塌
若子元素都浮动，父元素的高度自适应时，块元素会无视浮动元素去排列，所有会有父元素高度无法被撑开的问题
解决方法：
clear：
- none 不清除浮动
- left 清除左浮动，使此元素在所有左浮动元素的下方
- right 清除右浮动，使此元素在所有右浮动元素的下方
- both 清除所有浮动，使此元素在所有浮动元素的下方
不规则排序：
- 左浮动的盒子向上向左排列
- 右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
justify-content：
横轴摆放：flex-start;flex-end;center;space-between;space-around;
看例子：
align-content:
纵轴摆放：flex-start;flex-end;center;space-between;space-around;
flex-direction:
改变坐标轴：row;row-reverse;column;column-reverse;
order：
设置弹性盒子元素的顺序：number；
align-items：
纵轴摆放（此元素内的每个单独的子元素）：flex-start;flex-end;center;space-between;space-around;
flex-wrap:
元素间隔及顺序：nowrap;wrap;wrap-reverse;
align-self:
元素纵向摆放（此元素本身的纵轴摆放）：flex-start;flex-end;center;space-between;space-around;
tip：
推荐大家这个网站：https://flexboxfroggy.com/，这是一个针对flex布局的小游戏，玩了之后应该会对flex布局有一个更好的理解
- @import “path” 导入另一个css文件
- @charset “字符编码集” 声明使用的是特定的字符编码集，必须写于顶行
- @font-face{} 创建字体指令，让用户强制临时下载此字体。iconfont就是基于此制作
由某个元素创建，规定此区域中的内容在z轴上的排列顺序
html元素与设置了z-index数值（非auto）的定位元素会创建堆叠上下文
同一堆叠上下文元素在z轴的排列：
- 创建堆叠上下文的元素的背景与边框
- 堆叠级别为负值的堆叠上下文
- 常规流非定位的块盒
- 非定位的浮动盒
- 常规流非定位的行盒
- 任何z-index为auto的定位子元素，以及z-index为0的堆叠上下文
- 堆叠级别为正值的堆叠上下文
scalable vector graphics，可缩放的矢量图
- 该图片使用代码书写而成
- 缩放不会失真
- 内容轻量（不能适用于复杂的图片内容）
- 可以直接嵌入网页（直接把svg代码加入源码即可）
- 可以适用img元素src导入，也可以由元素背景图片设置导入，等等。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/81276.html