HTML和CSS和正则

角度单位

1 turn 相当于1圈,就是360deg

rad 弧度。一个完整的圆是 2π 弧度

grad 百分度。一个完整的圆是 400grad

deg 度。 一个完整的圆是 360deg

HTML

web标准与HTML结构和语法

网页的组成:

​ 网页的结构: html xhtml xml 搭建结构
​ 网页的表现: css 修饰结构
​ 网页的行为: javascript 交互效果,数据处理

web标准

结构标准:

​ html xhtml xml html5 扩展名:.html 或者 .htm ;

​ 用于描述页面的结构

​ html: 超文本标记语言
​ xml : 可扩展的标记语言
​ xhtml:可扩展的超文本标记语言
​ html5 是HTML的第5次重大修改,是目前新推出的结构标准语言;

表现标准:

​ css用于控制页面中元素的样式

行为标准:

dom ,ECMAScript,JavaScript等用于响应用户操作

w3c : 万维网联盟,制定了结构和表现的标准
ECMA: 欧洲电脑厂商联合会,制定了行为的标准

html基本结构

 <!DOCTYPE html>     声明文档类型为html
     <html lang="en">    网页的根标签(根元素
        <head>     网页的头部区域(描述区)
            <meta charset="UTF-8"> 
                meta :网页元信息(当前网页的一些信息)
                charset="UTF-8"   
                    charset :编码格式
                    "UTF-8" :万国码(包含了所有国家的字符)
                    补充:
                ​       gb2312 简单中文  包括6763个汉字
                ​       BIG5  繁体中文 港澳台等用
                ​       GBK包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
 
            <title>Document</title>  网页标题
        </head>
        <body>  网页的主题内容区
        </body>
	</html>

html语法:

​ 常规标记(双标记):
​ <标记 属性="属性值" 属性="属性值1 属性值2"></标记>

​ 空标记(单标记):
​ <标记 属性="属性值" 属性="属性值1 属性值2">

    说明:
        1、尖角号里面的第一个单词称之为标签、标记、元素;
        2、标记里面可以没有属性,也可以有多个属性;
        3、标记和属性之间要用空格隔开;
        4、属性和属性之间也要用空格隔开;
        5、属性和属性值之间要用等号连接,属性值必须写在双引号或者单引号里面;
        6、当一个属性有多个属性值的时候,属性值和属性值之间也用空格隔开;

常用快捷键:

​ Ctrl+N 新建
​ Ctrl+C 复制
​ Ctrl+V 粘贴
​ Ctrl+A 全选
​ Ctrl+Z 撤销
​ Ctrl+Y 撤回
​ Ctrl+S 保存
​ Ctrl+/ 添加/删除注释

​ ctrl+shift+K 删除当前行

​ ctrl+shift+ 折叠当前作用域

​ ctrl+shift+]展开当前作用域

​ ctrl+K+0折叠所有代码

​ ctrl+K+J展开所有代码

​ alt+上/下键 本行代码上下移动

​ editor.formatOnSave 打开代码保存自动格式化

命名规则:

以字母下划线$开头,不能是保留字和关键字

注释的作用:

​ -> 隐藏代码
​ -> 提示

常用标签与其属性

文本标签与常用转义字符

文本标题标签:

​ h1~h6 (h1具有唯一性,一般放网站LOGO)

字体倾斜

<i></i>
<em></em> 语义化(更加强调)

加粗标记

<b></b>
<strong></strong>语义化(更加强调)

下划线

<u></u> 
<ins></ins>语义化(更加强调)

删除线

<s></s> 
<del></del> 语义化(更加强调)

换行

<br>  换行

水平线

<hr>  水平线

段落标记

<p></p>

字符 ( 小段文本 ) 文本节点

<span></span>

常用转义字符

&nbsp;      不换行空格
&gt;        > 右尖括号
&lt;        < 左尖括号

列表标签:

1、无序列表

​ 语法:

				<ul>
                    <li></li>
                    <li></li>
                    ...
                </ul>

​ 注: 列表可以嵌套

2、有序列表

​ 语法:

		<ol>
            <li></li>
            <li></li>
            ...
        </ol>

​ 注: 列表可以嵌套

3、自定义列表

​ 语法:

	<dl>
        <dt>名字</dt>
        <dd>对名词的解释</dd>
    </dl>

超链接:

          href=""   添加目标文件路径(地址);
          target=""  设置超链接的打开方式;
                ->  _self   在当前窗口打开(默认值);
                ->  _blank   在新窗口打开

        超链接的作用:实现页面之间的跳转;

为页面上的所有链接规定默认地址或默认打开形式

        例:<base target="_blank" />  

        注:<base> 标签必须位于 head 元素内部。

表格:

​ 作用:显示数据

表格的基本结构与常用标签

			<table>
				<caption>表格的标题标签</caption>
                <thead>		表格的头部区  表头
                	<tr>
                        <th></th>	表头单元格(字体加粗)
            		</tr>
            	</thead>
            	<tbody>		表格的主体区  表体
            		<tr>
                        <td></td>
            		</tr>
            	</tbody>
            	<tfoot>		表格的底部区  表尾
            		<tr>
                        <td></td>
            		</tr>
            	</tfoot>
            </table>

表格的基本属性:

​ border="" 边框 (写给table标签)
​ cellspacing="" 设置单元格和单元格之间间距 (写给table标签)
​ cellpadding="" 设置内容和单元格之间的间距 (写给table标签)
​ width="" 宽
​ height="" 高
​ bordercolor="" 边框颜色
​ bgcolor="" 背景颜色

        注:
            表格的行高是根据这一行内最高的单元格统一高度的;
            表格的宽度时根据这一列中最宽的哦单元格统一宽度的;

表格合并属性:

​ 合并列(横向合并): colspan="是要合并的列数"
​ 合并行(纵向合并): rowspan="是要合并的行数"

表格文本对齐属性

​ 水平对齐:
​ align=""
​ left 左对齐(默认值)
​ center 居中对齐
​ right 右对齐

​ 垂直对齐:
​ valign=""
​ top 顶对齐
​ middle 居中对齐 (默认值)
​ bottom 底部对齐

表格的分割线属性

​ rules="" 添加分隔线(要添加给table标签)
​ 属性值:
​ rows:位于行之间的线条
​ cols:位于列之间的线条
​ all:位于行和列之间的线条
​ none:没有线条
​ groups:位于行组和列组之间的线条

表格的css属性

边框合并
table{
        border-collapse: collapse;
    }

border-collapse:合并边框

​ – collapse:合并边框

​ – separate:不合并边框

单元格间距

border-spacing:value;

​ 说明:单元格间距(该属性必须给table添加) 表示单元格边框之间的距离, 不可取负值

表单:

​ 作用:收集用户信息

        表单域:
            <form action="" method="" name="">
            	<fieldset>	用来为表单项进行分组。
            		<legend>13123</legend>	用于指定每组的名字。
                    表单元素:
                    <input type="" value="">
        		</fieldset>
            	表单元素:
            	<input type="" value="">
            </form>

表单域常用属性

