HTML 5的常用元素与属性

最新推荐文章于 2024-07-29 09:25:14 发布

Right.W

最新推荐文章于 2024-07-29 09:25:14 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Right__/article/details/97820363

本文详细介绍了HTML5中的关键元素，包括基本元素、文本格式相关元素、列表元素、图片与表格元素，以及iframe元素的增强功能。同时，探讨了HTML5的通用属性、头部与元信息、新增的拖放功能，为读者提供了全面深入的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML 5保留的的常用元素

1、基本元素

：定义HTML注释。
<html>：是HTML 5文档的根元素。
<head>：定义HTML 5文档页面头部分。
<title>：定义HTML 5文档页面标题部分。
<body>：定义HTML 5文档页面主题部分。
<h1><h6>：定义标题一到六。
<p>：定义段落，可以指定id、class、style、dir、title 等通用属性，也可指定onclick 等时间属性。
<br>：插入一个换行。
<hr>：定义水平线。
<div>：定义文档中的节。（其中文本内容在网页中竖着排列）
<span>：与 div 相似，但<span>只表示一般性文本，该元素包含的文本内容默认不会换行，可以指定和<div>相同的属性。（其中文本内容在网页中横着排列，程序中不写span 则默认一行）

2、文本格式相关元素

<b>：定义粗体文本。
<i>：定义斜体文本。
<em>：定义强调文本。（效果与斜体文本差不多）
<strong>：定义粗体文本。(与<b>用法和作用基本相同)
<sup>：定义上标文本。
<sub>：定义下标文本。
<bdo>：定义文本显示的方向。

3、使用a 元素添加超链接和锚点

<href>：指定超链接所链接的另一个资源。
<hreflang>：指定超链接所链接的的文档所使用的语言。
<target>：指定框架集中哪个框架来加载另一个资源，该属性属性值可以是 _self（用自身来装载新资源）、_blank（用新窗口来装载新资源）、_top（用顶层框架来装载新资源）、_parent（用父框架来装载新资源）和自定义的一个属性。
<download>：让用户下载目标链接所指向的资源，而不是打开链接。
<type>：指定被链接文档的 MIME 类型。
<media>：制定目标URL 所引用的媒体类型。默认值为all。只有指定了herf 属性是该属性才有效。（URL即网页地址）

请看下面程序：

<body>   
 <a herf="images/logo.jpg" download="疯狂 Java 联盟.jpg" type="image/jpeg">
<img src="images/logo.jpg" alt="疯狂 Java 联盟"/></a><br>
</body>

herf=“images/logo.jpg” ：表示下载的图片
疯狂 Java 联盟.jpg ：表示图片名
alt=“疯狂 Java 联盟” ：表示如果图片显示异常，则页面显示疯狂 Java 联盟
src=“A/B” ：表示将B 推出他所在这一层文件夹，回到他的上一层也就是A 所在文件夹中，使图片与 .html 在同一目录下，才可以在网页中显示图片。

<a.../> 可生成一个命名锚点，用于在HTML 页面中生成一个定位点，允许超链接直接链接到指定页面的该点位点。

<!-- 生成一个命名锚点 -->
<a name="test">test</a>

使用超链接来定位该锚点（a标签跳到锚点要用#号）

<a herf="#test">定位到 test 锚点 </a>

4、列表相关元素

<ul>：定义无序列表。该元素只能包含<li.../>子元素。
<ol>：定义有序列表。该元素只能包含<li.../>子元素。
该元素还可以指定如下三个属性：
start：指定列表项的起始数字。
type：指定使用哪种类型的编号（在HTML 5规范中已不推荐使用）
reversed：指定是否将排序反转。（目前没有任何浏览器支持该属性）
<li>：定义列表项，该元素里可包含与<div.../>完全类似的内容，因此可包含较多类型子元素。
<dl>：定义术语列表。该元素只能包含<dt.../>和<dd.../>两种子元素。
<dt>：定义标题列表项。该元素只能包含文本、图像、超链接、文本格式化元素和表单控制元素等。
<dd>：定义普通列表项。该元素里可包含与<div.../>完全类似的内容，因此可包含较多类型子元素。
下面两种书写表示相同：style=“width:300px;” 和 width=“300”

5、使用img 元素添加图片

src：该属性指定图片文件所在位置，既可以是相对路径也可以是绝对路径。
alt：该属性指一段文本，该文本作为图片的提示信息。（文本或图片未加载出，出现提示信息）
height：指定图片高度，该属性值既可以是百分比，也可以是像素值。
width：指定图片宽度，该属性值既可以是百分比，也可以是像素值。
<map>：用于定义图片映射。包含一个或多个 <area.../>子元素，每个 <area.../>子元素定义一个区域，不同区域连接到不同URL。
<area>：定义图片映射的内部区域。
shape：指定该内部是那种区域，默认"rect"，即矩形区域；还有 circle 和 ploy，分别代表圆形和多边形区域。
coords:指定多个坐标，用于确定区域位置。
herf：用于确定该区域所链接的资源。
alt：指定一段文本作为该图片提示信息。
target：指定框架集中哪个框架来加载另一个资源，该属性属性值可以是 _self（用自身来装载新资源）、_blank（用新窗口来装载新资源）、_top（用顶层框架来装载新资源）、_parent（用父框架来装载新资源）和自定义的一个属性。

