H5新增知识点

痛定思痛。 2023-07-10 15:56 3阅读 0赞

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

**新旧对比：**

width height background -> css2.1
        transform border-radius -> css3
    	div span h1 img -> html4.01
        header footer main -> html5
    注：很多新的HTML5语义化标签，跟div类似。

## 1.新语义化标签(都是双标签) ##

header : 页眉
    footer : 页脚
    main : 主体 
        *注：header footer main 语义化标签在一个页面中只能出现一次。*
    
    hgroup : 标题组合
    nav : 导航	
    article : 独立的内容
    	      论坛帖子
    	      报纸文章
    	      博客条目
    	      用户评论
    aside : 辅助信息的内容
    section : 区域 , 跟div的功能以及语义是一样的
    
    figure : 描述图像或视频
    figcaption : 描述图像或视频的标题部分
    
    datalist : 选项列表（跟seclect下拉菜单用处相同）
        涉及到的语法：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. 新的表单控件？ ##

<input type="email">，加在type中的属性控件
    email  :  电子邮件地址输入框
    url  :  网址输入框
    number  :  数值输入框
    range  :  滑动条
    date / month / week  :  日期控件	
    search  :  搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
    color  :  颜色控件
    tel  :  电话号码输入框 ( 跟普通框的区别，在移动端，会调起带数字的软键盘 )
    time  :  时间控件
    
    表单怎么把值传给后端的？
    	后端通过获取表单中的的name，就可以得到value值，这也叫做键值对；
    	相当于name是银行卡，value是钱，后端拿的是银行卡取得钱
        后端根据 name 拿到 value
    
    表单传输方式？
        method  :  数据传输方式
            GET （ 默认的，获取的时候网址后面会带有你输入的东西 ）
            POST （从网址上看不到你提交成功没）
    
    传输类型?
        enctype  :  数据传输类型
            application/x-www-form-urlencoded   默认传输的是文本
            multipart/form-data    传输的是文件
    
    表单的新属性？
        autocomplete="off" 关闭表单的默认提示信息
        autofocus  :  自动获取焦点
        required : 值不能为空
        pattern : 正则验证 ( JS的内容了 )

## 4. 分栏布局？ ##

column-count : 分栏的个数
    column-width : 分栏的宽度
        注：column-count column-width 不要一起去写。
    column-gap : 分栏的间距
    column-rule : 分栏的边线
    column-span : num | all	（合并分栏）

## 5. 伪类与伪元素？ ##

#elem:after{}
    #elem:hover{}
    以上两种写法在旧版本中是对的规范的，但在新版本css3中第一个不规范。
    
    在 CSS2.1的时候 : #elem:after{} √
    在 CSS3的时候 : #elem:after{} ×  #elem::after{} √
                    #elem:hover{} √  #elem::hover{} ×
    **写法区别**：
        伪类：  单冒号 -> :hover :active :visited :link ...
        伪元素： 双冒号 -> ::after ::before ...
    **功能区别**：
        伪类只会对操作的元素起作用，相当于样式添加到了元素身上
        而伪元素是对创建出来的虚拟容器起作用，相当于样式添加到了这个虚拟容器上。

## 6. link标签的扩展学习？ ##

## 7. 扩展meta标签？元信息（辅助信息） ##

## 8. CSS Hack? ##

我们一直用的就是chrome浏览器，但是还有很多其他浏览器，当然这些浏览器都可以称为高级浏览器。
    
    CSS Hack 解决那些古老的浏览器兼容性问题。
    
    Hack分类
        下载：下载ieTester工具 , 可以在服务器环境下进行测试新旧版本浏览器的测试。
    
    1. CSS属性前缀法
        _ + * \9 \0 ...
    div {_background: red;}
    div {_background: red \9;}等
    
    2. 选择器前缀法（选择器前加*）
        *html
    
    3. IE条件注释法
    
        
    
    IE6 BUG 非常多：
        1. IE6高度的最小值是19px ,解决 overflow:hidden;
        2. IE6双边距问题margin和float，解决 display:inline;