HTML标签分类

　　通过上节博客我们知道了网页的组成：文字 图片 连接 视频 音频。在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素。

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如：

<body>我是文字</body>

2.单标签

<标签名/>

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。比如：

<br/>   （换行的意思）

HTML标签关系

标签的相关关系分为两种：

1.嵌套关系

<head>  <title> </title>  </head>

父与子的关系 <head>是 <title>的父标签。

2.并列关系

这个时候<head>与<body>是并列关系，两个<div>是并列关系。也就是兄弟标签。

<head></head>

<body></body>

文档类型<!DOCTYPE>

<!DOCTYPE html>

<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

注意： 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的，但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则)，所以大家放心的使用HTML5的文档类型就好了。

字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。

为什么要有语义化标签：

  1. 方便代码的阅读和维护
  2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

HTML标签

首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。

HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签

标题标签（熟记）

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

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

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

标题标签语义：作为标题使用，并且依据重要性递减。

基本语法格式如下：

<hn> 标题文本 <hn>

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

在sublime输入每个等级的标签代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>来自星星的我</h1>

    <h2>来自星星的我</h2>

    <h3>来自星星的我</h3>

    <h4>来自星星的我</h4>

    <h5>来自星星的我</h5>

</body>

</html>

在浏览器打开如下：

  段落标签：

单词缩写：paragraph 段落

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

段落标签：

<p> 文本内容 </p>

实例，输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>教父简介</h1>

    <p>

《教父》是由弗朗西斯·福特·科波拉执导，马龙·白兰度、阿尔·帕西诺等主演的黑帮电影，于1972年3月24日在美国上映。

该片改编自马里奥·普佐的同名小说，讲述了以维托·唐·柯里昂为首的黑帮家族的发展过程以及柯里昂的小儿子迈克如何接任父亲成为黑帮首领的故事。1973年该片获得第45届奥斯卡奖最佳电影、最佳男主角、最佳改编剧本奖 [1]  。2007年被美国电影协会选为“百年百佳影片第二位”。

    </p>

</body>

</html>

在浏览器展开效果图如下：

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

水平线标签

在网页中常常看到一些水平线将段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现。也可以简单通过标记来完成。<hr/>就是创建横跨网页的标记。其基本语法格式如下。

<hr/>   是单标记

实例：

输入以下HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h1>教父简介</h1>

    <hr/>

    <p>

《教父》是由弗朗西斯·福特·科波拉执导，马龙·白兰度、阿尔·帕西诺等主演的黑帮电影，于1972年3月24日在美国上映。

该片改编自马里奥·普佐的同名小说，讲述了以维托·唐·柯里昂为首的黑帮家族的发展过程以及柯里昂的小儿子迈克如何接任父亲成为黑帮首领的故事。1973年该片获得第45届奥斯卡奖最佳电影、最佳男主角、最佳改编剧本奖 [1]  。2007年被美国电影协会选为“百年百佳影片第二位”。

    </p>

</body>

</html>

展示效果如下：

可以看出多出一个横线。

换行标签

首先看一下代码，然后能更加清晰的了解什么是换行标签：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    *********中国四大帅哥**********

    1.郭富城

    2.刘德华

    3.张国荣

    4.本博主

</body>

</html>

</html>

我们这样来看是 一共是五行，一个是 *********中国四大帅哥**********标题。另外四个是四大帅哥的名字。结构比较清晰。

然后我们在浏览器打开显示如下：

结果发现这五行字体，竟然在一行显示，横着过来了。

如果 我们想让他们换行怎么办呢？看如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h3>*********中国四大帅哥**********</h3>>

    <p>1.郭富城</p>

    <br/>

    <p>2.刘德华</p>

    <br/>

    <p>3.张国荣</p>

    <br/>

    <p>4.本博主</p>

</body>

</html>

</html>

浏览器打开运行结果为：

 div span标签

div span 是没有语义的 是我们网页布局主要的两个盒子。

div :就是divsion的缩写分隔，分区的意思 其实很多div来组合网页。

span:跨度，跨距；范围

语法如下：

<div> 这是div标签 </div>   <span>这是sapn标签</div>

输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    你好

    <div>这是div标签</div>

    你好

    <span>这是span标签</span>

</body>

</html>

</html>

在浏览器中展示如下：

 文本格式化标签

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

然后我们一个个演示，首先是加粗,<b><strong>都可以，优先使用<strong>，具体什么区别，我们后面会讲解，加粗代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <strong>这是加粗文本</strong>

    <b>这是加粗文本</b>

