HtmlCss

标签

• 注释<!--内容-->

• 加粗强调<strong></strong><em></em>

• 上标下标<sup><sub>

• 换行<br>

• 水平线<hr>

• 图片<img src="图片路径" alt="图片加载错误显示的内容" width="宽(px)" height="高(px)">

• 超链接<a href="跳转的地址">

• 单标签用来改变a标签的默认行为<base target="_self,_blank两种跳转的方式">

• 无序列表<ul>有序列表<ol>定义列表<dl><dt><dd>列表的子项<li>注意：ul和li之间不能添加其他标签

• 表格表格标题<caption><table>行<tr>表头<th>表格单元格<td>

• 表格的属性表格边框border/cellpadding:单元格内的空间/cellspacing:单元格之间的空间/rowspan:合并行/colspan:合并列/align:左右对齐方式/valign:上下对齐方式/width，height:表格宽高

• 表单标签外层form控件input属性type/属性值有text文本/password密码/radio单选框，name属性可以使单选框按钮成为一组/checkbox复选框/submit提交/reset重置/辅助表单lable/placeholder提示信息

• <input type="radio" name="gender" id="man"><lable for="man">男</lable>
  <input type="radio" name="gender" id="man"><lable for="woman">女</lable>
  

• 下拉菜单<select><option>/selected选中的默认项/disabled禁止操作/checked选中操作(input)/size显示下拉个数/multiple多选操作

• div块/span内联

• 多行文本框textarea/col/row

CSS的基础语法

• 内联样式/内部样式style/外部样式link

CSS背景

• background-color：背景颜色

• background-image：背景图片

• background-repeat：背景图片的平铺方式

• background-position:背景图片的位置

• background-attachment：背景图随滚动条的移动方式

• background-position:x y;(针对容器的右上角开始0 0)单位px/background-repeat:no-repeat,repeat-x,repeat-y,repeat/background-attachment:fixed固定，scroll滚动(默认值)

• 透明transparent

• background-size/值：w h/cover(覆盖)/contain(包含)按比例缩放

• align表格使用text-align段落文章使用

CSS文字样式

• font-family:/font-size/font-weight:normal
• css文本装饰text-decoration:none/overline(上划线)/underline(下划线)/line-through(删除线)/text-transform字母大小写/lowercase(小写)/uppercase(大写)/capitalize(首字母大写)

文字行高 {line-height:normal/value;}

字间距、词间距

• 字间距{letter-spacing:value;}控制英文字母或汉字的字距
• 词间距{word-spacing:value;}控制英文单词词距
• 文本缩进text-indent:em/字间距：letter-spacing

复合样式&单一样式

• background/font/border/..先写复合再写单一才能生效

文本修饰

• text-decoration: 说明： none:没有修饰 underline:添加下划线 overline:添加上划线 line-through:添加删除线

首行缩进

• 1）text-indent可以取负值； 2）text-indent属性只对第一行起作用。

列表属性

1、定义列表符号样式

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

2、使用图片作为列表符号

• list-style-image：url(所使用图片的路径及全称)；

3、定义列表符号的位置

• list-style-position:outside(外边)/inside(里边)； list-style:none;去掉列表符号

边框属性

• border:边框宽度 边框风格 边框颜色; 例如：border:5px solid #ff0000 边框：border,网页中很多修饰性线条都是由边框来实现的。 边框宽度：border-width: 边框颜色：border-color: 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框， 可单独设置一方向边框， border-bottom:边框宽度 边框风格 边框颜色;底边框 border-left:边框宽度 边框风格 边框颜色;左边框 border-right:边框宽度 边框风格 边框颜色;右边框 border-top:边框宽度 边框风格 边框颜色;上边框

CSS属性中属性的属性值可以为负数

• text-indent;margin;background-position

选择器权重

• id选择器的权重是0100，class选择器的权重为0010，元素选择器的权重为0001.

内部样式和外部样式一样时优先执行后写样式

• 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准
• 单一样式优先级style行间>id>class>tag>*>继承

CSS继承

• 文字相关的样式可以被继承
• 布局相关的样式不可以被继承

盒子模型

