HTML5基础教程：构建结构清晰的网页（六）

admin
前端开发
9小时前
4热度
0评论

HTML5是现代网页开发的基础，掌握它的基本知识和技巧对于前端开发者来说至关重要。本文将带你从零开始，逐步了解HTML5的基本文档结构、常用标签、文本格式化、链接、图片、样式/区块、列表、表格等内容。通过本文的学习，你将能够创建出结构清晰、功能丰富的网页。

HTML5基本文档结构

在编写HTML5文档时，首先需要定义文档类型。一个标准的HTML5文档结构如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

<title>文档标题</title>
</head>
<body>

<p>可见文本...</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5。
<html>：文档的根元素。
<head>：包含文档的元数据，如字符集声明、标题等。
<meta charset="UTF-8">：设置文档的字符编码为UTF-8。
<title>：定义文档的标题，显示在浏览器的标签页上。
<body>：包含文档的主体内容，如文本、图片、链接等。

常用标签

标题标签

HTML5提供了六种不同级别的标题标签，从<h1>到<h6>，其中<h1>表示最重要的标题，<h6>表示最次要的标题。


<h1>最大的标题</h1>
<h2>次重要的标题</h2>
<h3>第三重要的标题</h3>
<h4>第四重要的标题</h4>
<h5>第五重要的标题</h5>
<h6>最小的标题</h6>

段落标签

<p>标签用于定义段落，是网页中最常用的标签之一。


<p>这是一个段落。</p>

换行和水平线

<br>：插入一个换行符，不闭合。
<hr>：插入一条水平线，用于分隔内容。


<p>这是第一行。<br>这是第二行。</p>
<hr>

注释

注释用于在代码中添加说明，不会在浏览器中显示。

<!-- 这是一条注释 -->

文本格式化

HTML5提供了多种标签来格式化文本，使其更具表现力。

基本格式化

<b>：加粗文本。
<i>：斜体文本。
<u>：下划线文本。
<strong>：强调文本，通常显示为加粗。
<em>：强调文本，通常显示为斜体。


<p><b>加粗文本</b> <i>斜体文本</i> <u>下划线文本</u> <strong>重要文本</strong> <em>强调文本</em></p>

代码相关

<code>：用于表示计算机代码。
<pre>：预格式化文本，保留空格和换行。
<kbd>：表示键盘输入。


<p><code>function example() { return true; }
    function example() {
        return true;
    }
按Ctrl + S保存文件。

其他格式化

<abbr>：缩写词。
<address>：联系信息。
<blockquote>：引用其他来源的内容。
<cite>：作品名称。
<del>：删除的文本。
<ins>：插入的文本。
<sub>：下标文本。
<sup>：上标文本。


<p><abbr title="World Wide Web">WWW</abbr>代表万维网。</p>
<address>
    作者：<a href="mailto:webmaster@example.com">Webmaster</a><br>
    地址：123 Example Street, Example City, EX1 2PL
</address>
<blockquote>这是一段引用的文字。</blockquote>
<p>《<cite>哈利·波特</cite>》是一本畅销书。</p>
<p>原文：<del>错误文本</del> 修改后：<ins>正确文本</ins></p>
<p>H<sub>2</sub>O表示水。</p>
<p>E = mc<sup>2</sup></p>

链接

链接是网页中不可或缺的一部分，用于导航到其他页面或资源。

普通链接

<a href="http://www.example.com/">链接文本</a>

图像链接

<a href="http://www.example.com/"><img src="image.jpg" alt="替换文本"></a>

邮件链接

<a href="mailto:webmaster@example.com">发送电子邮件</a>

书签

书签用于在页面内快速跳转。

<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

图片是网页的重要组成部分，用于增强视觉效果。

<img src="image.jpg" alt="替换文本" height="42" width="42">

src：图片的路径。
alt：图片无法显示时的替代文本。
height和width：图片的高度和宽度。

样式/区块

内联样式

可以在<style>标签中定义CSS样式，应用于整个文档。

<style type="text/css">
    h1 { color: red; }
    p { color: blue; }
</style>

块级元素和内联元素

<div>：块级元素，用于定义文档中的块级区域。
<span>：内联元素，用于定义文档中的内联区域。


<div>这是一个块级元素</div><span>这是一个内联元素</span>

列表

无序列表

无序列表用于列举没有特定顺序的项目。


<ul>

<li>项目1</li>

<li>项目2</li>
</ul>

有序列表

有序列表用于列举有特定顺序的项目。


<ol>

<li>第一项</li>

<li>第二项</li>
</ol>

定义列表

定义列表用于定义术语及其描述。


<dl>

<dt>项目1</dt>

<dd>描述项目1</dd>

<dt>项目2</dt>

<dd>描述项目2</dd>
</dl>

表格

表格用于组织和展示数据。

<table border="1">

<tr>

