编程技术

Document

CSS+HTML

CSS

css常用样式

fiex布局

父级容器设置： display：flex 开启flex布局（弹性盒模型）

1、flex-direction（主轴方向）

  • 自左向右：row（默认值）

  • 自右向左：row-reverse

  • 自上向下：column

  • 自下向上：column-reverse

2、flex-wrap（主轴换行）

  • 不换行： nowrap（默认）

  • 换行，自上向下： wrap

  • 换行，自下向上： wrap-reverse

3、flex-flow（flex-direction和flex-wrap简写，默认值为row nowrap）

4、 justify-content（item项主轴上的对齐方式）

  • flex-start

  • flex-end

  • center

  • space-between

  • space-around

5、align-items（item项在交叉轴上的对齐方式）

  • stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）

  • center： 交叉轴的中点对齐

  • flex-start： 交叉轴的起点对齐

  • flex-end： 交叉轴的终点对齐

  • baseline: 项目的第一行文字的基线对齐

6、align-content（多根轴线交叉轴对齐方式，单轴线设置不起作用）

  • stretch： 轴线占满整个交叉轴（默认值）

  • flex-start： 交叉轴的起点对齐，自上向下

  • flex-end： 交叉轴的终点对齐，自下向上

  • center： 交叉轴的中点对齐，居中

  • space-between： 间隔平均分布，上下两端无间隔

  • space-around： 间隔平均分布，上下两端有间隔

item项属性（6个）：order、flex-grow、flex-shrink、flex-basis、flex、align-self

1、 order（item项 小-大 顺序排列，允许负数）

order: 1, order: -1

2、flex-grow（item项的按比例占满主轴）

flex-grow: 1, lex-grow: 2

3、flex-shrink

item项的缩小比例，默认为1，空间不足，该项将缩小

4、flex-basis

分配多余空间之前，item项占据的主轴空间

浏览器根据该属性，计算主轴是否有多余空间。默认值auto，即项目的本来大小

5、flex

flex-grow、flex-shrink、flex-basis的简写，默认值为【0 1 auto】，后两个属性可选

6、align-self

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

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

圣杯布局 (常见PC端)

.container {
    height: 500px;
    display: flex;
    justify-content: space-between;
}
​
.content { flex: 1 }
​
.left, .right { width: 200px }

网格布局Grid

CSS用户界面样式

  • 鼠标样式cursor

    属性值 描述
    default 小白 默认
    pointer 小手
    move 移动
    text 文本
    not-allowed 禁止

  • 轮廓线 outline：color style width

  • 防止拖拽文本域 resize：none

精灵图

将网页中的多张图像整合到一张大图中（精灵图），通过调整位置来展示图片，从而减少请求次数

溢出裁剪

  • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本

    • clip：当对象内文本溢出部分裁切掉

    • ellipsis：当对象内文本溢出时显示省略标记（...）

  • white-space：设置文字在一行显示，不能换行

  • overflow：文字长度超出限定宽度，则隐藏超出的内容

  • 基于高度截断、基于行数截断

    {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .demo {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.demo::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
}
​
​
<div class='demo'>这是一段很长的文本</div>

margin塌陷/合并

  • 正数&&正数，取最大的数

  • 负数&&负数，取绝对值最大的数

  • 正数&&负数，取和的值

解决方法

  • 绝对定位，父元素position：reletive，子元素position：absolute

  • 相对定位，子元素position：reletive，通过top、left等

  • 行内块元素，子元素display：inline-block

  • 浮动，子元素float:left

  • BFC，开启BFC的父元素不会和子元素发生外边距叠加，overflow：hidden

  • 内边距，父元素设置margin-top，padding-top

  • 父元素设置边框、元素之间添加空元素等

BFC 块级格式化环境

BFC (Block Formatting Context）是一个css中隐含的属性，开启BFC的元素会变成一个独立的布局区域

元素开启BFC后的特点

  • 开启BFC的元素不会被浮动元素所覆盖

  • 开启BFC的元素子元素和父元素外边距不会重叠

  • 开启BFC的元素可以包含浮动的子元素

开启元素的BFC

  • 设置元素的浮动（不推荐)

  • 将元素设置为行内块元素（不推荐)

  • 将元素的overflow设置为一个非visible的值，如： overflow:hidden

