HTML5所有常用元素和属性

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>视频

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页