• 1.背景色填充到margin以内的区域（不包括margin）
• 2.文字在content区域
• 3.padding不可以为负数margin可以为负数
• border-sizing使用的场景：1.不用再去计算一些值2.解决一些100%问题
  • 默认content-box/border–box

自适应margin:auto

• 左右自适应，height上下不能

显示框类型

• dispaly:block inline inline-block none
  区别:
  dispaly:none 不占空间的隐藏
  visibility:hidden占空间的隐藏
  

溢出隐藏overflow

• visible默认/hidden/scroll/auto

透明度与手势

• opacity透明取值0~1/注：占空间、所有的子内容也会透明

• rgba(255,0,0,0/0.5/1)可以使背景改变透明，但内容不改变

• cursor：move/help...

• cursor:yrl(),auto;
  

CSS默认样式reset

• *{margin:0;padding:0}/ul{list-style:none}/a{text-decoration:none}
• img{vertical-align:bottom}将基线的默认样式设置为底线/2.设置为块img{display:block}

标签分类

• 块级标签div、p、ul、ol、dd、dt、table、dl、form、h1-h6、hr
• 行内标签a、br、em、font、img、input、label、select、span、sub、sup、textarea
• 行内块标签img、input

默认样式

• body{margin:8px}/ol、ul{list-style}/h1-h6{font-size}

清除浮动

• 上下排列clear:left/right/both
• 注意after伪类的标签为内联需要display：block为块
• .clear::after{content: ""; display: block;clear: both;}
• 先写的背景图在上面/83

position定位

• 相对定位不脱离文档流
  • 如果没有定位偏移量，对元素本身没有任何影响
  • 不使元素脱硫文档流
  • 不影响其他元素布局
  • left、top、right、bottom是相对于当前元素自身进行偏移的
• 绝对定位
  • 使元素完全脱离文档流
  • 使内联元素支持宽高(让内联具备块特性)
  • 使块元素默认宽根据内容决定(让块具备内联的特性)
  • 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
• fixed 固定定位
  • 使元素完全脱离文档流
  • 使内联元素支持宽高(让内联元素具有块特性)
  • 使块元素默认宽根据内容决定(让块具备内联的特性)
  • 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
• sticky : 黏性定位
  在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。定位偏移量 : left top right bottom , 不能单独使用，必须得配合定位模式。
• z-index div嵌套定位层级比较

定位实现li标签装饰点

• content:"";dispaly:block;width:3px;height:3px;background:#;position:absolute;left:;top:;
  

清除浮动伪类:aftre注意

• clear:both这个属性只能加给块标签
• 块元素是存在margin-top传递问题的，但是浮动的块，是不存在margin-top传递问题的

CSS省略号

• white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  

CSS雪碧图

• 通过背景图片设置

CSS圆角

• border-radius
  

BFC解决margin叠加传递/覆盖/浮动

触发BFC的样式

• 浮动元素:folat 除了none以外的值
  绝对定位元素:position(absolute、fixed)
  dispaly为inline-block、table-cells、flex
  overflow除了visible以外的值(hidden、auto、scroll)
  

在线处理雪碧图

• http://alloyteam.github.io/gopng

大图显示

• {position:absolute;left:50%;margin-left:-960px;}
  

transition过渡

• transition-property : 规定设置过渡效果的CSS属性的名称。
  all ( 默认值 ) , 指定 width , height;

  transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
      需要添加单位：s (秒)  ms (毫秒)  1s == 1000ms
  
  transition-delay     :  定义过渡效果何时开始。
      2s : 延迟两秒进行过渡
      -2s : 提前两秒进行过渡
  
  transition-timing-function  :  规定速度效果的速度曲线。
      运动形式：加速、减速、匀速...
      linear
      ease（默认值）
      ease-in
      ease-out
      ease-in-out
      cubic-bezier
     （ http://cubic-bezier.com ）
  
  复合写法：
      transition:all 2s linear; √
      transition:linear 2s all; √
      transition:2s linear all; √
      注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是总时间，第二个是延迟时间。
  
      transition:2s 3s linear all; √
  
  注意：不要把transition放到hover中
  

transform变形

