HTML学习篇(一)

HTML学习篇(一)
0

HTML (HyperText Markup Language),即超文本标记语言,它不是一种编程语言,而是一种标记语言。它主要用来标记网页的内容结构,告诉浏览器如何展示网页的内容。

既然说 HTML 是标记语言,那是怎样的一种标记呢?

标签(标记)

%E5%9B%BE%E7%89%87
  可以看到,上图两边的 <p></p> 就是一个 html 标签对,其中<p>是开始标签, </p> 是结束标签,两者中间的 “这是内容” 就是这个 p 元素的内容。

  一个 html 元素,以上面的段落元素 p 为例,它基本需要由:

  1. 开始标签,以 < 开始,以 > 结束
  2. 结束标签,以 </ 开始(注意这里比开始标签多了个斜杠/), > 结束
  3. 内容(需要展示的文字内容)

  上面三者组成。

  html 有两大种类元素,分别是块级元素行内元素。块级元素会在网页中的独占一行(在元素的前后自动换行),而行内元素则会跟其他行内元素同在一行内,除非在这行内已经放不下,那就进入下一行。

  块级元素:标题(h1、h2、h3、h4、h5、h6)、段落(p)、语义块结构(header、nav、main、article、section、div、aside、footer)、表单(form)、表格及列表(table、ul、ol、dl)等等。

  行内元素:超链接(a)、图像(img)、换行(br)、表单组件(label、input、select、textarea)、行内块(span)等等。

嵌套

  从上面可以看出,html 标签是有很多种,而各种标签之间在网页上所呈现的效果各有不同,但也有一些会显示得很相似甚至一样(例如 strong 和 em、b 等),现在如何看到的网页效果复杂且灵活多样,我认为除了是因为标签类别多样化之外(当然还有 css 和 js),还有一个原因是因为标签之间可以嵌套其他标签,这个特性使得网页可以灵活构造内容。

<body><p>这是内容</p></body>

  这段代码可以看出来,p 被包含在 body 里面,即 body 嵌套了一个段落 p,而其实一般的网页是分块的,根据网页开发者的需要,可以设计成不同的块嵌套各自需要的标签元素和内容。

属性

  html属性还有一个重要的特性,那就是“属性”。有了这个属性可以给网页标签的多样化提供了可能,因为我们熟知的 id 和 class 就是一种html属性,这两个属性与 css 和 js 在html中的运用密切相关。

<p id="test" class="test">这个段落包含属性 class 和 id</p>

另外,图像标签 img 就是主要靠 src 属性来指定图片地址,它一般不含内容:

<img src="imgs/icons/pic.jpg" />

一个最简单的网页

下面展示一张最简单的 html 网页:

<!DOCTYPE html>     
<html>
   <head>
      <meta charset="utf-8">
      <title>测试页</title>
   </head>
   <body>
      <p>这是一个段落。</p>
   </body>
</html>

分解这里每一行:

  1. 第一行是文档类型声明,这是目前最简单的一种说明,虽然以前的 html 版本有各种复杂的写法,主要是为了检测文档语法和错误等,不过现在只需要简单的 <!DOCTYPE html> 就行了;
  2. <html> 元素是网页的根元素,它包含了 <head><body> 元素;
  3. <head> 中包含了一些必需但不直接显示在页面上的内容,例如标题、样式表以及脚本代码的路径和页面元数据(页面作者,文档描述)等,上面就包含了元数据 charse t和一个标题;
  4. <body> 显然就是网页的主内容,这里包含了一个段落,还可以有图像,音视频等;

上一篇:HTML与CSS学习前置概要
下一篇:HTML学习篇(二) head标签

1赞

建议中英文之间加一个空格,可以参考翻译排版规范 翻译流程及规范

OK,已经修改