​ action="" : 提交的地址 (接口地址)

​ method="post/get" : 上传方式(post="" 上传 get = "" 获取)

​ name="" : 给表单域添加了一个name名字,属性值(名字)是自定义;

表单元素常用属性

​ type = '控件类型'

​ name:属性标识表单域的名称;
​ Value:属性定义表单域的默认值,其他属性根据type的不同而有所变化。
​ maxlength:控制最多输入的字符数,
​ Size:控制框的宽度(以字符为单位)
​ checked=“checked”/>(默认选中)
​ disabled="disabled" (禁用)
​ cols="" 宽度(字符为单位)
​ rows="" 高度(字符为单位)

type 属性值:

text 单行文本框
password 密码框
submit 提交按钮
reset 重置按钮
button 普通按钮
radio 单选按钮(单选框)
单选按钮配合name属性使用,同一组数据相同的name属性值;
checkbox 复选框
file 上传文件域
hidden 隐藏表单 (一般用来传递参数,而又不想显示在客户端)

默认选中:
checked="checked"
checked=""
checked
禁用:
disabled="disabled"
disabled=""
disabled

value="" : 设置表单元素的默认值

placeholder="" : 提示信息属性 (h5新增属性)

size: 设置表单宽度(以字符为单位)

maxlength: 设置可输入的最多字符数;

表单-多行文本框:

<textarea cols="30" rows="10">
</textarea>

​ cols="" 设置宽度(以字符为单位)
​ rows="" 设置高度(行数,以字符为单位)
​ 阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)

下拉列表(菜单):

 		<select>
            <optgroup label="组标题">	下拉内容进行分组的标签
                <option value="" selected></option>
                </optgroup>
            </select>
	selected="selected"  选中当前选项属性

表单提示标签:

<label for=""></label>

​ for="" 可以跟表单元素进行绑定
​ 绑定方法:
​ 就是放for的属性值和表单元素的id属性值设置为一样的;
​ 如:

			<label for="sex"></label>
            <input type="radio" id="sex">

常用的三种button按钮

	<button type='submit'>提交按钮</button>  
    <button type="reset">重置按钮</button> 
    <button type="button">普通按钮</button> 

标签的元素类型:

块状元素:

​ 1、独占一行
​ 2、可以直接设置宽高
​ 3、块状元素一般作为容器使用,可以容纳其他块状元素和其他行内元素
​ 4、h1~h6 p 不能嵌套其他的块状元素,包括自身也不行;

h1 ~ h6 p div hr

行内元素:

​ 1、自左向右依次排列,不折行
​ 2、不可以直接设置宽高
​ 3、不能嵌套自身;

br strong b i em u ins s del span sup sub

CSS(层叠样式表)

css写法,特性,权重

css样式的两种写法

关联样式表的方法一(link):(推荐使用)

<link rel="stylesheet" type="text/css" href="添加目标文件路径">

属性:
rel="stylesheet" 关联样式表 (必须的)
rel : relation 关系 联系 关联
stylesheet : 样式表

​ type="text/css" 定义文本类型为css ,可写可不写;

​ href="" 添加目标文件路径

说明:
建议写在head区域内
作用域:可以被多个页面连接使用;
关联样式表的方法二(@import)

        <style>
            @import url(添加目标文件路径);
        </style>

css三大特性与权重

优先级:

​ 1、行内样式表的优先级别最高;
​ 2、内部和外部的优先级别跟书写的位置有关系,谁的位置越靠下,谁的优先级别就越高;
​ 遵循了就近原则;

层叠(覆盖)性:

​ 1、当没有发生冲突的时候,就不会发生层叠(覆盖);
​ 2、当发生冲突的时候,优先级高的会把优先级底的层叠(覆盖)掉;

继承性:

​ 有的属性具有继承性,具有继承性的属性,大部分都是对文本设置的属性;
​ 有的属性不具有继承性,大部分都是对结构设置的属性;

css选择器的权重(特殊性、优先级)

​ css规定了选择器的权重大小,是由四个数字组成,0000;

        类型选择器:   0001
        id选择器:     0100
        class选择器(类选择器): 0010
        包含选择器:   包含选择器的权重之和
        群组选择器:   选择器自身权重大小
        通配符:       0000
        继承属性:     0000
        行内样式表:   1000 
        伪元素选择器:  0001
        伪类选择器:   0010

        !important  关键字过滤器,具有最高优先级;
        使用方法如:
             background:#0ff !important;

        当权重相等的时候,遵循就近原则;

单位

​ px 像素

​ %百分比

​ em 相对单位,会根据当前字号的大小来显示;
​ rem 相对单位,会根据根元素(html)的字号大小来显示;
​ vw 和 、vh 相对单位,相对可是窗口的大小进行显示;

​ pt 基本不用;固定单位,1pt= 16px,0.75pt = 12px (了解即可)

基本选择器

类选择器(.class)id选择器(#id)群组(,)

伪类选择器与伪元素选择器

伪类(以下四个顺序不能换)

链接伪类

​ :link{ } 设置超链接的初始状态

​ :visited{ } 设置超链接的访问过后状态

动态伪类

​ :hover{ } 设置鼠标滑过状态(所有的标签都可以添加鼠标滑过的状态;)
​ :active{ } 设置鼠标激活状态,鼠标按下去没有松开的瞬间;

伪元素

​ :before 在当前元素的第一个子元素前创建一个伪元素

​ :after 在当前元素的最后一个子元素前创建一个伪元素

css属性(文本/列表/边框/透明/背景/鼠标形状)与继承

隐藏元素属性(占用大小的那个)

​ visibility:hidden(隐藏)/visible(可见的)

设置鼠标指针的形状

​ cursor:pointer(手型);

文本属性

复合式 font 属性语法:

​ 语法:
​ font:属性1 ... 属性n size/line-height family;

​ 其中line-height可以写倍数(相对于size的倍数),也可以写具体值

设置小型的大写字母

​ font-variant: small-caps;

设置英文单词大小写

​ text-transform:capitalize; 设置单词首字母大写
​ text-transform:lowercase;设置单词为小写字母
​ text-transform:uppercase;设置单词为大写字母

文本溢出

overflow
visible:默认值,内容不会被修剪,会呈现在元素框之外;
hidden:内容会被修剪,并且其余内容是不可见的;
scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;
auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;
inherit:规定应该从父元素继承overflow属性的值。
white-space(空余空间)
normal:默认值,多余空白会被浏览器忽略只保留一个;
pre:空白会被浏览器保留;
pre-wrap:保留一部分空白符序列,但是正常的进行换行;
pre-line:合并空白符序列,但是保留换行符;
nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止;
text-overflow(css3)
clip:不显示省略号(...),而是简单的裁切;
ellipsis:当对象内文本溢出时,显示省略标记;
文本溢出变省略号设置
省略号设置:
text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
1、容器宽度:width:value;(px、%,都可以)
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:
     text-overflow:ellipsis;
                        
注:必须是单行文本才能设置本文溢出!!!

加粗属性:

font-weight

​ 属性值:
​ lighter 极细的 100 - 300
​ normal 常规显示(默认值) 400 - 500
​ bold 加粗的 600 -700
​ bolder 更粗的 800 - 900
​ 100 ~ 900 九个等级 依次是越来越粗

倾斜属性:

​ font-style

​ 属性值:
​ 1、italic 倾斜较小的
​ 2、oblique 倾斜交大的
​ 3、normal 常规显示,取消倾斜;

行高属性:

line-height

​ 属性值:

​ value

​ 当属性值不带单位的时候为当前字体大小的倍数,(如line-height:1;为当前字体的1倍)

​ 当属性值带单位的时候为当具体数值

​ auto 自动显示,标签自带行高;(默认值)

水平对齐属性:

​ text-align

​ 属性值:
​ left 左对齐 (默认值)
​ center 居中对齐
​ right 右对齐
​ justify 两端对齐

垂直对齐属性:

​ vertical-align( 没有继承性)

​ 属性值:
​ top 顶部
​ middle 居中
​ bottom 底部
​ baseline 基线对齐 (默认值)

说明:用于行内块对齐,其中baseline会导致下面留白

首行缩进属性:

	text-indent 

说明:
1、首行缩进支持负值;

​ 2、只针对第一行起作用;

​ 3、当负值足够大时可用于隐藏文本

文本修饰属性:

复合写法:text-decoration

语法:
text-decoration:属性1 ... 属性n;

text-decoration-line

​ overline 上划线
​ underline 下划线
​ line-through 删除线
​ none 没有修饰(默认值)

text-decoration-color

颜色 (默认情况下跟文本的颜色统一)

text-decoration-style

​ solid 实线 (默认值)
​ dashed 虚线
​ dotted 点线
​ double 双边线

字间距属性:

letter-spacing

说明:支持负值
设置字和字之间的间距和字母和字母之间的间距;

词间距:

word-spacing

说明:支持负值
设置字和字之间的间距和字母和字母之间的间距;

文本阴影

text-shadow:

列表属性

列表样式(前面的圆点)类型

list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);