作用：解决高度塌陷，外边距重叠，清除浮动问题

CSS复合选择器

  • 子元素选择器【.box1>box2】

  • 交集选择器【h2.title】

  • 并集选择器【.box1, box2, box3】

  • 链接伪类选择器

    • a:link：未访问的链接

    • a:visited：已访问的链接

    • a:hover：鼠标悬停

    • a:active：选定的链接

  • 伪元素选择器

    • :before : 选择器在被选元素的内容前面插入内容

    • :after : 选择器在被选元素的内容后面插入内容

  • 属性选择器

    • a[href]：选择带有href属性的a元素

    • a[href="www.baidu"]：选择属性href="www.baidu"的a元素

    • a[href][title] 选择所有同时有 href 和 title 属性的a元素

    • 包含、以指定值开头、以指定值结尾

伪类选择器（常用）

  • :first-child：第一个子元素

  • :last-child：最后一个子元素

  • :nth-child(n)：选中第n个子元素

  • : empty ：选择没有任何内容的元素，空格也算元素

  • : not：否定选择器，可以选择除某个元素之外的所有元素

  • :target：目标选择器，用来匹配文档的url的某个标志符的目标元素

  • ::before和::after

    必须配合content属性使用，向元素逻辑上的头或尾添加内容，content 定义插入的内容，content必须有值，至少是空。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入

定位 position

相对定位、绝对定位、固定定位、粘性定位

  • 相对定位：relative，相对于元素本身来定位

  • 绝对定位：absolute，父元素设置relative，子元素相对于父元素定位，如不设置，则以根元素定位

  • 固定定位：fixed，一种绝对定位，永远参照于浏览器的视口进行定位，元素不会随网页的滚动条滚动

  • 粘性定位：sticky，在没有达到阈值之前，随鼠标正常移动，到达后为固定定位，常用于网页侧边栏

雪碧图

将多个小图片统一保存到一个大图片中，通过调整background-position来显示具体的小图片，这样图片会同时加载到网页中，有效的避免图片出现闪烁的问题，在网页中应用广泛，称为CSS-Sprite

使用步骤

  1. 先确定要使用的图标

  2. 测量图标的大小

  3. 根据测量结果创建一个元素

  4. 将雪碧图设置为元素的背景图片

  5. 设置一个偏移量以显示正确的图片

特点

一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升体验感

background-position: -xxxpx xxxpx;

标签

行内元素（内联元素）

不占有独立区域，大小依赖于自身内容的大小（例如文字和图片），一般不能随意设置 宽高、对齐等属性

常见的行内元素：< a >< strong>< b>< em>< del>< span >等

行内块元素

和相邻行内元素在同一行，默认有间隙，默认宽度是它本身内容的宽度。可设置 宽高、内外边距、行高等

常见的行内块元素：< img >、< input >/< td >等

块级元素

独立一行，可设置 宽高、内外边距等，宽度默认所在容器的100%，可容纳行内元素和其他块元素

常见的块级元素：< div >/< h1 >~< h6 >/< p >/< ul >/ < table >< u l> < ol>等

特殊：文字类的块级元素不能放块元素，如< p >/< h1 >~< h6 >/< dt >

空元素

空元素下是没有子级节点和内容的，没有闭合标签

常见的空元素：br、hr、img、 input、 link、 meta等

标签显示模式转换（display）

块元素——>行内元素 ： display : inline

行内元素——>块元素 ： display : block

块、行内元素——>行内块： display : inline-block

background

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

background: transparent url(xxx.jpg) repeat-y scroll center top ;

  • 背景颜色：transparent ，默认：透明

  • 背景图片地址：url(xxx)

  • 背景平铺：

    • repeat ：在纵向和横向上平铺（默认）

    • no-repeat ：不平铺

    • repeat-x ：在横向上平铺

    • repeat-y ：在纵向平铺

    • inherit ：继承父元素

  • 背景滚动

    • 设置背景图像是否固定或者随着页面的其余部分滚动

    • scroll 背景图片随着页面的其余部分滚动- 默认

    • fixed 背景图像是固定的

    • inherit 指定backgrund-attachment的设置应该从父元素继承

  • 背景位置

    • background-position: 0 0 左上角 （默认）

    • 单位可以是长度px，关键字，百分数值

    • 关键字成对出现left right top bottom center，如果仅指定一个关键字，其他值将会是"center"

