#仅此纪念自己的爬坑之路,有任何的不足之主,我也没办法.大佬的指南引发的一场学习,然后通过指南找到了mozilla的相关文档,一下内容,是自己对文档的概括和自己补漏.
HTML
HTML是啥背景呢?这个略,因为这个专业性的说明很多.
超文本标记语言(Hypertext Markup Language, 大白话:HTML),用于定义内容结构的标记语言,非一门编程语言.
HTML由一系列的元素(elements)组成,可以是一段文字或者一张图片添加超链接,或者将文字设置为斜号啊,或者将一行文字封装成一个段落(paragraph)啊,巴拉巴拉等等.
HTML元素详解
元素结构一个一个拆开来:
1.开始标签(Opening tag):
包含元素的名称(上图就是’p’),被大小于2号包围.表示元素从这里开始或者开始起作用—上图中即段落由此开始.
2.结束标签(Closing tag): 与开始标签相似,并成对出没,只是其在元素名前包含一个斜杠.表示元素结束.—上图中即段落结束.千万不要忘了这玩意,不然就是报错
3.内容(Content): 元素的内容—上图中就是输入的文本本身.
4.元素(Element): 包含上面三个结构的合理组合,就是一个完整的元素了.
元素也是可以有属性(Attribute):
属性包含了关于元素的一些额外信息,这些信息本身不应该显示在内容中.
上图中,class是属性名,editor-note是属性值.
class属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用.
属性应该包含:
- 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符.
- 属性的名称,并接上一个等号.
- 由引号所包围的属性.
- 不包含ASCII空格(以及**" ’ ` = < >** )的简单属性值可以不使用引号,但是建议将有属性值用引号括起来,这样代码一致性更佳,更易于阅读.
嵌套元素
顾名思义—将一个元素置于其他元素之中.
元素必须以开始的顺序进行倒序结束才可以.
空元素
又顾名思义—不包含任何内容的元素称为空元素.
栗子<img>
元素
并没有</img>
结束标签,元素里也没有内容.
HTML文档详解
引用文档原文里的"孤木不成",以上只是一些基本元素.
每个元素需要彼此协调才能构成一个完整的HMTL页面.
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="测试图片">
</body>
</html>
!DOCTYPE html>
—文档类型.“混沌初开,乾坤始奠”,HTML嗷嗷待哺的年纪,DOCTYPE
用来链接一些HTML编写守则,比如自动查错之类的.如今DOCTYPE
在当今作用相当有限,仅用来保证文档正常读取,仅仅知道这些就够了.<html></html>
—<html>
元素.该元素包含整个页面的内容,也称为根元素.<head></head>
—<head>
元素.该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)\页面描述\CSS样式表和字符编码声明balbal之类.<meta charset="utf-9">
—该元素包含在<head>
中,指定文档使用UTF-8字符编码,因为它包含绝大数人类已知语言的字符.<title></title>
—<title>
元素.该元素设置页面的标签,显示在浏览器标签页上,也作为收藏页面的描述文字.<bady></bady>
—<body>
元素.该元素包含期望让用户在访问页面时看到的内容,对,就是那些你想看到的内容.
图像
温<img>
元素而之新:
<img src="images/firefox-icon.png" alt="测试图片">
该元素在属性src
添加图像文件路径,实现嵌套图像
该元素有一个替换文字属性alt
,图像的描述内容,图像无法正常显示时候显示.
alt
属性的关键字即"描述文本".alt
文本向用户完整传递图像要表达的意思.
标记文本
标题(Heading)
标题元素可用于指定内容的标题和子标题.
HTML包含六个级别的标题,<h1>
–<h6>
,一般最多用到3-4级标题.
不要使用标题元素来加大\加粗字体\因为标题对于无障碍访问和搜索引擎优化等问题非常有意义.要保持页面结构清晰,标题整洁,不要发生标题级别跳跃.
段落(Paragraph)
<p>
元素用来指定段落.通常用于指定常规的文本内容:
列表(List)
标记列表通常包括至少两个元素.
最常用的列表类型:
- **无序列表(Unordered List)**中项目的顺序并不重要,就像购物列表.用
<ul>
元素包围. - **有序列表(Ordered List)**中项目的顺序很重要,就像烹饪指南.用
<ol>
元素包围.
列表的每个项目用一个列表项目(List ltem)元素<li>
包围.
就可以像下面这样
<p>Mozilla 是一个全球社区,这里聚集着来自五湖四海的</p>
<ul>
<li>技术人员</li>
<li>思考者</li>
<li>建造者</li>
</ul>
<p>我们致力于……</p>
链接
赋予了Web网络属性.
只需要一个简单的元素<a>
—"anchor"锚
如下面这个栗子
<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>
tip:
herf—代表超文本引用(hypertext reference)
总结
如果上述知识点全部运用起来,大概有这么一个效果(图片貌似违规了emmmm只能大家自己贴到本地看看了),再下面是参考代码.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<h1>Mozilla 酷毙了!</h1>
<img src="images/firefox-icon.png" alt="Firefox 标志:一只盘旋在地球上的火狐">
<p>Mozilla 是一个全球社区,这里聚集着来自五湖四海的</p>
<ul>
<li>技术人员</li>
<li>思考者</li>
<li>建造者</li>
</ul>
<p>我们致力于让 Internet 保持活力,保持畅通,人人皆可贡献,人人皆可创造。我们坚信:开放平台的协作对于人的发展至关重要,也决定着我们共同的未来。</p>
<p>为了达成我们共同的理想,我们遵循一系列的价值观和理念,请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla </a>。</p>
</body>
</html>
原文引用
HTML部分源地址