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>注意:ulli之间不能添加其他标签

  • 表格表格标题<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的内容了 )
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值