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. Tomcat启动找不到JRE_HOME的解决方法

    在配置测试环境时,将生产服务器的Tomcat目录打包过来后解压后,启动Tomcat后,发现如下问题: [tomcat@gsp bin]$ ./shutdown.sh Using CATALINA_BA ...

  2. SQL SERVER 2012启动失败 because upgrade step 'SSIS_hotfix_install.sql' 失败

    有台数据库服务器(开发服务器),开发人员邮件告诉我,SSMS连接不了这台服务器,远程登录后,发现SQL SERVER的服务停止了,启动服务时报错,服务启动不了.检查错误日志发现下面一些信息 2015- ...

  3. SQL Challenge ——快速找到1-100之间缺失的数

    有个经典的题目:1-100之间的数字(不重复)存放在表里,共95行一列,但是里面缺了5个数字,怎么用SQL最快找出那五个数字. 我们先来看看Oracle数据库如何实现,如下所示,我们先准备测试环境和数 ...

  4. shell 1到指定数累加

    #!/bin/bash read -p "输入尾数:" a expr $(seq -s " + " $a) #seq命令可以指定生成一个数到另一个数之间的所有整 ...

  5. 1、策略模式（Strategy）

    //抽象接口 class ReplaceAlgorithm { public: ; }; //三种具体的替换算法 class LRU_ReplaceAlgorithm : public Replace ...

  6. 【小白的CFD之旅】05 补充基础

    黄师姐是一个很干脆果敢的人,从她的日常装扮就能显露出来.卡帕运动装,白色运动鞋,马尾辫,这是小白对黄师姐的第一印象.“明天早上九点钟来实验室,我给你安排这阵子的任务.”黄师姐对小白说.说话语气和老蓝一 ...

  7. Tomcat服务无法开启，点击start不一会就变成stopped

    前天在学习J2EE方面技术时,运行一个调试示例,需要用到Tomcat服务,结果使用Myeclipse怎么也打不开服务.之后去尝试手动打开Tomcat服务也无法成功,一直弄了好几个小时.后来,问了一下隔 ...

  8. [WPF系列]Adorner应用-自定义控件ImageHotSpot

    引言 项目中有时需要在图片上标注热区,在HTML中有<area>标签,但在WPF中目前还没现成的控件来实现这这一功能.至于图片热区功能有道词典的[图解词典]是个不错的例子,如图1: 图 1 ...

  9. <<一种基于δ函数的图象边缘检测算法>>一文算法的实现。

    原始论文下载: 一种基于δ函数的图象边缘检测算法. 这篇论文读起来感觉不像现在的很多论文,废话一大堆,而是直入主题,反倒使人觉得文章的前后跳跃有点大,不过算法的原理已经讲的清晰了.     一.原理 ...

  10. 解决Docker容器时区及时间不同步问题

    今天在系统集成测试时由测试人员提交了一个测试bug,原因是提交业务数据时间与实际时间(北京时间)有偏差,导致统计异常.由于我们集成测试是向测试人员直接提供完整的Docker镜像作为测试环境,原因应该是 ...