list-style-type:none===list-style:none;

列表样式图

list-style-image:url(所使用图片的路径及全称);

列表样式位置

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

取消列表样式

list-style:none;

边框属性

边框属性缩写

border:边框宽度 边框风格 边框颜色;
例如:border:5px solid #ff0000

一般用于多方向的边框缩写属性:

边框宽度:

border-width:

边框颜色:

border-color:

边框样式:

border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)/none

透明属性与其兼容ie的写法

opacity

属性值的取值范围是 0 — 1;

       兼容低版本(ie8及以下)浏览器:了解
        filter:alpha(opacity=50);   取值范围是0 — 100

背景属性与图片格式与颜色缩写规则

背景属性的缩写语法:

background:属性值1 属性值2 属性值3;

背景缩写:background:url(路径)是否平铺 color x y/size;

背景图可以写多张,用逗号隔开:

background:url(路径)是否平铺 color x y/size,url(路径)是否平铺 color x y/sizetop/cover;

背景颜色

background-color:颜色值

背景图片

background-image:url(路径)

背景图片平铺属性

background-repeat:no-repeat/repeat/repeat-x/repeat-y

背景图的定位属性

background-position:x y;

left/center/right/数值 top/center/bottom/数值;

background-position为简写,包含:

​ background-position-x;

​ background-position-y;

背景图的大小属性

background-size:value

背景图的固定属性

background-attachment:scroll(滚动)/fixed(固定);}**

fixed 固定,不随内容一块滚动;
scroll:随内容一块滚动。

视觉差效果页面 https://divups.com/

十六进制:

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

颜色值缩写规则

每组数值(RGB三组)都同时相同的时候,才可以缩写,如:

ffffff=#fff;

000000=#000

ff00ee=#f0e

网页上常用的图片格式(压缩图片)

jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )

gif:无损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;

png :无损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

css属性继承

不可继承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。
块状元素可继承:text-indent和text-align
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。

盒模型/BFC/元素类型与转换/浮动/定位与层叠样式

盒模型

标准盒模型:

​ content(width/height) + padding + border + margin

怪异盒模型:

​ width/height(content + padding +border) + margin

margin常出现的bug

a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。

b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会错误放在父元素上面。

BFC

  1. BFC(Block Formatting Content),块级格式化上下文
  2. 是页面可视化css渲染的一部分,是块盒子布局的一块区域
  3. 这个区域是相对外界独立的
  4. 计算BFC的高度时,浮动元素也参与计算
  5. 布局规则:容器里面的元素不会影响外部元素,因此不会造成高度塌陷,其余规则与块级元素相似。(也会margin重叠,但是不会margin穿透)

触发BFC的条件

1、根元素(html)
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible

BFC的应用

1、自适应两栏布局
2、清除内部浮动(高度塌陷)
3、防止margin上下重叠

元素类型与转换

元素类型

根据css显示分类,XHTML元素被分为

三种类型:
	块状元素,内联元素,可变元素

&&

三种类型:	
	块状元素,内联元素,内联块元素(css2.1增加)
块状元素的特点
A:块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,
B:默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。 
D:块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
常见的块元素
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表格列分组元素
table-tr  表格及行-单元格
...
内联元素的特点
A:内联元素的表现形式是始终以行内逐个进行显示;
B:内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
C:内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)
常见的内联元素
a –超链接(锚点)                               
b - 粗体(不推荐) 
br - 换行                             
i - 斜体
em - 强调                             
img - 图片                         
input - 输入框               
label - 表单标签                  
span - 常用内联容器,定义文本内区块
strong - 粗体强调
sub - 下标   
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择  
...
可变元素(了解)
需要根据上下文关系确定该元素是块元素或者内联元素。

元素类型的转换