px、em、rem、vh、vw

px：像素，是相对于显示器屏幕分辨率

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。浏览器的默认字体是16px。默认1em=16px

在body选择器中声明 Font-size=62.5% ，如此 1em=10px ，换算更为方便

rem：相对与HTML根元素，只修改根元素就成比例地调整所有字体大小。

除了IE8及更早版本外，所有浏览器均已支持rem，不支持它的浏览器，写一个绝对单位的声明

p { font-size:14px; font-size:.875rem }

vh和vw：就是根据窗口的宽度，分成100等份，100vw就表示满宽，100vh就表示满高

display 和 visibility

visibility : hidden，将元素隐藏，占用位置，具有继承性，子元素也会继承这个属性，不影响计数器的计数，同v-show，适合频繁切换使用

display : none，将元素的显示设为无，不占位置，同v-if，适合初始化不渲染，并且切换次数少时使用

CSS3 的 transition 支持 visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合 visibility 使用纯 css 实现 hover 延时显示效果，提高用户体验

隐藏页面元素

  • display：none，导致浏览器的重排

  • visibility：hidden，隐藏元素，DOM存在，触发重绘

  • opacity：0，会引发重绘，占据页面空间，可以响应点击事件

  • height：0、width：0

  • position：absolute

link 和 @import

  • link属于HTML标签，无兼容问题，而@import是CSS提供的， 只在IE5以上才能识别

  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载

  • link 方式的样式的权重高于@import的权重

当使用 javascript 控制 Dom 去改变样式的时候，只能使用 link标签，因为@import不是 dom可以控制的

src 和 href

href 指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

伪类 和 伪元素

单冒号用于CSS3伪类，双冒号用于CSS3伪元素。 双冒号是在当前规范中引入的，用于区分伪类和伪元素

常见伪类——:hover、:link、:active、:target、:not( )、:focus

常见伪元素——::first-letter、::first-line、::before、::after、::selection

::before，::after 特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入

选择器

选择器 示例 示例说明
类 .content 选择所有class="intro"的元素
id #content 选择所有id="firstname"的元素
* * 选择所有元素
标签 p 选择所有<p>元素
div,p 选择所有<div>元素和<p>元素
div p 选择<div>元素内的所有<p>元素
div>p 选择所有父级是 <div> 元素的 <p> 元素
div+p 选择所有紧接着<div>元素之后的<p>元素
属性 [target] 选择所有带有target属性元素
[target=-blank] 选择所有使用target="-blank"的元素
[title~=flower] 选择标题属性包含单词"flower"的所有元素
[lang|=en] 选择 lang 属性以 en 为开头的所有元素
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择活动链接
:hover a:hover 选择鼠标在链接上面时
:focus input:focus 选择具有焦点的输入元素
:first-letter p:first-letter 选择每一个<p>元素的第一个字母
:first-line p:first-line 选择每一个<p>元素的第一行
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素
p~ul 选择p元素之后的每一个ul元素
a[src^="https"] 选择每一个src属性的值以"https"开头的元素
a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:last-of-type 选择每个p元素是其父级的最后一个p元素
p:only-of-type 选择每个p元素是其父级的唯一p元素
child p:only-child 选择每个p元素是其父级的唯一子元素
p:nth-child(2) 选择每个p元素是其父级的第二个子元素
p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
p:last-child 选择每个p元素是其父级的最后一个子级。
:root 选择文档的根元素
p:empty 选择每个没有任何子级的p元素（包括文本节点）
#news:target 选择当前活动的#news元素（包含该锚名称的点击的URL）
input:enabled 选择每一个已启用的输入元素
input:disabled 选择每一个禁用的输入元素
input:checked 选择每个选中的输入元素
:not(p) 选择每个并非p元素的元素
::selection 匹配元素中被用户选中或处于高亮状态的部分
:out-of-range 匹配值在指定区间之外的input元素
:in-range 匹配值在指定区间之内的input元素
:read-write 用于匹配可读及可写的元素
:read-only 用于匹配设置 "readonly"（只读） 属性的元素
:optional 用于匹配可选的输入元素
:required 用于匹配设置了 "required" 属性的元素
:valid 用于匹配输入值为合法的元素
:invalid 用于匹配输入值为非法的元素

