HTML5新增知识点

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

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

header footer main -> html
注:很多新的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 : 带有记号的文本

音频与视频?

audio :音频 ,双标签

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

video : 视频 , 双标签

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

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

. 新的表单控件?

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的内容了 )

分栏布局?

column-count : 分栏的个数
column-width : 分栏的宽度
    注:column-count column-width 不要一起去写。
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏
    注:num | all
  1. 伪类与伪元素?
    #elem:after{}
    #elem:hover{}

    在 CSS2.1的时候 : #elem:after{} √
    在 CSS3的时候 : #elem:after{} × #elem::after{} √
    #elem:hover{} √ #elem::hover{} ×
    写法区别:
    伪类: 单冒号 -> :hover :active :visited :link …
    伪元素: 双冒号 -> ::after ::before …
    功能区别:
    伪类只会对操作的元素起作用,相当于样式添加到了元素身上
    而伪元素是对创建出来的虚拟容器起作用,相当于样式添加到了这个虚拟容器上。

link标签的扩展学习?

<link rel="dns-prefetch" href="//static.360buyimg.com">
提前去进行域名的dns解析

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
给头标签页添加小图标
  1. 扩展meta标签?元信息(辅助信息)

    注:网页的描述信息,有助于搜索引擎搜索。

    已哪个引擎去渲染页面。有的浏览器可能有多个引擎,chrome : webkit blink .. ie浏览器已什么方式渲染edge最新版进行渲染,ie9 ie10 -> edge 每个多长时间可以对浏览器进行刷新 在指定的时间内,请求资源会走缓存。

CSS Hack?
我们一直用的就是chrome浏览器,但是还有很多其他浏览器,当然这些浏览器都可以称为高级浏览器。

CSS Hack 解决那些古老的浏览器兼容性问题。

Hack分类
    下载:ieTester工具 , 测试在服务器环境下。

1. CSS属性前缀法
    _ + * \9 \0 ...

2. 选择器前缀法
    *html

3. IE条件注释法

    <!--[if IE]>…<![endif]-->

IE6 BUG 非常多:
    1. IE6高度的最小值是19px ,解决 overflow:hidden;
    2. IE6双边距问题margin和float,解决 display:inline;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值