• translate  :  位移
          transform:translate(100px,100px); : 两个值 分别对应  x 和 y。
          transform:translateX(100px);
          transform:translateY(100px);
          transform:translateZ(100px);   ( 3d )
  scale  :  缩放
      transform:scale(num) num是一个比例值，正常比例是1。
      transform:scale(num1 , num2)  两个值 分别对应 w 和 h
      transform:scaleX()
      transform:scaleY()
      transform:scaleZ()  ( 3d )
  
  rotate  :  旋转
      transform:rotate(num)  num是旋转的角度 30deg
      正值：顺时针旋转
      负值：逆时针旋转
      表示一个角：角度deg 或 弧度rad
  
      rotateX()    ( 3d )
      rotateY()    ( 3d )
      rotateZ()  
      注 : rotate()跟rotateZ()是等价关系。
  
  skew  :  斜切
      transform:skew(num1,num2) : num1和num2都是角度，针对的是x 和 y
      transform:skewX() 
      transform:skewY()
      注：skew没有3d写法。
  
  注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
  注：变形操作对inline(内联元素)不起作用的。
  注：transform可以同时设置多个值。
      先执行后面的操作，在执行前面的操作。
      位移会受到后面要执行的缩放、旋转和斜切的影响。
  

• tranform-origin 基点位置 ?

  主要是针对 旋转和缩放，默认都是中心点为基点。

• 缩放基点transform-origin：center center

animation动画

• 原理：逐帧动画。会把整个运动过程，划分成100份。

  animation-name : 设置动画的名字 (自定义的)
  animation-duration : 动画的持续时间
  animation-delay : 动画的延迟时间
  animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数
  animation-timing-function : 动画的运动形式
  ease linear

  @keyframes 动画的名字 {
      from {}   
      to {}
  }
  
  from : 起点位置 , 等价于 0%  to : 终点位置 ，等价于 100%
  注：默认情况下，元素运动完毕后，会停到起始位置。
  
  复合样式：
      animation
  
  animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
   	none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
  
    backwards  :  在延迟的情况下，让0%在延迟前生效
    forwards  :  在运动结束的之后，停到结束位置
    both  :  backwards和forwards同时生效
  
  animation-direction  :  属性定义是否应该轮流反向播放动画。
   	alternate  :  一次正向(0%~100%)，一次反向(100%~0%)
   	reverse : 永远都是反向 , 从100%~0%
   	normal (默认值) : 永远都是正向 , 从0%~100%
  

  animate.css库

一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/

• 基本使用：
      animated : 基类(基础的样式，每个动画效果都需要加)
      infinite : 动画的无限次数
      如果想改变运动的时间：需要在css文件中改变animated这个样式里的时间。
  

transform3D

• perspective(景深) : 离屏幕多远的距离去观察元素，值越大幅度越小。3D的眼镜

      rotateX
      rotateY
      translateZ
      scaleZ
  
      注：反馈回来的立体，仅限于平面。
  
  transform-style : 3D空间
      flat  (默认值2d)、preserve-3d   (3d，产生一个三维空间)
  
      注：只要是有厚度的立体图形，就必须添加3D控件。
  
      注：在立方体中默认会沿着第一个面进行旋转。
  tranform-origin : x y z; (z不能写单词，只能写数字)
  
  perspective-origin : 景深-基点位置，观察元素的角度。
  
  backface-visibility : 背面隐藏
      hidden、visible (默认值)
  
  3d写法( 扩展学习 )
      scale3d() : 三个值 x y z
      translate3d() : 三个值 x y z
      rotate3d() : 四个值 0|1(x轴是否添加旋转角度)  0|1(y轴是否添加旋转角度)  0|1(z轴是否添加旋转角度)  deg
      rotate3d(1,1,1,30deg);
      scale translate skew
  

背景扩展

• 1. background-origin : 背景图的填充位置
       
       默认情况下，如果xy都平铺的话，border padding content 区域都有背景图。
  
  	 padding-box (默认) : 在padding区域开始填充背景图
  	 border-box : 在border区域开始填充背景图
  	 content-box  : 在content区域开始填充背景图
  
  2. background-clip : 背景图的裁切方式
  	
       padding-box 
  	 border-box (默认) 
  	 content-box 	
  
       注：当位置与裁切写入复合样式中，那么第一个值表示位置，第二个值表示裁切。
  

