HTML学习笔记

最新推荐文章于 2025-07-24 17:35:32 发布

empti_

最新推荐文章于 2025-07-24 17:35:32 发布

阅读量1.1k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html 笔记

本文链接：https://blog.csdn.net/echo_123qq/article/details/149027091

HTML 专栏收录该内容

8 篇文章

订阅专栏

HTML学习笔记

一、HTML 基础结构

1. 文档基本组成

<!DOCTYPE html>     <!-- 文档类型声明，HTML5标准 -->
<html>              <!-- 根元素，所有HTML内容必须包含在此标签内 -->
    <head>          <!-- 文档头部，包含元数据和资源引用 -->
        <title>页面标题</title>  <!-- 定义浏览器标签页显示的标题 -->
        <meta charset="utf-8"/>  <!-- 声明字符编码为UTF-8 -->
    </head>
    <body>          <!-- 文档主体，包含所有可见内容 -->
        <!-- 页面内容 -->
    </body>
</html>

2. 专业术语解释

标签(Tag)：尖括号包围的关键词，如 <div>、
元素(Element)：由开始标签、内容和结束标签组成的完整结构，如 内容
属性(Attribute)：为元素提供附加信息的名称/值对，如 <img src="image.jpg" alt="描述">
DOM(Document Object Model)：文档对象模型，表示HTML文档的树状结构

二、常用HTML元素详解

1. 文本内容元素

标题元素

<h1>一级标题</h1>  <!-- 最重要，一个页面通常只有一个h1 -->
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- ...直到h6 -->

段落与换行

<p>这是一个段落。多个   空格和换行
会被合并显示。</p>

<p style="white-space: pre-line;">这个段落会保留
换行显示。</p>

<br>  <!-- 换行(空标签) -->
<hr>  <!-- 水平分割线(空标签) -->

2. 列表元素

有序列表

<ol>
    <li>第一项</li>
    <li>第二项
        <ol>  <!-- 嵌套列表 -->
            <li>子项1</li>
        </ol>
    </li>
</ol>

无序列表

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

3. 表格元素

<table border="1">
    <tr>  <!-- 表格行 -->
        <th>表头1</th>  <!-- 表头单元格 -->
        <th>表头2</th>
    </tr>
    <tr>
        <td rowspan="2">跨行单元格</td>  <!-- 垂直合并单元格，占用2行 -->
        <td>普通单元格</td>
    </tr>
    <tr>
        <td colspan="2">跨列单元格</td>  <!-- 水平合并单元格，占用2列 -->
    </tr>
</table>

三、表单元素详解

1. 基本表单结构

<form action="/submit" method="POST" enctype="multipart/form-data">
    <!-- 表单控件 -->
    <button type="submit">提交</button>
</form>

2. 常用表单控件

输入框

<input type="text" name="username" placeholder="用户名">
<input type="password" name="pwd" required>  <!-- 必填字段 -->

单选/复选框

<!-- 同name的radio会互斥，只能同时选中一个。若不定义value，默认值为on。checked表示默认勾选 -->
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="0"> 运动
<input type="checkbox" name="hobby" value="1"> 读书
<input type="checkbox" name="hobby" value="2"> 弹琴

下拉选择

<select name="country">
    <option value="">--请选择--</option>
    <option value="cn" selected>中国</option>
</select>

文本域

<textarea name="message" rows="5" cols="30" style="resize: none;"></textarea>

四、媒体元素

1. 图片元素

<img src="image.jpg" alt="图片描述" width="200" height="100">
<!-- 
  src: 图片路径(必填)，可用url、相对/绝对地址
  alt: 替代文本(必填，用于无障碍访问和图片无法显示时)
  width/height: 建议只设置一个保持比例
-->

2. 超链接

<a href="https://example.com" target="_blank" title="示例网站">示例链接</a>
<!--
  href：目标网址，可用url、相对/绝对地址
  target: 打开方式
  title: 鼠标悬停提示
-->