正心全栈编程-文档站

Appearance

基本标签 ​

HTML 骨架 ​

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language) 是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

所谓超文本，有 2 层含义：

  1. 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
  2. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析，就可以显示给用户了。

HTML 有自己的语言语法骨架格式：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body></body>
</html>

html 骨架标签总结

标签名定义说明
<!DOCTYPE html>文档声明是一个文档声明，表示这是一个 HTML 页面。
<html></html>HTML 标签HTML 标签的作用，是在告诉浏览器，这个页面是从开始，然后到结束的。
<head></head>文档的头部是网页的“头部”，用于定义一些特殊的内容，如页面标题、外部文件等。
<titile></title>文档的标题让页面拥有一个属于自己的网页标题
<body></body>文档的主体是网页的“身体”。对于一个网页来说，大部分代码都是在这个标签对内部编写的。

文档类型 <!DOCTYPE> ​

用法：

html
<!doctype html>

作用：

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 规范。

注释标签 ​

在 HTML 中还有一种特殊的标签——注释标签。如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

简单解释：

注释内容不会显示在浏览器窗口中，但是作为 HTML 文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

语法格式：

html
<!-- 注释语句 -->

页面语言 lang ​

html
<html lang="zh-CN"></html>

最常见的 2 个：

  1. en 定义语言为英语
  2. zh-CN 定义语言为中文

<html lang="zh-CN"> 指定该 html 标签内容所用的语言为中文

字符集 ​

html
<meta charset="utf-8" />

计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312。 这句代码非常关键，是必须要写的代码，否则可能引起乱码的情况。

head 标签 ​

在 HTML 页面的基本结构，head 标签是比较特殊的。事实上，只有一些特殊的标签才能放在 head 标签内，其他大部分标签都是放在 body 标签内的。

在 HTML 中，一般来说，只有 6 个标签能放在 head 标签内。

  1. title 标签
  2. meta 标签
  3. link 标签
  4. style 标签
  5. script 标签
  6. base 标签

title 标签 ​

在 HTML 中，title 标签唯一的作用就是定义网页的标题。

举例：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>正心全栈编程 - 网站开发前端基础课</title>
  </head>
  <body></body>
</html>

运行之后，浏览器页面就会显示标题。

在这个页面中，网页标题就是“正心全栈编程 - 网站开发前端基础课”。在学习的过程中，为了方便，我们没必要在每一个页面都写上 title。不过在实际开发中，是要求在每一个页面都写上的 title 的。

meta 标签 ​

在 HTML 中，meta 标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛看的。简单来说，meta 标签就是用来告诉搜索引擎这个页面是干嘛的。可以用来做 SEO 优化，让互联网上更多的人可以看到。

在 HTML 中，meta 标签有两个重要的属性：name 和 http-equiv。

1. name 属性

我们先来看一个简单实例，代码如下。

HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--网页关键字-->
    <meta name="keywords" content="正心全栈编程,前端开发,后端开发"/>
    <!--网页描述-->
    <meta name="description" content="正心全栈编程是一个学习编程的网站"/>
    <!--本页作者-->
    <meta name="author" content="zhengxinonly"/>
    <!--版权声明-->
    <meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
    <title>正心全栈编程</title>
</head>
<body>
</body>
</html>

从上面这个简单例子，我们来总结一下 meta 标签的 name 属性的几个取值，如下表所示。

属性值说明
keywords网页的关键字，可以是多个，而不仅仅是一个
description网页的描述
authorauthor
copyright版权信息

上表只是列举了最常用的几个属性值。在实际开发中，我们一般只会用到 keywords 和 description。也就是说记住这两个就可以了，其他的都不用管。

style 标签 ​

在 HTML 中，style 标签用于定义元素的 CSS 样式，在 HTML 中不需要深入研究，在 CSS 中我们再详细介绍。

语法：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>正心全栈编程</title>
    <style>
      /*这里写 CSS 样式*/
    </style>
  </head>
  <body></body>
</html>

script 标签 ​

在 HTML 中，script 标签用于定义页面的 JavaScript 代码，也可以引入外部 JavaScript 文件。

语法：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>正心全栈编程</title>
    <script>
      /*这里写 JavaScript 代码*/
    </script>
  </head>
  <body></body>
</html>

在 HTML 中，link 标签用于引入外部样式文件（CSS 文件）。这也是属于 CSS 部分的内容，这里不需要深究。

语法：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <title>正心全栈编程</title>
    <link type="text/css" rel="stylesheet" href="css/index.css" />
  </head>
  <body></body>
</html>

base 标签 ​

这个标签一点意义都没有，可以直接忽略，知道有这么一个标签就行了。

body 标签 ​

在 HTML 中，head 标签表示页面的“头部”，而 body 标签表示页面的“身体”。所有标签都是位于 body 标签内部的。

之前我们接触过了 body 标签，下面再来看一个简单例子。

举例：

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>正心全栈编程 - body 标签</title>
  </head>
  <body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
  </body>
</html>

浏览器预览效果如下图所示：

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。