01、HTML5-初认识

最新推荐文章于 2024-09-19 13:19:42 发布

快把钟哥带走

最新推荐文章于 2024-09-19 13:19:42 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/emperorzhi/article/details/110181016

版权

JavaScript库CDN加速:

百度: http://cdn.code.baidu.com/
  七牛云: http://www.staticfile.org/

zeptojs: http://www.zeptojs.cn/

一、新特性

用于绘画的canvas元素
用于媒体播放的video和audio元素
对本地离线存储的更好的支持
新的特殊内容元素(例如article、footer、header、nav、section)
新的表单控件(例如calendar、date、time、email、url、search)

二、新的结构化元素(语义化标签)

<header></header>页眉【用于页面头部的信息介绍】

<header>
    ![](logo.png)
  </header>

<hgroup><hgroup>页面中标题组合【一个标题和一个子标题或标语组合】

<hgroup>
    <h1>标题1</h1>
    <h2>标题2</h2>
</hgroup>

<nav></nav>导航

<nav>
    <a href="#">首页</a>
    <a href="#">财经</a>
    <a href="#">体育</a>
</nav>

<footer></footer>页脚【页面的底部或版块底部】

<footer>
   我是底部声明
</footer>

<section></section>页面上的版块【划分页面中不同区域】
<article></article>页面中一套结构完整且独立的内容部分【可以用来呈现论坛的一个帖子、杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可浮动的页面模块挂件】
<aside></aside>主要内容相关的应用、侧边栏、广告、nav元素组

<section>
      // 主体内容
      <article></article>
      // 侧边栏
      <aside></aside>
  </section>

<figure></figure>对元素进行组合，一般用于图片或视频
<figcaption></figcaption>figure的子元素，用于对figure的内容进行说明

<figure>
      ![](test.png)
      <figcaption>图片内容的描述</figcaption>
  </figure>

<time></time>表现时间或日期

<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>

<datalist></datalist>选项列表，与input元素配合使用，来定义input可能的值(即提示内容)

// 注意id要一致
  <input type="text" list="valList" />
  <datalist id="valList">
    <option value="javascript">javascript</option>
    <option value="html">html</option>
    <option value="css">css</option>
  </datalist>

<details></details>描述文档或文档某个部分的细节
<summary></summary>details元素的标题

<details>
    <summary>联系方式:</summary>
    // 显示的具体内容
    <p>1380013800</p>
  </details>

<dialog></dialog>定义一段对话

<dialog>
    <dt>老师:</dt>
    <dd>1+1=?</dd>
                
    <dt>学生:</dt>
    <dd>等于3</dd>
                
    <dt>老师:</dt>
    <dd>非常好，答对了。</dd>
</dialog>

<address></address>详细联系信息

<address>联系方式: 1380013800</address>

<mark></mark>需要标记的词或句子

<p> 
    你的名字: <mark> 张三 </mark>
  </p>

<progress></progress>定义进度条

<progress max="100" value="73"></progress>

三、IE下的兼容(语义化标签的兼容)

添加自定义标签的方法1

// 即先创建对应的自定义标签(对应标签中添加display: block;)
  document.createElement('haha');
  document.createElement('header');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('section');
  document.createElement('footer');
  // 在IE中是没有这些语义化标签的，所以在自定义好标签后，显示还是有问题。因为这些标签都是没有默认样式的！！！！

通过Google中的一个JS文件

<!-- 通过Google的一个js文件来解决IE语义化兼容问题(带有功能的语义化标签还是不支持，如果需要功能自己JS添加)-->
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>

四、新增表单控件和表单属性

新的输入型控件

1、email: 电子邮箱文本框，与普通的没有区别
      当输入不是邮箱时，验证不通过
      移动端的键盘会有变化
  2、tel: 电话号码
  3、url: 网页的url
  4、search: 搜索引擎
  5、range: 特定范围内的数值选择器
      属性: min、max、step(步进值)
      例如: 用JS来显示当前数值
  6、number: 只能包含数字的输入框
  7、color: 颜色选择器
  8、date: 日期
  9、datetime-local: 显示完整日期，不含时区
  10、time: 显示时间，不含时区
  11、month: 显示月

新增表单属性

1、placeholder: 输入框提示信息
  2、autocomplete: 是否保存用户输入值
      默认为on，关闭提示选择off
  3、autofocus: 指定表单获取输入焦点
  4、list和datalist: 为输入框构造一个选择列表
        list值为datalist标签的id
  5、required: 此项必填，不能为空
  6、pattern: 正则验证 pattern=“\d{1,5}” 
  7、formaction: 在submit中定义提交地址 【在同一个form中可以提交到不同地址中】