【HTML学习笔记基础篇】
- 开源代码
- 2025-09-16 08:42:01
HTML学习笔记基础篇 一、HTML概述1.1 什么是HTML1.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=" .example " 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=" .example ">访问示例网站</a></li> <li>这是一个<a href="#section2">内部链接</a></li> </ul> <img src=" via.placeholder /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>【HTML学习笔记基础篇】由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【HTML学习笔记基础篇】”
下一篇
PageHelper新发现
![[深度学习]卷积神经网络的概念,入门构建(代码实例)](/0pic/pp_03.jpg)
