html 显示集合,「HTML」 标签集合

HTML 标签集合

语义化

文档章节

页面通常结构

标题标签

组合内容

段落标签

列表标签

无序列表

有序列表

自定义列表

水平线标签

换行标签

表格数据

文本级别语义

链接标签

文本格式化标签

引用标签

嵌入式内容

图像标签

路径

相对路经

绝对路径

canvas

热点区域标签

嵌入资源标签

多媒体 embed

HTML.png

语义化

语义化(Semantic Tag)是指用合适的标签标识适当的内容，它可以起到搜索引擎优化(Search Engine Optimization)，提高可访问性(例如盲人使用的屏幕阅读器)，与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签

文档头部

导航

main文档主要内容

侧边栏

定义外部内容(如外部引用的文章)

一个独立的块

尾部

页面通常结构

HTML5中有部分语义标签，在使用时十分简单，但是由于语义性更强，更利于开发者以及搜索引擎对于网页的理解。

structure.gif

HTML5中代码示例：

导航1

导航2

导航3

使用HTML5中新的语义标签,内容更为直观,即使删除了注释,依旧能够看出该标签的作用,语义性更强。说的通俗一些,内容一样,但是代码更少了。

但是老版本的浏览器，比如iE 8 及以下版本并不支持新语义标签，可以到「HTML 」语法中查找解决兼容性问题的方法。

标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

、

、

、

、

和

从

到

重要性递减。

其基本语法格式如下：

标题文本

注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用。

组合内容标签

段落标签

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

文本内容

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

容器标签

作为容器存在，语义性不强，在网站布局中广泛使用，搜索引擎友好，但是搜索引擎更友好的依旧是内容。

列表标签

容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是 整齐 、整洁、 有序

无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

• 列表项1
• 列表项2
• 列表项3

......

比如一些新闻是没有顺序的，不用排队，先到先得，先发布先显示。

注意:

，直接在与之间相当于一个容器，可以容纳所有元素。

无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

1. 列表项1
2. 列表项2
3. 列表项3

......

所有特性基本与ul 一致。

但是实际工作中， 较少用 ol ，因此我们用一句话来总结下 ol：放开那个女...那个ol,让ul来

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

名词1

名词1解释1

名词1解释2

...

名词2名词2解释1名词2解释2

...

注意：

dl 里面 只能有 dt 和dd 标签 ;

dt 和 dd 一对多的关系,

一个

可以对应多个

dt 类似于皇帝,可以有多个妃子dd;

一个dl 里面可以有多对 dt 和 dd.

tips:

及 一个或多个

，并且dt 与 dl列表会有缩进的效果。

 会保留换行和空格，通常与  一同使用。

水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，就是创建横跨网页水平线的标记。

其基本语法格式如下：

是单标记

在网页中显示默认样式的水平线。

换行标签

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

在HTML中，如果还像在word中直接敲回车键换行就不起作用了。

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。

表格代码示例

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

table title and/or explanatory text

header

data

在上面的语法中包含三对HTML标签，分别为

、、，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。 < ：用于定义一个表格。< ：用于定义表格中的一行，必须嵌套在 标签中，在 中包含几对 ，就有几行表格。 ：用于定义表格中的单元格，必须嵌套在< 标签中，一对中包含几对 ，就表示该行中有多少列(或多少个单元格)。

表头标签一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记

替代相应的单元格标记即可。

注意：

中只能嵌套标签，他就像一个容器，可以容纳所有的元素

表格结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：

：用于定义表格的头部。

必须位于

标签中，一般包含网页的logo和导航等头部信息。 tfoot >：用于定义表格的页脚。

位于

标签中标签之后，一般包含网页底部的企业信息等。：用于定义表格的主体。

位于

标签中 tfoot >标签之后，一般包含网页中除头部和底部之外的其他内容。

表格的标题： caption

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

表格属性

表格属性.png

合并单元格

使用 colspan=val 进行跨列，使用 rowspan=val 进行跨行。

总结表格：

1.表格提供了HTML 中定义表格式数据的方法。

2.表格中由行中的单元格组成。

3.表格中没有列元素，列的个数取决于行的单元格个数。

4.表格不要纠结于外观，那是CSS 的作用。

title or explanatory caption

Sample Label

title or explanatory caption

Submit

Reset

使用fieldset可用于对表单进行分区

表单中的其他控件类型：

textarea (文本框)

select 与 option (下拉菜单可多选)

更多关于表单的介绍，请点击这里查看。

文本级别语义

链接标签

在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可，

其基本语法格式如下：

文本或图像

href：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。

target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

注意：

1.如果当时没有确定链接目标时，通常将链接标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

2.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：

1.使用“链接文本”创建链接文本。

2.使用相应的id名标注跳转目标的位置。

base 和 nofollow

base 可以设置整体链接的打开状态

nofollow 设置不抓取链接,防止SEO搜索引擎抓取隐私

链接标签常见的几种形式：

Sample

Sample

Sample

Sample

Achor Point

Achor Content

Contact Us

Contact Us

Contact Us

Ring Us

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。

标签

显示效果

语义强调标签(XHTML推荐使用)

文字以粗体方式显示

文字以斜体方式显示

文字以加删除线方式显示

文字以加下划线方式显示

引用标签

引用作品的名字、作者的名字等

引用一小段文字(大段文字引用用

)

引用大块文字

拥有 cite 属性，它包含引用文本的出处，示例如下所示：

Sample Quote...

 保存格式化的内容(其空格、换行等格式不会丢失)

引用代码

int main(void) {

printf('Hello, world!');

return 0;

}

嵌入式内容

图像标签

HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。

其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

img标记属性.png

路径

网页需要图片,首先需要通过路径找到它..

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为： 相对路径和绝对路径

相对路径

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如[图片上传失败...(image-b7736a-1536892261783)]。

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如[图片上传失败...(image-d169c1-1536892261783)]。

图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如[图片上传失败...(image-30391c-1536892261783)]。

绝对路径

绝对路径“D:\web\img\logo.gif”，

canvas

canvas 基于像素，性能要求比较高，可用于实时数据展示。svg 为矢量图形图像。

热点区域标签

img中套用map以及area可以实现点击某部分图片触发一个链接，点击另一部分触发另一个链接

嵌入资源标签

页面操作可以不影响到iframe的内容

多媒体 embed

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。兼容性较差。