11

HTML5新标签与特性

文档类型设定

• document
  • HTML: sublime 输入 html:4s
  • XHTML: sublime 输入 html:xt
  • HTML5 sublime 输入 html:5

字符设定

• ：HTML与XHTML中建议这样去写
• ：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

• header：定义文档的页眉 头部

• nav：定义导航链接的部分

• footer：定义文档或节的页脚 底部

• article：定义文章。

• section：定义文档中的节（section、区段）

• aside：定义其所处内容之外的内容 侧边

  <header> 语义 :定义页面的头部  页眉</header>
  <nav>  语义 :定义导航栏 </nav> 
  <footer> 语义: 定义 页面底部 页脚</footer>
  <article> 语义:  定义文章</article>
  <section> 语义： 定义区域</section>
  <aside> 语义： 定义其所处内容之外的内容 侧边</aside>
  

• datalist 标签定义选项列表。请与 input 元素配合使用该元素

  <input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
  <datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
      		<option>刘德华</option>
      		<option>刘若英</option>
      		<option>刘晓庆</option>
      		<option>郭富城</option>
      		<option>张学友</option>
      		<option>郭郭</option>
  </datalist>
  

• fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

  <fieldset>
      		<legend>用户登录</legend>  标题
      		用户名: <input type="text"><br /><br />
      		密　码: <input type="password">
  </fieldset>
  

新增的input type属性值：

类型****	使用示例****	含义****
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		自由拖动滑块
time****		小时分钟
date****		年月日
datetime****		时间
month****		月年
week****		星期 年

常用新属性

属性****	用法****	含义****
placeholder****		占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus****		规定当页面加载时 input 元素应该自动获得焦点
multiple****		多文件上传
autocomplete****		规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required****		必填项 内容不能为空
accesskey****		规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式