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. shell中各种括号的作用()、(())、[]、[[]]、{}

    一.小括号,圆括号() 1.单小括号 ()    ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有 ...

  2. Android 上实现像微信一样的用Fragment来实现的Tab切页效果 提供源码下载

    网有不少的例子,但是要么是像微信一样可是没有使用Fragment实现,要么是只实现了一个很简单的切换,没有下面的菜单页.这个例子有实现了,我觉得暂时够我用了##实现类:+ MainTabFragmen ...

  3. java HashMap

    HashMap 的性能因子 1. 容量:表示桶位的数量. 2. 初始容量: 表在创建是所拥有的桶位数.   如果你知道将要在HashMap存储多少项,创建一个初始容量合适的HashMap将可以避免自动 ...

  4. 将Apache手动安装成Windows的服务

    将Apache手动安装成Windows的服务 可以选择在安装Apache时自动将其安装为一个服务.如果选择"for all users",那么Apache将会被安装为服务. 如果选 ...

  5. redis、memcache、mongoDB 做了对比

    from: http://yang.u85.us/memcache_redis_mongodb.pdf   从以下几个维度,对redis.memcache.mongoDB 做了对比. 1.性能 都比较 ...

  6. 如何利用excel中的数据源制作数据地图

    关于这个问题,制作数据地图的方法已不新奇,总体来说有这么几类方案: 一类方案:直接在excel里制作 优势:个人小数据量应用较为方便简单 缺点:需要熟悉VBA,且更强大的功能对VBA水平要求较高 1. ...

  7. SDN:motivation

    今天公交车上看了会SDN一本介绍性的书籍,具体名字不记得了.我想,我已经在实验室呆了很久的时间的,接触SDN也有一段时间了.对SDN的一些基本的知识还是需要好好整理一番.当然,这里只是一个随笔,想到什 ...

  8. java发送email

    package com.assess.util; import java.io.File; import java.util.ArrayList; import java.util.List; imp ...

  9. java程序设计线程池(newCachedThreadPool())

    创建一个无界的可缓存的线程池,若线程长时间没用会自动销毁,直接上代码好了: import java.util.concurrent.ExecutorService; import java.util. ...

  10. Jenkins学习三：介绍一些Jenkins的常用功能

    Jenkins其实就是一个工具,这个工具的作用就是调用各种其他的工具来达成你的目的. 1.备份.迁移.恢复jenkins 首先找到JENKINS_HOME,因为Jenkins的所有的数据都是以文件的形 ...