第三课 HTML基本结构之一

1.HTML初始：HTML（Hyper Text Markup Language的缩写），超文本标记语言，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述；

2.HTML标签：标签分两种，一种是单标签
，一种是双标签

，斜杠表示关闭符号；

一个HTML网页的大致样式是

第一行声明这是一个HTML5文件。第二行和最后一行是在HTML文档中，所有的标签都必须在这对标签之中。在这对标签之中，整体又可以分为两个部分，一部分是头，一部分是主体，所以头用表示，而主体用表示；所以和并不是规定网页内容具体形状、行为等的，而是区分层次的，告诉浏览器，哪个部分是头，哪个部分是主体，仅仅是为了分层的；

在标签中，一般包括标签，这是现实在浏览器上页面的标题：

标签则是浏览器显示的主体：

3.标签关系：只有两种，要么是嵌套关系，要么是并列关系。

嵌套关系：标签之间是可以相互嵌套，如上面的和之间就是嵌套关系，HTML标签还可以多层嵌套，实际中非常多；

并列关系：标签之间还可以是并列关系，如和之间是并列，没有谁包括谁，所以两者是并列关系；

4.文档类型：告诉浏览器html文档使用的是哪个版本

5.字符集：

utf-8是目前最常用的字符集编码方式，包含全世界所有国家所需要用到的字符；

gb2312简体中文，包括6763个汉字；

BIG5繁体中文，港澳台等地使用；

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

记住一点就够，直接使用utf-8就不会产生由于字符集不统一而乱码的情况了；

6.常用HTML标签：

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

标题标签（熟记）：有6个等级，分别是

、

、

、

、

、

、作为标题使用，并且依据重要性递减，即h1>h2>h3>h4>h5>h6；使用方法是

这是一个重要性最大的标题

；因为

是很重要的时候才用，所以轻易不要使用h1标签，一般这是给logo使用的；

	
	


	
测试标题之h1
	
测试标题之h1
	
测试标题之h1
	
测试标题之h1
	
测试标题之h1
	
测试标题之h1
	测试标题之h1

段落标签（熟记）：在网页中要把文字有条理地显示出来，就需要用到段落标签，不然浏览器是不会自己识别某段文字是否为一个段落，而是将所有文字连续地、一行一行的显示；段落标签用法：

一个自然段落

；默认情况下，段落标签中的内容会根据浏览器的变化自动换行；

水平标签（认识）：网页中常常有一个横线将一些段落之间分隔开，使得整个文章或者页面的结构更加清晰。这些“水平线”，可能是一个细长的图片，也可以是一个

---

标签；

换行标签
（熟记）：如果一个段落内部需要换行，那么就需要使用换行标签，在换行处输入该标签就可以；这个标签的功能看上去

也能实现，但是段落标签

换行后，两行之间的间隙会很大，而换行标签不会改变行距；

两个重点布局标签：div、span，没有语义，是网页布局中大量使用的两个标签；就是将整个源码分为一大块一大块的部分，方便对各个部分进行不同的操作；不会在浏览器显示方面有什么效果；

b、文本格式化标签：文本中如果又需要将文字设置为粗体、斜体、删除线、下划线等效果时使用的标签；

标签	显示效果
、	文字以粗体方式显示（推荐使用strong标签，不仅加粗显示，还有强调的意义）
、	文字以斜体方式显示（推荐使用em标签）
、	文字以加删除线显示（推荐使用del）
、	文字以加下划线方式显示（不推荐使用u）

	

	
文本格式化标签
	这是用 b 加粗的文字

	这是用 strong 加粗的文字

	这是 s 删除的文字

	这是 del 删除的文字

	这是加了 u 下划线的文字

	这是加了 ins 下划线的文字

	这是 i 标记的斜体字

	这是 em 标记的斜体字

7.标签的属性：

使用HTML制作网页的时候，如果想要html标签提供更多的信息，可以使用HTML标签的属性加以设置，基本的语法格式如下；

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

a、标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；

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

c、任何标签的属性都有默认值，省略该属性不指定时，则该属性取默认值；

d、属性和值之间采取键值对的形式表现；

8.图像标签：（重要），该标签有一个src属性是必须指定的，语法是：

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像无法加载显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素值（XHTML不支持页面%百分比）	设置图像的宽度
height	像素值（XHTML不支持页面%百分比）	设置图像的高度
border	数字	设置图像边框的宽度

width和height属性一般只需要更改一个就可以了，另一个会等比缩小；

9.链接标签：跳转到另一个资源所在处的标签，基本语法：

文本或图像

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

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

注意：

a、外部链接需要加协议类型，如http://www.baidu.com，而内部链接可以直接是文件名称；

b、如果暂时没有具体的链接地址，可以置为空，即值取#；

c、不仅可以添加超链接，而且同一个页面中，也可以添加锚点

10.锚点定位（难点）

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

a、使用链接文本创建链接文本；

b、使用相应的id名标注跳转目标的位置；

c、锚点定位适合内容较长的页面；

可点击跳转处：
生活

跳转目标处：
生活

11.base标签：在网页中，如果有大量的标签，而又要指定在新窗口中打开链接，那就非常冗余，每个标签中都要指定target属性为_blank，非常繁琐，于是可以这样一次指定：

其中target的属性也可以是_self，指定了base标签之后，如果某个单独的链接其target想取另外的值，在其a标签中指定即可；

12.特殊字符标签（理解，需要时查查就可以了）：

特殊字符	描述	代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	加减号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³

13.注释标签：多使用注释标签是一个好的习惯，注释标签所包含的内容是给程序员自己看的，浏览器自己不适用；

Sublime快捷注释：Ctrl+/

14.列表标签：

a、无序列表：（重点）

	
苹果
	
橘子
	
荔枝
	
米饭
	
其他

标签中一般只放

标签，直接在

标签中放其它标签或者文字的做法是不允许的；

标签之间相当于一个容器，可以容纳所有元素和标签；

样式属性一帮交给css处理；

b、有序列表：（了解）特性或注意事项与

基本一致

	
中国
	
美国
	
俄罗斯
	
英国

c、自定义列表：自定义列表常常用于对术语的或名词进行解释和描述，自定义列表的列表项前有没有任何项目符合；

	
北京
	
昌平区
	
海淀区
	
大兴区
	
通州区
	
朝阳区

标签是总括自定义列表的，标志这是一个自定义列表的标签；

定义一个大类，比如一个标题，

解释说明

的类；

一般用在网页尾部：