*学习笔记

link扩展

link是引入外部文件的一个作用

添加网址标题栏前的小图标：

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">

dns解析，访问网站资源会更快

<link rel="dns-prefetch" href="//static.36buyimg.com">

meta标签扩展

meta是添加辅助信息，优化和渲染的作用

charset属性：  <meta charset="UTF-8">

name属性：

        描述  <meta name="description" content="这是添加的网站描述">

        针对双内核产生的一个渲染<meta name="renderer" content="webkit">

        关键字 <meta name="keywords"  content="美食，酒店，团购">

3秒自动跳转 或刷新<meta http-equiv="refresh" content="3" url=""> 

H5 新语义化标签

    header 页眉

    footer 页脚

    main   主体

    hgroup 标题组合

    nav    导航

     article，用于定义定义页面上下相对独立的信息区域。

     section元素，用于定义一个内容区域。

     aside，用于定义article信息相关联信息。

     details元素，用于描述页面中文档的某部分细节信息。

     detalist元素，用于定义数据集合，通常与input元素结合使用。

     progress 进度条

H5表单扩展

 empty-cells: hide;  /*隐藏空单元*/

 border-collapse: collapse;/*添加表格单线*/

新input控件

    email 邮件地址输入框

    url 网址输入框

    number 数值输入框

    range 滑动条

    date/month/week 日期控件

    search 搜索框

    color 颜色控件

    tel 电话号码输入框

    time 时间空间

  <form action="http://www.baidu.com">

    <!--<input type="email">-->

    <!--<input type="url">-->

    <!--<input type="number" min="0" max="10" value="8"-->

    <!--<input type="range">-->

    <!--<input type="date">-->

    <!-- <input type="month">-->

    <!-- <input type="week">-->

    <!--<input type="search">-->

    <!--<input type="color">-->

    <!--<input type="tel">-->

    <!-- <input type="time">

        <input type="submit">

    </form>

  新的表单属性

    autocomplete 自动补全 默认值为 on

    autofocus 获取焦点

    required 不能为空

    pattern 正则验证

    placeholder 提示

    <form action="http://www.baidu.com">

        <input type="text" name="username" autocomplete="off" autofocus required>

        <input type="submit">

    </form>