h5新增标签

Posted 2020-09-04 XIE7654

语义标签：

<article>定义文章</article>
<aside>定义文章侧边栏</aside>

<figure>定义一组媒体对象以及文字内容</figure>
<figcaption>定义figure的标题</figcaption>

布局页面时用的语义标签：
<nav>定义导航</nav>
<header>头部</header>
<section>定义文档中的区段 区域</section>
<footer>尾部</footer>

 

input其他的类型：
1. text 文本输入框
2. password 密码
3. button 按钮
4. checkbox 复选

5. radio 单选
6. submit 提交
7. reset 重置
8. file 文件
9. email 输入邮箱地址 检测@
10. url URL地址
11. number 只能输入数字 还有e
12. range 范围 默认0~100
required 必须填写
placeholder 占位符

 

http://www.cnblogs.com/li-na/p/5524579.html

http://www.daqianduan.com/2857.html

一、HTML5新增标签

1.

<article>标签：定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章、或者来自 blog 的文本、或用户评论、或者是来自论坛的文本。亦或是来自其他外部源内容。

1 <article>
2    <h1>Internet Explorer 9</h1>
3    <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
4 </article>

 

2.

<aside>标签：定义其所处内容之外的内容，aside 的内容应该与附近的内容相关。

1 <p>这个夏天我和父亲去了欧洲旅游。</p>
2 <aside>
3     <h4>欧洲介绍</h4>
4     欧洲，，是是是Bla。。。
5 </aside>

 

3.

<datalist> 标签：定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

4.

<details> 标签：用于描述文档或文档某个部分的细节

5.

<summary> 标签：包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素

1 <details  open="open">    /*open属性定义在 HTML 页面上 details 应该是可见的*/
2     <summary>HTML 5</summary>
3     This document teaches you everything you have to learn about HTML 5.
4 </details>

 

6.

<figure> 标签：用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

7.

<figcaption> 标签：定义 figure 元素的标题（caption）。 "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置

1 <figure>
2     <figcaption>黄浦江上的的卢浦大桥</figcaption>
3     <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
4 </figure>

 

8.

<footer> 标签：定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息

1 <footer>
2     <p>made by someone</p>
3     <p>联系方式：: <a href="mailto:[e-mail]">[e-mail]</a>.</p>
4 </footer>

 

9.

<header> 标签：定义 section 或 document 的页眉，和footer标签相似

1 <header>
2      <h1>Welcome to my homepage</h1>
3      <p>My name is someone</p>
4 </header>

 

10.

<hgroup> 标签：用于对网页或区段（section）的标题进行组合

1 <section>
2     <hgroup>
3         <h1>this is h1 of my article</h1>
4         <h2>this is h2 of my article</h2>
5     </hgroup>
6     <p>The rest of the content...</p>
7 </section>

 

11.

<mark>标签：主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签，<m> 标签也是H5的新标签，定义带有记号的文本

1 <p>Do not forget to buy <mark>milk</mark> today.</p>

 

12.

<nav> 标签：定义导航链接的部分

1 <nav>
2       <a href="/html/index.asp">Home</a>
3      <a href="/html/html_intro.asp">Previous</a>
4      <a href="/html/html_elements.asp">Next</a>
5 </nav>

 

13.

<meter> 标签：定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签，Internet Explorer 不支持 meter 标签

1 <meta http-equiv=”refresh” content=”3”;url=http://sina.com.cn” /> 设置3秒自动刷新

 14.表单

　　input常用类型

• type = text   输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，家庭住址等等。是input的默认类型，其参数有name(表示该文本输入框名称)，maxlength(输入框中允许输入字符的最大数),value(输入框中的默认值)，readonly(表示该框中只能显示，不能添加修改),disabled(表示该框禁用)。

  1 <input type="text" name="name" maxlength="10" value="请在此输入十个字母">//长度大于10后，便不能增加输入框的value值了

   

  1 <input type="text" name="name" maxlength="20" placeholder="请在此输入十个字母">

  注意：value和placeholder的区别

  1 <input type="text" name="name" maxlength="20" placeholder="请在此输入十个字母" readonly="true">//此时的输入框为只读状态，不能获取焦点，不能写入内容

  

  1 <input type="text" name="name" maxlength="20" placeholder="请在此输入十个字母" disabled="disabled">

    注意：readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等

• type = password   密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符

  1 <input type="password" >

   

•  type=file   上传文件的输入框

  <input type="file" >

   

• type=hidden   称为隐藏域：如果一个非常重要的信息需要被提交，但又不能或者无法明示的时候使用
• type=button   作为功能按钮，使用value属性设置按钮内的文字

  <input type="button" value="click me" >

   

•  type=checkbox   多选框，常见于注册时选择爱好、性格、等信息

   

  

  1 <form>    
  2     <label for="cb0">篮球：</label>
  3     <input type="checkbox" name="checkit" id="cb0" value="a" checked><br>
  4     <label for="cb1">足球：</label>
  5     <input type="checkbox" name="checkit" id="cb1" value="b"><br>
  6     <label for="cb2">游泳：</label>
  7     <input type="checkbox" name="checkit" id="cb2" value="c"><br>
  8     <input type="submit" />
  9   </form>

  

  

• type=radio   单选框，出现在多选一的页面设定中

  <label>性别：</label>
          <input type="radio" name="sex">男
          <input type="radio" name="sex">女
  //name一定要相同，否则实现不了多选一的功能

   

• type=submit　　提交按钮
• type=reset　　重置按钮