CSS3渐变

• backgroung-image:

• 线性渐变：
         background-image:linear-gradient( 20deg , red , blue);
         注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。
   
     径向渐变：
         radial-gradient : 径向渐变
  

• to right/to top/ to right top右上

font-face

• 好处：
        	1.可以非常方便的改变大小和颜色
             	 font-size:40px;  color:red;
        	2.放大后不会失真
  
        	3.减少请求次数和提高加载速度
              
        	4.简化网页布局
              	因为字体图标就是一个内联的元素，所以左右布局非常简单
          	5.减少设计师和前端工程师的工作量
  
             	 用第三方库：www.iconfont.cn
  
             	 animate.css库？
  
  	6.可使用计算机没有提供的字体。
  
      字体图标怎么用？
  
          @font-face{}
  
          所有的自定义的字体都会放到一个文件中： xxx.svg
              .eot .woff 这些文件主要是用来适配不同的环境或操作系统。
  
      iconfont网站怎么用？
          1. 注册账号，创建项目
          2. 选择要用的图标，添加到对应的项目中。
          3. 从项目进行下载
          4. 按照demo.html中的步骤去使用
              1. 把iconfont.css文件引入到html页面里.
              2. 写对应的class="iconfont xxxxx"
  
      自定义字体图标
  	    https://icomoon.io/app : 在线生成字体图标。
  

文字阴影text-shadow

• text-shadow：x y 模糊blur color

