文章目录
什么是 HTML?
HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单,一切取决于开发者。它由一系列的**元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签(tags)**可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。
剖析一个 HTML 元素
这个元素的主要部分有:
- 开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
- 内容(Content):元素的内容,本例中就是所输入的文本本身。
- 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
1.嵌套元素
把元素放到其它元素之中——这被称作嵌套。
我的猫咪脾气爆:)
2.块级元素和内联元素
重要元素类别,块级元素和内联元素。
块级元素在页面中以块的形式展现,
<p>11111111111111111111111111</p><p>2222222222222222222222222222222222222222222222222222222222222222222</p><p>3333333333333333333333333333333333</p>
运行如下:
11111111111111111111111111
2222222222222222222222222222222222222222222222222222222222222222222
3333333333333333333333333333333333
是一个块级元素,所以第二行代码中的每个元素分别都另起了新的一行展现,并且每个段落间都有一些间隔
内联元素通常出现在块级元素中并环绕文档内容的一小部分,内联元素不会导致文本换行。
<em>第一</em><em>第二</em><em>第三</em>
运行如下:
第一第二第三
3.空元素
不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素是用来在元素所在位置插入一张指定的图片。例子如下:
<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">
显示如下:
4.属性
元素也可以拥有属性
在上述例子中,这个class属性给元素赋了一个识别的名字(id),这个名字此后可以被用来识别此元素的样式信息和其他信息。
一个属性必须包含如下内容:
- 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
- 属性名称,后面跟着一个等于号。
- 一个属性值,由一对引号“ ”引起来。
5.布尔属性
有时你会看到没有值的属性,它是合法的。这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值。例如disabled 属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。
<input type="text" disabled="disabled">
我们完全可以将其写成以下形式:
<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>
<!-- 下面这个输入框没有disabled属性,所以用户可以向其中输入 -->
<input type="text">
6.省略包围属性值的引号
其中就有不给属性值添加引号。在某些情况下它是被允许的,但是其他情况下会破坏你的标记。
例如,我们可以写一个只拥有一个href属性的链接,如下:
<a href=https://www.mozilla.org/>收藏页面</a>
然而,当我们再添加一个title属性时就会出错,如下:
<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>
此时浏览器会误解你的标记,它会把title(The Mozilla homepage)属性理解为三个属性——title的属性值为"The“,和两个布尔属性“Mozilla
”和“homepage
”。看下面的例子,它明显不是我们所期望的,并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上,看会显示 (The) 属性值,这个就不对了,怎么改请看下面。
添加引号
<a href=https://www.mozilla.org/ title="The Mozilla homepage">收藏页面</a>
这样可以避免很多问题,并且使代码更易读。
<a href="http://www.example.com" title="你觉得'好玩吗'?">示例站点链接</a>
7.单引号或者双引号?
在目前为止,本章内容所有的属性都是由双引号来包裹。也许在一些HTML中,你以前也见过单引号。这只是风格的问题,你可以从中选择一个你喜欢的。以下两种情况都可以:
<a href="http://www.example.com">示例站点链接</a>
<a href='http://www.example.com'>示例站点链接</a>
但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的:
<a href="http://www.example.com'>示例站点链接</a>
<a href="http://www.example.com’>示例站点链接 这个是错误的
在一个HTML中已使用一种引号,你可以在此引号中嵌套另外一种引号:
<a href="http://www.example.com" title="你觉得'好玩吗'?">示例站点链接</a>
如果你想将引号当作文本显示在html中,你就必须使用实体引用。
8.剖析HTML文档
学习了一些HTML元素的基础知识,这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来,从而形成一个完整的HTML页面的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
分析如下:
-
<!DOCTYPE html>
: 声明文档类型. 很久以前,早期的HTML(大约1991年2月),文档类型声明类似于链接,规定了HTML页面必须遵从的良好规则,能自动检测错误和其他有用的东西。使用如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
然而这种写法已经过时了,这些内容已成为历史。只需要知道
<!DOCTYPE html>
是最短有效的文档声明。
-
<html></html>
:<html>
元素。这个元素包裹了整个完整的页面,是一个根元素。 -
<head></head>
:<head>
元素。这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。以后的章节能学到更多关于元素的内容。 -
<meta charset="utf-8">
: 这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。 -
<title></title>
: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。 -
<body></body>
:<body>
元素。 包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
9.HTML中的空白
在上面的例子中,你可能已经注意到了在代码中包含了很多的空格——这是没有必要的;下面的两个代码片段是等价的:
<p>狗 狗 很 呆 萌。</p>
<p>狗 狗 很
呆 萌。</p>
无论你在HTML元素的内容中使用多少空格(包括空白字符,包括换行),当渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
那么为什么我们会在HTML元素的嵌套中使用那么多的空白呢?
答案就是为了可读性 —— 如果你的代码被很好地进行格式化,那么就很容易理解你的代码是怎么回事,反之就只有聚做一团的混乱.。在我们的HTML代码中,我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格),但是你应该坚持使用某种风格。
10.实体引用: 在HTML中包含特殊字符
在HTML中,字符 <
, >
,"
,'
和 &
是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
原义字符 | 等价字符引用 |
---|---|
< | < |
> | > |
" | " |
’ | ' |
& | & |
在下面的例子中你可以看到两个段落,它们在谈论web技术:
<p>HTML 中用 <p> 来定义段落元素。</p>
<p>HTML 中用 <p> 来定义段落元素</p>
HTML 中用
来定义段落元素。
HTML 中用 <p> 来定义段落元素
实时输出中,你会看到第一段是错误的,因为浏览器会认为第二个
是开始一个新的段落! 第二段是正确的,因为我们用字符引用来代替了角括号('<‘和’>'符号)。
11.HTML注释
TML中的内容置为注释,你需要将其用特殊的记号 包括起来, 比如:
<p>我在注释外!</p>
<!-- <p>我在注释内!</p> -->