「HTML」标签集合

2018-09-14 本文已影响0人 Rella7

HTML 标签集合
语义化
文档章节
- 页面通常结构
- 标题标签
组合内容
- 段落标签
- 列表标签
  - 无序列表
  - 有序列表
  - 自定义列表
- 水平线标签
- 换行标签
表格数据
表单
文本级别语义
- 链接标签
- 文本格式化标签
- 引用标签
嵌入式内容
- 图像标签
  - 路径
    - 相对路经
    - 绝对路径
- canvas
- 热点区域标签
- 嵌入资源标签
- 多媒体 embed

HTML 标签集合

HTML.png

语义化

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

文档章节标签

<body> 页面内容
<header> 文档头部
<nav> 导航
main文档主要内容
<aside> 侧边栏
<article> 定义外部内容（如外部引用的文章）
<section> 一个独立的块
<footer> 尾部

页面通常结构

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

structure.gif

HTML5中代码示例：

<body>
<!--头部start-->
<header>
    <!--导航start-->
    <nav>
        <a href="#">导航1</a>
        <a href="#">导航2</a>
        <a href="#">导航3</a>
    </nav>
    <!--导航end-->
</header>
<!--头部end-->

<!--主体start-->
<main>
    <!--文章start-->
    <article></article>
    <!--文章end-->

    <!--侧边栏start-->
    <aside></aside>
    <!--侧边栏end-->

</main>
<!--主体end-->

<!--底部start-->
<footer></footer>
<!--底部end-->
</body>

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

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

标题标签

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

 <h1>、<h2>、<h3>、<h4>、<h5>和<h6>

从<h1>到<h6>重要性递减。

其基本语法格式如下：

<hn>   标题文本   </hn>

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

组合内容标签

段落标签

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

<p>  文本内容  </p>

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

容器标签

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

列表标签

容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是整齐、整洁、有序

无序列表

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

<ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
</ul>

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

注意:

<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与</li>之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

有序列表

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

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
......
</ol>

所有特性基本与ul 一致。

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

自定义列表

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

<dl>
    <dt>名词1</dt>                   <!--  dt 表示标题 -->
    <dd>名词1解释1</dd>      <!--  dd 表示内容   -->
    <dd>名词1解释2</dd>
    <!--  dd 是对dt进行的表述 或者 解释   dd 是围绕着dt进行服务的 -->
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

注意：

dl 里面只能有 dt 和dd 标签 ;
dt 和 dd 一对多的关系,
一个<dt>可以对应多个<dd>
dt 类似于皇帝,可以有多个妃子dd;
一个dl 里面可以有多对 dt 和 dd.

tips: <dl> 为自定义列表，其中包含一个或多个 <dt> 及一个或多个 <dd>，并且dt 与 dl列表会有缩进的效果。<pre> 会保留换行和空格，通常与 <code> 一同使用。

水平线标签

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

其基本语法格式如下：

<hr />是单标记

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

换行标签

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

<br />

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

表格

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

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

<table>
  <caption>table title and/or explanatory text</caption>
  <thead>
    <tr>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
    </tr>
  </tbody>
</table>

在上面的语法中包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。

<table>< </table>：用于定义一个表格。
<tr>< </tr>：用于定义表格中的一行，必须嵌套在 <table> </table>标签中，在<table> </table>中包含几对 <tr> </tr>，就有几行表格。
<td> </td>：用于定义表格中的单元格，必须嵌套在< <tr> </tr>标签中，一对<tr> </tr>中包含几对<td> </td>，就表示该行中有多少列（或多少个单元格）。
表头标签<thead></thead>一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

注意：

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

表格结构

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

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。

<tfoot></ tfoot >：用于定义表格的页脚。

位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。

<tbody></tbody>：用于定义表格的主体。

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

表格的标题： caption

caption 元素定义表格标题。

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

表格属性

表格属性.png

合并单元格
使用 colspan=val 进行跨列，使用 rowspan=val 进行跨行。

总结表格：

1.表格提供了HTML 中定义表格式数据的方法。
2.表格中由行中的单元格组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
4.表格不要纠结于外观，那是CSS 的作用。

表单

<form action="WebCreation_submit" method="get" accept-charset="utf-8">
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 第一种添加标签的方法 -->
    <label><input type="text/submit/hidden/button/etc" name="" value=""></label>
    <!-- 第二种添加标签的方法 -->
    <label for="input-id">Sample Label</label>
    <input type="text" id="input-id">
  </fieldset>
  <fieldset>
    <legend>title or explanatory caption</legend>
    <!-- 只读文本框 -->
    <input type="text" readonly>
    <!-- 隐藏文本框，可提交影藏数据 -->
    <input type="text" name="hidden-info" value="hiden-info-value" hidden>
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

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

表单中的其他控件类型：

textarea （文本框）
select 与 option （下拉菜单可多选）

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

文本级别语义

链接标签

在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可，
其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

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

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

注意：

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

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

锚点定位

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

1.使用“<a href=”#id名“>链接文本</a>”创建链接文本。

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

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

<head>
<base target = "_blank" />
</head>
<body>
<a target = "_self"></a>
</body>

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

<a rel = "nofollow"></a>

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

<!-- 默认超链接  -->
<a href="http://sample-link.com" title="Sample Link">Sample</a>
<!-- 当前窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打开链接 -->
<a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>

<!-- 页面中的锚点 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>

<!-- 邮箱及电话需系统支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多个邮箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主题和内容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>

<!-- 电话示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>

文本格式化标签

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

标签	显示效果	语义强调标签（XHTML推荐使用）
<b> </b><strong> </strong>	文字以`粗体`方式显示	<strong> </strong>
<i> </i><em> </em>	文字以`斜体`方式显示	<em> </em>
<s> </s><del> </del>	文字以`加删除线`方式显示	<del> </del>
<u> </u><ins> </ins>	文字以`加下划线`方式显示	<ins> </ins>

引用标签

<cite> 引用作品的名字、作者的名字等
<q> 引用一小段文字（大段文字引用用<blockquote>）
<blockquote> 引用大块文字
<blockquote> 拥有 cite 属性，它包含引用文本的出处，示例如下所示：
```
<blockquote cite="http://example.com/facts">
  <p>Sample Quote...</p>
</blockquote>
```
<pre> 保存格式化的内容（其空格、换行等格式不会丢失）

<code> 引用代码

<pre>
  <code>
    int main(void) {
      printf('Hello, world!');
      return 0;
    }
  </code>
</pre>

嵌入式内容

图像标签

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

其基本语法格式如下：

<img src = "图像URL"/>

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

img标记属性.png

路径

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

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

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

相对路径

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如[图片上传失败...(image-b7736a-1536892261783)]。
图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如[图片上传失败...(image-d169c1-1536892261783)]。
图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如[图片上传失败...(image-30391c-1536892261783)]。

绝对路径

绝对路径“D:\web\img\logo.gif”，
或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

canvas

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

热点区域标签

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

<img src="mama.jpg" width=100 height=100 usemap="#map" />
<map name="map">
    <area shap="rect" coords="0,0,50,50" href="" alt="">
    <area shap="circle" coords="75,75,25" href="" alt="">
</map>

嵌入资源标签

<iframe src=""></iframe> 页面操作可以不影响到iframe的内容

<!--object embed通常用来嵌入外部资源 -->
<object type="application/x-shockwave-player">
  <param name="movie" value="book.pdf">
</object>

<!--视频 track可以引入字幕 autoplay可以使视频加载后自动播放，loop可以使其循环播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>

多媒体 embed

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

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

「HTML」标签集合