6、表格相关元素

<table>：用于定义表格，该元素只能包含0个或一个1个<caption.../>子元素（定义标题）,0个或一个1个<thead.../>子元素（定义表格头）,0个或一个1个<tfoot.../>子元素（定义表格脚）,0个或一个1个<tr.../>子元素（定义表格行）,0个或一个1个<tbody.../>子元素（定义表格体）。
cellpadding：指定单元格内容和单元格边框之间的间距。该属性值既可以是百分比，也可以是像素值。
cellspacing：指定单元格之间的间距。该属性值既可以是百分比，也可以是像素值。
width：指定表格宽度。该属性值既可以是百分比，也可以是像素值。
<caption>：定义表格标题。该元素只能包含文本、图像、超链接、文本格式化元素和表单控制元素等。
<tr>：定义表格行。只能包含 <td.../>和<th.../>两种元素。
<td>：定义单元格。
colspan：指定单元格跨多少列，该属性就是一个简单数字。
rowspan：指定单元格可横跨的行数。
height：指定该单元格高度，该属性值既可以是百分比，也可以是像素值。
width：指定该单元格宽度，该属性值既可以是百分比，也可以是像素值。
<th>：定义表格的表头单元格。与<td>用法几乎完全一样。
<tbody>：定义表格主主体。只能包含<tr>子元素。
<thead>：定义表格头。与<tbody.../>用法相似。
<tfoot>：定义表格脚。与<tbody.../>用法相似。
<col>:该元素用于为表格中一个人或多个列指定属性。
<colgroup>：该元素用于为表格中一个人或多个列指定属性。<colgroup.../>的作用只是用于组织多个<col.../>元素。

二、HTML 5增强的 iframe 元素

src：该属性指定一个URL，指定该 iframe 将装载那个页面。
name：设置 iframe 名字。
scrolling：设置是否在 iframe 中显示滚动条。该属性支持yes（显示滚动条）、no（不显示滚动条）、aoto（大小不够时显示滚动条，否则不显示）。
height：设置 iframe 高度。
width：设置 iframe 宽度。
frameborder：设置是否显示 iframe 边框。（frameboder:“none” 和 frameboder=“0” 都是把边框去掉的意思）

三、HTML 5保留的通用属性

id 属于 HTML 元素指定的唯一标志。
style 属性用于为 HTML 元素指定 CSS 样式。
class 属性用于匹配 CSS 样式的 class 选择器。

dir 属性用于设置元素中内容的排列方向。

<!--定义为左对齐-->
<div dir="ltr">内容ltr</div> 
<!--定义为右对齐-->
<div dir="rtl">内容rtl</div>

lang属性：通过设置lang 属性告诉浏览器和搜索引擎元素内容所使用的的语言。zh 代表中文、en 代表英语、fr 代表法语、ja 代表日本。
accesskey 属性：指定激活该元素的快捷键。

四、HTML 5头部和元信息

<style>：该元素定义内部CSS 样式。
<link>:该元素用于链接图标、CSS 样式文件等各种外部资源。
<title>：该元素用于定义文档标题。
<base>：定义该页面中所有链接的基准路径。
<meta>：定义HTML 页面的元数据。

link 元素
可以指定如下属性:

href：指定所链接资源的URL。
hreflang：指定所链接资源的语言。
media：设置所链接资源仅适用于哪种设备。
rel：设置文档与所链接资源的关系。
sizes：指定图标大小。仅当rel 为icon 时该属性才有效。
type：指定所链接资源的MIME 类型。

在这里插入图片描述
k,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpZ2h0X18=,size_16,color_FFFFFF,t_70)

在这里插入图片描述
base 元素

<base.../>元素必须是空元素，除了可指定 id 作为其唯一标志之外，还可指定以下两个属性。
href：指定所有链接的基准路径。
target：指定超链接默认在哪个窗口打开链接。
base 元素存在，添加图片类型为全路径才可在网页中加载出。

五、HTML 5新增的拖放

<img.../>元素默认就是可拖动的；而<a.../>元素只要设置了 href 属性，它默认也是可拖动的。
把一个普通元素的 draggable 属性设置为 true 即变成可拖动的了，但是拖动时并未携带数据，用户看不到效果，所以为被拖动元素的 ondragstart 事件指定监听器，在该监听器中可携带数据。