前端三大件--HTML
引言
在互联网的世界里，每一个绚丽多彩的网页背后，都离不开 HTML 的支撑。HTML（Hyper Text Markup Language，超文本标记语言）作为网页开发的基础语言，就像是搭建高楼大厦的砖块，是所有 Web 开发者必须掌握的核心技能。本文将结合详细的知识点和丰富的示例，带您深入了解 HTML 的奥秘，助力您开启网页开发之旅。
一、HTML 概述
HTML 本质上是一种标记语言，它通过一系列标签（Tags）来描述网页的结构和内容。这些标签就像特殊的指令，告诉浏览器如何展示文本、图片、链接、表格等各种元素，从而将分散在网络上的文档格式统一，将 Internet 资源连接成一个逻辑整体。简单来说，HTML 负责提供网页的内容骨架，而后续的 CSS（层叠样式表）和 JavaScript 则分别用于美化页面和赋予页面交互功能。
二、HTML 标签基础
2.1 标签基本结构
HTML 标签通常由开始标签 这是一段段落内容<标签名称>、结束标签和其中包含的内容组成。例如：<标签名称/> 。
2.2 网页骨架标签
一个标准的 HTML 网页骨架由以下标签构成：
标题
核心内容
：整个 HTML 文档的根标签，包裹了网页的所有内容。：包含了网页的元数据，如字符编码（指定页面字符编码，避免乱码）、页面标题</code>等，这些信息不会直接显示在页面中，但对网页的正确解析和搜索引擎优化等有重要作用。</li> <li><code><body></code>：网页的主体部分，我们在浏览器中看到的实际内容，如文字、图片、链接等，都写在这个标签内。</li> </ul> <h3>三、常用基础标签</h3> <h4>3.1 标题标签</h4> <p>标题标签用于定义网页中的各级标题，从<code><h1></code>到<code><h6></code>，重要性依次递减，字号也逐渐变小。例如：</p> <pre><code><h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> </code></pre> <p>合理使用标题标签不仅能让网页内容结构清晰，还对搜索引擎优化（SEO）有积极作用。</p> <h4>3.2 横线与换行标签</h4> <ul> <li><code><hr></code>：用于在页面中插入一条水平线，起到分隔内容的作用，例如：<code><hr></code>。</li> <li><code><br></code>：用于强制换行，当需要在文本中换行显示时使用，如：<code>这是第一行<br>这是第二行</code> 。</li> </ul> <h4>3.3 字体标签（已不推荐，推荐使用 CSS）</h4> <p>虽然现在更推荐使用 CSS 来设置字体样式，但早期的<code><font></code>标签也能实现字体颜色和大小的调整，例如：</p> <pre><code><font color="#7fffd4" size="+4">我是字体标签</font> </code></pre> <p>不过，随着 Web 标准的发展，使用 CSS（如<code>style</code>属性或外部样式表）来控制字体样式更加灵活和规范。</p> <h4>3.4 链接标签</h4> <p>链接标签<code><a></code>用于创建超链接，让用户可以从一个页面跳转到另一个页面。常见属性如下：</p> <ul> <li><code>href</code>：指定链接的目标地址，例如：<code><a href="https://www.baidu.com">百度</a></code> 。</li> <li><code>target</code>：指定链接的打开方式： <ul> <li><code>_blank</code>：在新的浏览器选项卡中打开链接。</li> <li><code>_self</code>：在当前窗口中打开链接（默认值）。</li> <li><code>_parent</code>：在父框架中打开链接（用于框架结构的网页）。</li> <li><code>_top</code>：在整个窗口中打开链接，会取消所有框架结构。</li> </ul> </li> </ul> <h4>3.5 列表标签</h4> <ul> <li><strong>无序列表<code><ul></code></strong>：用于创建无顺序的列表，每个列表项用<code><li></code>标签表示，例如：</li> </ul> <pre><code><ul> <li>用户管理</li> <li>用户姓名</li> <li>用户年龄</li> <li>用户性别</li> </ul> </code></pre> <ul> <li><strong>有序列表<code><ol></code></strong>：用于创建有顺序的列表，同样每个列表项用<code><li></code>标签，例如：</li> </ul> <pre><code><ol> <li>用户1</li> <li>用户2</li> <li>用户3</li> <li>用户4</li> </ol> </code></pre> <h4>3.6 图片与视频标签</h4> <ul> <li><strong>图片标签<code><img></code></strong>：用于在网页中插入图片，关键属性<code>src</code>指定图片的路径（可以是本地路径或网络路径），<code>width</code>和<code>height</code>用于设置图片的宽度和高度（单位通常为像素<code>px</code>），例如：</li> </ul> <pre><code><img src="https://img1.baidu.com/it/u=1557466037,285199853&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1420" width="100px" height="100px"> </code></pre> <ul> <li><strong>视频标签<code><video></code></strong>：用于在网页中嵌入视频，<code>width</code>和<code>height</code>设置视频尺寸，<code>controls</code>属性显示视频播放控制条，<code><source></code>标签用于指定不同格式的视频源，以兼容不同浏览器，例如：</li> </ul> <pre><code><video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </code></pre> <h4>3.7 滚动与段落标签</h4> <ul> <li><strong>滚动标签<code><marquee></code></strong>：可使内容在页面中滚动显示（该标签已逐渐被 CSS 动画替代，但在一些简单场景仍可使用），例如：<code><marquee direction="left">我是滚动标签</marquee></code> 。</li> <li><strong>段落标签<code><p></code></strong>：用于定义一个段落，将文本内容进行分段展示，例如：<code><p>这是一个段落内容</p></code> 。</li> </ul> <h3>四、表格标签</h3> <p>表格标签<code><table></code>用于创建表格，通过以下属性来设置表格的样式和结构：</p> <ul> <li><code>border</code>：设置表格边框的宽度（单位为像素<code>px</code>）。</li> <li><code>cellspacing</code>：设置单元格之间的间距。</li> <li><code>width</code>和<code>height</code>：设置表格的宽度和高度。</li> </ul> <p>表格由行标签<code><tr></code>和单元格标签<code><td></code>组成，还可以使用<code><th></code>定义表头单元格，例如：</p> <pre><code><table border="1px" cellspacing="0" width="500px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </code></pre> <p>此外，还可以通过<code>colspan</code>属性实现单元格跨列合并，<code>rowspan</code>属性实现单元格跨行合并，如：</p> <pre><code><table border="1px" cellspacing="0" width="500px"> <tr> <td colspan="2" >1</td> <td rowspan="2">3</td> </tr> <tr> <td rowspan="2">4</td> <td>5</td> </tr> <tr> <td colspan="2">8</td> </tr> </table > </code></pre> <h3>五、表单标签</h3> <p>表单标签<code><form></code>用于收集用户输入的数据，并将其提交到服务器。<code><form></code>标签的重要属性：</p> <ul> <li><code>action</code>：指定数据提交的后端路径。</li> <li><code>method</code>：指定提交数据的请求方法，常用<code>get</code>和<code>post</code> 。</li> </ul> <p>表单内包含多种输入控件，如：</p> <ul> <li><strong><code><input></code></strong>：根据<code>type</code>属性的不同有多种类型： <ul> <li><code>text</code>：文本输入框。</li> <li><code>password</code>：密码输入框（输入内容会被隐藏）。</li> <li><code>number</code>：数字类型输入框。</li> <li><code>date</code>：日期选择框。</li> <li><code>checkbox</code>：复选框，可多选。</li> <li><code>radio</code>：单选框（同一组单选框需设置相同的<code>name</code>属性）。</li> <li><code>file</code>：文件上传框。</li> <li><code>button</code>：普通按钮（需配合 JavaScript 实现功能）。</li> <li><code>submit</code>：提交按钮，点击后会将表单数据提交到<code>action</code>指定的路径。</li> <li><code>reset</code>：重置按钮，点击后会清空表单内的所有输入内容。</li> <li><code>email</code>：邮箱输入框（浏览器会自动验证输入格式）。</li> <li><code>hidden</code>：隐藏域，用于存储一些不需要用户看到但需要提交的数据。</li> </ul> </li> <li><strong><code><select></code></strong>：下拉框，通过<code><option></code>标签定义下拉选项。</li> <li><strong><code><textarea></code></strong>：多行文本输入框，用于输入较长的文本内容，通过<code>rows</code>和<code>cols</code>属性设置行数和列数。</li> </ul> <p>示例表单：</p> <pre><code><form action="login" method="get"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> 年龄：<input type="number" name="age"><br> 年龄：<input type="date"><br> 年龄：<input type="datetime-local"><br> 性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女 <br> 性别：<select name="gender" > <option value="3">=======请选择=======</option> <option value="0">男</option> <option value="1">男</option> </select> <br> 兴趣爱好：<input type="checkbox" name="like" value="lanqiu">篮球 <input type="checkbox" name="like" value="yumaoqiu">羽毛球 <input type="checkbox" name="like" value="zuqiu">足球 <br> 头像： <input type="file" name="touxiang"> <br> <input type="button" value="没有功能的按钮"> <br> 邮箱：<input type="email"> <br> 简介：<textarea rows="5" cols="20"></textarea> <br> <input type="submit" value="提交"> <br> <input type="reset"> <br> <input type="color"> <input type="hidden" name="id" value="12345"> </form> </code></pre> <h3>六、布局标签（框架布局，已较少使用）</h3> <p>早期的 HTML 使用<code><frameset></code>和<code><frame></code>标签进行网页框架布局，将页面划分为多个区域，每个区域显示不同的 HTML 页面。例如：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title 但随着响应式设计和 CSS 布局技术（如 Flexbox、Grid）的发展，框架布局已逐渐被淘汰，如今更推荐使用 CSS 来实现灵活且美观的网页布局。
总结
HTML 作为网页开发的基础，掌握其各种标签和语法规则是构建网页的第一步。通过本文对 HTML 概述、基础标签、表格、表单以及布局等内容的详细讲解，相信您对 HTML 有了更全面的认识。在实际开发中，还需不断练习和探索，结合 CSS 和 JavaScript，创造出功能强大、界面美观的网页。后续我们将继续深入学习 CSS 和 JavaScript 相关知识，进一步提升网页开发技能。