标签的基础知识

首页 > HTML基础知识 > 标签的基础知识

目录

网页的雏形

大多数的网页都是由以下几部分组成的。

HTML文件

头部信息


正文
┬─
│┌
─┤
│└
│┌
─┤
│└
└─
<html>
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>

HTML文件

<html> 开始,以 </html> 结束,这种记述文本的方法叫做 HTML(Hyper-Text Markup Language)。遵从HTML的书写规则写出来的文件叫做 HTML文件(或是 HTML文档HTML代码)。HTML文件可以用任何文本编辑器书写。

头部信息

包含在 <head>~</head> 里的部分叫做头部信息。头部信息可以用来记述标题等。

标题

我们可以在 <title>~</title> 里记述标题。标题不仅会显示在浏览器的标题栏上,还会显示在“收藏夹”和“历史记录”里,甚至会被显示为搜索引擎的搜索结果。设置一个好标题会有很多好处。

正文

包含在 <body>~</body> 里的部分叫做正文。这个部分的内容会显示在浏览器的窗口内。在这里我们可以用 <b><br><font> 等等对正文进行修饰。

标签

<html> 和 <head> 等被称为 标签,html 和 head 等叫做 标签名 。标签名基本上都是以英语单词(或缩写)来命名的,比如头部信息(header)→ <head>、换行(break)→ <br> 等等。

大多数标签都像 <b>~</b> 一样,包含在 开始标签结束标签 里。在开始标签的标签名前面加上斜杠(/),就变成了结束标签。偶尔也会有像 <br> 这样的 独立标签

标签名用大小写都可以,不过一定要用半角文字。< 的后面一定不能有空格。

○ <html>
○ <HTML>
× <html>  ← 全角文字不能用
× < html>  ← <的后面不能有空格。

标签的嵌套

开始标签~结束标签只能包含或被包含其他的开始标签~结束标签。举例来说,写<s>~</s> 的时候,要像下面这样。

○ <s>~<b>~</b>~</s> ← 全部在外面
○ <b>~<s>~</s>~</b> ← 全部在里面
× <b>~<s>~</b>~</s> ← 不知道谁包含谁,这样写是不行的

属性

像<font color=red> 里的 color=red 这样的东西叫做 属性 。一般来说,属性是以 属性名属性值 的形式来记述的。偶尔也会出现单独只记述一个 属性名 的情况。(正确的说,像 checked=checked 这种是把属性名给省略掉了)

○ <font color=red size=5>~</font>
○ <input type=checkbox checked>

属性名也是随便大小写都可以,但必须是半角文字。属性名前面要有空格,或者tab,或者换行。属性可以指定多个。

○ <font color=red>~</font>
○ <font COLOR=red>~</font>
○ <font color=red size=7>~</font>

属性值基本上是随便大小写的,但是偶尔也会有区别大小写的情况,比如 target="_top" 等等。

○ <font color=red>~</font>
○ <font color=RED>~</font>
× <a href="xx.html" target="_TOP">~</a>

当属性值不是半角英文数字的时候,要像 "..." 或 '...' 这样用单双引号括起来。其实正确地来讲,像减号(-)和小数点(.)等等一些符号是不需要用引号括起来的。但是刚开始学的时候还是记住“属性值除了半角英文数字都要用引号括起来”比较方便。

○ <font size="+2">~</font>
○ <font size='+2'>~</font>
× <font size=+2>~</font>
△ <font size=-2>~</font> ← 减号不用引号括起来也不要紧

在双引号里可以包含单引号,在单引号里也可以包含双引号。

○ <input type=button onclick="alert('XXX')">
○ <input type=button onclick='alert("XXX")'>
× <input type=button onclick="alert("XXX")">

双引号(")也可以用 &quot; 的形式来记述。

○ <input type=button onclick="alert(&quot;XXX&quot;)">