第一章 HTML的基础知识 – 电脑工程师入门

HTML（Html，超文本标记语言）是一种为创建网页而开发的语言。目前，大多数在 Internet 上发布的网页都是用 HTML 创建的。

HyperText Markup Language如果用日语表示的话，意思是“标记超文本的语言”。超文本是一种功能强大的文本，可以嵌入超链接。超链接是当您单击网页上带下划线的文本时将您带到另一个页面的链接。

使用超文本，可以从一个网页链接到另一个网页，并在带有链接的网页中嵌入图像、视频、声音等数据文件。HTML 具有通过超链接功能链接相关信息来组织信息的特性。

1-1文件类型
 1-2HTML
1-3标头
 1-4标题
 1-5文本
 1-6标签
 1-7标记包含
 1-8属性

HTML 文档的基本结构如下所示。

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    文本
  </body>
</html>

1-1文件类型

在 HTML 文档的第一行写入文档类型<!DOCTYPE ~> 。<!DOCTYPE html>表示该文档是按照HTML5格式编写的。

1-2HTML

这种以<html>开头，以 </html> 结尾的写法称为HTML （Hyper-Text Markup Language）。

1-3标头

从<head>到</head>的部分称为表头部分。在标题中输入标题和其他信息。

1-4标题

用<title>～</title>写标题。标题不仅显示在浏览器的标题栏中，还显示在“收藏夹”、“历史记录”和搜索引擎结果中。

1-5文本

从<body>到 </body>的部分是body。这部分显示在浏览器的显示区域。

1-6标签

<html>和<head>被称为标签，html和head被称为标签名。标签名称以英文拼写为主，如header → <head>、break → 。
标签都被开始和结束标签包围，如 <body>～</body> 。结束标记是开始标记的名称后跟斜杠 (/)。有时，有些没有结束标记，例如 。在 XHTML 中，没有结束标记的东西写成 ，但在 HTML 中它写成 。

标签名称可以是大写也可以是小写，但一定要写成半角字符。以前用大写字母写，最近改用小写字母写。< 后不应有空格。

○ <html>
○ <HTML>
× ＜ｈｔｍｌ＞　　← 不允许使用双字节字符
× < html>　　    ← 不要在 < 之后加空格

1-7标记包含

开始标签和结束标签必须完全在其他开始标签和结束标签之外或完全在其他开始标签和结束标签之内。例如，如果将 ~ 的标签处加入 <s>~</s>，它将如下所示。

○ <s>～<b>～</b>～</s> ← OK因为完全在外面
○ <b>～<s>～</s>～</b> ← OK完全在里面
× <b>～<s>～</b>～</s> ← NG因为包含关系被破坏

1-8属性

有些具有<ul type=disc> 中的 type=disc之类的属性。属性通常以属性名=属性值的形式书写。有时您只需要指定属性名称。（其实好像省略了checked=checked这个属性名。。。）

○ <ul type=disc>～</ul>
○ <input type="checkbox" checked>

属性名可以是大写也可以是小写，但一定要使用半角字符。属性名称前面必须至少有一个空格、制表符或换行符。也可以指定多个属性。

○ <input type="text">
○ <input TYPE="text">
○ <input type="text" size=7>

属性值通常不区分大小写，但在极少数情况下（如 target=”_top”）是区分大小写的。

○ <input type="text">
○ <input type="TEXT">
× <a href="xx.html" target="_TOP">～</a>

如果属性含有空白文字，引号小括号(')，双引号(")，或等号 (=)、反引号 (\)、引号 (<)等特殊符号，最好记住属性的前后要用单引号或者双引号标注。

○ <input value=abc> ← OK因为它不包含特定符号
× <input value=hello, world> ← NG因为它包含空白字符
○ <input value="hello, world"> ← OK因为它被 "..."  包围了
× <input value=o'clock> ← NG 因为它包含了一个特定的符号
○ <input value="o'clock"> ← OK因为它被"..."包围了

双引号 ( ") 内可以使用单引号 ( ') ，单引号 ( ) 内可以使用'双引号 ( ) 。")を用いることができます。

○ <input type="button" onclick="alert('XXX')">
○ <input type="button" onclick='alert("XXX")'>
× <input type="button" onclick="alert("XXX")"> ← NG 因为"..."不能包含 "..."

要在双引号(" ) 内使用双引号 ( ") 并在单引号 ( ') 内使用单引号 (' )，请将双引号 (" ) 替换为 “[ " ]または[ " ] 并将单引号 ( ) 替换为 [']

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

○ ○