路遥的小书屋

深色模式

HTML 文档结构 ​

HTML 教程 学习笔记

HTML 标记语言 ​

HTML 文档的基本结构：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>网页标题</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

HTML 基本概念 ​

标签 ​

  1. 网页的 HTML 代码由许许多多不同的标签（tag）构成。
  2. 有些标签没有结束标签。
  3. 标签嵌套，要注意嵌套结构顺序。
  4. 标签名不区分大小写，但是一般使用小写。
  5. 标签外的换行和缩进，会被忽略。HTML文档可以压缩成一行。

元素 ​

  1. 浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的p元素。

块级元素与行内元素 ​

  1. 块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
  2. 行内元素默认与其他元素在同一行，不产生换行。

标签的属性 ​

  1. 属性（attribute）是标签的额外信息。
  2. 属性名不区分大小写。
  3. 属性值可以不加双引号，但是一般总是加双引号。

HTML 基本标签 ​

<!doctype> ​

网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。

html
<!doctype html>

or

html
<!DOCTYPE html>

<html> ​

<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

  1. <head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。
  2. <head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。

<head>的子元素一般有下面七个：

  1. <meta>：设置网页的元数据。
  2. <link>：连接外部样式表。
  3. <title>：设置网页标题。
  4. <style>：放置内嵌的样式表。
  5. <script>：引入脚本。
  6. <noscript>：浏览器不支持脚本时，所要显示的内容。
  7. <base>：设置网页内部相对 URL 的计算基准。

<meta> ​

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。

charset 属性 ​

<meta>标签的charset属性，用来指定网页的编码方式。

html
<meta charset="utf-8">

name 属性，content 属性 ​

<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。

html
<head>
  <meta name="description" content="HTML 语言入门">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>

http-equiv 属性，content 属性 ​

<meta>标签的http-equiv属性用来补充 HTTP 回应的头信息字段，如果服务器发回的 HTTP 回应缺少某个字段，就可以用它补充。

<meta>标签的content属性是对应的字段内容。

<title> ​

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

html
<head>
  <title>网页标题</title>
</head>

<body> ​

<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。

html
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

空格与换行 ​

  1. 标签外的空格与换行全都忽略。
  2. 标签内容，首部与尾部的空格，全都忽略。
  3. 标签内容，里面的相邻的空格、\t、\n、\r会合并成一个空格。

注释 ​

注释以<!--开头，以-->结尾。

html
<!-- 这是一个注释 -->
html
<!--
  <p>hello world</p>
-->