HTML学习总结01- html标签

HTML简介

首先，HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它 不是一种编程语言，而是一种标记语言 (markup language)；编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。标记语言也就是用一套标记标签 (markup tag)的描述方式。HTML 作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。

HTML骨架

我们来看一下一个html页面的骨架，如下图

html骨架

这里详细介绍一下以下几个标签

1. HTML标签

作用所有HTML中标签的一个根节点。 最大的标签 ，也叫做根标签

2. head标签

头标签，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
注意在head标签中我们必须要设置的标签是title

3. title标签

文档的标题，每一个网页都拥有一个属于自己的标题。

4. body标签

标记文档的主体 ，我们的网页基本都是放到body里面的

HTML标签

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 、、都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素； HTML标签通常是成对出现的，比如

和

；也有少部分单标签，如：
、

---

等

标签语义化

标签语义化指的是标签最好具有一定的语义作用，标签语义化的作用如下：

1. 方便代码的阅读和维护

2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

3. 使用语义化标签会具有更好地搜索引擎优化

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

标签属性

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

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 

1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。采取 键值对 的格式 key="value" 的格式

2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

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

排版标签

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

1. 标题标签
   为了使网页更具有语义化，我们经常会在页面中用到标题标签；标题使用

   至

   标签进行定义。

   定义最大的标题，

   定义最小的标题。具有align属性，属性值可以是：left、center、right。

    
这是一个标题
    
这是一个标题
    ...
    
这是一个标题

标题具有align属性，属性值可以是：left、center、right。标题标签作为标题使用，并且依据重要性递减。h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用，或者页面中最重要标题信息。

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

 
这是一个段落

段落标签具有align属性，属性值可以是：left、center、right。

3. 水平线标签
   水平线标签水平线可将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线标签是一个单标签，基本语法格式如下：

是单标签

水平线标签的具有的属性介绍：
1）align：设定线条置放位置。属性值可选择：left right center。
2）size：设定线条粗细。以像素为单位，内定为2。
3）width：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
4）color：设置线条颜色。
5）noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

4. 换行标签
   HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，就会自动换行。但若希望某段文本强制换行显示，就需要使用换行标签，换行标签也是单标签，其基本语法如下：

5. div span标签(html排版标签中的重点标签)

首先，div 和 span是没有语义的，他们是我们网页布局主要的2个标签，用法相似，盒子div 就是 division 的缩写，也就是分割，分区的意思。span, 是跨度，范围的意思。 但div使用是必须独占一行，span则不换行。

基本语法格式：

 这是一个div 
  
这是一个span

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

标签	显示效果
和	文字以粗体方式显示(XHTML推荐使用strong)
和	文字以斜体方式显示(XHTML推荐使用em)
和	文字以加删除线方式显示(XHTML推荐使用del)
和	文字以加下划线方式显示(XHTML推荐使用ins)

7. 内容居中标签
   只要是在这个标签里面的内容，都会居于浏览器的中间，其语法格式如下：

 该内容在浏览器的中间位置显示   

超链接

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

文本或图像

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用。
target：用于指定链接页面的打开方式，其取值常用的有_self和_blank两种，其中_self为默认值，在同一个网页中显示; _blank为在新窗口中打开方式。以及_parent：在父窗口中显示，_top：在顶级窗口中显示。

创建超链接的三种方式

1. 外部链接：可链接到外部文件或者链接到外部地址，如

百度

2. 内部链接：可链接到内部文件(直接链接内部页面名称即可 )

< a href="index.html"> 首页 

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

< a href="#"> 首页 

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

锚点定位

给超链接定义一个名字，让他在本页面或者其他页面的的不同位置进行跳转。如点击回到顶部，让其回到页面最顶端。

1. 创建一个锚点，即超链接要跳转到的那个特定位置，可以使用name或者id属性来标识。效果如下：

这是页面最顶端
 

2. 使用超链接跳转

回到锚点

值得注意的是：a标签是文本级的标签，a就是可以当做文本来处理，所以a标签尽量不要包含其他块级元素，如div和p，当然你可以这么写，不会报错，但是这样并不利于seo优化。

图片标签

img标签，是image的缩写；要想在网页中显示图像就需要使用图像标签

其基本语法格式如下：

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

我们总结一下img标签的相关属性如下，

属性	属性值	显示说明
src	图片路径	相对路径或者绝对路径
alt	替换文本	图片显示不出来时的替换文本
title	悬停文本	鼠标悬停时显示的内容
width	像素（XHTML不支持使用页面百分比）	图像的宽度
height	像素（XHTML不支持使用页面百分比）	图像的高度
border	数字	设置图像边框

我们来解释一下相对路径和绝对路径：
相对路径从文件本身出发，使用 . /或者省略./和 ../ 分表代表当前目录和上一层目录来找到所用资源路径

对于相对路径来说，不管项目放到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

绝对路径之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的，直接引入盘符或者网络资源路径，如下：

特殊字符标签

 ：空格 （non-breaking spacing，不断打空格）
<：小于号（less than）
>：大于号（greater than）
&：符号&
"：双引号
'：单引号
©：版权©
™：商标™

特殊字符	描述	字符代码
空格
<	小于号	<
>	大于号	>；
&	与	&；
￥	人民币	¥
©	版权	©；

...
若，我们想把某个会被浏览器解析的标签显示在页面上，就要使用转义字符来代替，如，把

显示在网页中

p标签显示：<p>