Document

HTML5入门讲解

2024-07-30
dfer
153
html5 前端 html CSDN

什么是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>

上一篇：【HTML+CSS】

下一篇：网安向学习前端三剑客