1. HTML5新增的标签

主体结构标签, 用来做布局。比div更具语义

<header> 定义文档的页眉

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

<article> 规定独立的自保护内容，潜在来源：论坛帖子、报纸文章、博客条目和用户评论

<section>定义文档中的节、章

<aside> 定义其所处内容之外的内容

<footer>定义文档或节的页脚

<figure> 规定独立的流内容（一个广告，图片） 可以用<figcaption>添加标题

非主体结构标签

<datalist>  文本框和下列列表的组合

<details>   解释

<menu>    菜单

<adress>   地址

<progress> 进度条

<mark>     高亮显示

<time>      时间

新增的表单元素

<form>
<input type="email" /> <!--邮箱-->
<input type="url" /> <!--网址-->
<input type="tel" /> <!--手机号-->
<input type="number" min="1" max="20 " step="4" /> <!--数字，最小1，最大20，递增为4-->
<input type="range" min="1" max="20 " step="4" /> <!--拖拉条-->
<input type="search" />
<input type="color" /> <!--选择颜色-->
<input type="date" /> <!--年月日-->
<input type="month" /> <!--月份-->
<input type="week" /> <!--周-->
<input type="time" /><!--时间-->
<input type="submit" />
</form>

新增的属性

autocomplete 自动匹配

autofocus 自动获取焦点

form外数据提交

formaction 数据提交到别的后台页面

file mulitiple 选择多个文件上传

pattern 正则表达式

placeholder 内容提示

required 判断内容不为空

contenteditable 内容可以编辑

hidden 隐藏

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <!--文本框和下拉列表的组合-->

    <input type="text" list="taglist" />

    <datalist id="taglist">

        <option>苹果</option>

        <option>香蕉</option>

        <option>橘子</option>

    </datalist>

    <!--细节解释-->

    <details>

        <summary>Copyright 2011.</summary>

        <p>All pages and graphics on this web site are the property of W3School</p>

    </details>

    <br />

    <br />

    <!--进度条-->

    <progress max="10" value="5"></progress>

    <br />

    <br />

    <!--新增的表单元素-->

    <form>

        <input type="email" />   <!--邮箱-->

        <input type="url" />      <!--网址-->

        <input type="tel" />      <!--手机号-->

        <input type="number" min="1" max="20 " step="4" />  <!--数字，最小1，最大20，递增为4-->

        <input type="range" min="1" max="20 " step="4" /> <!--拖拉条-->

        <input type="search" />

        <input type="color" />  <!--选择颜色-->

        <input type="date" />  <!--年月日-->

        <input type="month" />   <!--月份-->

        <input type="week" /> <!--周-->

        <input type="time" /><!--时间-->

        <input type="submit" />

    </form>

    <br />

    <br />

    <!--新增一些属性-->

    <form autocomplete="on">        <!--自动匹配-->

        <input type="text" list="citylist">

        <datalist id="citylist">

            <option>BeiJing</option>

            <option>QingDao</option>

            <option>QingZhou</option>

            <option>QingHai</option>

        </datalist>

    </form>

    <br />

    <input type="text" autofocus />   <!--自动获取焦点-->

    <br/>

    <br />

    <form action="1.aspx " method="get" id="form1">

        <input type="text" formaction="2.aspx" />    <!--提交到别的后台页面-->

        <input type="submit" />

    </form>

    <input type="text" form1="form1"/>   <!--在form外的数据也可以提交-->

    <br />

    <br />

    <input type="file" multiple/>  <!--可以选择多个文件上传-->

    <br />

    <br />

     <!--可以直接写正则表达式，制定规则-->

    <form action="1.aspx">

        请输入邮政编码：<input type="text" pattern="[0-9]{6}" title="请输入6位数的编码"/>

        <input type="submit" />

    </form>

    <br/>

    <br/>

    <input type="text" placeholder="请输入用户名"/>   <!--内容提示-->

    <br />

    <br />

    <form action="1.aspx">

        <input type="text" required /> <!--判断不能为空-->

        <input type="submit" />

    </form>

    <p contenteditable="true">这是一段可编辑的段落，请试着编辑该文本</p>

    <p hidden >这是一段隐藏的段落</p>

