实验1 html基础,1.基本标签-HTML基础

一、HTML结构

一个页面是由 4 个部分组成的：

一个文档声明：

一个html标签对：

一个head标签对：

一个body标签对：

所谓的一个 HTML 页面，其实就是由一对对标签组成的。

1.文档声明

这就是一个文档声明，告诉这是一个HTML文件。

2.HTML标签

HTML标签作用是告诉浏览器，此页面是从开始，然后到 结束。

(1)W3C标准的XHTML

在实际开发中，可能会经常看到这样一行代码：

这段代码的意思是告诉浏览器，当前页面使用的是W3C的 XHTML 标准。此处了解即可，不用深究。一般情况下，我们不需要加上xmlns="http://www.w3.org/1999/xhtml“这一句。

3.head标签

4.body标签

二、head标签

HTML中最特殊的部分，只有一些特殊的标签才可以放在 head 标签内，其它大部分标签都是放在 body 标签内的。

在 HTML 中，一般来说，只有 6 个标签能放在 head 标签内：

title 标签

meta 标签

link 标签

style 标签

script 标签

base 标签

1.title标签

在 HTML 中，title 标签唯一的作用就是定义网页的标题。

title标签.png

在这个页面中，网页标题就是 見贤思齊。

其实，在学习过程中没必要在每个页面中都写上 title 标签；但在实际开发中，要求每个页面的 title 都写上。

2.meta标签

在 HTML 中，meta 标签一般用于定义页面的特殊信息，例如：页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎蜘蛛，如：百度蜘蛛、谷歌蜘蛛。

简单来说，meta 标签就是用来告诉搜索蜘蛛，这个页面是干嘛的。在 web 技术中，我们一般形象地称搜索引擎为 ‘搜索蜘蛛’ 或 ‘搜索机器人’。

在HTML中 meta 标签有两个重要的属性：name 和 http-equiv。

(1)name属性

① name属性取值

属性值

说明

keywords

网页的关键字，可以是多个，而不仅仅是一个。

description

网页的描述。

author

网页的作者。

copyright

版权信息。

以上只是列举了最常用的几个属性值。

在实际开发中，一般只会用到 keywords 和 description。(也就是记住这两个就可以了，其它的暂时不用管)

Ⅰ.例

meta标签name属性.png

(2)http-equiv属性

在 HTML 中，meta 标签的 http-equiv 属性只有两个重要作用：定义网页所使用的编码、定义网页自动刷新跳转。

① 定义网页所使用的编码

以上代码，告诉浏览器该页面所使用的编码是 utf-8 。

Ⅰ.简写形式

不过在 HTML5 标准中，上述代码可简写为：

若发现页面打开后是乱码，极有可能就是没有加上上述代码。

在实际开发中，为了确保不出现乱码，必须要在每一个页面中加上这句代码，且必须放在 title 标签以及其它 meta 标签前面。

② 定义网页自动刷新跳转

当前页面在 3 秒后会自动跳转到 http://www.baidu.com 这个页面。

meta标签http-equiv属性-自动刷新跳转.png

3.style标签

在 HTML 中，style 标签用于定义元素的CSS样式。

① 语法

style标签.png

4.script标签

在 HTML 中，script 标签用于定义页面的 JavaScript 代码，也可以引入外部 JavaScript文件。

① 语法

script标签.png

5.link标签

在 HTML 中，link 标签用于引入外部样式文件(CSS文件)。

① 语法

link标签.png

6.base标签

此标签一点意义都没有，可以直接忽略。看到直接忽略处理。

三、body标签

在 HTML 中，head 标签表示页面的” 头部 “，而 body 标签表示页面的” 身体 “。

之后学习的所有标签都是位于body标签内部，也就是说，日后的大部分代码都是在这个标签内部编写。

① 例

body标签.png

是为了防止页面出现乱码，以后在每一个HTML页面中我们都要为其添加上。

此外，这一句必须放在 title 标签以及其它 meta 标签前面，这一点一定要记住。

h3标签是一个 第3级标题标签，一般用于显示 “标题内容” 。

四、HTML注释

在实际开发中，我们需要在一些关键的 HTML 代码旁边标明这段代码的含义，这时就需要用到 HTML注释了。

在 HTML 中，对一些关键代码进行注释，好处有非常多，比如：方便理解、方便查找，以及方便同一个项目组的小伙伴快速理解你的代码，以便于快速修改。

1.语法

``

又叫注释标签，“ “ 表示注释的结束。

(1)例

注释标签.png

2.注释内容不会显示

用 注释的内容不会显示在浏览器中。

在 HTML 中，浏览器遇到 “HTML标签” 就会进行解释，然后显示 “HTML标签” 中的内容；而当浏览器遇到 “HTML标签” 就会自动跳过，因此不会显示注释标签中的内容。

也可理解成， “HTML标签” 是给浏览器看，而 注释标签 是给我们看的。

3.对关键代码注释

对关键代码注释是一个非常好的习惯。

在实际开发中，对功能模块代码进行注释尤为重要。

这是因为，在日后工作时，一个页面的代码往往成百上千行，若不对关键代码进行注释，当返回来看自己写的代码，有可能连自己都读不懂自己写的代码。特别是在团队开发中，不注释的后果是当其它小伙伴来维护你的代码时，需要花大量的时间来理解，这样就是在坑别人。

还有一点就是，并不需要对每一行代码都进行注释，只有最重要、最关键的代码才去注释。

五、例题

1.下面哪一个标签不能放在 head 标签内？

A.title标签

B.style标签

C.body标签

D.script标签

E.link标签

F.script标签

G.meta标签

​

​

2.属于 HTML 正确的注释方式是()

A.//注释内容//

B.//注释内容

C.

D./*注释内容*/

​

​

3.若网页出现乱码，一般使用()来解决。

A.

B.

C.

D.

1.选 C

只有 6 个标签能放进 head 标签内

- title 标签

- meta 标签

- link 标签

- style 标签

- script 标签

- base 标签

​

2.选 C

略

​

3.选 A

也可以是 ，

但在 HTML5 中可简写为: