大白话前端基础--关于HMTL部分

最新推荐文章于 2024-05-28 17:33:16 发布

Pit Bull Terrier

最新推荐文章于 2024-05-28 17:33:16 发布

阅读量103

点赞数

分类专栏：新手坑文章标签： html

本文链接：https://blog.csdn.net/weixin_45318126/article/details/117602268

版权

新手坑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

#仅此纪念自己的爬坑之路,有任何的不足之主,我也没办法.大佬的指南引发的一场学习,然后通过指南找到了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部分源地址

Pit Bull Terrier

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大白话前端基础--关于HMTL部分

HTMLHTML是啥背景呢?这个略,因为这个专业性的说明很多.超文本标记语言(Hypertext Markup Language, 大白话:HTML),用于定义内容结构的标记语言,非一门编程语言.HTML由一系列的元素(elements)组成,可以是一段文字或者一张图片添加超链接,或者将文字设置为斜号啊,或者将一行文字封装成一个段落(paragraph)啊,巴拉巴拉等等.HTML元素详解元素结构一个一个拆开来:1.开始标签(Opening tag):包含元素的名称(上图就是’p’),被大小于
复制链接

扫一扫