html5——常用元素与属性

2025-03-01 技术教程

html5是由标签组成的标记语言，本篇就介绍HTML5的部分标签

html5保留的常用标签

定义HTML注释<html>HTML5文档的根元素<head>定义HTML文档的头部页面元素<title>定义HTML5的页面标题<body>定义HTML5文档的页面主体部分<style>该元素用于引入样式定义<h2>到<h7>定义标题一到标题六<p>段落标签<br>换行标签<hr>定义水平线<div>定义文档中的块<span>与div标签基本相似，默认不会换行

代码示例：

<!DOCTYPEhtml><html><metacharset="utf-8"><head><title>标签代码示例</title><head><body><h2>标题一</h2><h3>标题二</h3><h4>标题三</h4><h5>标题四</h5><h6>标题五</h6><h7>标题六</h7><hr><span>php</span><span>mysql</span><span>html</span><br><div>php</div><div>mysql</div><div>html</div><p>tomcat</p></body></html>

文本格式化标签

这些元素让文本在浏览器中呈现出特定的效果

<b>定义粗体文本<i>定义斜体文本<em>定义强调文本<strong>定义粗体文本，与<b>标签的作用和用法基本相同<sup>定义上标文本<sub>定义下标文本<bdo>定义文本的显示方向，该标签可以指定dir属性，该属性值只能是ltr或者是rtl

代码示例：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文本格式化标签</title></head><body><span><b>加粗文本</b></span><br/><span><i>斜体文本</i></span><br/><span><b><i>粗斜体文本</i></b></span></br><span><em>被强调的文本<em><span><br/><big><span>大号字体文本</span></big><br/><p><strong>加粗文本</strong></p><br/><small><span>小号字体文本</span></small><br/><div>普通文本<sup>上标文本</sup></div><bdodir="ltr">从左向右排列</bdo><br/><bdodir="rtl">从右向左排列</bdo><br/></body></html>

语义相关元素

html5保留了如下相关元素<abbr>用于表示一个缩写<address>用于表示一个地址<blockquote>用于定义一段长的引用文本<q>用于定义一段短的引用文本<cite>用于表示作品的标题<code>用于表示一段计算机代码<dfn>用于定义一个专业术语<del>定义文档中被删除的文本<ins>定义文档插入的文本<pre>预格式化标签<samp>定义示范文本内容<kbd>定义键盘文本<var>用于表示一个变量

超链接和锚点

超链接<a.../>，该元素可以指定 id class style等核心属性，也可以指定onclick等各种事件属性，还可以指定如下三个重要属性

href：指定超链接所关联的另一个资源

target：指定使用框架集中的哪一个框架来装载另一个资源，该属性的属性值可以是_self _blank _top _parent

<ahref="target="_blank"">百度</a><ahref="#test">定位到test锚点</a><aname="test"></a>

列表相关标签

<ul>定义无序列表<ol>定义有序列表该元素可以指定如下三个属性，start:指定列表项的起始数字type:哪种类型的编号reversed该属性用于指定是否将排序反转（目前没有浏览器支持该属性）<li>定义列表项目<dl>用于定义列表<dt>用于定义标题列表项<dd>用于定义普通列表项

代码示例：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>列表相关标签</title></head><body><ul><li>列表一</li><li>列表二</li><li>列表三</li></ul><olstart="2"type="I"><li>列表一</li><li>列表二</li><li>列表三</li></ol><dl><dt><dt><dd><dd><dd><dd><dt><dt><dd><dd><dd><dd><dl></body></html>

图像相关标签：

<img.../>src:该属性指定图片的所在的位置alt:作为改图片的提示信息height：该图片的的高度width:该图片的宽度usemap="#mapname"<map.../><mapname=""><area=""coords=""href=""><area=""coords=""href=""></map>

表格相关标签：

<table>用于定义表格属性：cellpadding:指定单元格内容和单元格边框之间的间距cellspacing:指定单元格之间的间距，该属性可以是像素值也可以是百分比width:表格的宽度<caption>定义表格标题<tr>定义表格行<td>定义单元格<th>定义表格页眉的单元格<tbody>定义表格的主体<thead>定义表格的头<tfoot>定义表格的脚rowspancolspan两个属性用于定义跨行跨列

框架相关元素：

<iframesrc=""width=""height="">

html5新增的通用属性：

contentEditable属性该属性设置为true，那么浏览器将允许开发者直接编辑该HTML元素里的内容，可以继承，如果一个HTML元素的父元素是可编辑的那么子元素默认也是可以编辑的designMode属性相当于一个全局的contentEditable属性，如果把真个页面的designMode属性设置为on时，该页面上所有可支持contentEditabe都变成可编辑状态hidden属性hiddle设为true，就意味着浏览器不显示该组件，浏览器也不会保留该组件所占用的空间，相当于在CSS中设置display:none;spellcheck属性设置spellcheck="true"浏览器将会对输入的文本内容执行输入检查

html5新增的常用元素：应用较少，略

html5头部和元信息