开始使用HTML

HTML指的是超文本标记语言（HyperText Markup Language），是用来描述网页的一种语言。

HTML使用标签来描述网页。

编辑器与浏览器

HTML文档实际上是纯文本文档，所以一般的文本编辑器都可以使用。

请不要使用Office、记事本等软件。

我推荐使用Atom或者Visual Studio Code编辑器。

浏览器我推荐使用Chrome或者Firefox。

床前明月光

下面是一个HTML实例：

<!DOCTYPE html>
<html>
<head>
    <title>静夜思（李白）</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>静夜思</h1>
    <p>李白</p>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

实例中的第一行<!DOCTYPE html>声明这是一个HTML5（HTML的一个版本）文档。

<html>标签是HTML页面的最根本的标签，页面的内容包含在此标签中。

<head>标签用于定义文档的头部，它是所有头部元素的容器。在本例中，<title>标签和<meta>标签包含于<head>标签中。

<title>标签描述了文档的标题。

<meta>标签定义了文档的元数据，本例中，通过charset定义了文档的编码方式。

<body>标签描述了页面的可见内容。

<h1>标签定义了文档的一级标题。

<p>标签定义了一个段落。

在浏览器中打开，显示如下：

在浏览器中的“静夜思”

在Chrome浏览器中，在页面上单击右键，选择“查看网页源代码”，即可查看网页源代码。

在Chrome浏览器中，在页面上单击右键，选择“检查”，即可进入开发人员工具箱，可以在这里查看HTML源代码。

在Chrome中查看源代码

标题与段落

HTML中标题通过<h1>-<h6>描述，共六级标题，其中<h1>描述一级标题，<h2>描述二级标题……<h6>描述六级标题。

使用<p>得到一个段落。

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的标题</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>这是一个一级标题</h1>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
    <h3>这是一个三级标题</h3>
    <p>这是一个段落</p>
</body>
</html>

在浏览器中打开，显示如下（下图中左侧显示的是源代码）：

HTML中的标题

<hr>标签创建一条水平线。

<br>标签在一个段落内换行。

下面是一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的水平线与换行</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>这是一个一级标题</h1>
    <hr>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落<br>
    同一个段落中的换行</p>
    <h2>这是一个二级标题</h2>
    <p>这是一个段落</p>
</body>
</html>

浏览器中显示如下：

HTML中的水平线与换行

像<hr>和<br>这样的标签称为空标签，它们只有一个标签，没有区分开始标签和结束标签。之前讲的<p>标签则不是空标签，它的开始标签是<p>，结束标签是</p>。

注释

在HTML中，将注释放在``之间。

注释帮助开发人员了解程序，浏览器会自动忽略他们。

<!DOCTYPE html>
<!--
    title: 静夜思
    time: 2018-2-27
    author: mwang
-->
<html>
<head>
    <title>静夜思（李白）</title>
    <meta charset="utf-8">
</head>
<body>
    <!-- 题目 -->
    <h1>静夜思</h1>
    <p>李白</p> <!-- 作者 -->
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
</body>
</html>

在上面的例子中，有三个注释。分别是：

  1. 文档开头部分，是一个多行注释，写明了文档标题、时间和作者。
  2. <h1>标签上面，内容为题目。
  3. 第一个</p>标签右边，内容为作者。

浏览器会自动忽略注释，所以浏览器中显示如下：

HTML中的注释

链接

HTML使用超链接实现文档与文档的链接。

HTML使用<a>标签描述超链接，它的语法如下：

<a href="url">链接文本</a>

例如，

<a href="html_start.html">静夜思</a>

在浏览器中，点击文字静夜思会跳转到文件html_start.html。

下面是一个实例：

<!DOCTYPE html>
<html>
<head>
    <title>关于月亮的古诗</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>关于月亮的古诗</h1>
    <p>点击查看古诗<a href="html_start.html">静夜思</a>。</p>
</body>
</html>

在浏览器中显示如下：

HTML中的链接

点击链接后会跳转到指定的页面：

在HTML中使用超链接跳转

可以在标签中设置属性，属性可以在标签中添加附加信息，属性一般以名称="值"的形式出现。

属性一般放在开始标签中。

介绍<a>标签中的一个属性：target。

