HTML5学习记录2_全栈html5实习记录本-CSDN博客

本文链接：https://blog.csdn.net/weixin_44135991/article/details/86597772

2.1 HTML5保留的常用元素
2.1.1 基本元素
HTML文档是一份结构化的文档，HTML文档的根元素总是<html…/>元素，该元素内通常包含<head…/>和<body…/>两个子元素（HTML5允许省略它们，HTML5会隐式添加），这三个元素定义了HTML文档的基本结构。
HTML5保留的基本元素有如下几个：

<!--...-->：定义HTML注释，位于<!--与-->之间的内容会被当成注释处理；
<html>：它是HTML5文档的根元素，但HTML5允许完全省略这个元素；
<head>:它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素；
<title>:它用于定义HTML5文档的页面标题；
<body>:它用于定义HTML5文档的页面主体部分；
<h1>到<h6>:定义标题一到标题六；
<p>:定义段落；
<br>:插入一个换行；
<hr>:定义水平线，HTML5中它还代表了主题结束的含义；
<div>：定义文档中的节；
<span>:与<div>基本相似，区别是<span>只是表示一段一般性文本，该元素包含的文本内容默认不会换行。

在这里插入图片描述

2.1.2 文本格式相关元素

<b>:定义粗体文本；
<i>:定义斜体文本;
<em>:定义强调文本,实际效果与斜体文本差不多；
<strong>:定义粗体文本，HTML5为它增加了语义，使用它包起来的文本代表重要的文本；
<small>:定义小号字体文本,HTML5定义了该元素专门用于标识所谓的“小字印刷体”，通常用于标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字；
<sup>:定义上标文本；
<sub>:定义下标文本；
<bdo>:定义文本显示方向，该元素应该指定dir属性，该属性值只能是ltr或者rtl,用于指定文本的排列方向。

在这里插入图片描述

2.1.3 语义相关元素

<abbr>:用于表示一个缩写；
<address>:用于表示一个地址；（斜体字显示）
<blockquote>:用于定义一段长的引用文本（缩进显示），使用<blockquote.../>元素时可指定cite属性，该属性用于指定该引用文本所引用的网址url或出处；
<q>:用于定义一段短的引用文本，浏览器会为这段文本添加引号；
<cite>:用于表示作品的标题；（斜体显示）
<code>:用于表示一段计算机代码；
<dfn>:用于定义一个专业术语；（粗体或斜体显示）
<del>:定义文档中被删除的文本；（中画线形式显示）
<ins>:定义文档中插入的文本；（下画线形式显示）
<pre>:用于表示该元素所包含的文本已经进行了“预格式化”；
<samp>:用于定义示范文本内容；
<kbd>:用于定义键盘文本；
<var>:用于表示一个变量；（斜体字显示）

在这里插入图片描述

2.1.4 使用a元素添加超链接和锚点
HTML页面使用超链接与网络上的另一个资源保持关联，当用户单击页面上的超链接时，浏览器会导航到超链接所指资源。
1）<a…/>元素可以指定id、class、style、dir、title等通用属性，也可以指定onclick等各种事件属性，还可以指定如下6个重要属性。
href：指定超链接所链接的另一个资源；
hreflang：指定超链接所链接的文档所使用的语言;
target：指定使用框架集中的哪个框架来装载另一个资源，该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表使用自身，新窗口，顶层框架，父框架来装载新资源;
download：用于让用户下载目标链接所指向的资源，而不是直接打开该目标链接，该属性的属性值指定用户保存下载资源时的默认文件名。
type：指定被链接文档的MIME类型；
media：指定目标url所引用的媒体类型，默认值为all，只有当指定了href属性时该属性才有效。
注：<a…/>元素主要可以包含文本、图像、各种文本格式化元素和表单元素等内容。
在这里插入图片描述

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

2.1.5 列表相关元素

 <ul>:定义无序列表，该元素只能包含<li.../>子元素；
 <ol>:定义有序列表，该元素可以指定id、class、style、dir、title等通用属性，也可以指定onclick等各种事件属性，该元素只能包含<li.../>子元素，该元素还可以指定如下三个属性：
 1）start:指定列表项的起始数字，默认是第一个，如：1，A。
 2）type:指定使用哪种的编号，例如：1代表使用数字，A或a分别代表使用大写或者小写字母，I或i代表使用大写或者小写罗马数字。该属性在HTML5规范中已经不推荐使用了，推荐使用CSS来定义。
 3）reversed：该属性指定是否将排序反转。很遗憾，目前没有任何浏览器支持该属性。
<li>:定义列表项；
<dl>:用于定义术语列表。
<dt>:定义标题列表项。
<dd>:定义普通列表项。

在这里插入图片描述

2.1.6 使用img添加图片
HTML5保留了<img…/>元素在页面中定义图片，这个元素只能是一个空元素，它不可以包含任何内容，使用该元素必须指定如下两个属性：
1）src:该属性指定图片文件所在的位置，该属性值既可以是相对路径，也可以是绝对路径。
2）alt：该属性指定一段文本，该文本将作为该图片中的提示信息。
除此之外，该元素还可以指定如下两个可选属性：
1）height：指定该图片的高度，该属性值可以是百分比，也可以是像素值。
2）width：指定该图片的宽度，该属性值可以是百分比，也可以是像素值。
另外，与图片相关的还有如下两个元素：

1）<map>:用于定义图片映射，该元素主要可以包含一个或多个<area.../>子元素，每个<area.../>子元素定义一个区域，不同区域可链接到不同url。
2）<area>:用于定义图片映射的内部区域。

除此之外，还可以指定如下几个属性：
1）shape：指定该内部区域是哪种区域，该属性的默认值是“rect”；即矩形区域；除此之外，还可以是圆形区域circle和poly多边形区域。
2）coords:指定多个坐标值，用于确定区域位置。
3）href：用于确定该区域所链接的资源。
4）alt:该属性指定一段文本。
5）target:指定使用框架集中的哪个框架来装载另一个资源
在这里插入图片描述

2.1.7 表格相关元素
HTML5保留了定义表格的如下元素：

<table>:用于定义表格，<table.../>元素只能包含0个或1个<caption.../>子元素（定义表格标题），0个或1个<thead.../>子元素（定义表格头），0个或1个<tfoot.../>子元素（定义表格脚），多个<tr.../>子元素（定义表格行），多个<tbody.../>子元素（定义表格体）。该元素可以指定id、style和class等通用属性，也可以指定onclick等事件属性，除此之外，该元素还可以指定如下几个属性。
cellpadding:指定单元格内容和单元格边框之间的间距，该属性值既可是像素值，也可是百分比。
width:指定表格的宽度，该属性值既可是像素值，也可是百分比。
caption:用于定义表格标题。
tr：定义表格行，该元素只能包含<td.../>或者<th.../>两种元素。
td:定义单元格，除指定通用属性和事件属性外，该元素还可以指定如下几个属性：
colspan：指定该单元格跨多少列，该属性值就是一个简单的数字。
rowspan:指定此单元格可横跨的行数。
height:指定该单元格的高度。
width:指定该单元格的宽度。
th:定义表格的表头单元格。
tbody:定义表格的主体，该元素只能包含<tr.../>子元素，该元素可以指定id、style和class等通用属性，也可以指定onclick等事件属性。
thead:定义表格头。
tfoot:定义表格脚。

在这里插入图片描述