概述
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>视频
最后
以上就是懦弱芝麻为你收集整理的HTML5所有常用元素和属性HTML5所有常用元素和属性的全部内容，希望文章能够帮你解决HTML5所有常用元素和属性HTML5所有常用元素和属性所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