<th>表格标题1</th>

<th>表格标题2</th>
    </tr>

<tr>

<td>表格数据1</td>

<td>表格数据2</td>
    </tr>
</table>

<table>：定义表格。
<tr>：定义表格行。
<th>：定义表头单元格。
<td>：定义普通单元格。

框架

框架用于在同一个页面中显示多个独立的文档。

<iframe src="demo_iframe.htm"></iframe>

表单

表单用于收集用户输入，提交到服务器进行处理。

<form action="demo_form.php" method="post">
    <label for="email">邮箱:</label>
    <input type="text" name="email" size="40" maxlength="50"><br>
    <label for="password">密码:</label>
    <input type="password" name="password"><br>
    <input type="checkbox" checked="checked"> 记住我<br>
    <input type="radio" name="gender" value="male" checked="checked"> 男
    <input type="radio" name="gender" value="female"> 女<br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="hidden" name="hidden_field" value="hidden_value"><br>
    <label for="fruit">选择水果:</label>
    <select name="fruit">
        <option value="apple">苹果</option>
        <option value="banana" selected="selected">香蕉</option>
        <option value="cherry">樱桃</option>
    </select><br>
    <label for="comment">评论:</label>
    <textarea name="comment" rows="10" cols="30"></textarea>
</form>

<form>：定义表单。
<input>：定义输入字段，类型包括文本、密码、复选框、单选按钮、提交按钮、重置按钮、隐藏字段等。
<select>：定义下拉列表。
<textarea>：定义多行文本输入区域。

实体

实体用于在HTML中表示特殊字符。

<：小于号 <
>：大于号 >
&：与号 &
"：双引号 "
'：单引号 '
©：版权符号 ©

HTML标签简表

标签	英文全称	中文说明
<a>	Anchor	锚
<abbr>	Abbreviation	缩写词
<acronym>	Acronym	取首字母的缩写词
<address>	Address	地址
<alt>	Alter	替用（一般是图片显示不出的提示）
<b>	Bold	粗体（文本）
<bdo>	Bi-Directional Override	文本显示方向
<big>	Big	变大（文本）
<blockquote>	Block Quotation	区块引用语
<br>	Break	换行
<cell>	Cell	单元格
<cellpadding>	Cell Padding	单元格内边距
<cellspacing>	Cell Spacing	单元格间距
<center>	Centered	居中（文本）
<cite>	Citation	引用
<code>	Code	源代码（文本）
<dd>	Definition Description	定义描述
<del>	Deleted	删除（的文本）
<dfn>	Defines a Definition Term	定义定义条目
<div>	Division	分隔
<dl>	Definition List	定义列表
<dt>	Definition Term	定义术语
<em>	Emphasized	加重（文本）
<font>	Font	字体
<h1>~<h6>	Header 1 to Header 6	标题1到标题6
<hr>	Horizontal Rule	水平尺
<href>	Hypertext Reference	超文本引用
<i>	Italic	斜体（文本）
<iframe>	Inline Frame	内联框架
<ins>	Inserted	插入（的文本）
<kbd>	Keyboard	键盘（文本）
<li>	List Item	列表项目
<nl>	Navigation Lists	导航列表
<ol>	Ordered List	排序列表
<optgroup>	Option Group	选项组
<p>	Paragraph	段落
<pre>	Preformatted	预定义格式（文本）
<q>	Quotation	引用语

总结

通过本文的学习，你已经掌握了HTML5的基本知识和常用标签。HTML5是一种在Web上广泛使用的标记语言，允许你格式化文本、添加图片、创建链接、输入表单、框架和表格等。HTML的核心是标签，它们指示了将出现的内容。

如果你希望进一步提升你的前端开发技能，建议继续学习CSS和JavaScript。CSS用于控制网页的样式和布局，而JavaScript则可以让你的网页更加生动和交互性强。

下一步学习建议

学习CSS

CSS被用来同时控制多个网页的样式和布局。通过使用CSS，所有的格式化都可以从HTML中剥离出来，并存储在一个独立的文件中。如需学习如何创建样式表，请访问我们的CSS教程。

学习JavaScript

JavaScript可以使你的网页更加生动。如果你只想展示内容，静态网站是很好的选择，但如果你想与用户进行互动或让网页更加生动，就需要使用JavaScript。JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持JavaScript。如需学习更多关于JavaScript的知识，请访问我们的JavaScript教程。

站点托管

在创建完网站后，你需要将其托管在服务器上。可以选择自建服务器或使用ISP提供的服务。自建服务器需要考虑硬件、软件和人工成本，而ISP提供的服务则具有连接速度快、硬件强大、安全性和可靠性高等优点。在选择ISP时，要注意24小时支持、每日备份、流量限制、带宽和内容限制、E-mail功能和数据库访问等因素。

希望本文对你有所帮助，祝你在前端开发的道路上越走越远！