python测试开发---html基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_54641346/article/details/142216077

1. HTML 基本结构

HTML 文档有固定的基本结构，一般如下：

<!DOCTYPE html>  <!-- 文档声明，表示使用 HTML5 -->
<html>
<head>
    <meta charset="UTF-8">  <!-- 设置字符编码 -->
    <title>网页标题</title>  <!-- 网页标题 -->
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

解释：

<!DOCTYPE html>: 声明文档类型，告诉浏览器使用 HTML5 标准。
<html>: HTML 文档的根元素。
<head>: 包含网页的元信息，比如标题、字符集等。
<meta charset="UTF-8">: 指定网页的字符编码为 UTF-8，支持国际字符。
<title>: 设置网页的标题，显示在浏览器标签页上。
<body>: 网页的主体部分，包含网页的内容。

2. 常用 HTML 标签

2.1 标题标签

HTML 提供了六种标题标签，<h1> 到 <h6>，<h1> 为最高级标题，依次递减。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.2 段落标签

<p> 用于定义段落，每个段落会自动换行。

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

2.3 超链接标签

<a> 用于创建超链接，href 属性指定链接目标。

<a href="https://www.example.com">访问示例网站</a>

2.4 图片标签

<img> 用于在网页中插入图片，src 属性指定图片的URL，alt 属性提供图片的替代文本。

<img src="image.jpg" alt="示例图片">

2.5 列表标签

HTML 提供了有序列表和无序列表两种。

无序列表（<ul>）：项目符号列表。
有序列表（<ol>）：编号列表。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

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

2.6 表格标签

<table> 用于创建表格，常用子标签包括 <tr>（表格行），<td>（单元格），<th>（表头单元格）。

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>25</td>
    </tr>
</table>

2.7 表单标签

<form> 用于收集用户输入，常用子标签有 <input>、<textarea>、<button> 等。

<form action="submit.php" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    
    <button type="submit">提交</button>
</form>

2.8 注释

HTML 注释不会显示在页面上，用于注释代码。

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

2.9 强调文本

<b>：加粗文本。
<i>：斜体文本。
<strong>：加重强调文本。
<em>：加重斜体文本。

<b>加粗文本</b>
<i>斜体文本</i>
<strong>加重强调文本</strong>
<em>加重斜体文本</em>

3. HTML 属性

HTML 标签可以包含属性，用于定义元素的额外信息。常见属性：

class: 指定类，用于 CSS 样式。
id: 唯一标识符，必须在文档中唯一。
style: 内联样式，用于直接定义 CSS 样式。
src: 用于指定图像、视频等外部资源的路径。
href: 指定链接的目标地址。

<p id="intro" class="highlight" style="color:red;">这是带有属性的段落。</p>

4. 嵌套结构

HTML 元素可以相互嵌套。正确的嵌套是标签正确闭合的基础：

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

总结

HTML 是一种基于标记的语言，所有的内容都是通过标签来定义的，掌握了基础语法和常用标签后，你可以构建网页的基本结构。