在标签<a>中使用target属性指定该链接的打开方式，比如_blank指定在新窗口中打开链接：

<a href="http://www.baidu.com" target="_blank">百度一下</a>

这个例子中，点击链接后会在新窗口中打开百度。

文本格式化

这里介绍5个文本格式化标签：<strong>、<em>、<sub>、<sup>和<del>。

它们的作用如下：

  • <strong>，加重语气。
  • <em>，着重文字。
  • <sub>，下标字。
  • <sup>，上标字。
  • <del>，删除字。

下面是一个实例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML文本格式化</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML文本格式化</h1>
    <p>在HTML中，em表示内容的<em>着重点</em>，strong表示内容<strong>很重要</strong>。</p>
    <p>sub表示<sub>下标</sub>字。</p>
    <p>sup表示<sup>上标</sup>字。</p>
    <p>del表示<del>删除</del>字。</p>
</body>
</html>

浏览器中显示如下：

HTML中文本的格式化

列表

在HTML中，可以使用有序列表和无序列表。

有序列表是一个项目列表，由数字进行标记。

有序列表起始于<ol>标签，结束于</ol>标签，每一项使用<li>标签。

下面是一个有序列表的例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的有序列表</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML中的有序列表</h1>
    <p>把大象放冰箱里分三步：</p>
    <ol>
        <li>把冰箱门打开。</li>
        <li>把大象放进去。</li>
        <li>把门关上。</li>
    </ol>
</body>
</html>

在浏览器中打开，如下：

HTML中的有序列表

无序列表也是一个项目列表，由小圆点进行标记。

无序列表起始于<ul>标签，结束于</ul>标签，每项用<li>标签。

下面是一个无序列表的例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的无序列表</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML中的无序列表</h1>
    <p>形容场面热闹壮观的词：</p>
    <ul>
        <li>锣鼓喧天</li>
        <li>鞭炮齐鸣</li>
        <li>红旗招展</li>
        <li>人山人海</li>
    </ul>
</body>
</html>

在浏览器中打开，如下：

HTML中的无序列表

表格

HTML中的表格使用<table>标签定义。

表格中的行使用<tr>标签定义，单元格使用<td>标签定义。使用<th>定义表头。

这是一个表格的例子：

<!DOCTYPE html>
<html>
<head>
    <title>HTML中的表格</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>HTML中的表格</h1>
    <h2>四象限法</h2>
    <p>四象限法是一种时间管理方法，它最重要的工具是下面这一张表格：</p>
    <table border="1">
        <tr> <!-- 第一行，表头 -->
            <th></th>
            <th>不重要</th>
            <th>重要</th>
        </tr>
        <tr> <!-- 第二行 -->
            <td>紧急</td>
            <td>紧急但不重要</td>
            <td>重要且紧急</td>
        </tr>
        <tr> <!-- 第三行 -->
            <td>不紧急</td>
            <td>不重要且不紧急</td>
            <td>重要但不紧急</td>
        </tr>
    </table>
</body>
</html>

浏览器中显示如下：

HTML中的表格

在本例中，表格一共有三行，其中第一行作为表头，单元格使用了<th>标签；剩下的两行，单元格使用了<td>标签。

可以看到，表格中使用<tr>描述行。

本例中<table>标签中的border属性确定了表格的边框宽度，默认情况下表格没有边框。

在操作表格中，有时需要“合并单元格”操作，这就需要使用rowspan和colspan属性了。

rowspan属性定义一个单元格纵跨的表格行数，colspan属性定义了一个单元格横跨的表格列数。比如<td rowspan="2">表示该单元格纵向占两行，<td colspan="3">表示该单元格横向占三列。

对于下面这个表格：

<table border="1">
    <tr>
        <th colspan="3">今天的幸福</th>
    </tr>
    <tr>
        <th>小品名称</th>
        <th>年份</th>
        <th>演员</th>
    </tr>
    <tr>
        <td rowspan="3">今天的幸福</td>
        <td rowspan="3">2012</td>
        <td>沈腾</td>
    </tr>
    <tr>
        <td>艾伦</td>
    </tr>
    <tr>
        <td>黄杨</td>
    </tr>
</table>

它在浏览器中显示如下：

在HTML中“合并”单元格

