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. 微软CodeDom模型学习笔记（全）

    CodeDomProvider MSDN描述 CodeDomProvider可用于创建和检索代码生成器和代码编译器的实例.代码生成器可用于以特定的语言生成代码,而代码编译器可用于将代码编译为程序集. ...

  2. .NET/ASP.NET MVC Controller 控制器（IController控制器的创建过程）

    阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactory 控制器工厂接口 3.ASP.NETMVC DefaultControllerFactory 默认控制器工厂 4 ...

  3. 微信开放平台开发——网页微信扫码登录（OAuth2.0）

    1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...

  4. CentOS 7安装JDK

    一.卸载系统自带的openjdk 1.查询系统内置的jdk,使用命令如下: rpm -qa | grep java 此时会列出系统中存在的jdk,如果存在就进行卸载,不存在就直接进行安装. 2.进行卸 ...

  5. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  6. import com.sun.image.codec.jpeg.JPEGCodec不通过 找不到包

    import com.sun.image.codec.jpeg.JPEGCodec;   在Eclipse中处理图片,需要引入两个包: import com.sun.image.codec.jpeg. ...

  7. BZOJ1798: [Ahoi2009]Seq 维护序列seq[线段树]

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 5504  Solved: 1937[Submit ...

  8. COGS 265线段覆盖[线段树]

    265. 线段覆盖 ★★☆   输入文件:xdfg.in   输出文件:xdfg.out   简单对比时间限制:2 s   内存限制:20 MB [问题描述] 有一根长度为 L 的白色条状物.有两种操 ...

  9. 第47课 Qt中的调色板

    1. QPalette类 (1)QPalette类提供了绘制QWidget组件的不同状态所使用的颜色. (2)QPalette对象包含了3个状态的颜色描述 ①激活颜色组(Active):组件获得焦点使 ...

  10. python有超时的windows系统时间设置代码

    手边的笔记本用久了,cmos电池可能又没电了.每次开机时间都不对,导致访问一些有https的网页会出现警告信息. 于是找了找通过python脚本设置系统时间的方法,发现了两种,其一是调用socket直 ...