HTML5入门讲解

什么是HTML?

HTML(HyperText Markup Language,超文本标记语言)是一种用于创建和设计网页的标准标记语言。HTML是Web开发的基础,结合CSS(层叠样式表)和JavaScript(脚本语言),可以创建外观精美且交互丰富的网页。

HTML使用标签(tags)来定义网页的不同部分,如标题、段落、列表、链接、图像等。这些标签帮助浏览器理解和呈现网页内容。HTML标签内可以包含属性(Attributes)。

HTML 标签是由尖括号包围的关键词,例如 <html>

HTML文档的基本结构

一个标准的HTML文档由以下几个主要部分组成:

  • <!DOCTYPE html>:声明文档类型,告知浏览器使用HTML5标准。
  • <html>:HTML文档的根元素。
  • <head>:包含元数据,如文档标题、字符集声明、样式表和脚本链接等。
  • <title>:设置网页的标题,显示在浏览器标签栏中。
  • <body>:包含网页的主体内容,如文本、图像、链接、表格等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML中的注释

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

<h1> ~ <h6>标题标签

独占一行。<h1>表示最大的标题,通常用作表示页面的主要内容或主题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h3>标题 3</h3>
    <h4>标题 4</h4>
    <h5>标题 5</h5>
    <h6>标题 6</h6>
</body>
</html>

<p>段落标签

独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

<p>标签不能嵌套使用,也就是说一个<p>标签不能包含另一个<p>标签。

<!-- 不正确的嵌套 -->
<p>这是一个段落。
  <p>这是嵌套在段落中的另一个段落。</p>
</p>

<!-- 正确的使用 -->
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

路径

/ 表示进入某一个文件夹里面

. 表示当前文件所在的文件夹

.. 表示当前文件的上一级文件夹

  • 使用绝对路径可以避免路径错误,但代码的可移植性较差。
  • 使用相对路径可以提高代码的可移植性,但需要确保当前工作目录的正确性。

相对路径

绝对路径从文件系统的根目录开始,指定了文件或文件夹的完整位置。它包括所有目录的名称,直到目标文件或文件夹的具体位置。

Windows 示例: C:\Users\Username\Documents\file.txt

绝对路径

相对路径是相对于当前工作目录的路径,指定了文件或文件夹的位置。它不包括根目录,而是从当前目录出发。

Windows 示例: Documents\file.txt(假设当前路径为 C:\Users\Username)

<br>换行标签

<br>标签用于实现文本的换行。由于浏览器不能识别代码中的" Enter 键 "换行,所以如果文本需要换行则可以使用换行标签<br>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这是第一行<br>这是第二行</p>
</body>
</html>

<hr>水平线标签

<hr>标签用于创建一个水平分隔线。你可以通过CSS来修改<hr>标签的样式,例如改变颜色、宽度、边框样式等。

<pre>预格式化标签

<pre>标签用于表示预格式化文本。在<pre>标签内的文本会按照原样显示,包括空格、制表符和换行符。它通常用于显示代码、编程脚本或其他需要保留格式的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <pre>
               春晓
        春眠不觉晓,处处闻啼鸟。
        夜来风雨声,花落知多少。
    </pre>
</body>
</html>

<img>图像标签

<img>标签用于在网页中嵌入图像。

<img>标签的属性有src,用于指定图像文件的路径。alt属性是在图像无法显示时的替代文本。width属性和height属性用于表示图像的宽度和高度,可以用像素(px)或百分比(%)表示。title属性是当用户悬停在图像上时显示的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="/images/img.png" alt="图片" title="图片" width="600px">
    <!-- 如果width="50%",这将设置图像的宽度为其包含元素宽度的50% -->
</body>
</html>

<a>锚点标签

<a>标签通常用于创建超链接,允许用户从一个页面跳转到另一个页面,或在同一个页面的不同部分之间进行跳转,还可以用于下载文件。