例子中，表头今天的幸福横跨三列，所以属性为colspan="3"；单元格今天的幸福和2012纵跨三行，所以属性为rowspan="3"。

图像，音频，视频

在HTML中添加图像非常简单，使用<img>标签。

<img src="media/rose.jpg" alt="玫瑰花" width="640" height="440">

在上面的语句中，一共使用了四个属性，分别是：

  • src：指定图片的地址。
  • alt：当图片无法加载时，显示此文本。
  • width：指定图片的宽度。
  • height：指定图片的高度。

在浏览器中显示如下：

HTML中的图像

当图片无法加载时，显示如下：

HTML中图片无法加载时

使用<audio>在HTML文档中插入音频：

<audio controls>
    <source src="media/A Himitsu - Adventures.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

例子中，<audio>表示这是一个音频文件，属性controls表示显示播放控件，比如暂停、进度条和音量等等。

<source>有两个属性：

  • src：指定音频文件地址。
  • type：指定音频文件格式。

在浏览器中显示如下：

HTML中的音频

使用<video>在HTML文档中插入视频文件：

<video width="640" height="360" controls>
    <source src="media/Adventures - A Himitsu (No Copyright Music).mp4" type="video/mp4">
    您的浏览器不支持Video标签。
</video>

在上面的例子中，<video>标签表明这是一个视频文件，例子中它有三个属性：

  • width：视频的宽度。
  • height：视频的高度。
  • controls：显示控制组件。比如暂停、进度条和音量等等。

接下来的<source>标签具有两个属性：

  • src：视频文件的地址。
  • type：视频文件的类型。

下面的您的浏览器不支持Video标签。是当浏览器不支持<video>标签时显示的内容。

在浏览器中显示如下：

HTML中的视频

区块

<div>是块级元素，没有特定的含义，可以用作其他HTML元素的容器。

<span>是内联元素，这意味着它不会在新的一行显示，可以用作文本的容器。

表单

使用<form>标签定义一个表单：

<form>
...表单内容
</form>

<input>是输入标签，它的属性type定义输入类型，下面是一个例子：

<form>
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password">
</form>

在浏览器中显示如下（已经输入文字）：

HTML表单-文本域

name属性是文本域的标识。

同样，<input>标签也可以作为单选框或者复选框：

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉 
</form>

这个表单中有两个单选框（radio），两个复选框（checkbox）。

两个单选框的name属性一致，都是sex，这意味着两个单选框是一组，只能选其中一个；两个复选的name属性一致，表明他们是一组，但是可以按需选择。

在浏览器中显示如下（已经进行选择）：

HTML中的单选框和复选框

下拉列表使用<select>标签进行定义，每个选项使用<option>标签定义，属性selected表示此选项被预选：

<form>
<select name="class">
    <option value="1">1班</option>
    <option value="2">2班</option>
    <option value="3" selected>3班</option>
    <option value="4">4班</option>
</select>
</form>

浏览器中显示如下：

HTML中的下拉列表

文本输入框使用<textarea>标签：

<textarea rows="10" cols="30">
    请在这里输入您的描述。
</textarea>

属性rows指定文本框的行数，cols指定文本框的列数。

浏览器中显示如下：

HTML中的文本输入框

最后，我们需要一个提交按钮，它在<input>标签中的类型是<submit>：

<form>
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在浏览器中显示如下：

HTML中的提交按钮

事实上，要让提交按钮正常工作，需要完成处理表单的页面，这里不会进行介绍。

相关

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1赞 92
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,229评论 1赞 41
  • 小睡 (2017-08-26 21:03:28)
    单词背得困到不行 桌上趴了会儿 就倒沙发上了 楼下不知道哪家小孩在拍球 啪啪啪 仔细听 除了风穿过树叶 房屋 窗子...
    黄扑哧阅读 81评论 0赞 0
  • 20170422 说话的机会
    读经 撒母耳记上25:1-44 经文 撒母耳记上25:36 亚比该到拿八那里，见他在家里设摆筵席，如同王的筵席。拿...
    君自尔出阅读 198评论 0赞 1
  • 原来在美国，家长会是这样开的
    欢迎关注微信公众号“畅畅上学记”
    罗环环阅读 3,368评论 11赞 49