HTML5所有常用元素和属性

最新推荐文章于 2023-11-09 20:14:07 发布
枫林晚。
最新推荐文章于 2023-11-09 20:14:07 发布
阅读量1.4k
点赞数 3
分类专栏： HTML5 文章标签： HTML5元素属性使用方法
本文链接：https://blog.csdn.net/qq_40315045/article/details/94849612
版权
HTML5 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
HTML5所有常用元素和属性

 - <!--...-->注释
 - <html>根元素
 - <head>页面头部分，可以包含如下子元素
		> <script>:包含Javascript脚本
		> <noscript>:声明不支持Javascript脚本
		> <style>
		> <link>用于链接图标，css样式文件等外部资源
		> <title>
		> <base>指定页面中所有连接的基准路径
		> <meta>定义页面元数据
 - <title>页面标题
 - <body>页面主体部分
 - <h1>到<h6>定义标题一到六
 - <p>定义段落
 - <br>插入一个换行
 - <hr>定义水平线
 - <div>定义文档中的节 ，导致换行
 - <span>与<div>相似，区别是只表示一段一般性文本，不会换行
 - <b>定义粗体文本
 - <i>定义斜体文本
 - <em>定义强调文本
 - <strong>定义粗体文本，且代表重要文本
 - <small>定义小号字体文本,常用于免责声明、注意事项、法路规定、版权相关
 - <sup>定义上标文本
 - <sub>定义下标文本
 - <bdo>定义文本显示方向，dir="ltr"，dir="rtl"
 - <a>元素添加超链接和锚点：
 		超链接：
		> href:指定超链接所链接的另一个资源
		> hreflang:指定超链接所链接的文档所使用的语言
		> target:_self,_blank,_top,_parent,分别代表自身，新窗口，顶层框架，
		  父框架来装在新资源
		> download：不是直接打开目标链接，用于让用户下载目标链接所指向的资源
		> type:指定被链接文档的MIME类型
		> media：指定目标URL所引用的媒体类型，默认值为all，指定href后此属性有效
		锚点：
		> <a name="test">test</a>
		> <a href="anchor.html#test">定位到anchor文件中的锚点
		> <a href="#test">定位到同一文档中的test锚点
 - <ul>定义无序列表，只能包含<li.../>子元素
 - <li>定义列表项，可以包含于<div>完全类似的内容
 - <ol>定义有序列表：
		> start：指定列表的其实数字，默认是第一个，如1、和A
		> type：指定使用哪种类型的编号，1代表使用数字，A和a分别代表使用大写或小写字母，
			I或i代 表大写或小写罗马数字
 - <dl>定义术语列表，只能包含<dt>和<dd>两种子元素
 - <dt>定义标题
 - <dd>定义解释
 - <img>添加图片，可以使用usemap属性添加图片映射
		> src:该属性指定文件所在位置，可以是相对路径，也可以是绝对路径
		> alt:指定一段文本，作为图片还没有加载出来时的提示信息
		> height:指定图片高度，可以是百分比，也可以是像素值（px）
		> width:指定图片宽度，可以是百分比，也可以是像素值（px）
 - <map>定义图片映射，主要可以包含一个或多个<area>子元素，每个area子元素定义一个区域，
   不同区域可以 连接到不同的URL
 - <area>定义图片映射的内部区域：
		> shape：指定内部区域是那种区域，默认是“rect”,矩形区域；circle，圆形；ploy，多边形
		> coords:指定多个坐标值，用于确定区域位置
		> href
		> alt
		> trget
 - <table>定义表格，只能包含0个或者1个(<caption>,<thead>,<tfoot>),多个<tr>,<tbody
		> cellpadding:指定单元格内容和单元格边框之间的距离，属性值可以是像素（px）,
		  也可以是百分比
		> cellspacing:指定单元格之间的距离，属性值可以是像素（px）,也可以是百分比
		> width:指定表格宽度，属性值可以是像素（px）,也可以是百分
 - <caption>用于定义表格标题
 - <tr>定义表格行，只能指定<td><th>两种子元素
 - <td>定义单元格，与<div>类似，可以再包含一个<table>元素
		> colspan:指定单元格夸多少列
		> rowspan:指定单元格夸多少行
		> height:指定单元格高度，属性值可以是像素（px）,也可以是百分
		> width：指定单元格宽度，属性值可以是像素（px）,也可以是百分
 - <th>定义表格的表头元素，显示加粗字体
 - <thead>定义表格头
 - <tfoot>定义表格脚
 - <tbody>定义表格主体，只能包含多个<tr>
		使用方法：
		> <thead>,<tfoot>,<tbody>
 - <iframe>
		> src:指定一个URL，指定iframe将装在哪个页面
		> name:设置iframe的名字
		> longdesc:指定一个页面的URL，包含了关于该iframe的长描述
		> scrolling:设置滚动条，该属性支持yes,no,auto
		> height:设置iframe高度
		> width：设置iframe宽度
		> frameborder:设置iframe边框
		> marginheight：设置iframe顶部和底部的页边距
		> marginwidth：设置iframe左侧和右侧的页边距
 - id属性用于为HTML元素指定唯一标识,使用JS编程时可通过该属性
   来获取元素<document.getElementById(id)>
 - style属性用于为HTML元素指定CSS样式
 - class属性用于匹配CSS样式的class选择器
 - dir属性对齐方式  dir="ltr":左对齐   dir="rtl"右对齐
 - title属性显示元素指定额外信息，当用户把鼠标移动到该元素上面时，
 	浏览器将会显示title属性所制定的信息
		> 例：<div title="测试专用">测试</div>
 - contentEditable属性可以指定开发者直接编辑HTML元素的内容，属性值true，false
		> contentEditable属性具有可继承的特点：如果一个元素的父元素时“可编辑的”，
		 那么它默认也是可编辑的，除非指定contentEditable=“false”
		> 当用户编辑完成后，用户编辑的内容就会直接显示在该页面中，一旦刷新，
		编辑的内容就会消失，开发者可以通过元素的innerHTML属性来获取编辑后的内容
 - iscontentEditable属性指定当该元素处于可编辑状态时，返回true，否则返回false
 - designMode属性相当于是一个全局属性，如果把整个页面的designMode属性设置为on,
   则该页面上所有支持contentEditable的元素都变成可编辑状态，designMode属性默认为off
 - hidden属性支持true和false两个属性值，一旦把某个元素的hidden设为true，
   就意味着浏览器不在显示该组件，夜不会保留该组件所占的空间
		> 例：<div id="target" hidden="true style="heiget:80px">测试专用</div>
			  <button onclick="var target=document.getElementById('target');
			  target.hidden=!getfet.hidden;">显示/隐藏</button>
 - <section>该元素用于对页面内容进行分块
 - <link>用于链接图标，css样式文件等外部资源
		> href
		> hreflang
		> media:所链接的资源仅适用哪些设备
		> rel:设置文档与所链接资源的关系
		> size：指定图标的大小，仅当rel为icon是该属性才有效
		> type
		举例应用：
		> 引入CSS样式单：<link href="outer.css" rel="stylesheet" type="type/css" />
		> 设置图标：<link href="java.ico" rel="shortcut icon" type="image/x-icon" />
 - <base>空元素，指定页面中所有连接的基准路径
		> href:指定所链接的基准路径
		> target
		举例应用:<head><base href="http://www.baidu.com"></head>
				<body><a href="index.php">base</a></body>
 - draggable属性：（1）如果希望把某个元素可拖动，只需要把该元素的**draggable**属性
   设置为true即可，只是简单的拖动，并没有携带数据，因此看不到拖动的效果。
  （2）为了让拖动能携带数据，应该为被拖动的元素的**ondragstart**事件指定监听器,
   在该监听器中让拖动操作可携带数据。（3）为了让document可以接收放，应该为document
   的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为
   （默认不接受放）。（4）不同浏览器对拖放操作的默认动作是不同的，如果希望取消
   拖放操作的默认动作，可以对document的ondrop事件绑定监听器。示例如下：
		> <div id="source" style="width:80px;height:80px;
				border:1px;solid black;
				background-color:#bbb;"
				draggable="true">可拖动的div</div>
			<script type="text/javascript">
				var source=document.getElementById("source");
				source.ondragstart=function(evt)
				{
					evt.dataTransfer.setData("text","可拖动的div");
				}
				document.ondragover=function(evt)
				{
					//取消时间的默认行为
					return false;
				}
				document.ondrop=function(evt)
				{
					source.style.position="absolute";
					source.style.left=evt.pageX+"px";
					source.style.top=evt.pageY+"px";
					return false;
				}
			</script>
 - <form>用于生成表单，该元素不会生成可视化部分,默认使用**get**方式
		> action：指定当提交表单时，表单被提交到哪个地址，可以是相对路径，也可以是绝对路径，
		 必填
		> method：指定提交表单时发送何种类型的请求，属性值get和post，通常建议发送post请求，
		 必填
		> name:指定表单唯一名称，建议与id保持一致
		> target
		> enctype:指定对表单内容进行编码所使用的字符集
 - <input>空元素，有value属性
		> 单行文本框：type="text"
		> 密码框：type="password"
		> 隐藏框：type="hidden"
		> 单选框：type="radio"
		> 复选框：type="checkbox"
		> 图像域：type="image"时，<input>可以指定width和height属性
		> 文件上传域：type="file"
		> 提交：type="submit"
		> 重设：type="resrt"
		> 无动作：type="button

		> checked:支持Boolean值，设置单选框、复选框初始状态是否处于选中状态
		> disabled:支持Boolean值，表示该元素被禁用
		> maxlength：是一个数字，表示文本框中所允许输入的最大字数
		> readonly：支持Boolean值，指定该文本框的内容不容许用户修改
		> size：属性值是一个数字，指定该元素的宽度，type=hidden时该属性没有意义
		> src:指定图像域所显示图像的URL
		> width：指定图像域所显示图像的宽度
		> height：指定图像域所显示图像的高度
 - <label>用于在表单元素中定义标签，让标签和表单控件关联起来有两种方式：
		> 隐式使用for属性：指定<label>元素的for属性值为所关联表单控件的id属性值，例:
			<label for="id">单行文本框：</label>
			<input id="id" name="id" type="text" />
		> 显示关联：将普通文本，表单控件一起放在<label>元素内，例：
			<label>密码：<input type="password" /></label>
 - <button>定义一个按钮，可以包含文本和图片
		> disabled
		> name
		> type:属性值：submit reset button
		> value:指定按钮的初始值
 - <select>创建列表框和下拉菜单，该元素必须和<option>组合使用，每个<option>元素
   代表一个列表项或菜单项，<select>只能包含<option>或者<optgroup>
		> disabled:禁止使用该列表项和下拉菜单，属性值只能是disabled或者省略
		> multiple：支持Boolean值，一旦设置多选，<select>自动生成列表框
		> size：指定列表框内同时显示多少个列表项，一旦设置该属性，
		  <select>自动生成列表框
 - <option>定义列表框选项或菜单项
		> disabled:禁止使用，属性值只能是disabled或者省略
		> selected：列表项初始状态是否处于被选中状态，属性值只能是selected
		> value：选项对应的请求参数
 - <optgroup>定义列表项或菜单项组，只能包含<option>元素
		> label：指定选项组的标签，必填，例:
			<optgroup label="其他图书"></outgroup
		> disabled
 -<textarea>生成多行文本域
		> cols:指定文本域的宽度，必填
		> rows指定文本域的高度，必填
		> disabled
		> readonly：只读，属性值只能是readonly
		> maxlength：设置最多可输入的字符数
		> wrap：指定多换文本域是否添加换行符，soft和hard两个属性值，设为hard时，
		  必须指定cols属性，字符超过cols时，自动换行，提交时在换行出自动添加换行符
				 <form action="#" method="get">
				下面是简单下拉菜单：<br />
				<select id="skills" name="skills" multiple>
					<option value="java">java语言</option>
					<option value="c">C语言</option>
					<option value="ruby">ruby语言</option>
				</select><br/><br/><br/>
				下面是允许多选的列表框：<br/>
				<select id="books" name="books"
					multiple="multiple" size="4">
					<option value="java">疯狂Java讲义</option>
					<option value="android">疯狂安卓讲义</option>
					<option value="ee">ee实战</option>
				</select><br />
				下面是允许多选的列表框：<br/>
				<select id="leegang" name="leegang"
					multiple size="6">
				<optgroup	label="疯狂JAVA图书">
					<option value="java">疯狂Java讲义</option>
					<option value="android">疯狂安卓讲义</option>
					<option value="ee">ee实战</option>
				</optgroup>
				<optgroup label="其他图书">
					<option value="struts">struts 指南</option>
					<option value="ror">ror开发</option>
				</optgroup>
				</select><br/>
				<button type="submit"><p>提交</p></button><br/>
				<br/><br/><br/>
				简单多行文本域：<br/>
				<textarea name="txt1" cols="20" row="2"></textarea><br/>
				zhiduode:<br/>
				<textarea name="txt2" cols="28" row="4" readonly>fejifjeofjdkl
					djlsdkfjeoifdlka</textarea><br/>
				<button type="submit"><p>提交</p></button><br/>
				</form>
 - <fieldset>用于对表单内表单元素进行分组，一组的有特殊边界效果
		> name
		> form属性值必须是一个有效的<form>元素的id，用于指定<fieldset>元素属于哪个表单
		> disabled
 - <legend>放在<fieldset>元素内，为<fieldset>元素设置标题，例：
           <fieldset name="name7">
		        <legend>简答题</legend>
		     	<ol style="1" start="1">
					<b><li><span><i>你的梦想是什么？：</i></span></li></b<br/>
					<textarea name="txt1" cols="20" row="2"></textarea><br/>
					<b><li><span><i>以《我最敬佩的人》写一篇作文：</i></span></li></b<br/>
					<textarea name="txt2" cols="20" row="2"></textarea><br/>
			    </ol>
          </fieldset>
 -form属性：通过为表单控件指定form属性，可以让表单控件在<form>元素之外，从而提高灵活性
 	form的属性值为<form>元素的id值
 - formaction属性：指定用于提交的不同的URL，例：
        <input type="submit" value="注册" formaction="logon.html"/>
		<input type="submit" value="开始游戏" formaction="playgame.html"/>
		这两个不同按钮会将网页提交到不同的URL
 - forxxx属性，自行百度
 - autofocus属性：自动获得焦点，打开控件时只能有一个控件或得焦点，
 	所以整个页面上只能有一个表单元元素设置次属性，例：
 	<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />
 - placeholder属性：产生提示信息，例：
 	<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />
 - list属性：文本框与下拉菜单结合的组件，该组件既允许用户输入，也允许用户通过下拉菜单
 	选择，list属性值应该是一个<datalist>元素的id，list属性必须和<datalist>元素一起使用
 	例：<form method="post" action="buy">
			请输入图书：<input  name="name1" type="text" list="books1"/><p>
			 <input type="submit" value="购买" />
		      </form>
        <datalist id="books1">
			<option value="java">疯狂Java讲义</option>
			<option value="android">疯狂安卓讲义</option>
			<option value="ee">ee实战</option>
		</datalist>
	   </form>
 - autocomplete属性设置表单是否支持自动完成功能，会根据你的输入记录自动进行提示，
 	属性值on或者off
 - label的control属性：用于在Javascript脚本中访问该<label>元素所关联的表单元素，例：
		 <form action="pro.action" method="post" autocomplete="on">
			<label id="nameLB">姓名：
				<input type="text" name="name2"/></label><p>
				<input type="submit" value="提交"/>
				<input type="button" value="重设" 
					onclick="document.getElementById('nameLB').control.value='crazy';"/>
		 </form>
 - labels：自行百度
 - 文本框的selectionDirection属性
		> 正向选取文字时，selectionDirection属性返回forward
		> 反向选取文字时，selectionDirection属性返回backward
		> 没有选取时，返回上一次的值
		> 从未选取时，返回forward
   例：<form action="pro.action" method="post" autocomplete="on">
		<label id="nameLb">姓名：
		<input type="text" name="name3"/></label><p>
		<input type="submit"/>
		<input type="button" value="获取" 
			onclick="alert(document.getElementById('nameLb').control.selectionDirection);"/>
    </form>
 - 复选框的indeterminate属性：true和false两个属性值，在JS中判断一个复选框的checked属性之前，
 	需要先判断indeterminate属性是否为false，只有indeterminate属性为false是判断checked状态才有效
 	例：<form action="pro.action" method="post" autocomplete="on">
		<label id="colorLb">红色：
		<input type="checkbox" name="color"/></label><p>
		<input type="button" value="设置"
		onclick="document.getElementById('colorLb').control.indeterminate=true;"/>
		<input type="button" value="获取"
		onclick="alert(document.getElementById('colorLb').control.indeterminate);"/>
	   </form>
 - 功能丰富的input元素
 	例：<form action="do" method="post">
			请选择你喜欢的颜色：<br/><input name="color" type="color"/><p>
			请输入您的出生日期：<br/><input name="date " type="date"/><p>
			出生日期精确到秒：<br/><input name="time" type="time"/><p>
			请确认出生日期：<br/><input name="datetime-local" type="datetime-local"/><p>
			请选择这是几月：<br/><input name="month" type="month"/><p>
			请选择这是第几周：<br/><input name="week" type="week"/><p>
			请输入你的email：<br/><input name="email" type="email" multiple /><p>
			请输入您的电话：<br/><input name="tel" type="tel"/><p>
			请输入您的URL：<br/><input name="url" type="url"/><p>
			请输入您的幸运数字：<br/><input name="number" type="number" min="0" max="100" step="5" /><p>
			这是一个拖动条：<br/><input name="range" type="range" min="0" max="100" step="5" /><p>
			这是一个搜索框：<br/><input name="search" type="search"/><p>
			<label>用户名:<input id="name" name="name" type="text" autofocus  /></label><br /><br />
			<label for="username">密码:</label>
			<input  id="username" name="username" type="text" /><br />
			<input value="提交" type="submit" formaction="苑飞.html" />
	   </form>
 - <output>显示输出
 - <meter>计数仪表
 - <progress>进度条
 - 校验属性，自行百度
 - <audio>音频
 - <video>视频