快速上手

Mr.Hope ... 2019-09-01 HTML
大约 8 分钟

本章能让您快速了解 HTML 并学会编写它。

# HTML 简介

HTML 指的是超文本标记语言: HyperText Markup Language

标记语言

HTML 不是一种编程语言,而是一种 标记语言 (markup language)

标记语言是一套 标记标签 (markup tag)

HTML 使用标记标签来描述网页。

HTML 文档包含了 HTML 标签文本内容。

HTML 文档也叫做 Web 页面

# HTML 内容

HTML 中,除了语义,其他什么都没有。

HTML 是一个纯本文文件,用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。

比如,面试的时候问您,<h1 />标签有什么作用?

给文本增加主标题的语义。✔️

给文字加粗、加黑、变大。❌

# HTML 标签

一个标签是:

<标签名称 属性1="值1" 属性2="值2"...>内容</标签名称>
1

A tag is:

<tagname attribution1="value1" attribution2="value2">content</tagname>
1

# 标签详情

<tagname ...> 是开始标签,</tagname> 是结束标签。

开始标签常被称为 起始标签(Opening tag),结束标签常称为 闭合标签(Closing tag)

比如:

<h1>我是内容</h1>
1

起始标签为 <h1> 内容为 我是内容 闭合标签为 </h1>,整个内容加起来被称为一个 元素 (Element)

# 特殊的——自闭合标签

如果标签内部没有内容,可以直接使用一个特殊的写法完成自身的闭合,即为自闭合标签。

格式:

<tagname attribution1="value1" attribution2="value2" />
1

即:

<标签名称 属性1="值1" 属性2="值2"... />
1

常见的普遍使用自闭合标签的有 brhrimg,写作 <br /><hr /><img />

# 标签的嵌套

除了并列放置标签以外,标签的内容也可以放置其他标签,这就构成了标签的嵌套。如:

<p>我的猫咪脾气<strong></strong>:)</p>
1

# HTML 元素语法

  • HTML 元素以 开始标签 起始
  • HTML 元素以 结束标签 终止
  • 元素的内容 是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有 空内容 (empty content)
  • 空元素 在开始标签中进行关闭 (以开始标签的结束使用 / 而结束)
  • 大多数 HTML 元素可拥有属性
<input type="text" />
<!--  属性="值"  -->
1
2
<div style="height:100px" />
<!--这里空的 div 用于占位置,“撑起”一块空间-->
1
2

# HTML 属性

属性包含元素的额外信息,这些信息不会出现在实际的内容中。

一个属性必须包含如下内容:

  1. 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)
  2. 属性名称,后面跟着一个等于号。
  3. 一个属性值,由一对引号 " " 引起来。

比如 <img src="./main.jpg" />namesrcvalue./main.jpg

提示

属性值应该始终被包括在引号内。 双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如: name='John "ShotGun" Nelson'

# 适用于大多数 HTML 元素的属性

属性 描述
class 为 HTML 元素定义一个或多个类名 (classname)
id 定义元素的唯一 id
style 规定元素的行内样式 (inline style)
title 描述了元素的额外信息

# 布尔属性

有时您会看到没有值的属性,它是合法的。这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值。例如 disabled 属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled" />
1

方便起见,我们完全可以将其写成以下形式:

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
1
2

# 后缀名

HTML 文档的后缀名是 .html

新手误区

文件名应该为 xx.html,不应该是 html。 html 是一个没有后缀名称,文件名字叫做 html 的文件。

# 常见标签

# HTML 标题

HTML 标题 (Heading) 是通过 <h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
1
2
3

# HTML 段落

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
1
2

# HTML 链接

HTML 链接是通过标签 <a> 来定义的。

<a href="http://www.runoob.com">这是一个链接</a>
1

提示

href 属性指定链接的地址。

# HTML 图像

HTML 图像是通过标签 <img> 来定义的。

<img src="/images/logo.png" width="258" height="39" />
1

# HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
<hr />
<p>这是一个段落。</p>
1
2
3
4
5

# HTML 注释

如同大部分的编程语言一样,在 HTML 中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的,而且是对用户不可见的,它们的目的是允许您描述您的代码是如何工作的和不同部分的代码做了什么等等。 如果您在半年后重新返回您的代码库,而且不能记起您所做的事情 —— 或者当您处理别人的代码的时候, 那么注释是很有用的.

注释写法如下:

<!-- 这是一个注释 -->
1

提示

开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。

# HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:

<p>这个<br />段落<br />演示了分行的效果</p>
1

<br /> 元素是一个空的 HTML 元素。所以推荐写成自闭合标签的形式。

# HTML 块

在开发中,最常用的就是块标签(<div />)。

<div>这是一个没有任何样式的块</div>
1

# 其他标签

更多 HTML 标签如 <form> <button> 等,请见: MDN 文档

提示

请注意,不要使用弃用的元素,如 <center> <font> 等。

# HTML 结构

一个符合最新标准的 HTML 文件,应该满足如下结构:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>
1
2
3
4
5
6
7
8
9
10

其中:

<!DOCTYPE html> 是在 HTML5 标准下要求的,必须放在每个 HTML 文件的首行。对文档类型的声明。

DOCTYPE 可小写,此处无特殊要求。

每个网页应该在 HTML 里包含一个唯一的 <html> 标签。在 <html> 标签中,应该按照顺序包含 <head><body> 标签。

<head> 标签中,应该包含 <title> 标签注明文档的标题。

提示

<head> 元素是一个容器,它包含了所有您想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括您想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。

<meta charset="UTF-8" /> 元素设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。基本上他能识别您放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。所以建议任何 HTML 文件都包含此标签。

<body> 标签包含了您访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。

# HTML 空白

您可能已经注意到了在代码中包含了很多的空格——这是没有必要的;下面的两个代码片段是等价的:

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗 很 呆 萌。</p>
1
2
3

无论您在 HTML 元素的内容中使用多少空格(包括空白字符,包括换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果您的代码被很好地进行格式化,那么就很容易理解您的代码是怎么回事,反之就只有聚做一团的混乱。在 HTML 代码中,我通常让每一个嵌套的元素以两个空格缩进。

# 特殊字符

在 HTML 中,字符 <, >,",'& 是特殊字符. 它们是 HTML 语法自身的一部分, 那么您如何将这些字符包含进您的文本中呢, 比如说如果您真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?

我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束。

原义字符 等价字符引用
< <
> >
" "
' '
& &