</body>

</html>

在浏览器打开如下：

可以看到在浏览器中打开后，文字加粗了。

倾斜的文本代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <i>这是倾斜的文本</i>
    <em>推荐的倾斜文字</em>
</body>
</html>

浏览器显示：

删除线代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <s>删除线的文字</s>

    <del>推荐的删除线文字</del>

</body>

</html>

浏览器打开：

下划线代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <u>下划线文字</u>

    <ins>推荐使用的下划线</ins>

</body>

</html>

浏览器打开：

 标签属性

属性就是特性，比如手机的颜色，手机的尺寸，总结就是手机的。。

使用HTML制作网页时，如果想让HTML提供更多的信息，可以使用HTML标签的属性加以设置，其基本语法如下：

<标签名 属性1=“属性值1” 属性2=“属性值2”>内容</标签名>

我们输入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    要求：水平线长度为 500，颜色为红色。

    <hr width="500" color = "red" />

    标签属性：

    1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。<br/>

    2.属性之间没有先后顺序，标签名与属性，属性与属性之间均已空格分开。<br/>

    3.任何标签的属性都有默认值，省略该属性则取默认值。<br/>

</body>

</html>

在浏览器打开如下：

图像标签

代码如下：

浏览器如下：

属性：

alt属性

在浏览器打开如下：

title属性：

浏览器打开如下：

图片宽度 与高度

border

浏览器打开：

图片的综合属性

代码：

浏览器打开如下：

04- HTML常用标签的更多相关文章

  1. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  2. WP主题制作常用标签代码

    WordPress模板结构 style.css : CSS文件index.php : 主页模板archive.php : Archive/Category模板404.php : Not Found 错 ...

  3. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

  4. html基础+常用标签

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...

  5. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  6. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  7. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  8. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  10. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

随机推荐

  1. Django的ORM封装接口详细

    [前言]Django的orm操作本质上会根据对接的数据库引擎,翻译成对应的sql语句:所有使用Django开发的项目无需关心程序底层使用的是MySQL.Oracle.sqlite....,如果数据库迁 ...

  2. 第6章 for循环

    目标 掌握for循环的使用方法 理解for循环的嵌套 在第3章中,我们学习了times循环.times循环可以让一段代码重复执行指定的次数. 本章我们将学习另一种循环结构--for循环.它同样能让一段 ...

  3. hive中更改表impala中不能生效

    hive中的更新或者新建表impala 不能实时更新 Impala是基于Hive的大数据实时分析查询引擎,直接使用Hive的元数据库Metadata,意味着impala元数据都存储在Hive的meta ...

  4. 重磅！七国首脑会议决定制裁Go语言！

    2021年2月, 编程语言的七国集团峰会在风景优美的Linux庄园如期召开. C, Java, Python, JavaScript , C++ , C#,  PHP 相继入座. C语言作为主持人,在 ...

  5. 使用pycallgraph分析python代码函数调用流程以及框架

    技术背景 在上一篇博客中,我们介绍了使用量子计算模拟器ProjectQ去生成一个随机数,也介绍了随机数的应用场景等.但是有些时候我们希望可以打开这里面实现的原理,去看看在产生随机数的过程中经历了哪些运 ...

  6. Python插入排序

    升序 import random l = [] for i in range(8): l.append(random.randint(0,9)) print(l) for cur in range(1 ...

  7. 项目管理之Git

    @[TOC]( Git命令:分支与合并)Git一款很好的项目版本管理工具,更是一款优秀的分布式项目管理工具.今天主要给大家介绍Git 强大的分支和合并功能,分支和合并可以说在实际的工作当中用到的是最多 ...

  8. C++类的静态成员笔记

    下面是C++类的静态成员笔记. 静态数据成员特征 用关键字static声明 为该类的所有对象共享,静态数据成员具有静态生存期 必须在类外定义和初始化,用(::)来指明所属的类 举例说明-具有静态数据成 ...

  9. java 集合 + 常见面试题

    1.1. 集合概述 1.1.1. Java 集合概览 从下图可以看出,在 Java 中除了以 Map 结尾的类之外, 其他类都实现了 Collection 接口. 并且,以 Map 结尾的类都实现了 ...

  10. ElasticSearch入门篇（保姆级教程）

    本章将介绍:ElasticSearch的作用,搭建elasticsearch的环境(Windows/Linux),ElasticSearch集群的搭建,可视化客户端插件elasticsearch-he ...