「HTML」标签集合

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

HTML 标签集合

HTML.png

语义化

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

文档章节标签

页面内容

文档头部

导航
main文档主要内容

侧边栏

定义外部内容（如外部引用的文章）

一个独立的块

尾部

页面通常结构

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

structure.gif

HTML5中代码示例：

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

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

标题标签

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

 、
、
、
、
和

从

到

重要性递减。

其基本语法格式如下：

   标题文本

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

组合内容标签

段落标签

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

  文本内容

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

容器标签

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

列表标签

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

无序列表

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


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

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

注意:

中只能嵌套

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

有序列表

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


    列表项1
    列表项2
    列表项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和导航等头部信息。 
 ：用于定义表格的页脚。 
 位于
标签中标签之后，一般包含网页底部的企业信息等。 
 ：用于定义表格的主体。 
 位于
标签中标签之后，一般包含网页中除头部和底部之外的其他内容。 
 表格的标题： 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
    
    
    
    
  
  
  

 
 使用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”， 
  或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。  
  
 canvas 
 canvas 基于像素，性能要求比较高，可用于实时数据展示。svg 为矢量图形图像。 
 热点区域标签 
 img中套用map以及area可以实现点击某部分图片触发一个链接，点击另一部分触发另一个链接 
 

    
    

 
 嵌入资源标签 
  页面操作可以不影响到iframe的内容






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

标签	显示效果	语义强调标签（XHTML推荐使用）
	文字以`粗体`方式显示
	文字以`斜体`方式显示
	文字以`加删除线`方式显示
	文字以`加下划线`方式显示

「HTML」 标签集合