HTML常用标记

1、文本标题（h1-h6）

<h1>LOGO</h1>
<h2>二级标题</h2>
<h3>三级标题H3</h3>
<h4>四级标题H4</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2、段落文本(p)

<p>段落文本内容</p>

3、空格

&nbsp;

4、换行(br)

<br />

5、水平线

<hr />空标记

6、加粗有两个标记

<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本

7、倾斜

<em>强调文本</em>

<i>倾斜文本</i>

8、超链接

<a href="目标文件路径及全称/连接地址" title="提示文本">链接文本/图片</a>

9、列表(ul,ol,dl)

无序列表ul
有序列表ol
自定义列表dl  dt  dd

10、插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" width="宽度" height="高度"/>

11、扩展

<u>文本</u>下划线
<ins></ins>下划线
<del>文本</del>删除线
<s>文本</s>删除线
<sub></sub>下标
<sup></sup>上标
<abbr title="鼠标放上时可以显示简述">HTML</abbr>  虚线下划线
<q>陈家林</q> 给文本加引号
<mark></mark>突出文本 黄色块
<wbr /> 强制换行
<sup></sup>上标字体
<sub></sub>下标字体

<details><summary></summary></details>披露小部件 类似于下拉菜单

<select><optgroup label="分组名"><option value="us">内容</option></optgroup></select>类似于下拉菜单 利用optgroup定义分组头部option为分组里边的内容

<input list="langs"><datalist id="langs"><option value="English"></option></datalist>类似于下拉菜单,可以填多个option支持搜索匹配,input与datalist的ID要一致

捕获属性打开设备摄像头

<input type="file" capture="user" accept="image/*">

网站自动刷新

<head>
    <meta http-equiv="refresh" content="10">
</head>

防止翻译

将 translate 属性设置为 no，可防止翻译。这一点很重要，以防你不想翻译一个短语或单词，例如你的标志、公司或品牌名称。

<p translate="no">Brand name</p>

点击链接自动下载

如果希望在单击指向目标资源的链接时下载特定资源，请添加 download 属性

<a href="image.png" download>

CSS

表单框

文本框

密码框

提交按钮框

重置按钮

跳转按钮框

按钮

选择器

id选择器语法：#id名{属性：属性值;}

语法：#id名{属性：属性值;}

群组选择器语法：选择符1，选择符2，选择符3{属性：属性值;}

class选择器语法：·class名{属性：属性值;}

通配符语法：{属性：属性值；}

包含选择器语法：选择符1 选择符2{属性：属性值;}

子选择器语法：选择符1>选择符2{属性：属性值；}

层级选择器

E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面

E~F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值 2、E[attr="value"]：指定属性名，并指定了该属性的属性值 3、E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

伪类选择器

结构性伪类选择器
X:first-child 匹配子集的第一个元素
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始 nth-of-child
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p
X:root匹配文档的根元素
X:empty匹配没有任何子元素（包括包含文本）的元素X
目标伪类选择器
- E:target 选择匹配E的所有元素，且匹配元素被相关URL指向
UI 元素状态伪类选择器
- E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
- E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
- E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
- E:selection 匹配E元素中被用户选中或处于高亮状态的部分

否定伪类选择器

E:not(s) （IE6-8浏览器不支持:not()选择器。）匹配所有不匹配简单选择符s的元素E

动态伪类选择器

E:link链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited
链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active 用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover 用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅

支持a:hover E:focus 用户行为选择器选择匹配的E元素，而且匹配元素获取焦点

权重

！important > 内联1000 > 属性10 > 伪元素1 > 继承样式

文本属性

文本大小：{font-size:12px;}

文本颜色：{color:颜色值;}red/#f00/rgb(255,0,0)

文字加粗：font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;

**文本倾斜：**font-style：italic/oblique/normal（取消倾斜，常规显示）;

