<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<header><!--定义页眉-->
<hgroup><!--定义文档中的标题组-->
<h1>HTML5</h1>
<h2>HTML4.01</h2>
<h3>XHTML1.0</h3>
</hgroup>
<nav><!--定义主要的导航区域，对于侧边栏则不大适用-->
<ul>
<li>get waht</li>
<li>get waht</li>
<li>get waht</li>
</ul>
</nav>
</header>
<p contenteditable="true">aaa</p><!--可编辑性-->
<label for="input" >内容</label>
<input type="text" id="input" spellcheck="true" hidden="hidden"><!--斜体-->
<article><!--定义独立板块,容器元素,可嵌套(类似div)-->
<header>题目</header>
<p>文章内容</p>
<article>
<header>
<h3>评论者:访客甲</h3>
</header>
<p>so nice!</p>
</article>
<article>
<header>
<h3>评论者:访客乙</h3>
</header>
<p>what a waste!</p>
</article>
<aside>附属信息
<b>bold粗体</b>
<i>italic斜体</i>
<u>underline下划线</u>
<code>定义计算机代码，有种CData节的感觉,安全性增高</code>
<pre>定义多行计算机代码 var result=0</pre><!--定义预格式化的文本-->
<q>quote定义引用文本,自带双引号
<cite>——引用文本，通常为书籍或者杂志的标题</cite>
<p><!--datetime:表示具体的时间戳-->
<!--pubdate:是否为特定的文档发布标签-->
发布时间<time datetime="2015-03-15" pubdate="pubdate">2015年3月15日</time>
</p>
</q>
<blockquote>标记长引用文本，相当于q的升级版本</blockquote>
</aside><!--定义article的附属信息-->
<footer>作者</footer>
</article>
<section><!--定义文档组成内容，与父标签从属关系,可自己嵌套或与article嵌套-->
<h1>HTML5</h1>
<article>
<p>artile</p>
<section>
<em>so?</em>
</section>
</article>
</section>
<!--method:get通过URL传递(尽量少用，URL长度短于2KB)，post通过后台直接传递，适用于数据量较大、安全性要求较高-->
<!--action:设置服务器接收和处理表单数据的URL-->
<!--enctype:发送服务器之前进行编码的编码方式，可选，尽在post时有效(这里是无效的)-->
<form action="#" method="get" enctype="multipart/form-data" accept="image/gif,image/jpg" accept-charset="iso-8859-1" target="_parent" novalidate autocomplete="off/on"><!--accept:指定通过文件上传提交的文件类型-->
<!--指定服务器处理表单数据所接受的字符集，可选-->
<!--novalidate:是否启用表单验证功能，属性为布尔值-->
<p>
姓名:
<input formaction="#" type="text" formenctype="multipart/form-data" name="usrName"><!--formaction:任何输入控件都可以设置,让不同的表单数据传输给不同的服务器--><!--formenctype:任何输入控件都可以设置,为不同的表单数据指定编码格式,对于文件上传输入型必须选择m/f以使用二进制编码确定能连续传送到服务器(其余一般用a/x)-->
</p>
<lable><!--设置输入型控件的说明信息，点击触发控件-->
<input id="usrMess">
</input>
</lable>
<input type="submit"></form>
<button type="button" disabled="false" autofocus form="相应表单的ID"><!--formmethod,formenctype,formtarget,formnovalidata-->
<img src="" alt="">
</button>
</form>
<form action="#" method="post">
<fieldset><!--在控件周围创建边框表明控件是相关的-->
<legend><em>必填项</em></legend><!--为表单控件组制定一个名称，必须作为fieldset的第一个元素-->
<label>姓名
<input type="text" name="name">
</label>
</fieldset>
<fieldset>
<legend><em>选填项</em></legend>
<label>身高:
<select name="height" multiple="multiple" disabled="true" data- form="相应表单的ID" autofocus><!--size属性不再支持。--><!--data:定义使用外部数据--><!--multiple:是否一次选择多项-->
<option value="100">under 100cm</option>
<option value="100">above 100cm</option>
</select>
</label>
<label>职位:
<select>
<optgroup label="学生" disabled"disable">
<option value="本科生">本科生</option>
<option value="研究生">研究生</option>
</optgroup>
<optgroup label="">
<option>职业的</option>
<option value="兼职的"></option>
</optgroup>
</select>
</label>
</fieldset>
</form>
<form action="#" method="post">
<label>
<input type="text" list="remined" name="school">
</label>
<datalist id="remined"><!--输入选项-->
<option value="html5是什么" label="top1"/>
<option value="html5"></option>
<option value="make">nake?</option>
</datalist>
</form>
<form action="#" method="post">
<label>
安全强度：
<keygen name="security"><!--规定用于表单的额密钥对生成器字段-->
</label>
<input type="submit">
</form>
<form method="post" action="#" id="myform">
<label>
图片:
<input type="file" name="pic" accept="image/gif,img/jpeg" formenctype="multipart/form-data"><!--input type="image":图像式提交按钮;"radio":定义单选按钮;"checkbox":定义复选框;"submit""reset":提交重置-->
</label>
</form>
<form method="post" action="#">
<label>
电子邮件：
<input type="email" name="useEmail"/>
<input type="submit">
</label>
<label>
网址:
<input type="url" name="usrUrl"/>
<input type="submit">
<!--"number":定义数字的输入域,min定义允许输入的最小值，step定义变化间隔;
"range":滑动条数字输入域;
"search":定义搜索域,result定义显示搜索结果的条数。
"color":定义颜色选择域;
"date":定义日期选择域;"time":定义时间输入域;"month";"week";"dateyime":date+time;"datatime-local":默认显示本地时间;
"telephone":定义电话号码输入域，但是没有目前没有浏览器支持，还是得加正则匹配。-->
</label>
</form>
<!--form的属性:
placeholder:定义一个占位符，提示用户输入域期望输入的值。
required:定义必填项。
pattern：定义正则表达式对输入域进行验证。
multiple：定义输入域可以选择多个值。
list：与datalist标签组合定义输入域的选项列表。
-->
<!--表单验证:
validity:自带属性，是否合法
validity.valueMissing:是否为空
typeMismatch:类型不合法
tooLong:输入超过规定长度
stepMismatch:返回用户的输入数字是否合法(符合step)
rangeUnderflow:输入的数字是否小于设置的最小值
rangeOverflow:输入的数字是否大于设置的最大值
patternMismatch：输入的内容是否满足规定的验证要求
valid:返回所有输入的字段是否有效
customError:返回是否用户自定义的错误
preventDefault()关闭浏览器的默认错误提示信息，并且可以自定义错误信息
-->
<textarea cols="10" rows="10" name="message" readonly disabled="flase" required inputmode>
<!--readonly:设置文本区域是否可读--><!--required:是否必填-->
</textarea>
<footer>
Copyrights! make<em>get</em><!--斜体-->
</footer><!--定义页脚-->
</body>
</html>
02-21
1117
1117
04-25
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
