HTML基本语法及使用

HTML简介

HTML全程为Hyper Text Markup Language，翻译过来是超文本标记语言。所谓的超文本，包含了普通文本、图片、标题、表格、链接等。HTML是前端中最常使用的三个语言之一，一般由其组成网页的骨干。

HTML示例

下面有一段简单的HTML代码。

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

将这一段代码保存为 .html 文件，并用浏览器打开，会得到以下的页面。
example

HTML语法

简单来说，HTML语言是由一对对的标签组成的。在上面的例子中，我们有 <html> 和 </html> 这一对标签，其中间的内容是 HTML 文件的主要内容；<h1> 和 </h1> 两个标签表明他们中间的内容为一级标题，等等。当然，我们也发现了有像 <meta> 这样的单标签，没有响应的另一标签和其对应。

下面，根据 HTML 标签中的不同种类对其进行介绍。

标题

标题等级 标签 效果
一级标题 <h1>xxx<\h1>

一级标题
二级标题 <h2>xxx<\h2>

二级标题
三级标题 <h3>xxx<\h3>

三级标题
四级标题 <h4>xxx<\h4>

四级标题
五级标题 <h5>xxx<\h5>
五级标题
六级标题 <h6>xxx<\h6>
六级标题

列表

有序列表：

1
2
3
4
5
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>复仇者联盟</li>
</ol>

效果如下：

  1. 阿凡达
  2. 泰坦尼克号
  3. 复仇者联盟

无序列表

1
2
3
4
5
<ul>
    <li>葡萄</li>
    <li>西瓜</li>
    <li>苹果</li>
</ul>

效果如下：

  • 葡萄
  • 西瓜
  • 苹果

定义列表：

1
2
3
4
5
6
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

效果如下：

计算机
用来计算的仪器 ... ...
显示器
以视觉方式显示信息的装置 ... ...

链接

链接用于外链到其他网站，使用方法如下：

1
2
3
<a href="http://www.tsinghua.edu.cn">
清华大学
</a>

效果如下：

清华大学

多媒体

多媒体包括图片、音频、视频等等多媒体文件。

图片：

1
2
3
4
<img 
 src="https://p0.ssl.qhimg.com/t0142620c6328f7ab7d.jpg"
 alt="Metal movable type"
 width="400">

效果：
Metal movable type

音频：

1
2
3
4
<audio
controls
src="https://s2.ssl.qhres.com/static/cbf0c6b1ea11e72b.ogg">
</audio>

效果：

视频：

1
2
3
4
<video
  src="https://s2.ssl.qhres.com/static/eb04e248864ac1a8.mp4"
  controls>
</video>

效果：

输入

HTML中输入使用的是<input>标签，但是赋予不同的属性之后会得到不一样的效果。

最简单的输入标签如下：

1
2
3
<p>
    <input>
</p>

效果为：

如果我们要在输入框中添加一些提示，则可以这样做：

1
2
3
<p>
    <input placeholder="请输入用户名">
</p>

效果如下：

如果我们要让用户输入一个范围，那我们可以指定标签的类型。

1
2
3
<p>
    <input type="range">
</p>

效果如下：

如果我们要用户输入一个数字，并且这个数字有一定的范围，那我们可以指定这个标签的更多属性

1
2
3
<p>
<input type="number" min="1" max="10" value="3">
</p>

效果如下：

如果我们要用户输入一个日期，并且也有一定的范围，同上面一样，我们可以这样做：

1
2
3
<p>
<input type="date" min="2018-02-10">
</p>

效果如下：

如果我们用用户输入一系列文本，则应该使用<textarea>标签

1
2
3
<p>
    <textarea>Hello</textarea>
</p>

效果如下：

选择

选择使用的是checkbox和radio两种属性。各自的效果如下：

1
2
<input type="checkbox"> Apple
<input type="checkbox" checked> Watermelon

效果为：
Apple
Watermelon

另一种选择则是：

1
2
<input type="radio" name="sport"> basketball
<input type="radio" name="sport"> football

效果为：
basketball
football

文本标签

1
2
3
4
5
6
7
8
9
10
11
12
<blockquote cite="http://t.cn/RfjKO0F">
<p>天才并不是⾃⽣⾃⻓在深林荒野⾥的怪物， 是由可以使天才⽣⻓
的⺠众产⽣、⻓育出来的，所以没有 这种⺠众，就没有天才。</p>
</blockquote>
<p>我最喜欢的⼀本书是<cite>⼩王⼦</cite>。</p>
<p>在<cite>第⼀章</cite>，我们讲过<q>字符串是不可变量</q>。</p>
<p><code>const</code>声明创建⼀个只读的常量。</p>
<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
<p>在投资之前，<strong>⼀定要做⻛险评估</strong>。</p>

效果为：

天才并不是⾃⽣⾃⻓在深林荒野⾥的怪物， 是由可以使天才⽣⻓ 的⺠众产⽣、⻓育出来的，所以没有 这种⺠众，就没有天才。

我最喜欢的⼀本书是⼩王⼦。

在第⼀章，我们讲过字符串是不可变量。

const声明创建⼀个只读的常量。

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

在投资之前，⼀定要做⻛险评估。

<p>标签生成一个新的段落，<cite>用于标记斜体文字，<code>可以标注出文本中的代码，<strong>用以将指定文字粗体，<pre>用以生成一个文本框。

总结

以上就是比较常用的HTML标签，当然，制作一个网页只有HTML是不够的，往往还需要配合CSS和JavaScript才能制作出动态美观的网页。

网页前端
HTML基本语法及使用
https://thumarklau.github.io/2019/07/01/HTML/
作者
Xuxin Liu
发布于
2019年7月1日
许可协议