<a>标签最常见的属性是href,用于指定链接的目标URL。title属性用于当用户悬停在链接上时显示文本。target属性用于指定链接的打开方式,常见的值有:

  • _self:在同一窗口或标签中打开链接(默认)。
  • _blank:在新窗口或标签中打开链接。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank" title="百度一下,你就知道">百度</a>
</body>
</html>

download属性可以指定用户所下载的文件的文件名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="/documents/resource.rar" download="fileName.rar">下载文件</a>
</body>
</html>

内部链接:可以使用<a>标签在同一页面的不同部分之间导航。为此,我们需要为目标元素设置id属性,并在<a>标签的href属性中填写#id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#two">第2集 </a>
    
    <hr>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br>
    <hr>
    
    <!-- 目标元素 -->
    <p id="two">第2集介绍</p>
</body>
</html>

<a>标签还可以包含其他HTML元素,如文本、图像等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 点击图片跳转网页 -->
    <a href="https://www.baidu.com">
        <img src="/images/img.png" alt="图片" title="图片" width="600px">
    </a>
</body>
</html>

<audio>音频标签

<audio>标签用于在网页中嵌入音频内容。它支持多种音频格式,如 MP3、WAV 和 Ogg。

src属性用于指定音频文件的 URL。controls属性用于添加播放、暂停、音量等控件。autoplay属性用于在页面加载时自动播放音频。注意,现代浏览器出于用户体验和隐私考虑,可能会阻止自动播放。loop属性用于使音频播放结束后自动重新播放。muted属性表示默认静音播放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio src="audio_file.mp3" controls autoplay loop></audio>
</body>
</html>

<video>视频标签

<video>标签用于在网页中嵌入视频内容。包含src, controls, autoplay, loop, muted, width, height等属性。

<video src="#" width="300px" autoplay muted loop controls></video>

列表

有序列表

在HTML中,<ol>标签用于定义一个有序列表(ordered list)。有序列表中的列表项会按照特定的顺序显示,通常是数字或字母。每个列表项都使用<li>标签包裹。可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套(多级列表)。

<ol>标签的type属性用于指定列表项的编号类型。start属性用于指定列表的起始编号。reversed属性属性用于将列表项的顺序反转,列表项会从最后一个开始编号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <ol type="A" start="1">
        <li>第一项</li>
        <li type="1" value="5">第二项</li>
        <!-- value属性会改变后面列表项的符号顺序 -->
        <!-- type属性不会改变后面列表项的编号类型 -->
        <li>第三项</li>
    </ol>
</body>
</html>

无序列表

在HTML中,<ul>标签用于定义一个无序列表(unordered list)。无序列表中的每个列表项都由<li>标签包裹。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
</body>
</html>

可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套(多级列表)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>橙子</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>胡萝卜</li>
                <li>土豆</li>
                <li>西红柿</li>
            </ul>
        </li>
    </ul>
</body>
</html>

定义列表

在HTML中,<dl>标签用于定义一个定义列表(Definition List)。它由一个或多个定义项组成。定义列表通常用于展示术语和其对应的定义。

  • <dl> 标签:定义列表的容器。
  • <dt> 标签:定义列表的标题或术语。
  • <dd> 标签:定义列表的描述或定义。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>

        <dt>CSS</dt>
        <dd>层叠样式表</dd>

        <dt>JavaScript</dt>
        <dd>一种脚本语言,用于创建动态网页内容</dd>
    </dl>
</body>
</html>

定义列表可以嵌套其他列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>水果</dt>
    <dd>
        <dl>
            <dt>苹果</dt>
            <dd>红色的水果</dd>
            <dt>香蕉</dt>
            <dd>黄色的水果</dd>
        </dl>
    </dd>
    <dt>蔬菜</dt>
    <dd>
        <dl>
            <dt>胡萝卜</dt>
            <dd>橙色的蔬菜</dd>
            <dt>土豆</dt>
            <dd>常见的根茎类蔬菜</dd>
        </dl>
    </dd>
</dl>
</body>
</html>

表格