盒模型和box-sizing

内容(content)，内边距(padding)，边框(border)，外边距(margin)四个部分

标准：box-sizing: content-box; widtd=content

怪异：box-sizing: border-box; width= content+padding +border（推荐）

box-sizing: inherit 父元素继承此值

清除浮动的影响

1、为 float 元素 之后的元素 添加 clear 属性

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1{ float: left }
.box2{ float: right }
/*清除左右两边浮动元素的影响*/
.box3{ clear: both }

2、 利用伪元素::after

父元素的末尾添加一个空的块元素，并将其清除

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

3、修改父元素的 owerflow 属性

将父元素的 owerflow 属性修改为 owerflow : auto / hidden

垂直水平居中

1、已知宽高，绝对定位+margin

.box { position: relative }
​
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    height:xxx;
    width:xxx;
    margin-top: -height/2;
    margin-left: -width/2;
}

2、已知宽高，绝对定位+margin

.box { position: relative   }
​
.center {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 200px;
    height: 200px;
    margin: auto;       
}

3、未知宽高，绝对定位+transform

.box{ position: relative }
​
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

4、未知宽高，flex+margin

.box { display: flex }

.center{ margin: auto }

给div划线的方法

outline：不占宽度，outline: red solid thick;

border：占宽度，border-bottom：1px solid red;

图片轮播（transition）

  • 改变其透明度

  • 改变层数

  • 改变left值

内联、外链和嵌入式

内联>嵌入>外联，比较通用的样式适合抽离出来用外联，提高复用性，同时降低样式和内容的耦合

嵌入式：<style> span{ color : red }</style>

内联式：<span style="color:red"></span>

外链式：<link href="***.css" >

css的优先级

内联样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器

opacity和rbga

rgba(255,255,255,0.5)
opacity: 0.5

opacity作用于元素及所有内容的透明度，且子元素会继承，rgba( )只作用于元素的颜色或其背景色

css三角形

  • 左下直角三角形

    #triangle-bottomright{
  	width: 0;
  	height: 0;
  	border-bottom:100px solid red;
  	border-left:100px solid transparent;
}

  • 上等腰三角形

    #triangle-up{
    width:0;
    height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid red;
}

CSS3新特性

