HTML标签

最新推荐文章于 2024-08-04 14:23:51 发布

玲玲酱

最新推荐文章于 2024-08-04 14:23:51 发布

阅读量153

点赞数

分类专栏： # html5 文章标签： html

本文链接：https://blog.csdn.net/qq_45758587/article/details/108969602

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

段落

<p>I am a paragraph, oh yes I am.</p>

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

其他文本类型标签

列表

1.有序列表 ol

子元素 li，序号默认从1 开始
start属性规定有序列表的起始值。
reversed属性规定列表顺序为降序。
type 属性规定在列表中使用的标记类型，取值disc、square、circle等。不推荐使用该属性，之后用css样式实现。

2.无序列表 ul 子元素 li

type 属性规定在列表中使用的标记类型，取值disc、square、circle等。不推荐使用该属性，之后用css样式实现。

3.列表 dl

子元素 dt：标题
子元素dd：列表项

超链接

超链接可以允许我们从当前文档链接到任意其他文档（其他资源），也可以链接到文档的某个特定部分。

href 表示跳转的目的地，取值如下:

目标元素的ID值用于锚点跳转 href="#目标元素的ID值"

URL URL使用path来定位文件，path又分为相对路径和绝对路径

target 规定在何处打开链接文档

_self (默认，在当前选项卡打开新页面)
_blank(在新选项卡打开新页面)

设置URL的相对地址和绝对地址

相对路径：就是相对于自己的目标文件的位置。（指以当前文件所处目录而言文件的位置）
绝对路径：是指文件在硬盘上真正存在的路径。（指对站点的根目录而言某文件的位置）
.当前目录 ..上一级目录

图片

<img>在Html文档中代表图片。

src 表示图片的URL地址（必须）
alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
width 设置图片的宽度，单位为px，不推荐使用，之后用css样式实现
height 设置图片的高度，单位为px，不推荐使用，之后用css样式实现

表格

在Html文档中代表表格，通过二维数据表表示数据。 Table标签经常需要配合caption thead tfoot tbody tr td th col colgroup 一起使用。

align 表格应该如何在文档中对齐，可以取值： left,center,right
border 设定表格边框特性，取整数为值，单位为px
cellpadding 设定内容与单元格之间的距离
cellspacing 设定单元格与单元格之间的距离
width 设定表格的宽度
bgcolor 设定表格的背景色
注意：当学习完CSS就不要使用这些属性了

<caption>表示表格的标题信息
<colgroup> 列分组
<thead>表示表头，包含了<tr>以及<td>
<tbody>表示表格的表体，包含了很多<tr>
<tfoot>表示表脚，包含了对表的总结信息
<tr> 表示表格的行，可以包含<td>,<th>元素
<td>表示表格用来包含数据的单元格。
<th>常用于表头单元格，th单元格内的内容有居中加粗的效果。

表格属性

colspan 跨列数
rowspan 跨行数
width 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示的时候会适当的调整

<colgroup>定义一个表中的一组列，只能作为table的子元素，位于<caption>元素后，其他元素之前。
<col>定义一个表中的列，并用于在所有公共单元上定义通用语义，经常作为<colgroup>元素的子元素。

<span>跨列数，即规定有几列可以作为同一列

html5新增标签

1.header

<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

2.nav

是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

3.article

代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任何独立的内容。

4.section

作为Html文档独立的功能。

5.aside

该元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分

6.footer

该元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

7.address

该元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。

在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要： section, article, aside, footer, header, nav, hgroup { display:block; } 但是上述方法有局限性，比如在IE8以及更早版本，是无法对未知元素进行样式的修饰，因此需要：

8.figure& figcaption

figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

9.details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。 details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

open属性当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false 时，其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素 summary元素从属于details，用鼠标单击summary元素中的内容文字时，details 元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。