1 Document type setting

document
- HTML:
- XHTML:
- HTML5

2 character set

<meta http-equiv="charset" content="utf-8">: HTML and XHTML suggested this to write
<meta charset="utf-8">: HTML5 tags such proposed to write

3 Common new label

header: header definition document
nav: part of the definition of navigation links
footer: footer defined in the document or section
article: labels from the independent, self-contained content
section: define the document section (section, section)
aside: define the content of which is located outside the content

4 new common property

Properties ****	Usage ****	Meaning ****
placeholder****		Placeholder provided may describe the expected input message field value
autofocus****		Provisions when the page loads input element should automatically get focus
multiple****		Multiple file uploads
autocomplete****		Whether provisions should enable form autocompletion
required****		Required
accesskey****		The provisions of activation (the element receives focus) elements shortcuts

5 The new value of the type property

Type ****	Example of use ****	Meaning ****
email****		Enter your e-format
tel****		Enter the phone number format
url****		Enter the url format
number****		Enter the digital format
search****		Search Box (reflect semantic)
range****		Drag the slider free
time****
date****
datetime****
month****
week****

6 Integrated Case

<form action="">
  <fieldset>
    <legend>学生档案</legend>
    <label for="userName">姓名:</label>
    <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br>
    <label for="userPhone">手机号码:</label>
    <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
    <label for="email">邮箱地址:</label>
    <input type="email" required name="email" id="email"><br>
    <label for="collage">所属学院:</label>
    <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br>
    <datalist id="cList">
      <option value="前端与移动开发学院"></option>
      <option value="java学院"></option>
      <option value="c++学院"></option>
    </datalist><br>
    <label for="score">入学成绩:</label>
    <input type="number" max="100" min="0" value="0" id="score"><br>
    <label for="level">基础水平:</label>
    <meter id="level" max="100" min="0" low="59" high="90"></meter><br>
    <label for="inTime">入学日期:</label>
    <input type="date" id="inTime" name="inTime"><br>
    <label for="leaveTime">毕业日期:</label>
    <input type="date" id="leaveTime" name="leaveTime"><br>
    <input type="submit">
  </fieldset>
</form>

7 multimedia label

embed: Label definition embedded content
audio: Play Audio
video: Play video

7.1 Multimedia embed

embed can be used to insert a variety of multimedia format can be Midi, Wav, AIFF, AU, MP3 and the like. url for the audio or video file and its path can be relative or absolute path.

Because of compatibility issues, we are here only to explain the insertion of video, audio and later video will explain H5 video multimedia.

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>