圆角 border-radius
阴影 box-shadow
边框图片 border-image
文字特效 text-shadow
强制文本换行 word-wrap
线性渐变 linear-gradient
旋转 transform:rotate()
倾斜 skew()
缩放 scale()
移动 translate(）
过渡 transition
动画 animation
伪元素 ::selection
颜色 rgba()
实现媒体查询 @media
弹性盒 flex

@supports

//如果通过了条件
@supports(运行条件) {
    /* 应用规则---想要实现的css语句*/
}
​
//如果没有通过条件
@supports not(运行的条件) {
    /* 应用规则---想要实现的css语句 */
}

动画

  • transition 实现渐变动画

    • property：填写需要变化的css属性

    • duration：完成过渡效果需要的时间单位(s或者ms)

    • timing-function：完成效果的速度曲线

    • delay：动画效果的延迟触发时间

  • transform 转变动画

    • translate：位移

    • scale：缩放

    • rotate：旋转

    • skew：倾斜

  • animation 实现自定义动画

    @keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
​
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
​
animation: rotate 2s;

    属性 含义
    transition（过度） 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
    transform（变形） 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
    translate（移动） 只是transform的一个属性值，即移动
    animation（动画） 用于设置动画属性，他是一个简写的属性，包含6个属性

CSS预编语言

sass、scss、less、stylus 的嵌套、变量、作用域、代码混合、代码模块化

嵌套

引用父级选择器简写为【 &】，Sass 和 Stylus 可以用没有大括号的方式书写

.a {
  &.b { color: red }
}

变量

增加CSS的复用方式，修改一处即可修改全局，less声明的变量以@开头，sass 以 $ 开头

@white: #fff;
a { color: @white }
$white: #fff;
a { color: $white }

作用域

变量存在作用域，先从局部作用域查找变量，依次向上级作用域查找

混入(mixins)

将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用，可以定义变量和默认值

在less中，参数变量为@声明

.a { font-weight: 700 }
​
.b(@color: red) { color: @color }
​
.c{ .a; .b(red) }

编译后

.a { font-weight: 700 }
.b { color: red }
.c { font-weight: 700; color: red }

Sass声明时需要使用@mixinn，后面紧跟mixin的名，参数名为变量$声明的形式，引入需要 @incluede

@mixin a {
  font: { size: 20px }
  color: #fff;
}
​
.b { @include a }

代码模块化

@import '../../common/css/base.css'

CSS优化

  • 内联首屏关键CSS

  • 异步加载CSS

  • 资源压缩

  • 合理使用选择器

    • css匹配的规则是从右往左开始匹配，例如#markdown .content h3，先找到h3标签元素，然后去除祖先不是.content的元素，最后去除祖先不是#markdown的元素，尽量不要标签选择器和嵌套多层

  • 减少使用昂贵的属性

  • 不要使用@import

  • 移除空的css规则

  • 正确使用display的属性

  • 不滥用浮动、web字体

  • 声明过多的font-size，建立一个公共样式，然后引用即可

  • 不在选择符中使用ID标识符，遵守盒模型规则

  • 尽量减少页面重排、重绘

  • 抽象提取公共样式，减少代码量

HTML

默认标签解析

  • <!DOCTYPE html>

通用标记语言的文档类型声明，位于文档的第一行

BackCompat：怪异模式，浏览器按照自己的方式解析渲染页面

CSS1Compat：W3C标准模式

该属性声明之后，浏览器按照W3C的标准解析渲染页面

  • <html lang="en">

根节点，lang ：语言类型，对于搜索引擎、网页翻译有指导意义。英文：lang="en"，中文：lang="zh-CN"

  • <head>

    包含所有的头部标签元素

    <title>     // 标题
<base>      // 页面链接标签的默认链接地址
<link>      // 文档和外部资源之间的关系
<meta>      // 文档的元数据
<script>    // 脚本文件
<style>     // 样式文件

  • <body> 元素定义文档的主体

html常用标签

表格table

属性名 描述 属性值
width 宽度 像素值
height 高度 像素值
align 对齐方式 left、center、right
border 表格边框 像素值，默认无边框
cellspacing 单元格之间的间距 像素值，默认 2 像素
cellpadding 内容与边框之间的距离 像素值，默认 1 像素
标签名 说明
table 表格标签，用于包含多个 tr
tr 定义表格中的行，用于包含多个 td
td 定义表格中的单元格，用于存放单元格内容
th 定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示
thead 定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示
tbody 定义表格的主体，通常包含标题行下方的表格数据区域

  • 跨行合并：rowspan="合并单元格的个数"

  • 跨列合并：colspan="合并单元格的个数"

列表list

  • 无序列表 ul

    <ul>
  <li>列表项</li>
</ul>

  • 有序列表 ol

    <ol>
  <li>列表项</li>
</ol>

  • 自定义列表 dl

    <dl>
  <dt>
    <dd>列表项</dd>
  </dt>
</dl>

表单form

  • 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，完整的用户信息记录

  • 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓名

  • 提示信息：提示用户每一个表单控件是收集什么信息的

    标签名 说明
    form 定义表单域，统一收集传递数据
    input 输入控件，可以是文本框、单选、复选、选择文件、按钮等
    select 下拉列表
    option 下拉列表选项，用于存放选项内容

输入框input

属性 描述
type 类型
name 名称，用于区分控件
value 值，用于记录或设置控件的值
checked 默认选中某个单选或复选框
id 控件标识，与 label 标签联用
maxlength 输入框最大输入长度
类型 属性 描述
输入 text 输入文字
输入 password 密码
选择 radio 单选按钮，多选一
选择 checkbox 复选框（打勾）
点击选择文件 file 文件上传使用
点击 button 按钮
点击 image 按钮
表单操作 submit 提交，会把数据发送给服务器
表单操作 reset 重置，会清空表单所有数据

HTML5新特性

语义化标签

  • 方便开发人员的代码阅读和后期维护

  • 提高用户体验

  • 有利于seo搜索引擎优化

  • 便于网络爬虫解析文档

<header><header/> 定义文档的头部
​
<nav><nav/> 定义导航链接
​
<section><section/> 定义文档中的节，段落
​
<article><article/> 定义页面独立内容区域
​
<aside><aside/> 定义页面的侧边栏内容
​
<detailes><detailes/> 定义文档某部分细节
​
<summary><summary/> 标签包含了details元素的标题
​
<dialog><dialog/> 定义对话框，提示框

新增Input表单的类型、和属性

类型： tel、number、date、time、week、month、url、email、color、rang

  <!-- 输入必须为邮箱类型 -->
  email邮箱：<input type="email">
  
  <!-- 输入必须为网址类型 -->
  url网络地址：<input type="url">
  
  <!-- 输入必须为日期类型 -->
  date日期：<input type="date">
  
  <!-- 输入必须为时间类型 -->
  time时间：<input type="time">
  
  <!-- 输入必须为数值类型 -->
  number数量：<input type="number" min="5" max="20">
  
号码：     <input type="tel">
颜色：     <input type="color">
周/年：    <input type="week">
月/年：    <input type="month">
范围：     <input type="range">
属性: 
  pattern       描述了一个正则表达式用于验证<input> 元素的值
  multiple      选择本地文件上传
  min 、 max    置元素最小值与最大值。
  step          为输入域规定合法的数字间隔。
  height、width 用于img类型的<input>标签的图像宽高
​
  <input 
    type="search"             类型
    required="required"       表单必填属性
    placeholder="请输入文字"    提示文本
    autofocus='autofocus'     页面加载完成自动聚焦输入框
    autocomplete="on"         输入时显示历史输入信息on/off
    ...
  >

audio、video音频和视频

目录

CSS

css常用样式

fiex布局

圣杯布局 (常见PC端)

网格布局Grid

CSS用户界面样式

精灵图

溢出裁剪

margin塌陷/合并

BFC 块级格式化环境

CSS复合选择器

伪类选择器（常用）

定位 position

雪碧图

标签

background

px、em、rem、vh、vw

display 和 visibility

隐藏页面元素

link 和 @import

src 和 href

伪类 和 伪元素

选择器

盒模型和box-sizing

清除浮动的影响

垂直水平居中

给div划线的方法

图片轮播（transition）

内联、外链和嵌入式

css的优先级

opacity和rbga

css三角形

CSS3新特性

CSS预编语言

CSS优化

HTML

默认标签解析

html常用标签

表格table

列表list

表单form

输入框input

HTML5新特性

相关面试题

src 和 href 的区别

script 标签中 defer 和 async 的区别

Canvas绘图、SVG绘图、地理定位Geolocation、拖拽API、WebStorage、WebWorker、...

WebSocket（H5开始提供的一种在单个TCP连接上进行全双工通讯的协议）

相关面试题

src 和 href 的区别

  • src： 表示对资源的引用，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并行下载资源，不会停止对当前文档的处理。 常用在 a、link 等标签上。

  • 区别：src 执行时会暂停其他资源的处理，href 不会

script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析

defer是渲染完再执行，async是下载完就执行

  • 执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行

  • 脚本是否并行执行

    • async 属性，当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕

    • defer 属性，加载后续文档的过程和 JS 脚本的加载（此时仅加载不执行）是并行进行的（异步——新开了个线程去加载脚本），JS 脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded 事件触发执行之前

使用场景

  • defer：脚本依赖页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。

  • async：脚本不依赖页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。