简介

html4声明方式

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
复制代码

html5声明方式

  <!DOCTYPE html>
  <meta charset="UTF-8">
复制代码

新增标签

`<header></header>`

定义 section 或 page 的页眉 （页面顶部，文档的头部区域）
header 与 head 区分开
复制代码

<div id="header"></div>

`<footer></footer>`

定义 section 或 page 的页脚（页面底部）
复制代码

<div id="footer"></div>

`<nav></nav>`

定义导航链接
复制代码

<div id="nav"></div>

`<article></article>`

定义文章
复制代码

`<section></section>`

定义 section（文档中的一块文档中的区段）
复制代码

`<aside></aside>`

定义页面内容之外的内容（侧边栏）
复制代码

语义化

**语义化**：要求在适当的位置选择合适标签（选择具有实际含义的标签）
html中的每个标签都有特定含义，比如H1-H6代表标题、p代表段落、img代表图片、包括html5中新增的一些标签：header、footer、nav这些标签都有特定的含义，语义化就是让我们在适当的位置用适当的标签 以更好的让人和机器都一目了然 换句话说 就是在没有css的情况下依然能够很好的呈现内容结构
**好处**：
别人阅读你的代码的时候能够根据标签才出来你的用意，有利于程序员阅读，便于团队开发和维护
浏览器读取方便
有利于搜索引擎优化（SEO：Search Engine Optimization）（比如说会根据标签来搜索，可能重点会搜索h1）
有一些标签默认会有一些样式，如果浏览器禁止了CSS样式还可以达到突出样式的效果，比如h1
方便其他设备解析，如盲人阅读器根据语义渲染网页
复制代码

表单

基础款`<input type="text" placeholder="please input a number">`

`<input type="email">`

   type:email
   会校验用户输入的内容是不是邮箱格式
复制代码

`<input type="url">`

   type: url
   校验用户输入的内容是不是完成的url 
复制代码

`<input type="color">`

`<input type="date">`

`<input type="time">`

`<input type="range">`

type:range滑块类型
step:每次划动的步长
range: <input type="range" step="10">
复制代码

`<input type="search">`

search 搜索框（提供了一个删除按钮可以清空输入框的内容）
复制代码

`<input type="number" max="50" min="1" step="4">`

number 数字类型
max 输入框的最大值
min 输入框的最小值
复制代码

`<input type="tel" maxlength="11">`

tel 拉起手机的拨号键盘（仅在手机上能看到效果）
maxlength 设置输入框输入内容的最大长度
复制代码

`<input type="file" accept="image/png">`

演示代码

<form action="">
    text:<input type="text" placeholder="please input a number"><br/>
    <!-- 
      type:email
      会校验用户输入的内容是不是邮箱格式
     -->
    email:<input type="email"><br/>
    <!-- 
        type: url
        校验用户输入的内容是不是完成的url 
     -->
    url: <input type="url"><br/>
    color: <input type="color"><br/>
    date: <input type="date"><br/>
    time: <input type="time"><br/>
    range: <input type="range"><br/>
    <!-- 
      type:range滑块类型
      step:每次划动的步长
     -->
    range: <input type="range" step="10"><br/>
    <!-- 
      search 搜索框（提供了一个删除按钮可以清空输入框的内容）
     -->
    search: <input type="search"><br/>
    <!-- 
      number 数字类型
      max 输入框的最大值
      min 输入框的最小值

     -->
    number: <input type="number" max="50" min="1" step="4"><br/>
    <!-- 
      tel 拉起手机的拨号键盘（仅在手机上能看到效果）
      maxlength 设置输入框输入内容的最大长度
     -->
    tel: <input type="tel" maxlength="11"><br/>
    <!-- 
      file 上传文件
      accept 设置用户选择文件的类型
     -->
    file: <input type="file" accept="image/png"><br/>

    <select>
      <option value="">cherry</option>
      <option value="">shirley</option>
      <option value="">sherry</option>
    </select>

    <!-- <input type="text" list="name">
    <datalist id="name">
      <option value="">cherry</option>
      <option value="">shirley</option>
      <option value="">sherry</option>
    </datalist> -->

    <input type="text" list="name">
    <datalist id="name">
      <option value="shirley" label="aaa">shirley</option>
      <option value="shirley" label="bbb">shirley</option>
      <option value="cherry">cherry</option>
      <option value="xiaoming">xiaoming</option>
    </datalist>

    <input type="submit">
  </form>
复制代码