display属性
盒子模型可通过display属性来改变默认的显示类型
display的属性值
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 此元素会被显示为内联元素,元素前后没有换行符。**
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。)
table-row-group 此元素会作为一个或多个行的分组来显示(类似
table-header-group 此元素会作为一个或多个行的分组来显示(类似
table-footer-group 此元素会作为一个或多个行的分组来显示(类似
table-row 此元素会作为一个表格行显示(类似
table-column-group 此元素会作为一个或多个列的分组来显示(类似
table-column 此元素会作为一个单元格列显示(类似
table-cell 此元素会作为一个表格单元格显示(类似
table-caption 此元素会作为一个表格标题显示(类似
inherit 规定应该从父元素继承 display 属性的值。
A、大部分块元素display属性值默认为block,其中列表li的默认值为list-item。
B、大部分内联元素的display属性值默认为inline,其中input,默认为inline-block(行内块元素),img的显示效果和行内块元素一样,但是是置换元素(替换元素)。

浮动

浮动的影响

  1. 元素会自动转换为块状元素
  2. 父元素会高度塌陷
  3. 元素会根据浮动的先后依次排列
  4. 浮动元素相当于没有空间,后面元素会占据它原有的空间
  5. 会导致后面元素的内容依次根据浮动方向环绕该浮动元素

清除浮动的方法

  1. BFC

  2. clear:both;

  3. 万能清除法:after伪元素清浮动(推荐)

    ​ 可以给所有浮动元素的父级一个 clearFix的类名

    ​ 当一个元素需要清除浮动的时候 直接设置clearFix类名即可。

    class名::after{
            content:"";
            display:block;
            clear:both;
                                /* 后面是兼容低版本浏览器的写法 */
            height:0;
            overflow:hidden;
            visibility:hidden;
       }
    class名{
    		*zoom:1;			/* 兼容低版本浏览器的写法 */
    }
    

定位与层叠样式

无特殊/静态 定位

static (默认值)

相对定位

relative 相对自己定位,原来的空间仍然占有

绝对定位

absolute 相对最近的有定位的祖先元素定位,如果没有,相对于文档流左上定位

​ 设置绝对定位后,元素会根据里面的内容显示宽高,比如块级元素不在占一行

固定定位

fixed 相对于浏览器窗口定位,其自身具有行内块性质(display保持不变)不再默认占有一行,其内元素隐形转换为块级元素

层叠样式

z-index:parseInt; 数值越大层叠优先级越高

H5

自定义ico图标(log)

	https://www.bitbug.net

iframe框架 :

​ 语法:
元素会创建包含另外一个文档的内联框架(即行内框架)。
​ 属性:
​ src 规定在 iframe 中显示的文档的 URL
​ frameborder="0/1" 规定是否显示框架周围的边框。
​ width 定义 iframe 的宽度。
​ height 规定 iframe 的高度。
​ name 规定 iframe 的名称。
​ scrolling auto/yes/no 规定是否在 iframe 中显示滚动条

html5结构标签:

​ section元素 表示页面中的一个区块
​ article元素 表示一块与上下文无关的独立的内容
​ aside元素 在article之外的,与article内容相关的辅助信息
​ header元素 表示页面中一个内容区块或整个页面的标题
​ footer元素 表示页面中一个内容区块或整个页面的脚注
​ nav元素 表示页面中导航链接部分
​ main元素 表示页面中的主要的内容(ie不兼容)

视频:

<video src="">
	<source src="" type=""> (可选)用于浏览器替换可支持的音视频文件
	您的浏览器版本过低,不支持此视频,建议升级浏览器
</video>

​ 属性:
​ src="" 导入媒介资源链接(视频地址);
​ controls 属性:如果出现该属性,则向用户显示控件,比如播放按钮。
​ loop 属性: 循环播放
​ autoplay 属性 : 自动播放; 需要和muted一起使用;
​ muted 属性 : 静音播放
​ poster 属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。

​ 视频格式: mp4 \ ogg \ webm

​ 视频标签source标签type属性值:video/ogg video/mp4 video/webm

音频:

<audio src="">
	<source src="" type=""> (可选)用于浏览器替换可支持的音视频文件
	您的浏览器版本过低,不支持此音频,建议升级浏览器
</audio>

​ 属性:
​ src="" 导入媒介资源链接(音频地址);
​ controls 属性:如果出现该属性,则向用户显示控件,比如播放按钮。
​ loop 属性: 循环播放
​ autoplay 属性 : 自动播放; 需要和muted一起使用;
​ muted 属性 : 静音播放

​ 音频source标签type属性值: audio/ogg audio/mpeg audio/mav

智能表单:

<input type="">

type属性值:
email 邮件类型的表单
url url地址表单(网址),检测http://
range 滑动条表单
number 数字表单
search 搜索表单
color 颜色表单
time 时间类型的表单
month 月类型表单
week 周类型表单
date 天类型表单
datetime-local 选区本地时间

属性:
required 不能为空
min 最小值
max 最大值
step 步幅 确定一个法定值
autocomplete 是否显示提示信息(是否显示缓存内容,就是曾经输入过的东西,比如账号)
-> on 打开(默认值)
-> off 关闭
注:要和name一起使用
placeholder 提示信息
autofocus 自动聚焦。一个页面只能由一个。
novalidate 取消验证 (添加给form)
multiple 选择(上传)多个
readonly 把输入字段设置为只读
list 必须结合datalist标签,绑定datalist id名称。

下拉菜单(列表标签):(不能独自存在)

​ 语法:

<input	list="datalist的ID名">
<datalist id="ID名">
    <option></option>
</datalist>

HTML5 语法的改变:

(不建议省略,以前怎么写,现在还怎么写;)

​ 内容类型(ContentType)
​ HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm"

		<!DOCTYPE html>不区分大小写
        指定字符集编码
        <meta charset="UTF-8">
        可省略结束标记的元素 <br />
        不允许写结束标记的元素:br、col、embed、hr、img、input、、link、meta	  
        可以省略结束标记的元素:<li>   <p>
        li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
        可以省略全部标记的元素(直接不写):html、head、body、colgroup、tbody
        属性值可以使用双引号,也可以使用单引号。

C3

浏览器前缀:

浏览器 内核 前缀
IE Trident -ms-
firefox Gecko -moz-
Safari webkit -webkit-
Chrome webkit–>blink -webkit-
opera Presto(Opera前内核) (已废弃),现在是blink -o-

指针事件

pointer-events:auto(默认值)

​ none 鼠标事件不触发(比如不会a链接不跳转)

选择器

后代选择器

子选择器:(>)相邻兄弟选择器:(+)通用选择器:(~)

交集选择器:

多条件,将选择器连起来写

​ 语法:元素名+(id/class/属性),如p.box

属性选择器

属性值为value

title='flower'] 	<p title="flower"></p>

属性中包含独立的单词

title~=flower]		<p title="tulip flower"></p>

属性中拆出来这个词

title*=flower]		<p title="flower"></p>

属性以 value 开头且必须是完整且唯一的单词,或者以 - 分隔开

lang|=en]	<p lang="en">  <p lang="en-us">

属性的前几个字母是 value

lang^=e]	<p lang="en">

属性的后几个字母是 value

lang$=n]	<p lang="en">

伪类和伪元素

伪类选择器

UI状态(表单)伪类

​ :disabled 匹配不可用的表单元素

​ :enabled 匹配可用状态的表单元素

​ :checked 匹配选中状态的表单

​ :read-only 匹配不可被用户编辑的可输入表单

​ :read-write 匹配可被用户编辑的表单

​ :focus 匹配聚焦时的元素

清除复选框的默认样式

​ -webkit-appearance: none;
​ appearance: none;

目标伪类选择器(锚点)

:target 锚点跳转时触发,匹配链接指向的元素(包含url)

目标伪类使用场景
<a href='#目标元素的Id名'></a>
<a href='目标页面路径#目标页面元素的Id名'></a>

结构性伪类

公式写法:
ele:nth-of-type(3n);	 //父元素下第三的倍数位置的元素
ele:nth-of-type(n+2);	 //父元素下从第二行到最末尾
ele:nth-of-type(-n+4);	  //父元素下从开始到第四行。
ele:nth-of-type(n):nth-of-type(-n+4);	//父元素下从第二行到第四行

​ ele:nth-child(index) 父元素下的第index个且类型为ele的兄弟元素

​ 其他:

​ first-child 第一个

​ last-child 最后一个

​ nth-last-child 倒数第几

​ only-child 唯一的

​ 参数:

​ odd 奇数 even 偶数

div>p:nth-child(3)
	<div>
		<p></p>
		<h1></h1>
		<p></p>			选中这个
		<p></p>
	</div>

​ ele:nth-of-type(index) 父元素下的第index个ele元素

​ 其他:

​ first-of-type 第一个

​ last-of-type 最后一个

​ nth-last-of-type 倒数第几

​ only-of-type 唯一的

div>p:nth-of-type(3)
	<div>
		<p></p>
		<h1></h1>
		<p></p>			
		<p></p>			选中这个
	</div>

伪元素选择器:

高亮状态伪元素

​ selection
​ 注:只能改变背景颜色和文本颜色;

否定伪类

​ not

用法:
	ul>li:not(.not):hover		选中ul下li类名不为.not的所有li元素的hover状态

空标签伪元素

​ empty

渐变(必须写两个颜色)

--webkit--gradient(渐变类型,x y,x y,color-stop1(0.1,rgb(0,0,0),...,color-stopnstop1(1,rgb(0,0,0))

参数1:渐变类型

参数2:渐变的起始位置

参数3:渐变的终止位置

参数4....n:渐变的位置及颜色

线性渐变:

从一个点到另一个点之间的过渡;
background-image:linear-gradient(direction,color-stop1 开始渐变位置 终止渐变位置,...,color-stopn 开始渐变位置 终止渐变位置);

当只写终止渐变位置时,默认开始渐变位置为元素渐变方向的起点。

说明:
    direction:默认为to bottom,即从上向下的渐变;
                to bottom  自上向下
                to top 
                to left 
                to right 
                to left top  
                to right top  
                to left bottom  
                to right bottom 
                角度(deg 度的单位)
                开始坐标 结束坐标

    stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

    repeating 重复显示
           如:
             background-image:repeating-linear-gradient(direction,color stop);

径向渐变:

从一个点想四周的过渡;
radial-gradient()
语法一:
background-image: -webkit-radial-gradient(position, shape size, start-color 开始渐变位置 终止渐变位置, ..., last-color 开始渐变位置 终止渐变位置);
语法二:
background-image: radial-gradient(shape size at position, start-color 开始渐变位置 终止渐变位置, ..., last-color 开始渐变位置 终止渐变位置);

当只写终止渐变位置时,默认开始渐变位置为元素中心。

描述
shape 定义渐变的形状。可能的值:ellipse椭圆形(默认)circle圆形
size 定义渐变的尺寸。可能的值:farthest-corner最远角(默认)closest-side最近边 closest-corner最近角 farthest-side最远边
position 定义渐变的位置。默认值是 "center center"。
start-color, ..., last-color 色标是参与渐变的颜色,该值后面跟着渐变的范围(0% 到 100% 之间的百分比值,或沿渐变轴的长度值(px等))。

最大/小内容宽高

width:

​ max-content;

​ min-content;

四则运算方法

calc()

边框(圆角/盒阴影/边框图片)

圆角

border-radius:左上 x 右上x 右下x 左下x/左上y 右上y 右下y 左下y; y值可不写

border-radius:左上x 右上x左下x 右下x/左上y 右上y左下y 右下y; y值可不写

border-radius:左上x右下x 右上x左下x/左上y右下y 右上y左下y; y值可不写

盒阴影

box-shadow
关键字(内 外阴影)
length(x轴的偏移量)
length(y轴的偏移量)
length(模糊程度)
length(阴影面积)
color(阴影颜色)

图片边框

border-image 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框图像区域超出边框的量(值是一个倍数)

滤镜

模糊:

​ filter : blur(value)

黑白网页:(比如南京大屠杀纪念日会用)

​ filter:grayscale(100%)

元素不面向屏幕时是否可见

backface-visibility:visible/hidden;

背景(大小/原点/裁剪)

背景图大小

background-size

​ x y 设置百分比相对于元素缩放

​ cover 图片等比放大至铺满元素

​ contain 图片等比放大至宽或高其中一个和元素相等

背景图原点

设置背景图起始位置(repeat仍然会铺满,只是更改背景图起始位置)

background-origin:

​ content-box

​ padding-box

​ border-box

背景裁切属性:

​ background-clip:
​ 属性值:
​ border-box 背景被裁剪到边框盒。 默认值
​ padding-box 背景被裁剪到内边距框。
​ content-box 背景被裁剪到内容框。
​ text 裁剪到文本区域

非正式版属性值,使用时要加前缀
​ 如:-webkit-background-clip:text;

文本效果(边框/换行)

文字边框

-webkit-text-stroke : 1px red ;
粗细 颜色

文字换行

text-overflow:

​ wrap:文本溢出换行

word-wrap:

​ normal :只在允许的断字点换行(默认值)

​ break-word :属性允许长单词或 URL 地址换行到下一行

word-break
break-all:它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句
Keep-all :文本不会换行,只能在半角空格或连字符处换行(默认值)

自定义字体

​ @font-face
​ 字体图标
​ 1.制作一套矢量图
​ 2.将矢量图与字符进行绑定
​ 3.使用工具或者站点生成一套字体
​ 4.最终使用

教程:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

​ 字体兼容处理网站
https://www.fontsquirrel.com/tools/webfont-generator
​ icomoon字体图标
https://icomoon.io/#home

阴影

盒阴影

box-shadow 支持多个阴影,用逗号隔开

说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值](https://www.runoob.com/cssref/css_colors_legal.aspx)寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

文本阴影

text-shadow 支持多个阴影,用逗号隔开

属性 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。

2D/3D转换

变形属性transform注意点

先旋转后位移元素坐标轴跟着变(即旋转的过程中平移,呈抛物线运行)

先位移后旋转元素坐标轴不变(即平移的过程中旋转,呈直线运行)

2D转换

变形原点(更改旋转轴初始位置):

​ transform-origin:x y;
​ 法定属性值: top right bottom left center
​ 数值 : px ,%
​ 默认值是:center center 或者 50% 50%;

函数

位移

transform:translate();
translate(x , y,z) x轴的位置,y轴的位移
translateX(x)
translateY(y)

说明:
   -> 元素相对自身所在的位置进行位移,跟relative的效果相似;
   -> 位移后原本的位置依然保留,不影响页面布局
   -> 会发生层级关系
   -> 当属性值为百分比时,是相对自身的宽高显示的值的大小;
旋转

transform:rotate(deg);
rotateX( x deg) 沿x轴旋转,上往里翻为正
rotateY(y deg) 沿y轴旋转,右往里翻为正

缩放

transform:scale();
scale(x) x,y都会发生缩放
scale(x , y) x 宽; y 高
scaleX(x)
scaleY(y)

            属性值是以倍数显示,不需要加单位;支持负值,反向缩放;
            1 带表自身大小 不变,大于1 会放大,0——1 之间会缩小,负值会反向延伸;
倾斜:

​ transform:skew(deg);
​ skew(x) x轴的倾斜
​ skew(x , y) x轴的倾斜,和y轴的倾斜;
​ skewX(x)
​ skewY(x)

matrix()

3D转换

开启3D空间

transfrom-style:preserve-3d;

景深(让元素有3D透视效果)

perspective(n) 定义 3D 转换元素的透视视图。

函数

函数 描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

过渡

transition:

css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值

        transition:; 复合式属性;
            transition-property:检索或设置对象中的参与过渡的属性 
                -> all 所有属性(默认值);
                -> 多个属性之间以逗号隔开的形式依次排列;
            transition-duration:检索或设置对象过渡的持续时间  (必须的) 
                -> 过度时间的单位(s 秒   ms 毫秒);
            transition-delay:检索或设置对象延迟过渡的时间
                -> 过度时间的单位(s 秒   ms 毫秒);
                -> 可以设置负值,表示提前执行;
            transition-timing-function:检索或设置对象中过渡的动画类型
                -> ease 逐渐慢下来 (默认值)
                -> linear 匀速
                -> ease-out 减速
                -> ease-in 加速
                -> ease-in-out 先加速后减速
                -> steps(参数1,参数2) 过渡分几步完成(逐针动画效果);
                	->参数1是关键帧数,没有单位
                	->参数2是end(默认值)或者start表示跳过结束帧或者开头帧

动画

动画库网址

https://animate.style/

https://animista.net/play/basic

animation:动画名 运行时间(必写) 属性1 属性2 ... 属性n;

定义动画

@keyframes

@keyframes 动画名{
	from			从某某开始
	to				到某某结束
}
@keyframes 动画名{
	0%{},			从某某开始
	20%{},
    100%{}			 到某某结束
}

动画属性

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。

弹性盒子

flex容器属性

​ 1、display:flex、inline-flex

注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

​ 2、flex-direction属性 决定主轴的方向(即项目的排列方向)

flex-direction: row(默认值) | row-reverse | column | column-reverse;

​ 3、flex-wrap属性,定义子元素是否换行显示

flex-wrap: nowrap | wrap | wrap-reverse;

​ 4、 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;

​ 5、 justify-content属性 定义了项目在主轴()上的对齐方式。

justify-content: flex-start (默认值)| flex-end | center | space-between | space-around | space-evenly(每个空间的间距都是相等);

​ 6、align-items属性定义项目在侧轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch(默认值)拉伸至父元素同大;

​ 7、align-content属性定义副轴的对齐方式。

生效条件:

  1. 对父元素设置自由盒属性display:flex;
  2. 设置换行,flex-wrap:wrap;

一般情况下 align-content 对单行不起作用;
但是如果元素设置了flex-wrap属性, align-content 就依然生效,即使没有真的换行也会起作用;

align-content: flex-start | flex-end | center | space-between | space-around | stretch拉伸至百分百|space-evenly每行的空余空间都相等;
align-content在侧轴上执行样式的时候,会把默认的间距给合并。对于单行子元素,该属性不起作用

flex项目属性

1、align-self属性

Internet Explorer 和 Safari 浏览器不支持 align-self 属性
说明:
	align-self 属性规定灵活容器内被选中项目的对齐方式。
	注意:align-self 属性可重写灵活容器的 align-items 属性。
	属性值
		auto 		默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
		Stretch		元素被拉伸以适应容器。
		Center		元素位于容器的中心。
		flex-start		元素位于容器的开头。
		flex-end		元素位于容器的结尾。

2、order

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

3、flex

说明:
	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
	详细属性值:
		缩写「flex: 1」, 则其计算值为「1 1 0%」										即:(flex-grow:1	flex-shrink:1 	flex-basis:0%)
		缩写「flex: auto」, 则其计算值为「1 1 auto」
		flex: none」, 则其计算值为「0 0 auto」
		flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
		
注:flex的优先级大于width;

4、flex-xxx(三个值合一块就是flex)

flex-grow:int
	一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
	0 不扩展(默认值)
    n 扩展n份  不支持负值
	
flex-shrink:int
	一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
	 0 不收缩
     n 收缩 n份 (默认值);
     注: 
       1、当每个元素的宽度相等时,收缩的量都是按收缩比例平均分配;
       2、当每个元素的宽度不相等时,怎么收缩?收的量是按照元素宽度比例和收缩比例一起计算的;

	
flex-basis
	项目的长度(项目占父盒子主轴的多长)
注:flex-basis优先级高于width 
	当flex-basis 的值为auto 时,就可以根及其他的属性(width)显示该元素的宽度;
    当flex-basis的值为0% 时,根据内容显示;

多列

列数

column-count:int

最小列宽

column-width

列数和最小列宽复合式

columns:列数 最小列宽;

列间隔

column-gap

列边框

column-rule:边框宽度 边框样式 边框颜色;

边框高度是否统一

column-fill:

​ auto 自适应

​ balance 高度以最高的统一

粘性定位

sticky 在元素位置到达固定定位位置前是静态定位,到达后变成固定定位

比如top:0; 在元素距离顶部0像素前为静态定位,距离顶部0像素后为粘性定位

语义化标签

​ 在HTML 5出来之前,我们用div来表示页面头部,章节,页脚等。但是这些div都没有实际意义。
​ 各大浏览器厂商分析了上百万的页面,从中发现了DIV名称的通用id名称大量重复。例如,很多开发人员喜欢使用
​ div id="footer"来标记页脚内容,所以Html5元素引入了语义化标签(一组新的片段类元素)

https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm
https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm

<hgroup></hgroup>
<header></header>
<nav></nav>
<section></section>
<footer></footer>
<article></article>
<aside></aside>

​ 语义化的好处
​ HTML5可以让很多更语义化结构化的代码标签代替大量的无意义的div标签
​ 这种语义化的特性提升了网页的质量和语义
​ 对搜索引擎更加的友好
​ 他们这些标签功能就是代替

功能中的一部分,他们没有任何的默认样式,除了会让文本另起一行外;
https://gsnedders.html5.org/outliner/


​ hgroup元素代表 网页 或 section 的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

	<hgroup>
	    <h1>HTML 5</h1>
	    <h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2>
	</hgroup>

	hgroup使用注意:
		如果只需要一个h1-h6标签就不用hgroup
		如果有连续多个h1-h6标签就用hgroup
		如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签


​ header 元素代表 网页 或 section 的页眉。
​ 通常包含h1-h6元素或hgroup

	<header>
	    <hgroup>
	        <h1>网站标题</h1>
	        <h2>网站副标题</h2>
	    </hgroup>
	</header>
	
	header使用注意:
		可以是“网页”或任意“section”的头部部分
		没有个数限制。
		如果hgroup或h1-h6自己就能工作的很好,那就不要用header。



nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

	<nav>
	    <ul>
	        <li>HTML 5</li>
	        <li>CSS3</li>
	        <li>JavaScript</li>
	    </ul>
	</nav>
	
	nav使用注意:
		用在整个页面主要导航部分上,不合适就不要用nav元素;



​ section元素代表文档中的 节 或 段,段可以是指一篇文章里按照主题的分段;节可以是指一个页面里的分组。

	<section>
	    <h1>section是啥?</h1>
	    <article>
	        <h2>关于section</h1>
	        <p>section的介绍</p>
	        <section>
	            <h3>关于其他</h3>
	            <p>关于其他section的介绍</p>
	        </section>
	    </article>
	</section>
	
	section使用注意:
		section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。
		article、nav、aside可以理解为特殊的section,
		所以如果可以用article、nav、aside就不要用section,没实际意义的就用div		



​ article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容

	<article>
	    <h1>一篇文章</h1>
	    <p>文章内容..</p>
	    <footer>
	        <p><small>版权:html5jscss网所属,作者:damu</small></p>
	    </footer>
	</article>
	
	article使用注意:
		独立文章:用article
		单独的模块:用section
		没有语义的:用div



​ aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

	在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。
	
	<article>
	    <p>内容</p>
	    <aside>
	        <h1>作者简介</h1>
	        <p>小北,前端一枚</p>
	    </aside>
	</article>
	
	aside使用总结:
		aside在article内表示主要内容的附属信息,
		在article之外则可做侧边栏
		如果是广告,其他日志链接或者其他分类导航也可以用




​ footer元素代表 网页 或 section 的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。

	<footer>
	    COPYRIGHT@damu
	</footer>
	
	footer使用注意:
		可以是 网页 或任意 section 的底部部分;
		没有个数限制,除了包裹的内容不一样,其他跟header类似。

移动端

移动端项目准备工作

meta标签的设置

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />


忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />


当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />


<!-- ios7.0版本以后,safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

重点设置

在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口,分别表示为, visual viewport(可视视口)和layout viewport(布局视口)。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	width = device-width:宽度等于当前设备的宽度
	initial-scale: 初始的缩放比例(默认设置为1.0)
	minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
	maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
	user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

分辨率与常见单位

分辨率,PPi,DPI,DPR,物理像素,逻辑像素区别

1、屏幕尺寸:指的是屏幕对角线的长度

2、分辨率:是指宽度上和高度上最多能显示的物理像素点个数

3、点距:像素与像素之间的距离,点距和屏幕尺寸决定了分辨率大小

4、PPI:屏幕像素密度,即每英寸(1英寸=2.54厘米)聚集的像素点个数,这里的一英寸还是对角线长度

5、DPI:每英寸像素点,印刷行业术语。对于电脑屏幕而言和PPI是一个意思

6、设备像素(又称为物理像素): 指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,和屏幕尺寸大小有关。 ppi  1px = 4 ppi;(750px)
						
7、设备独立像素(也叫密度无关像素或逻辑像素):可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),这个点是没有固定大小的,越小越清晰,然后由相关系统转换为物理像素。 (375px)
8、css像素(也叫虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位,相对的是设备像素(device pixel)

9、DPR(设备像素比):设备像素比 = 设备像素 / 设备独立像素。(在Retina屏的iphone上,DPR为2,1个css像素相当于2个物理像素)

!](.\assets\3.png)

以iphone6为例:
设备宽高为375×667,可以理解为设备独立像素(或css像素)。
dpr为2,根据上面的计算公式,其物理像素就应该×2,为750×1334。


对于这样的css样式:
width: 2px;
height: 2px;

在不同的屏幕上(普通屏幕 vs retina屏幕),css像素所呈现的大小(物理尺寸)是一致的,不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。
在retina 屏幕下,1个css像素对应 4个物理像素(1:4)


常见单位

1、px

px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。

2、em

em是相对长度单位。相对于当前对象内本文的字体尺寸(如果没有设置本文尺寸,那就是相对于浏览器默认的字体尺寸,也就是16px),这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话,有个好的建议,就是将body的font-size设置成62.5%,也就是16px * 62.5% = 10px。这样的话1em = 10px,方便我们计算。

3、rem

rem和em一样也是相对长度单位,但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响,而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的,IE8以上版本和其他浏览器都已经支持,是个做响应式页面的好选择

4、vw vh vmax

vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。

vh就是可视窗口的高度了。

这边顺便提一下vmin和vmax,vmin是指选择vw和vh中最小的那个,而vmax是选择最大的那个

移动端适配与flxible插件

媒体查询 + rem

媒体查询的两种写法

写法一(内嵌式):@media 设备类型 and (max-width:320px);

写法二(外链式):

设备类型:

​ all 所有设备

​ screen 显示器、笔记本、移动端等

关键字(连接词):

​ and 和

​ not 非

​ only 只

​ orientation

​ portrait 竖屏

​ landscape 横屏

计算方法
 计算rem方法:
        结合媒体查询   -》   随着设备的改变 更改html  font-size的值。

        媒体查询确定范围??

        移动端设计图 : 640px   750px   1080px;
        dpr              2       2         3
        范围            320px   375px     
@media screen and (max-width:320px){
    html{
        font-size:12px;
    }
}
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:376px){
    html{
        font-size:16px;
    }
}
实现流程
ui设计图   640px

dpr    2

ps量出height   88px;

88px / 2 ==  44px;

设计图640px    dpr  2

640px  /  2 == 320px

44px / 12px == rem

vw + rem

为了方便计算,可以把html的font-size值 设置成100px;        1rem == 100px;
100px是一个固定值,没办法随着设备的改变而改变。
能跟随设备发生改变 
vw 根据视口大小进行改变。
100px == ?vw   
根据设计图分配情况
第一种情况:
        如果UI设计图为 640px 
        考虑的dpr    2
        适配的核心设备   320px;

        100vw == 320px
        1vw == 3.2px
        ?vw == 100px
        31.25vw == 100px
第二种情况
        如果设计图为750px
        考虑dpr    2
        适配的核心设备   375px
        100vw == 375px
        1vw == 3.75px
        ?vw == 100px
        26.67vw == 100px;
设置方法
如果设计图为 640px    html设置{font-size:31.25vw}
如果设计图为 750px    html设置{font-size:26.67vw}
计算流程
vw  结合 rem   计算流程
因为设计图 640px
所以html设置{font-size:31.25vw;}
ps中获取height 88px
dpr     2
88 / 2 == 44px
44 / 100 == 0.44rem;

flxible.js 插件

计算流程
1:引入flxible.js插件
        <script src=""></script>
2:去掉html里面默认的meta标签
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
3:不用自己设置HTML的font-size:100px;
4:不用除dpr比值;
flxible.js原理
在页面中引入flexible.js后,flexible会在<html>标签上增加一个data-dpr属性和font-size样式(如下图)。
为了方便计算可以设置成100px;

!](.\assets\5.png)

//js首先会获取设备型号,然后根据不同设备添加不同的data-dpr值,比如说1、2或者3,从源码中我们可以看到。
if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}
页面中的元素用rem单位来设置,rem就是相对于根元素<html>的font-size来计算的,flexible.js能根据<html>的font-size计算出元素的盒模型大小。这样就意味着我们只需要在根元素确定一个px字号,因此来算出各元素的宽高,从而实现屏幕的适配效果
把视觉稿中的px转换成rem

