文本类常用HTML代码
文本是网页最基础的内容载体，HTML提供了多种标签来处理不同语义的文本展示需求。最基础的段落标签<p>用来包裹大段正文内容，浏览器会自动给<p>标签添加上下外边距，让段落之间有明显分隔，比手动用<br>换行更符合语义化要求。标题标签从<h1>到<h6>一共6级，<h1>是页面最高级标题，一般只用在页面主标题位置，权重依次降低，<h6>通常是附属小标题，搜索引擎会根据标题层级判断内容重要性，所以不要为了字体大小随意使用高层级标题。
行内文本样式相关的标签也使用频率很高，<strong>标签表示重要文本，浏览器默认会加粗显示，同时会被屏幕阅读器识别为强调内容；<em>标签表示斜体强调，语义上侧重语气上的强调。如果只需要单纯改变样式而不需要语义，更推荐用CSS的font-weight或者font-style属性，但如果是要传递内容重要性，还是优先使用语义化标签。下面是一段文本类标签的示例代码：
<h1>页面主标题</h1> <h2>二级章节标题</h2> <p>这是一段正文内容，其中<strong>加粗的部分是重要内容</strong>，<em>斜体的部分是语气强调的内容</em>。</p> <p>另一个段落内容，段落之间会自动有间距。</p>
媒体与超链接类常用代码
网页中除了文本，图片、视频、音频等多媒体内容也是核心组成部分。图片标签<img>是空标签，不需要闭合标签，核心属性是src指定图片路径，alt属性指定图片无法加载时的替代文本，这个属性不仅对视觉障碍用户使用屏幕阅读器很重要，搜索引擎也会通过alt内容理解图片含义，是SEO优化的基础项。如果图片需要点击跳转，通常会把<img>放在<a>标签内部，<a>标签的href属性指定跳转链接，target="_blank"可以让链接在新窗口打开。
视频和音频的嵌入现在不需要依赖第三方插件，原生<video>和<audio>标签就能实现。<video>标签的src属性指定视频路径，controls属性会显示播放、暂停、音量调节等原生控制栏，width和height可以设置视频显示尺寸，如果不设置会用视频原始尺寸。<audio>标签用法类似，同样支持controls属性显示控制栏，loop属性可以让音频循环播放。下面是媒体类标签的示例代码：
<!-- 图片示例 --> <a href="https://ipipp.com/detail" target="_blank"> <img src="./banner.jpg" alt="网站活动宣传图"> </a> <!-- 视频示例 --> <video src="./intro.mp4" controls width="800" height="450"> 您的浏览器不支持video标签，请升级浏览器 </video> <!-- 音频示例 --> <audio src="./bgm.mp3" controls loop> 您的浏览器不支持audio标签，请升级浏览器 </audio>
表单与输入类常用代码
表单是网页实现用户交互的核心组件，所有用户输入、信息提交的功能都依赖表单相关标签实现。最外层的<form>标签用来包裹所有表单元素，action属性指定表单提交的后端接口地址，method属性指定提交方式，常用的是get和post两种，get会把参数拼在url后面，适合查询类请求，post会把参数放在请求体中，适合提交敏感数据或者大量数据。表单内部需要用<input>标签实现不同类型的输入项，type属性决定了输入项的类型，比如text是普通文本输入，password是密码输入，radio是单选框，checkbox是复选框。
除了<input>标签，<textarea>用来实现多行文本输入，比如评论框、留言框都会用到，rows和cols属性可以设置默认显示的行数和列数。<select>和<option>配合实现下拉选择框，<option>的value属性是提交到后端的值，标签内部的内容是用户看到的下拉选项文本。每个输入项通常都需要配合<label>标签使用，for属性绑定对应输入项的id，点击label文字就会自动聚焦到对应的输入项，提升用户体验。下面是表单类的示例代码：
<form action="https://ipipp.com/submit" method="post">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
</p>
<p>
<label for="hobby">爱好：</label>
<input type="checkbox" id="hobby" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
</p>
<p>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<p>
<label for="note">备注：</label>
<textarea id="note" name="note" rows="4" cols="50" placeholder="请输入备注信息"></textarea>
</p>
<p>
<input type="submit" value="提交信息">
</p>
</form>
布局与语义化结构类常用代码
早期的网页布局大多用<div>标签嵌套实现，现在更推荐使用语义化布局标签，让页面结构更清晰，也方便搜索引擎和辅助工具识别内容区域。<header>标签用来定义页面或者某个区域的头部，通常放导航、logo、搜索框等内容；<nav>标签专门用来放导航链接，比如顶部导航栏、侧边栏导航都可以用这个标签包裹；<main>标签是页面的主要内容区域，一个页面只能有一个<main>标签，所有核心内容都应该放在这个标签内部；<footer>标签是页面或者区域的底部，通常放版权信息、备案号、友情链接等内容。
除了上述结构标签，<section>标签用来划分页面的独立章节，每个section通常有自己独立的标题；<article>标签用来放独立的内容块，比如博客文章、新闻详情、用户评论等，这些内容即使脱离页面其他部分也能独立存在；<aside>标签用来放附属内容，比如侧边栏的广告、相关推荐、标签云等。这些语义化标签默认的样式和<div>没有区别，都需要配合CSS写样式，但语义上的优势是div无法替代的。下面是布局类的示例代码：
<header>
<h1>我的个人博客</h1>
<nav>
<a href="/">首页</a>
<a href="/archive">归档</a>
<a href="/about">关于我</a>
</nav>
</header>
<main>
<section>
<h2>最新文章</h2>
<article>
<h3>HTML入门指南</h3>
<p>这篇文章介绍了HTML的基础用法...</p>
</article>
<article>
<h3>CSS样式技巧</h3>
<p>这篇文章分享了常用的CSS布局技巧...</p>
</article>
</section>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="#">JavaScript基础</a></li>
<li><a href="#">前端工程化入门</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 个人博客 版权所有</p>
</footer>
上面这些代码覆盖了HTML日常开发90%以上的使用场景，新手可以先把这些代码片段记熟，在实际写页面的时候直接复用，遇到特殊需求再去查对应的标签属性即可。需要注意的是，HTML的标签属性值如果有空格或者特殊字符，建议用双引号包裹，避免出现解析错误，同时尽量优先使用语义化标签，减少无意义div的使用，这样写出来的页面结构更清晰，也更符合前端开发的规范。
另外在写HTML代码的时候，要注意标签的嵌套规则，比如<p>标签内部不能嵌套块级标签，<a>标签内部不能嵌套另一个<a>标签，这些嵌套错误可能会导致页面渲染出现异常。如果不确定某个标签能不能嵌套另一个标签，可以查看HTML的规范文档，或者直接在浏览器中测试渲染效果，长期的练习会让你逐渐形成正确的代码书写习惯。