HTML基础（二）：网页标题与注释

小咪咪 2023-07-24 08:06 4阅读 0赞

昨天的教程讲的是基础结构元素，复习一下，即`<html>`标签、`<head>`标签、`<body>`标签。用法没记住的话，你还是回去在多看几遍教程吧。  
介绍了基础结构，但是那并不是基本的框架，想要成为基本框架，还需要加上下面这个标签，title标签。

# `<title>` 标签 #

这个标签是干什么的呢？用浏览器打开一个网页时，浏览器都会有一个专门的栏来方便你进行对各个以打开网页的切换和操作，这个栏叫做标题栏亦或者状态栏，这个标签的作用便是定义每个网页在这里显示的内容。  
![在这里插入图片描述][20200409224910643.png]

特别说明的是，这个标签是一对的，而且仅存在一个，必须放在`<head>`标签内部。`<title>` 标签是 `<head>` 标签中**唯一要求包含**的东西。  
作为一个网页的标题，其内容最好要能体现这个网页的具体内容或作用，当然，你要想乱填我也没意见。  
具体使用参照：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]  
至此，一个网页最基本的框架搭好了，当然里面还有一些不必要的文字内容，但是这几个标签的位置是固定的，而且是必不可少的。让我们看看这个框架的实际展示效果，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 1]  
emmm…网页的实际内容的确是有了，但是我们一开始仅仅是为了区分注明它们所在的位置是网页的什么部位不是嘛？这种注明用途的语句展示出来干什么，能不能把它们在网页上不显示但是又能让我们在编辑源码时看到呢？必须能啊，这就要提到HTML的注释标签了。

# `` 标签 #

长的有点怪不是嘛，但是用处非常广，格外好用。这个和编程的注释一样，能有效的提高工作人员对源码的阅读效率，方便修改和维护。不同与编程中多行注释和单行注释区别使用，HTML中注释仅有这一个标签，但是它一个就能完成多种注释效果。  
例如这是一个单行注释：

而这是一个多行注释：

来，让我们把注释便签加入网页中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 2]  
然后你就会发现加上这个标签后其中的内容自动变成灰色了，再看浏览器（保存修改后打开文件），你就会发现，嗯？字莫得了？！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 3]  
这样就达成了我们最初的想法，仅能在编译时看到但不在浏览器上显示。  
注释标签的实用性很高，在长时间对代码的编辑时，或当你编写了大量代码时尤其有用。同时，使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。至于浏览器的支持情况嘛，这就涉及到网页的兼容性了。

# 网页的兼容性 #

HTML经过多年来的发展，由最初的HTML已经发展到了HTML5时代，当HTML5仍在发展中，而过去的浏览器会对新演化出的内容出现不支持的现象，也就是我们所说的页面不兼容。因此我们在编辑一个网页时常常要用打开浏览器打开查看具体的效果，看是否符合自己的要求的同时，也在检查是否能够正常浏览，一般的，会使用谷歌浏览器、火狐浏览器和IE浏览器去检验，对于IE浏览器，这个版本贼多，bug奇多的浏览器，推荐使用IE Tester这个工具去检验，谁也不愿意自己电脑里装一堆IE吧，这一个就够了，它能模拟多个主要版本的IE浏览器，强烈安利。

--------------------

emmm…写困了，刚好也差不多了，明天继续。  
同为小白，若有缺漏，敬请指出。  
转载请注明出处。

[20200409224910643.png]: /images/20230528/3855f5cfa39947bf8a84c92d9bf0a668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]: /images/20230528/9c74ddf7de724eec8b4aab5d769c2ed5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 1]: /images/20230528/e29810aee9204de1a21c771765aa36f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 2]: /images/20230528/85c39954bc04431693295cfa2d3ea968.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 3]: /images/20230528/ac801c4666894314a01bbd935eda5852.png