工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种,所以你还可以根据自身情况来调整,具体如何转换,我们以视觉稿为640px的宽来举例子,把640px分为100份,每一份称为一个单位a,那么每个a就是6.4px,而1rem单位被认定为10a,此时,1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1个单位a为6.4px
1rem = 10a                                   1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px

移动端项目布局类型

rem布局(等比缩放布局、百分比布局)

!图片1](.\assets\图片1.png)

弹性布局(100%布局、流式布局)

!](.\assets\图片2.png)

弹性布局特点:

顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变;  中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资都位于右边.

特点:关键元素高宽和位置都不变,只有容器元素在做伸缩变换。对于这类app,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放

!](.\assets\图片4.png)

混合布局案例 ( rem布局结合弹性布局 )

!](.\assets\图片3.png)

PS

ps快捷键

ctrl+T 自由变换

ctrl+shift+alt+s 保存为web格式图片

alt + del 填充前景色的快捷键
ctrl + del 填充背景色的快捷键

ctrl+e 合并图层

ps的基本操作:

​ 1、测量工具:工具栏里的第二个工具 选框工具
​ 2、在选区中右键 —— 选变换选区(改变选区大小)
​ 3、窗口 —— 信息 (查看选区大小的值)
​ 4、显示或隐藏标尺:ctrl + r
​ 5、鼠标放在标尺上右键,选择像素

  1. 选择裁切工具右键切换成切片工具

  2. 切片后按ctrl+c,ctrl+n,ctrl+v,ctrl+shift+alt+S保存为web图片

  1. 选择图层新建图层
  2. alt+del给图层填充前景色
  3. 把新建的图层拉到后面

ctrl+shift+n新建图层

ctrl+j把剪切的图片添加到图层

ctrl+i反选

alt+del添加前景色

w魔法棒

c切片

b画笔工具初略修图

q 钢笔,精确修图

正则

三种括号的区别

() 是为了提取匹配字符串的,表达式中有几个()就有几个相应的匹配字符串。(\s*)表示连续空格的字符串

] 是定义匹配的字符范围。比如a-zA-Z0-9]表示相应位置的字符要匹配英文字符和数字。\s] 表示空格或者

{}一般是用来匹配的长度。比如\s{3}表示匹配三个空格,\s{1,3}表示匹配1到3个空格

中文unicode编码范围

\u4e00-\u9fff

特殊字符

特别字符 描述
$ 匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身,请使用 \ $。
( ) 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符,请使用 \ ( 和 )。
* 匹配前面的子表达式零次或多次。要匹配 * 字符,请使用 \ *。
+ 匹配前面的子表达式一次或多次。要匹配 + 字符,请使用 \ +。
. 匹配除换行符 \n 之外的任何单字符。要匹配 . ,请使用 \ . 。
标记一个中括号表达式的开始。要匹配 ,请使用 \ 。
? 匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 \ ?。
\ 将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如, 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\' 匹配 "",而 '(' 则匹配 "("。
^ 匹配输入字符串的开始位置,除非在方括号表达式中使用,当该符号在方括号表达式中使用时,表示不接受该方括号表达式中的字符集合。要匹配 ^ 字符本身,请使用 ^。
{ 标记限定符表达式的开始。要匹配 {,请使用 \ {。
| 指明两项之间的一个选择。要匹配 |,请使用 \ |。

限定符

字符 描述
* 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+ 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。
n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。
n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。例如,"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。

定位符

字符 描述
^ 匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性,^ 还会与 \n 或 \r 之后的位置匹配。
$ 匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性,$ 还会与 \n 或 \r 之前的位置匹配。
\b 匹配一个单词边界,即字与空格间的位置。
\B 非单词边界匹配。

修饰符

修饰符 含义 描述
i ignore - 不区分大小写 将匹配设置为不区分大小写,搜索时不区分大小写: A 和 a 没有区别。
g global - 全局匹配 查找所有的匹配项。
m multi line - 多行匹配 使边界字符 ^$ 匹配每一行的开头和结尾,记住是多行,而不是整个字符串的开头和结尾。
s 特殊字符圆点 . 中包含换行符 \n 默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符,加上 s 修饰符之后, . 中包含换行符 \n。
u

元字符

字符 描述
. 匹配除了换行\n和行结束符之外的任何单字符。要匹配 . ,请使用 \ .
\w 匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
\W 匹配非字母、数字、下划线。等价于 ' [1]'。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [2]
\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [\f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。
\S 匹配任何非空白字符。等价于 [ ^\f\n\r\t\v]。
\b 匹配一个单词边界,即字与空格间的位置。
\B 非单词边界匹配。
\0 查找 NUL 字符。
\n 匹配一个换行符。等价于 \x0a 和 \cJ。
\f 匹配一个换页符。等价于 \x0c 和 \cL。
\r 匹配一个回车符。等价于 \x0d 和 \cM。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
\cx 匹配由x指明的控制字符。例如, \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则,将 c 视为一个原义的 'c' 字符。

运算符优先级

正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。

相同优先级的从左到右进行运算,不同优先级的运算先高后低。下表从最高到最低说明了各种正则表达式运算符的优先级顺序:

运算符 描述
\ 转义符
(), (?😃, (?=), ] 圆括号和方括号
*, +, ?, {n}, {n,}, 限定符
^, $, \任何元字符、任何字符 定位点和序列(即:位置和顺序)
| 替换,"或"操作 字符具有高于替换运算符的优先级,使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food",请使用括号创建子表达式,从而产生"(m|f)ood"。

匹配规则

(pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '(' 或 ')'。
(?:pattern) 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
(?=pattern) 正向肯定预查(look ahead positive assert),在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如,"Windows(?=95|98|NT|2000)"能匹配"Windows2000"中的"Windows",但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?!pattern) 正向否定预查(negative assert),在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows",但不能匹配"Windows2000"中的"Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。
(?<=pattern) 反向(look behind)肯定预查,与正向肯定预查类似,只是方向相反。例如,"`(?<=95
(?<!pattern) 反向否定预查,与正向否定预查类似,只是方向相反。例如"`(?<!95

正则常用方法

1.test() :在字符串中查找符合正则的内容,若查找到返回true,反之返回false.

​ 用法:正则.test(字符串)

2.search() :在字符串搜索符合正则的内容,搜索到就返回出现的位置(从0开始,如果匹配的不只是一个字母,那只会返回第一个字母的位置), 如果搜索失败就返回 -1

用法:字符串.search(正则)

3.match() 在字符串中搜索复合规则的内容,搜索成功就返回内容,格式为数组,失败就返回null。
  用法: 字符串.match(正则)

4.replace() :查找符合正则的字符串,就替换成对应的字符串。返回替换后的内容。

用法: 字符串.replace(正则,新的字符串/回调函数)(在回调函数中,第一个参数指的是每次匹配成功的字符)

5.new RegExp('正则','匹配模式') 等同于 /正则/匹配模式


  1. A-Za-z0-9_ ↩︎

  2. 0-9 ↩︎

posted @ 2022-04-11 21:14  听风小弟  阅读(97)  评论(0)    收藏  举报