</body>

</html>

HTML3的更多相关文章

  1. html3秒跳转

    <script>     setTimeout( 'window.location= "home.jsp " ',3000) ;//注意,此处“;”可加可不加</ ...

  2. HTML-3月20日课堂总结

    1.图片热点 2.表单制作 3.课后作业 1.图片热点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. HTML3层叠样式表

    层叠样式表:CSS Cascading Style Sheet.V2.1  控制页面样式外观.   一.样式表分三类: 1.内联样式表.--放在元素的开始标记中.--只对当前元素起作用. <in ...

  4. 初学HTML-3

    标题标签:<h#>...</h#>,从h1到h6,字号由大变小. 段落标签:<p>...</p>,在浏览器中独占一行. 空格:" " ...

  5. HTML3/CSS基础

    1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...

  6. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  7. html-3

    <hr> 下划线实体:想在页面显示被浏览器解析的内容为表格添加标题<caption>跟tr同级,只在<table>下 <link> 为页面加小图标 在& ...

  8. Atitit MATLAB 图像处理attilax总结

    Atitit MATLAB 图像处理attilax总结 1.1. 下载 Matlab7.0官方下载_Matlab2012 v7.0 官方简体中文版-办公软件-系统大全.html1 1.2. Matla ...

  9. Atitit.log日志技术的最佳实践attilax总结

    Atitit.log日志技术的最佳实践attilax总结 1. 日志的意义与作用1 1.1. 日志系统是一种不可或缺的单元测试,跟踪调试工具1 2. 俩种实现[1]日志系统作为一种服务进程存在 [2] ...

随机推荐

  1. vs.net Web.csproj.webinfo文件

    使用VS工具打开工程的时候,请直接打开BookShop.sln文件, 请修改WEB/Web.csproj.webinfo文件中的<Web URLPath = "http://local ...

  2. YARN基本框架介绍

    YARN基本框架介绍 转载请注明出处:http://www.cnblogs.com/BYRans/ 在之前的博客<YARN与MRv1的对比>中介绍了YARN对Hadoop 1.0的完善.本 ...

  3. Zabbix监控VMare Vcenter

    1.参照Zabbix文档配置 依照官方文档配置,没什么说的. zabbix官方文档:https://www.zabbix.com/documentation/3.2/manual/vm_monitor ...

  4. 在Cortex-M系列上如何准确地做us级延时？

    前几天刚好同事问起在Cortex-M上延时不准的问题,在网上也没找到比较满意的答案,干脆自己对这个问题做一个总结. 根据我们的经验,最容易想到的大概通过计算指令周期来解决.该思路在Cortex上并不是 ...

  5. VB.NET中图像处理的一些技巧以及其和C#图像处理的差距。

    早期的时候我使用的开发工具是VB6,VB6做图像处理的速度在我的软件Imageshop中有所体现,还是算可以的.目前,我已经改用C#来研究图像算法,C#中有指针,做图像处理起来效率确实要高不少.VB. ...

  6. httpclient进行basic auth认证

    private HttpClientContext context = HttpClientContext.create(); public void addUserOAuth(String user ...

  7. [tem]Longest Increasing Subsequence(LIS)

    Longest Increasing Subsequence(LIS) 一个美丽的名字 非常经典的线性结构dp [朴素]:O(n^2) d(i)=max{0,d(j) :j<i&& ...

  8. NYOJ 762

    容斥原理 http://blog.csdn.net/shiren_bod/article/details/5787722

  9. Linux档案与目录管理

    Linux档案与目录管理1. 目录与路径1.1 相对路径与绝对路径1.2 目录的相关操作: cd, pwd, mkdir, rmdir cd [相对路径或绝对路径]cd ~ [用户]: 切换家目录cd ...

  10. 3D游戏常用技巧Normal Mapping (法线贴图)原理解析——基础篇

    http://www.cnblogs.com/wangchengfeng/p/3470310.html