当前位置：首页 > news >正文

【HTML学习笔记基础篇】

news 来源：原创 2025/5/17 20:36:49

HTML学习笔记基础篇

- 一、HTML概述
- - 1.1 什么是HTML
  - 1.2 HTML文档的基本结构
- 二、HTML基础标签
- - 2.1 标题标签
  - 2.2 段落标签
  - 2.3 换行标签
  - 2.4 链接标签
  - 2.6 列表标签
  - 2.7 表格标签
- 三、HTML进阶知识
- - 3.1 行级元素与块级元素
  - 3.3 语义化标签
- 四、开发工具与技巧
- - 4.1 开发工具
  - 4.2 常用技巧
- 五、总结
- 六、示例

一、HTML概述

1.1 什么是HTML

HTML，全称超文本标记语言（HyperText Markup Language），是一种用于描述网页内容的标记语言。它并不是一种编程语言，而是通过标签来定义网页的结构和内容。HTML标签通常被尖括号包围，例如<tagname>，标签通常是成对出现的，如<p>和</p>，其中第一个是开始标签，第二个是结束标签。

1.2 HTML文档的基本结构

HTML文档的基本结构包括头部（<head>）和主体（<body>）两部分：

头部：包含了元信息，如文档的标题（<title>）、字符集（<meta charset="UTF-8">）等。
主体：则是页面的主要内容，包含了各种HTML元素，如段落（<p>）、标题（<h1>到<h6>）、链接（<a>）等。

二、HTML基础标签

2.1 标题标签

HTML提供了六个级别的标题标签，从<h1>到<h6>，<h1>表示最高级别的标题，<h6>表示最低级别的标题。标题标签通常用于定义网页中的标题和子标题。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2.2 段落标签

段落标签<p>html用于定义网页中的段落。每个段落之间会自动产生较大的空隙，用于区分段落。

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

2.3 换行标签

换行标签<br>是一个单标签，用于在网页中插入换行。使用
换行之后，不会像段落标签那样产生很大的空隙。

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

2.4 链接标签

链接标签<a>用于创建超链接，可以链接到其他页面、文档、URL或特定位置的锚点。href属性指定链接的目标地址，target属性指定链接在何处打开（如_blank表示在新窗口或标签页中打开）。

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

2.6 列表标签

HTML提供了无序列表（<ul>）和有序列表（<ol>）两种列表类型，每个列表项使用<li>标签表示。

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

<ol>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

2.7 表格标签

表格标签用于创建表格，主要标签包括<table>（表格）、<tr>（行）、<th>（表头单元格）和<td>（数据单元格）。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>专业</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
    <td>计算机科学</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>22</td>
    <td>市场营销</td>
  </tr>
</table>

三、HTML进阶知识

3.1 行级元素与块级元素

行级元素：在文档中水平排列，一般只占据它所包含的内容的宽度，不会独占一行。常见的行级元素有<span>、<a>、<strong>等。
块级元素：会独占一行，从新行开始，并在前后都有一些额外的空间。常见的块级元素有<div>、<p>、<h1>到<h6>等。
3.2 表单标签
表单标签<form>用于创建表单，可以包含输入字段（<input>）、下拉菜单（<select>）、文本区域（<textarea>）等。action属性指定数据提交的目的地method属性指定提交方式（如get或post）。

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

3.3 语义化标签

HTML5引入了一些新的语义化标签，如<header>、<nav>、<article>、<aside>、<footer>等，这些标签有助于提升网页的可读性和SEO表现。

<header>
  <h1>网站标题</h1>
</header>

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>

<aside>
  <h3>侧边栏标题</h3>
  <p>侧边栏内容...</p>
</aside>

<footer>
  <p>版权信息...</p>
</footer>

四、开发工具与技巧

4.1 开发工具

Visual Studio Code（VSCode）：一款流行的代码编辑器，支持HTML、CSS、JavaScript等多种语言，拥有丰富的插件和扩展功能。
浏览器开发者工具：用于调试HTML、CSS、JavaScript问题，查看网络请求详情等。

4.2 常用技巧

快速生成HTML结构：在VSCode中，可以使用快捷键!+Tab或!+Enter快速生成HTML文档的基本结构。
实时预览：安装Live Server插件，可以在保存文件时自动刷新浏览器，实时预览网页效果。
代码格式化：使用Prettier插件可以自动格式化代码，保持代码整洁和一致性。

五、总结

HTML是网页开发的基础语言，掌握HTML标签和语法是成为一名合格的前端开发工程师的必备技能。通过不断学习和实践，你可以逐渐掌握更多高级的HTML技巧和语义化标签，提升网页的可读性和用户体验。希望这篇HTML学习笔记能对你有所帮助！

六、示例


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简单网页示例</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的网页示例，展示了多种HTML元素。</p>
    <ul>
        <li><a href="https://www.example.com">访问示例网站</a></li>
        <li>这是一个<a href="#section2">内部链接</a></li>
    </ul>
    <img src="https://via.placeholder.com/150" alt="占位图片">
    <section id="section2">
        <h2>更多内容</h2>
        <p>这是网页的第二个部分。</p>
    </section>
</body>
</html>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
    <h1>用户注册</h1>
    <form action="/submit" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">电子邮件：</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
        <br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
</head>
<body>
    <h1>产品信息表</h1>
    <table border="1">
        <tr>
            <th>产品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
        <tr>
            <td>产品A</td>
            <td>￥100</td>
            <td>100件</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>￥200</td>
            <td>50件</td>
        </tr>
        <tr>
            <td>产品C</td>
            <td>￥300</td>
            <td>20件</td>
        </tr>
    </table>
</body>
</html>