水平对齐方式：{text-align:left左/right右/center居中/justify两端对齐

垂直对齐方式： {vertical-align:top上/bottom下/middle居中/baseline基线

文字行高： {line-height:normal/value;}line-height:20px; line-height:2em; (当行高的单位省略时，默认为em)

**文本修饰：**text-decoration:none/underline/overline/line-through

none:没有修饰 underline:添加下划线 overline:添加上划线 line-through:添加删除线

首行缩进：{text-indent:value;}

字母大小写：{text-transform:none无转换/capitalize首字母大写/uppercase全都大写/lowercase全都小写;}。

字间距：{letter-spacing:value;}控制英文字母或汉字的字距。

词间距：{word-spacing:value;}控制英文单词词距。

文本流控制：{layout-flow:horizontal/vertical-ideographic;}

文字属性简写：font:bolder italic 12px/1.5em "宋体"; 简写时，字体和字号是必备

1、定义列表符号样式

list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；
2、使用图片作为列表符号

list-style-image：url(所使用图片的路径及全称)；
3、定义列表符号的位置

list-style-position:outside(外边)/inside(里边)；

list-style:none;去掉列表符号

**i 标签去除倾斜: **font-style: normal

**鼠标移入变小手:**cursor:pointer

**超链接A标签不跳转:**javascript:void(0)

**透明文字:**color: transparent;

**文本元素缩小倍数,用于文本字体大小小于12px:**transform: scale(0.9);

字体模块

@font-face

文本阴影

text-shadow:2px  2px  2px red;
    水平阴影位置，垂直阴影位置，阴影模糊距离，阴影颜色

边框

边框宽度：border-width:

边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)*none(去掉边框);

圆角边框：border-radius:

上top 下bottom 左left 右right

圆角边框：Border-radius

背景

背景颜色 {background-color:颜色值;}
背景图片的设置 background-image：url(背景图片的路径及全称）；
背景图片平铺属``{background-repeat:no-repeat不平铺/repeat平铺/repeat-x X轴平铺/repeat-y Y轴平铺 }`
背景图的位置{background-position:left/center/right/数值 top/center/bottom/数值;}
background-position:水平，垂直;
背景图的固定{background-attachment:fixed固定/scroll滚动;}
背景尺寸background-size
背景图的大小length
背景图大小Percentage(%)
覆盖背景区域cover
适应内容区域contain
指定绘图区:-webkit-background-clip: text ; 当前指的是文本

浮动

语法：float:none/left/right;

清除浮动的属性是clear语法：
clear : none | left | right | both
none：默认值。允许两边都可以有浮动对象
left：清除左浮动/不允许左边有浮动对象
right : 清除右浮动/不允许右边有浮动对象
both : 清除两端浮动/不允许有浮动对象

万能清除浮动法

选择符:after{
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
overflow:hidden;}

CSS盒模型

padding外
margin内

文本溢出

overflow

visible:默认值

hidden：溢出隐藏

scroll：滚动，溢出内容以滚动方式显示;

auto：如果有溢出会添加滚动条，没有溢出正常显示;

inherit：规定应该遵从父元素继承overflow属性的值。

overflow-x:X轴溢出； overflow-y:Y轴溢出

文本溢出省略号显示

text-overflow

clip：默认值

ellipsis：显示省略标记

display元素类型转换

display

block块状显示

inline内联显示

inline-block行内块状显示

none：隐藏元素

flex：弹性盒子

grid：网格布局

list-item:列表项

table：以表格形式显示 table表格的默认类型。

table-row：以表格行形式显示 tr表格的行的默认类型。

table-cell：以表格列形式显示 td表格的列默认类型

CSS元素类型

块状元素（block element）

内联元素（inline element）

盒子阴影

box-shadow

h-shadow水平阴影位置

v-shadow垂直阴影位置

blur模糊距离

spread阴影大小

color阴影颜色

inset从外层阴影改变内层阴影

表格

表格组成
<table width="value" height="value" border="value">
      <tr>
            <td></td>
            <td></td>
     </tr>
</table>

注：一个tr表示一行;一个td表示一列(一个单元格)
<thead></thead>      表头

<tbody></tbody>      表体必需存在的标签

<tfoot></tfoot>         表尾

width="表格的宽度" height="表格的高度" border="表格的边框" bgcolor="表格的背景色" bordercolor="表格的边框颜色" cellspacing="单元格与单元格之间的间距" cellpadding="单元格与内容之间的空隙" 水平对齐方式：align="left左对齐/center居中/right右对齐";垂直对齐方式：valign="top顶对齐/middle居中/bottom底对齐/baseline(基线)

合并单元格属性： colspan=“所要合并的单元格的列数"合并列;

rowspan=“所要合并单元格的行数”合并行;

表单

表单框

<form name="表单名称（英文字母开头的）" method（提交方式）="post/get" action="表单提交的地址"></form>

文本框

<input type="text" value="默认值"maxlength="5" placeholder="提示文本" />

密码框

<input type="password" placeholder="密码"/>

提交按钮

<input type="submit" value="按钮内容" />

<input type="reset" value="按钮内容"/>重置按钮

单选框

<input type="radio" name="ral" value="radiovalue"/>

单选按钮

<input type="radio" name="ral" checked="checked" />

复选框

<input type="checkbox" name="like" value="checkboxvalue" />

复选按钮里的name属性必须写，同一组复选按钮的name属性值必须一样。

checked="checked"表示默认被选中，可简写成checked

disabled="disabled"表示禁用，可简写成disabled

enabled:可用状态

下拉菜单

<select name="">
<option name="" value="表单被提交时被发送到服务器的值" selected="selected">菜单内容</option>
</select>

多行文本框（文本域）

<textarea name="textareal" cols="字符宽度" rows="行数">
</textarea>

跳转按钮

<input name="'" type="button" value=“按钮内容” />
<button></button>

上传文件框

文件域：<input type="file" />

图像域

<input type="image" src="" width="100" height="100" alt="上传图片" />

隐藏文本框

<input type="hidden" value="值" />上传隐藏的值/字段

提示信息标签

<label   for="user">提示信息</label>

<input type="text" id="user"/>

Type=“color” 生成一个颜色选择的表单 Type=“tel” 唤起拨号盘表单 Type=“search” 产生一个搜索意义的表单 Type=“range” 产生一个滑动条表单 Type=“number” 产生一个数值表单 Type=“email” 限制用户必须输入email类型 Type=“url” 限制用户必须输入url类型 Type=“date” 限制用户必须输入日期 Type=“month” 限制用户必须输入月类型 Type=“week” 限制用户必须输入周类型 Type=“time” 限制用户必须输入时间类型 Type=“datetime-local” 选取本地时间

**placeholder属性：**输入提示

**autofocus属性：**获得焦点

**required属性：**验证输入不能为空

**list属性：**结合datalist元素使用

去除input边框:border: none; outline**:**medium

修改placeholder颜色: input::-webkit-input-placeholder

宽高自适应

宽度自适应默认值为auto

高度自适应默认值 {height:auto;}

伪元素

:after(与content属性一起使用，定义在对象后的内容

:before:与content属性一起使用，定义在对象前的内容

隐藏和透明

隐藏

display:none；

visibility:visible(显示)/hidden(隐藏)

opcity:0

height:0px;/不设置高度

使用缩放transform:scale(0)

透明

0-1

transparent(透明色)===背景

rgba(0,0,0,0)====背景

最小最大宽高

min-height属性：最小高度； min-width:最小宽度 max-height:最大高度 max-width:最大宽度

窗口自适应

设置方法：html,body{height:100%;}

iframe插入第三方页面或者视频音频

语法：<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe>

滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动

Video和audio

video元素定义视频Video元素

audio元素定义音频Audio元素

controls显示控件 autoplay马上播放 loop重复播放 muted静音。 poster视频正在下载时显示的图像直到用户点击播放按钮。

calc()函数的使用

calc() 函数：用于动态计算长度值

width: calc(100% - 10px)；

HTML5 新增语义化标签

section元素表示页面中的一个内容区块 article元素表示一块与上下文无关的独立的内容 aside元素在article之外的，与article内容相关的辅助信息 header元素表示页面中一个内容区块或整个页面的标题 footer元素表示页面中一个内容区块或整个页面的脚注 nav元素表示页面中导航链接部分 figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置) main元素表示页面中的主要的内容 (ie不兼容)

定位porsition

绝对定位:absolute

固定定位:fixed

相对定位:relative

默认:static

粘性定位:sticky

继承父元素:inherit

CSS3渐变

线性渐变

background: linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变

background: radial-gradient(center, shape, size, start-color, ..., last-color);

重复渐变

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

CSS3 过渡

transition 取值：all 5s linear 3s

过渡的属性all

过渡的持续时间5s

延迟过渡的时间3s

过渡的动画类型linear

transition:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型

CSS3 2D

transform

**translate( X,Y)**指定的方向移动
**translateX()：**向X轴进行移动
**translateY()：**向Y轴进行移动
**scale()：**中心原点对对象进行缩放
- scale(1,1) scale(2,2)
rotate()
- rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
- rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
skew( 水平，垂直)
- 让元素倾斜显示
transform-origin
- transform-origin是变形原点围绕着那个点变形或旋转

2D 转换元素能够改变元素 x 和 y 轴

CSS3 3D

**3D位移：**CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

**3D旋转：**CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数

**3D缩放：**CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

景深

perspective: 1200px;（在父元素中使用）

transform:perspective(1200px) （在子元素中使用）

perspective-origin;观察3d元素的（位置

transform-style属性 flat和preserve-3d

3D位移

translate3d(tx,ty,tz)

tx：代表横向坐标位移向量的长度； ty：代表纵向坐标位移向量的长度； tz：代表Z轴位移向

translateZ(t)

t：指的是Z轴的向量位移长度。

3D旋转

rotateX(a)

rotateX()函数指定一个元素围绕X轴旋转

rotateY(a)

rotateY()函数指定一个元素围绕Y轴旋转

rotateZ(a)

围绕Z轴旋转

rotate3d(x,y,z,a)

a:是一个角度值

X轴旋转的矢量值；

Y轴旋转的矢量值；

Z轴旋转的矢量值；

3D缩放

scale3d(sx,sy,sz)

sx：横向缩放比例； sy：纵向缩放比例； sz：Z轴缩放比例；

scaleZ(s)

s：指定元素每个点在Z轴的比例。

动画

keyframes

@keyframes name{ from{初始状态属性}
to{结束状态属性}
}
或
@keyframes name{
0%{初始状态属性}
100%{结束状态属性}
}（中间再可以添加关键帧）

animation

animation-name 检索或设置对象所应用的动画名称

animation-duration 检索或设置对象动画的持续时间

animation-timing-function 检索或设置对象动画的过渡类型

animation-delay 检索或设置对象动画延迟的时间

animation-iteration-count 检索或设置对象动画的循环次数

animation-direction 检索或设置对象动画在循环中是否反向运动

animation-play-state 检索或设置对象动画的状态

transition

CSS弹性盒

box-sizing

content-box
border-box

display:flex弹性盒子

flex-direction主轴排列方式

ow 默认在一行内排列
row-reverse：反转横向排列
column：纵向排列
column-reverse：反转纵向排列

justify-content主轴对齐方式

flex-start默认，顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐，中间自动分配
space-around自动分配距离

align-items（侧轴对齐方式）

flex-start：纵轴起始位置
flex-end：纵轴结束边界
center：居中
baseline：基线对齐

flex-wrap

nowrap：flex容器为单行
wrap：flex容器为多行
wrap-reverse：反转 wrap 排列

align-content行与行之间对齐方式

flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离

align-self

auto 默认值
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。

order

number排序优先级，数字越大越往后排，默认为0，支持负数。

flex

元素如何分配空间
flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量
flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量
flex-basis项目的长度

CSS3 多列

column-count

属性规定元素应该被分隔的列数

column-gap

属性规定列之间的间隔大小

column-rule

column-rule-color规定列之间规则的颜色。 column-rule-style规定列之间规则的样式。 column-rule-width规定列之间规则的宽度。

column-fill

设置或检索对象所有列的高度是否统一 auto：列高度自适应内容 balance：所有列的高度以其中最高的一列统一

column-span

设置或检索对象元素是否横跨所有列。 none：不跨列 all：横跨所有列

column-width

设置或检索对象每列的宽度

移动端布局

html,body{
      height:100%
    }

**vw：**viewport width，视窗宽度，1vw等于视窗宽度的1%。 **vh：**viewport height，视窗高度，1vh等于视窗高度的1%。

rem rem是指相对于根元素的字体大小的单位。

根元素 如果根元素是相对设备尺寸自动变换。

VW 视窗宽度，1vw等于视窗宽度的1%。

VW转换成PX赋值给font-size 例：设备的分辨率为6401136，逻辑像素为320568 1VW=3.2px Font-size:100px;转换成VW font-size:31.25vw; 1rem=31.25vw可一起结合写等比例缩放布局。

Grid网格布局

触发网格布局给父元素添加display:grid

grid===容器从上向下排列 inline-grid===容器从左向右排列

**规定行属性：**grid-template-row:

**固定列属性：**grid-template-column:

绝对大小200px 200px 200px

百分比33.33% 33.33% 33.33%

功能函数：repeat(重复的次数，重复的数值或模式)

auto-fill关键字( 自动填充 )配合功能函数使用

fr关键字(列宽片段)

minmax() 功能函数

auto 关键字自动填充

列间距

grid-row-gap:20px 行间距
grid-column-gap:20px 列间距
grid-gap:20px 30px 复合式写法

指定区域

图片转存失败，建议将图片保存下来直接上传

项目排列顺序 图片转存失败，建议将图片保存下来直接上传

单元格内容对其（重点：复合属性） 图片转存失败，建议将图片保存下来直接上传

图片转存失败，建议将图片保存下来直接上传

单元格项目对其（重点：复合属性） 图片转存失败，建议将图片保存下来直接上传

图片转存失败，建议将图片保存下来直接上传

网格线合并(单一属性)

图片转存失败，建议将图片保存下来直接上传

grid-column ， grid-row (重点，重点，重点) 图片转存失败，建议将图片保存下来直接上传

H5+css3

HTML常用标记

捕获属性打开设备摄像头

网站自动刷新

防止翻译

点击链接自动下载

CSS

选择器

否定伪类选择器

动态伪类选择器

权重

文本属性

字体模块

文本阴影

边框

背景

浮动

CSS盒模型

文本溢出

文本溢出省略号显示

display元素类型转换

CSS元素类型

盒子阴影

表格

表单

宽高自适应

伪元素

隐藏和透明

最小最大宽高

窗口自适应

iframe插入第三方页面或者视频音频

Video和audio

calc()函数的使用

HTML5 新增语义化标签

定位porsition

CSS3渐变

CSS3 过渡

CSS3 2D

CSS3 3D

景深

3D位移

3D旋转

3D缩放

动画

CSS弹性盒

CSS3 多列

移动端布局

Grid网格布局