在HTML中,表格使用<table>标签来定义。表格由行和列组成,用于组织和展示数据。

  • <table> 标签:定义表格的开始和结束。
  • <tr> 标签:定义表格中的一行(Table Row)。
  • <th> 标签:定义表格中的表头单元格(Table Header),通常用于表格的标题部分。
  • <td> 标签:定义表格中的数据单元格(Table Data),用于表格的具体数据。
  • <caption> 标签:用于定义表格的标题。

<table>标签中的border属性用于设置表格的边框的粗细。rolspan和colspan属性用于合并行或列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px">
        <caption>用户信息表</caption>
        <tr>
            <th>姓名</th>
            <th colspan="2">联系方式</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>电话</td>
            <td>邮箱</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>电话</td>
            <td>邮箱</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>微信</td>
        </tr>
    </table>
</body>
</html>

<thead><tbody><tfoot> 标签:分别用于定义表格的头部、主体和尾部,便于组织和样式化表格内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">数据来源:某某数据库</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

表单

一个基本的表单结构如下:

<form action="处理地址" method="请求方法">
    <!-- 输入控件 -->
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
</form>

文本框:用于输入单行文本。

<input type="text" name="username" placeholder="请输入用户名">

密码框:用于输入密码,输入内容会被隐藏。

<input type="password" name="password" placeholder="请输入密码">

单选框:允许用户从一组选项中选择一个。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

多选框:允许用户选择一个或多个选项。

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="game"> 游戏

下拉列表:提供一个下拉菜单供用户选择。

<select name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
</select>

文本域:用于输入多行文本。

<textarea name="message" rows="4" cols="50"></textarea>

按钮:用于提交表单或执行其他操作。需要配合<form>标签才能实现对应的功能。

<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">

 上传文件:默认情况下,文件上传表单控件只能上传一个文件,如果添加multiple属性则可以实现上传多个文件的功能。

<input type="file" multiple>

<label> 标签:一般配合<input>标签使用,使得用户点击文字就可以选中想选择的选项(增大点击范围)。当用户点击<label>标签的文本时,浏览器会自动将焦点转到与该标签关联的表单控件上,这使得表单更加易于使用和访问。

<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- <label>标签通过 for 属性与表单控件的 id 属性进行关联 -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<button> 标签:是HTML中用于创建按钮的标签,可以用来执行JavaScript代码、提交表单数据等。<button>标签是一个通用的按钮标签,不同于其他类型的按钮(如:<input type="submit">, <input type="button">),它提供了更多的自定义选项和样式控制。

<button type="按钮类型">按钮文本</button>

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

<!-- onclick属性用于定义按钮点击时所执行的JavaScript代码 -->
<button onclick="alert('按钮被点击了!')">点击我</button>

以下是一个完整的表单示例

这个表单包含了多种输入控件,可以收集用户的用户名、密码、性别、爱好、国家和留言内容。提交后,数据将通过POST方法发送到submit.php。<form>标签中的enctype属性用于指定表单数据的编码方式。这个属性对于上传文件尤其重要,因为它决定了数据在提交时的编码格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="submit.php" method="post" enctype="multipart/form-data">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>

        <label for="gender">性别:</label>
        <input type="radio" id="male" name="gender" value="male"> 男
        <input type="radio" id="female" name="gender" value="female"> 女<br><br>

        <label for="hobby">爱好:</label>
        <input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
        <input type="checkbox" id="music" name="hobby" value="music"> 音乐<br><br>

        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="uk">英国</option>
        </select><br><br>

        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

 HTML中的特殊字符

在HTML中,有一些特殊字符在代码中具有特殊意义,因此需要使用特定的方式来表示它们,以避免冲突或错误显示。

特殊字符 代实体码 特殊字符 实体代码
小于号< &lt 版权符号© &copy
大于号> &gt 注册商标号® &reg
和号& &amp 乘号× &times
双引号" &quot 除号÷ &divide
空格 &nbsp

文本格式化标签

效果 标签
加粗 <strong> 或 <b>
倾斜

<em> 或 <i>

下划线 <ints> 或 <u>
删除线 <del> 或 <s>