html5的标签

最新推荐文章于 2024-09-08 01:14:57 发布

大厂女程序媛

最新推荐文章于 2024-09-08 01:14:57 发布

阅读量500

点赞数

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/tyutjavalily/article/details/54380197

版权

html5 专栏收录该内容

6 篇文章

订阅专栏

section:有标题的节;
article:有标题，独立的节。
导航nav：
- 传统导航
- 侧边栏导航
- 页内导航
- 翻页操作
- 页脚链接

aside

附属信息：

      
      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>aside的使用</title>
</head>
<body>
	<header>
		html5
	</header><!-- /header -->
	<article>
		<h1>html5的历史</h1>
		<p>html5草案的前身为web applications 1.0,于2004年被WHATWG提出</p>
		<aside>
			<h1>名词解释</h1>
			<dl>
				<dt>WHATCH</dt>
				<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
			</dl>
		</aside>
	</article>

</body>
</html>

友情链接

时间time：

    
    <time datetime="2011-01-12" pubdate>January 12th, 2011</time>

标题header：标题和区块的标题

标题分组hgroup:

     
     <hgroup>
		<h1>主标题</h1>
		<h2>副标题</h2>
		<h3>标题说明</h3>
	</hgroup>

脚注footer
html5中的表单

     
     <h1>html4中的表单</h1>
	文本域：<input type="text" /> <br>
	单选框：<input type="radio" /> <br>
	复选框：<input type="checkbox" /> <br>
	下拉列表：<select name="" multiple>
		<option value="">1212</option>
		option
	</select> <br>
	密码域：<input type="password" /> <br>
	提交按钮：<input type="submit" /> <br>
	可单击的按钮：<input type="button" />  <br>
	图像按钮：<input type="image" /> <br>
	隐藏域：<input type="hidden" /> <br>
	重置按钮：<input type="reset" /> <br>
	文件域：<input type="file" /> 	<br>
	<h1>html5新增的表单</h1>
	email类型：<input type="email" /><br>
	url类型的：<input type="url" /><br>
	number类型:<input type="number" min="1" max="20" step="3" name="" value="4"><br>
	range类型: <input type="range" name="" min="0" max="40" step="5" value="5">
	date类型（选取日，月，年）:<input type="date" name=""> <br>
	month类型（选取月，年）：<input type="month" /><br>
	week类型（选取周和年）:<input type="week" name=""><br>
	time类型（选取时间）：<input type="time" /><br>
	datetime类型（UTC的时间，日，月，年）:<input type="datetime" name=""><br>
	datetime-local(当地时间的时间，日，月，年)；<input type="datetime-local" /><br>
	search类型的：<input type="search" /> <br>
	tel类型：<input type="tel" /><br>
	color类型：<input type="color" />
	datalist:<input type="url" list="url_list" name="">
	         <datalist>
	         	<option label="新浪" value="http://www.sina.com.cn"></option>
				<option label="搜狐" value="http://www.sina.com.cn"></option>
				<option label="网易" value="http://www.sina.com.cn"></option>
	         </datalist>
	keygen:请选择加密强度: <keygen keytype="rsa"></keygen>
	output:输出结果：<output> name="result"></output>

     
     
	新增的input属性：
	autocomplete:适用于form和input，浏览器自动完成内容的输入，on为自动，off为不自动；
	autofocus: 自动获取焦点，on和off;
	form属性：例子：
	<form action="t13_submit" method="get" accept-charset="utf-8" id="form1">
		t13_submit
		get
	</form>
	<form action="t13_submit" method="get" accept-charset="utf-8" id="form2">
		t13_submit
		get
	</form>
	<input type="text" name="" form="form1 form2">
	表单重写，只适用于image,submit;
		formaction:重写action；
		formenctype:重写enctype；
		formmethod:重写method;
		formnovalidate:重写novalidte；
		formtarget：重写target；
	width和heigth:使用于image；
	list属性,适用于text，search，url，telephone,email,data picker, number,range,color：
	请输入网址：<input type="url" list="url_list" name="">
	<datalist id=url_list"">
		<option label="新浪" value="http://www.sina.com.cn"></option>
		<option label="搜狐" value="http://www.sina.com.cn"></option>
		<option label="网易" value="http://www.sina.com.cn"></option>
	</datalist>
	multiple：支持多选择：
	pattern：匹配正则表达式；
	placeholder:默认的值；
	required:输入的内容不能为空；

      
      <video autobuffer autoloop loop controls>
    <source src="/media/video.mp4">
    <source src="/media/video.ogv">
    <object type="video/ogg" data="/media/video.swf" width="320" height="240">
        <param name="src" value="/media/video.oga">
        <param name="autoplay" value="false">
        <param name="autoStart" value="0">
        <p><a href="/media/video.oga">Download this video file.</a></p>
    </object>
</video>

如果浏览器支持video元素，也支持H264，就放第一个视频
如果支持video元素，也支持ogg，放第二个视频
如果不支持video,就是是flash.
如果不支持video,也不支持flash，就用下载链接进行下载。

表单元素：

        
         <form action="" method="post" accept-charset="utf-8" name="form1" id="form1">
        <p>单行文本域：<<input type="text" name="textfield" id="textfield" value=""></p>
        <p>密码域：<input type="password" name="password"  /></p>
        <p>多行文本域：<<textarea name="textareafield" id="textareafield"></textarea></p>
        <p>复选框：<input type="checkbox" name="checkbox1" value="">
                   <input type="checkbox" name="checkbox2">
        </p>
        <p>单选框：
                <input type="radio" name="radio1">
                <input type="radio" name="radio2">
        </p>
        <p>
            下拉菜单：
            <select name="selectlist" multiple>
                <option value="1">选项卡1</option>
                <option value="2">选项卡2</option>}
            </select>
        </p>
        <p>提交：
            <input type="submit" name="submit-btn">
        </p>
    </form>

链接标签：<a></a> :锚点

键盘属性：accesskey:按住alt+指定的键就可以跳转到对应的连接：

       
       <a href="www.baidu.com" accesskey="b">配合alt键去百度</a>

tabindex：用来指定tab键访问的顺序。

内容属性：

alt :定义元素的替换文本
title：定义元素的提示文本
longdesc:定义元素包含内容的大段描述信息
cite：定义元素包含内容的引用信息
datatime:定义元素的时间和日期

        
        <img src="con-disc-ilvcrp.png" alt="替换文本" title="张三于2015年 中国馆留念" longdesc="这是张三2015年在中国馆的留念，当时天很热，他穿着短裤，拿着矿泉水，场面热闹非凡">
<img src="con-disc-ilvcrp.png" alt="替换文本" title="张三于2015年 中国馆留念" longdesc="t3.html">
<ins datetime="2015-01-09 9:00">2015年上海博览会</ins>

http://write.blog.youkuaiyun.com/postedit/54380197

结构元素：

section: web页面中的块区域

article:独立的文章内容

aside:相关内容或者引文

功能元素：

mark：需要突出显示或高亮显示的文字，典型的应用就是用在搜索结构中向用户高亮显示的搜索关键词。

section和div的区别，section是用来划分网页的，div是用来布局网页的。

iframe内嵌框架：属性：

sameless---有无边框

srcdoc---优先于src

sandbox---安全限制（异元有限制，同源无限制）

script加载策略：defer 和  async (异步)