盒子阴影box-shadow`

• 默认盒子阴影为黑色

• box-shadow:x y 模糊值blur 模糊范围(四周扩散)spread color 内阴影inset/outset(外阴影默认值)

遮罩-webkit-mask

• url reapt x y w h

• -webkit-mask:url('./img/love.png') no-repeat center center / 300px 300px;
  

倒影-webkit-box-reflect

• 值right left above below 距离

• 可以使用遮罩，| 渐变必须是不透明

• scale(-1)可以实现翻转

模糊filter:blur

四则运算calc

• width:calc(100%-100px)
  

分栏布局

• column-count:分栏的个数
  column-width:分栏的宽度
  column-gap:分栏的间距
  column-rule:分栏的边线
  column-span:合并分栏
  

伪类和伪元素的区别在于伪元素添加了一个虚拟容器

如何让子元素在父元素中上下左右居中？

•     1. 定位 + 拉取 (子元素固定大小)
      2. margin:auto + position的上下左右0 
      3. 定位 + 位移50%
      4. flex弹性
  

弹性布局？

• 两部分：
          1. 语法是添加到父容器上的？
              display : flex;
  		1-1.(flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。) 
              flex-direction: row; 布局的排列方向 （主轴排列方向）
                   row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
                   row-reverse  显示为行。但方向和row属性值是反的
                   column  显示为列
                   column-reverse 显示为列。但方向和column属性值是反的
  		1-2.(flex-wrap用来控制子项整体单行显示还是换行显示。)
              flex-wrap : nowrap; 是否进行换行处理。
                   nowrap; 默认值，不换行处理
                   wrap; 换行处理
                   wrap-reverse; 反向换行
  		1-3.(flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。)
              flex-flow : flex-direction flex-wrap 复合写法 (是有顺序的)。
  		1-4. (justify-content属性决定了主轴方向上子项的对齐和分布方式。)
              justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。  
                  flex-start ： 子项都去起始位置对齐。
                  flex-end ： 子项都去结束位置对齐。
                  center ： 子项都去中心位置对齐。
                  space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。 
                  space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
                  space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
  		1-5.(align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式)
              align-items : 每一行中的子元素上下对齐方式。
                  flex-start;
                  center;
                  flex-end;
  		1-6.(align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。)
              align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)
                  默认：多行下，有几行就会把容器划分为几部分，默认就是stretch拉伸的。
                  值跟justify-content取值是相同的。
  
  		2.作用在flex子项上的CSS属性
  			order:可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
  			 flex-grow:属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0。
  			flex-shrink:属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
  			flex-basis:flex-basis定义了在分配剩余空间之前元素的默认大小。
  			flex:flex属性是flex-grow，flex-shrink和flex-basis的缩写
  			align-self:align-self指控制单独某一个flex子项的垂直对齐方式。
  
      
      注：默认情况下，在弹性盒子中的子元素的左右排列的。
      注：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。
  
      注：当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）
      注：当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。
  

网格布局grid

• 2. grid网格布局？
  
      作用在容器上的：
          display : grid
          grid-template-columns : 设置列数
          grid-template-rows : 设置行数
              fr单位
              repeat()方法
              注：网格中提供了一个新的单位：fr ( 比例单位 )
          grid-template-areas : 划分区域的
              注：区域必须是矩形。
          grid-template:复合写法
              grid-template-rows
              grid-template-columns
              grid-template-areas
  
              grid-template: 
              "a1 a1 a1" 1fr
              "a3 a3 a2" 1fr
              "a3 a3 a2" 1fr
              /1fr 1fr 1fr;
  
          grid-column-gap : 列的间距
          grid-row-gap : 行的间距
          grid-gap : 复合写法
              grid-row-gap  grid-column-gap
  
          justify-items : 子项的水平居中方式
              默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
              start
              center
              end
  
          align-items : 子项的垂直居中方式
              默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
              start
              center
              end
          place-items : 复合写法
              align-items justify-items
  
          justify-content : 整体网格的水平对齐方式
               默认：stretch
               start
               end
               center
               space-between
               space-around
               space-evenly
  
          align-content : 整体网格的垂直对齐方式
              默认：stretch
               start
               end
               center
               space-between
               space-around
               space-evenly
  
          place-content : 复合写法
              align-content justify-content
  
      
      作用在子项上的：
  
          grid-area : 找指定的区域
              1.对应网格的名字
              2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4; 
                  grid-row-start / grid-column-start / grid-row-end / grid-column-end
  
          grid-column-start  水平方向上占据的起始位置
          grid-column-end    水平方向上占据的结束位置
          grid-row-start     垂直方向上占据的起始位置
          grid-row-end       垂直方向上占据的结束位置
              注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。 
                  正常数字是位置，加上span是个数。
  
          grid-column:3 / 4;
              grid-column-start / grid-column-end
          grid-row:1 / span 2;
               grid-row-start / grid-row-end
  
          justify-self
          algin-self
          place-self
  

响应式布局?

用一套代码，去适配不同的设备。既可以运行在PC端，也可以运行在移动端。
注：比较适合小网站，个人博客，产品介绍页…

CSS3媒体查询?

即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

媒体查询的语法？

常见的媒体类型：
all 用于所有设备
print 用于打印机和打印预览。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。

@media all and (min-width:500px){ }
@media all and (min-width:500px) and (max-width:800px){ }

orientation:portrait : 竖屏
orientation:landscape : 横屏
    @media all and (orientation:portrait){}

注：这个横竖屏操作，只是针对移动端的。在PC端屏幕永远是竖屏的。

注：空格是需要添加的，要符合规范。

link的使用：

如何实现响应式布局呢？

1.先去适配手机端 -> 过渡到pad -> 过渡到pc (不是很推荐)

2.先去适配PC端 -> 过渡到pad -> 过渡到手机端 (推荐的)

/* 正常的样式 , 针对PC端的 */
100行CSS

/* 针对pad pro  */
@media all and (max-width:1024px){
    50行CSS
}

/* 针对pad mini 和 mobile 横屏  */
@media all and (max-width:768px){
    50行CSS
}

/* 针对 mobile 竖屏  */
@media all and (max-width:450px){
    50行CSS
}

HTML5 与 XHTML区别？

HTML4.01 -> HTML5( 功能强大 )

XHTML : XML + HTML ( 严格版本的HTML )
    发展 XHTML2.0

区别：
    DOCTYPE文档及编码
        HTML5 : <!DOCTYPE html>
        XHTML和HTML4.01 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    HTML5 : <meta charset="UTF-8">
    XHTML和HTML4.01 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

元素大小写 
    HTML5 和 HTML4.01 : 不区分大小写的，建议都写成小写(规范)
        <div></div> <span></span>
        <DIV></DIV> <SPAN></SPAN>

    XHTML : 要求必须小写。

属性布尔值
    HTML5和 HTML4.01 : 当属性和属性值相同的时候，可以只写一个
        <input type="checkbox" checked>

    XHTML : <input type="checkbox" checked="checked">

属性引号
    HTML5和 HTML4.01 : 属性值是可以不加引号的，但是建议添加（规范）
        <input type=checkbox>

    XHTML : <input type="checkbox">

图片的alt属性
    HTML5和 HTML4.01 : 图片的时候alt属性可加可不加。
        <img src="">
    XHTML : <img src="" alt=""> 
    
单标签写法
    HTML5和 HTML4.01 : 
        <img src="">
        <input type="">
    
    XHTML : 
        <img src="" />
        <input type="" />

双标签闭合
    HTML5和 HTML4.01 : 
        <div>这是一个盒子  (不建议)

    XHTML : 双标签必须成对

        <div>这是一个盒子</div>

HTML5新语义化标签 ( 很重要的 )

div span h1 img -> html4.01
width height background -> css2.1
transform border-radius -> css3

header footer main -> html5
注：很多新的HTML5语义化标签，跟div类似。

header : 页眉
footer : 页脚
main : 主体 
    注：header footer main 语义化标签在一个页面中只能出现一次。

hgroup : 标题组合
nav : 导航	
article : 独立的内容
    论坛帖子
    报纸文章
    博客条目
    用户评论
aside : 辅助信息的内容
section : 区域 , 跟div的功能以及语义是一样的

figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分
datalist : 选项列表
        涉及到的语法：list id value ...
        <input type="text" list="elems">
        <datalist id="elems">
            <option value="a"></option>
            <option value="ab"></option>
            <option value="abc"></option>
            <option value="abcd"></option>
            <option value="apple"></option>
            <option value="around"></option>
        </datalist>

details / summary : 文档细节 / 文档标题
        相关语法：open属性
        <details open>
            <summary>HTML</summary>
            <p>超文本标记语言</p>
        </details>

progress / meter : 定义进度条 / 定义度量范围
        <progress min="0" max="100" value="50"></progress>
        <meter min="0" max="100" value="80" low="30" high="70"></meter>
    
time : 定义日期或时间
        <p>今天是 <time>3月3日</time></p>
        <p>今天是 <time title="2月14日">情人节</time></p>

mark : 带有记号的文本
2. 音频与视频？

    audio ：音频 ，双标签

        controls : 显示控件
        loop : 循环播放
        autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题 )
        muted : 静音

    video : 视频 ， 双标签

        object-fit: cover; 可以让视频覆盖整个父容器。

    注：音频和视频的默认控件是隐藏的。
    注：如果想做出跟QQ音乐一样的效果：audio标签 + 隐藏控件（默认的，控件的样式用HTML+CSS模拟）+ JavaScript来实现交互功能。
    注：在视频中，可以通过 autoplay + muted 可以在静音的情况下进行自动播放。
    注：默认情况下，视频是不能进行拉伸的，必须成比例。
    注：为了能够支持多个备选文件的兼容支持，可以配合source标签。

3. 新的表单控件？

    email  :  电子邮件地址输入框
    url  :  网址输入框
    number  :  数值输入框
    range  :  滑动条
    date / month / week  :  日期控件	
    search  :  搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
    color  :  颜色控件
    tel  :  电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
    time  :  时间控件

    表单怎么把值传给后端的？

        name -> 卡
        value -> 钱

        后端根据 name 拿到 value

    传输方式？

        method  :  数据传输方式
            GET （ 默认的 ）
            POST 
    传输类型?

        enctype  :  数据传输类型
            application/x-www-form-urlencoded   默认传输的是文本
            multipart/form-data    传输的是文件

    表单的新属性？

        autocomplete="off" 关闭表单的默认提示信息
        autofocus  :  自动获取焦点
        required : 值不能为空
        pattern : 正则验证 ( JS的内容了 )