前言
本次只是整理记录 MDN 网站上最前面的基础入门的三大件基础,后续会分别专门深入探究。
HTML基础
1. HTML 是什么
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言,可以用来定义内容结构。
HTML由一系列元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或工作。
1)元素(Element)
一个典型的元素包括一个具有一些属性的开始标签,中间的文本内容和一个结束标签
属性是 HTML 元素提供的附加信息
这个元素的主要部分有:
- 开始标签(Opening tag):包含元素的名称,被大于号、小于号所包围。表示元素从这里开始或开始起作用
- 结束标签(Closing tag):与开始标签类似,只是在元素名之前多一个斜杠 ‘/’ 。表示元素的结尾
- 内容(Content):元素的内容,本例中就是所输入的文本
- 元素(Element):开始标签+结束标签+内容=元素
2)属性(Attribute)
元素也可以有属性,包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。
本例中,class 是属性名称,editor-note 是属性的值。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。
属性应该包括:
- 在属性与元素名称(如果有超过一个属性的话,就是上一个属性)之间应有空格
- 属性的名称,以及后面的‘=’
- 由引号所包围的属性值
双引号是最常用的,不过使用单引号也没有问题。
但在某些个别的情况下,比如属性值本身就含有双引号,那么必须使用单引号
例如:name=‘John “ShotGun” Nelson’
3)嵌套元素
将一个元素置于其他元素之中称作嵌套。
例如:下面中的 very 会被突出显示
<p>My cat is <strong>very</strong> grumpy.</p>
需要注意元素嵌套次序正确,也就是多个标签的开始与结束不能产生交叉。
4)空元素
不包含任何内容的元素称为空元素。
例如<img>元素
<img src="images/firefox-icon.png" alt="My test image" />
本元素包含两个属性,但是并没有</img>
结束标签,元素里也没有内容。
这是因为图像元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图像
5)HTML 文档详解
上面介绍了一些基本的 HTML 元素,下面看一下单个元素彼此协同后构成的完整 HTML 页面。
以下面为例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
这里包含:
<!DOCTYPE HTML>
:文档类型。现在作用有限,仅用于保证文档的正常读取<html></html>
:<html>
元素。该元素包含整个页面的内容,也称作根元素<head></head>
:<head>
元素。该元素内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS样式表和字符编码声明等<meta charset="utf-8">
:指定文档使用 UTF-8 字符编码。UTF-8 包含了绝大多数人类已知语言的字符,基本上可以处理任何文本内容和避免后续出现问题。<title></title>
:<title>
元素。该元素设置页面的标题,现实在浏览器标签页上,也作为收藏网页的描述文字<body></body>
:<body>
元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容
2. 图像
一个<img>
元素类似如下
<img src="images/firefox-icon.png" alt="My test image" />
- src:包含图像文件路径的地址属性
- alt:图像的描述内容,用于当图像不能被用户看见时显示。alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思
图像不可见的原因可能有:
- 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容
- 有些错误使图像无法显示
3. 标记文本
本部分包含一些最常用的文本标记 HTML 元素
1)标题(Heading)
用于指定内容的标题和子标题。
包含6个级别,从 h1 到 h6,一般最多用到3-4级
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
需要注意:不要使用标题元素来加大、加粗字体,因为标题对于 无障碍访问 和 搜索引擎优化 等问题非常有意义
2)段落(Paragraph)
用于指定段落。通常用于指定常规的文本内容
<p>这是一个段落</p>
3)列表(List)
web上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素
最常用的列表类型为:
- 无序列表(Unordered list):顺序不重要,比如购物清单。使用
<ul>
和</ul>
包围 - 有序列表(Ordered list):顺序很重要,比如烹调指南。使用
<ol>
和</ol>
包围
列表的每个项目用一个 列表项目(List Item)元素<li>
和</li>
包围
e.g
<p>At Mozilla, we're a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together… </p>
效果如下:
At Mozilla, we're a global community of
- technologists
- thinkers
- builders
working together…
4)链接
链接赋予了 Web 网络属性。
需要使用两个元素,a(anchor锚)和 href (hypertext reference超文本引用)
a 元素包围显示文本
href 属性设置所需网址
例如
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>
总结
本次只是基本入门,后续会更详细探究。