每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
基本结构标签(骨架标签)
<html></html>标签是HTML标签,是页面中最大的标签,被称为根标签。
<head></head>标签是文档头部标签,在head标签中必须要设置的标签是<title></title>。
<title></title>标签是文档的标题,作用是让页面拥有一个属于自己的网页标题。
<body></body>标签是文档的主题,文档中所有的内容,页面内容,几乎都是放置在body标签中的。
HTML文档的的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档,并以网页的形式显示出它们。
文档中的特殊标签
<!DOCTYPE>标签
<!DOCTYPE>标签,这个标签是用于文档类型声明,其作用是告诉浏览器使用的哪个版本的HTML显示网页。比如说<!DOCTYPE html>,这个代码的意思是:当前页面采取的是 HTML5 版本来显示网页。特别注意:1.<!DOCTYPE>标签声明必须位于整个HTML文档的最前面的位置(必须位于第一行),其位于<html>标签之前。2.<!DOCTYPE>标签并不是HTML中的标签,只是文档类型声明的标签。
lang语言种类
通过html标签中的lang属性,可以定义当前HTML文档的默认显示语言,其默认是en(也就是英文),可以将其修改为zh-CN(简体中文)。但其实这并不影响文档显示:定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。但是这个属性对于浏览器和搜索引擎还是有影响的。
字符集
字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在标签内,可以通过<meta>标签的charset属性来规定当前HTML文档应该使用哪种字符编码。比如:
html"><meta charset="UTF-8">
这个属性就是将这个文档的字符集设置为“UTF-8”。需要特别注意的是:一般情况下,统一使用“UTF-8”编码,必须统一写成标准的 "UTF-8",不要写成"utf8"或 "UTF8"。并且,指定字符集这个meta标签是必须写的。
HTML中常用的标签
标题标签
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,分别是<h1>-<h6>。在标题标签中定义的文字会加大加粗,字号也会变大,并且一个标题独占一行。并且,标题的文字加大加粗效果从h1-h6依次递减,重要性也是依次降低,这就实现了多级标题的需求。
段落和换行标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。p标签是单词paragraph(段落)的缩写。顾名思义,其作用就是像人们平时阅读分段一样,将HTML文档分割为若干段落,便于阅读。 文本在p标签(也就是在一个段落中)中会根据浏览器窗口的大小自动换行,并且段落之间会保持空隙,这很大程度上符合人们的阅读习惯。
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br>,br是单词break的缩写。这个标签的作用就是强制换行。 br标签还是一个单标签(单标签只需要一个标签就可以,它是自闭合的。);br标签只是简单的开启新的一行,和段落标签的换行不一样,段落p标签的换行会插入一些垂直的间距。
可以明显的看出段落之间的换行是有明显的间距的。
文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。文本格式化标签的作用是:突出当前文字的重要性。
加粗
文字想要加粗可以使用<strong></strong>标签或者使用<b></b>标签,但是一般推荐使用strong标签,使用strong标签的语义更加强烈。
倾斜
文字想要倾斜可以使用<em></em>标签或者使用<i></i>标签,但是一般推荐使用em标签,使用em标签的语义更加强烈。
删除线
文字想要添加删除线效果可以使用<del></del>标签或者使用<s></s>标签,但是一般推荐使用del标签,使用del标签的语义更加强烈。
下划线
文字想要添加下划线效果可以使用<ins></ins>标签或者使用<u></u>标签,但是一般推荐使用ins标签,使用ins标签的语义更加强烈。
div和span标签
div和span标签是本身是没有任何语义的,它们两个就像是一个盒子,可以用来装内容。div是division的缩写,division的意思是分割、分区;span的意思是跨度、跨距。可以将div标签理解为一个大盒子,是用来布局的(后面的盒子模型会用到),一行只能放一个div标签;span可以理解为一个小盒子,也是用于布局,但是一行可以放多个span。
图像标签
在HTML中,用<img>标签定义页面中的图像。src是img标签的必须属性,其用于指定图像文件的路径和文件名。 除了src这个必须属性之外,img标签还具有一些其他属性:alt属性的作用是替换文本:提供一段文本,若图像加载失败,那么就会显示alt中的文本;title属性的作用是提示文本:提供一段文本,当鼠标放置于图像上,就会显示title中的文字;width和height属性是设置图片的宽高(一般宽高只会设置一个,另外一个会自动调整);border属性可以设置图像的边框粗细(单位是像素px)…… 这些属性都是根据需要自己设置。
需要注意的是:
1.图像标签可以拥有多个属性,必须写在标签名的后面。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。(这里尤其注意:属性之间不是用“,”分隔的,直接使用空格分隔即可!)
3.属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。
img标签的属性有很多(HTML的有些标签也具有很多属性,但是并非每一个属性都是必须的。),但是必须要写的属性只有src(并且src中的路径必须写相对路径,必须!),其他属性是根据需求使用的。
超链接
在HTML标签中,<a></a>标签用于定义一个超链接,其作用就是超链接的作用:从一个页面连接到另外一个页面。a是anchor(锚)的缩写。a标签有两个常见的属性:href和target:href是连接目标的URL,这是必须属性;target是指定连接页面的打开方式,默认是_self,就是在当前页面打开;可以通过target指定打开方式为_blank,在新窗口中打开。
连接分类
1.外部链接:例如<a href="http:// www.baidu.com ">百度</a>。
2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 <a href="index.html">首页</a>。
3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>。
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接:当点击连接时,可以快速定位到页面中的某个位置。
(1).在超链接的href属性中,设置属性值为#名字的形式,如<a href=#two>第二集</a>
(2).找到目标位置标签(想要通过超链接跳转的标签),里面添加一个id属性,id设置为a标签中href中定义的名字,如:<h1 id="two">第二集介绍</h1>。这样通过点击超链接中的文本“第二集”(href指定为#two),就可以跳转到id为“two”的标签处。
这样就可以完成锚点链接。其主要实现方法可以概括为:超链接中的href属性要和想要通过超链接跳转到的标签的id属性相同。