学习，永无止境！|
收藏闪存小组博问

韩熙隐ario

园龄：2年11个月粉丝：0关注：0

📂Java学习 / 前端基础
🔖HTML前端
2025-02-01 23:24阅读: 24评论: 0推荐: 0

HTML基础

学习资源

基本标签

  1. HTML 结构
    • 一个标准的 HTML 文档以<!DOCTYPE html>声明开头，它告诉浏览器使用的 HTML 版本，目前常用的是 HTML5 版本。
    • <html>标签是 HTML 文档的根标签，所有其他标签都包含在这个标签内部。在<html>标签内部，主要有<head>和<body>两个重要的子标签。
    • <head>标签用于存放文档的元信息，这些信息不会直接显示在网页的可视区域，但对网页的功能和显示效果起着关键作用。例如，<title>标签定义网页的标题，显示在浏览器的标题栏或标签页上；<meta>标签用于设置网页的字符编码（如<meta charset="UTF - 8">确保网页能正确显示各种字符）、描述网页内容（用于搜索引擎优化）等。
    • <body>标签包含了网页中所有可见的内容，如文本、图片、链接、表单等元素。任何想要在网页上展示给用户的信息，都要放在<body>标签内部。
  2. head 标签
    • 除了前面提到的<title>和<meta>标签，<head>标签内还可以包含样式表链接。通过<link>标签引入外部 CSS 样式表文件，例如<link rel="stylesheet" href="styles.css">，这样可以将网页的样式和结构分离，使代码更易于维护。
    • 还可以在<head>标签内引用 JavaScript 脚本文件，使用<script>标签，如<script src="script.js"></script>，让网页具备交互功能。如果 JavaScript 代码量较少，也可以直接写在<script>标签内部。
  3. body 标签
    • 在<body>标签内添加文本内容时，直接输入的文本会按照顺序显示，但没有明确的结构。为了使文本结构化，需要使用各种文本标签。例如，使用<p>标签将文本划分为段落，浏览器会自动在段落之间添加一定的空白间距，使文本排版更清晰。
    • 可以在<body>标签内插入图片，使用<img>标签，如<img src="image.jpg" alt="描述图片的文字">。这里的src属性指定图片的路径，alt属性用于在图片无法显示时，给用户提供图片内容的描述，这对视力障碍用户使用屏幕阅读器很重要，同时也有助于搜索引擎理解图片内容。
  4. HTML 注释
    • HTML 注释使用<!-- 注释内容 -->的语法。注释的内容不会在浏览器中显示，主要用于在代码中添加解释和说明，方便自己和其他开发者理解代码的功能和逻辑。
    • 在团队开发中，注释尤为重要。比如，在一段复杂的代码块前添加注释，说明这段代码的作用、实现思路以及可能的修改注意事项，能大大提高团队协作的效率。在后期维护代码时，也能通过注释快速了解代码的意图，减少维护成本。

文本

  1. 文本简介
    • 文本是网页内容的重要组成部分。在 HTML 中，通过各种文本标签对文本进行结构化和样式化处理，使文本更具可读性和表现力。不同的文本标签有不同的语义和显示效果，合理使用这些标签可以提升网页的质量。
  2. 标题标签
    • 标题标签有<h1> - <h6>六个等级。<h1>通常用于表示页面的主标题，字体最大且加粗，在一个页面中一般只使用一次，以突出页面的核心主题。例如，一个新闻页面的主标题可能使用<h1>标签。
    • <h2> - <h6>用于表示副标题或更低级别的标题，字体逐渐变小。<h2>可以作为章节标题，<h3>作为节标题，以此类推。合理使用标题标签不仅能使页面内容层次分明，还有助于搜索引擎优化，搜索引擎可以根据标题标签了解页面的结构和重点内容。
  3. 段落标签
    • <p>标签用于定义段落。在浏览器中，每个<p>标签包裹的文本会自成一段，段落之间会有一定的垂直间距。例如：
<p>这是第一段内容，在实际应用中，段落标签用于组织长篇文本，使文本结构更清晰，便于用户阅读。</p>
<p>这是第二段内容，可以看到两段之间有明显的间隔。</p>
  1. 文本标签
    • <strong>标签用于强调文本内容，通常会以加粗字体显示。例如，在一段产品介绍中，重要的产品特点可以用<strong>标签突出显示：“这款手机的拍照功能非常强大。”
    • <em>标签用于表示强调的语气，通常会以斜体字体显示。比如：“请务必仔细阅读使用说明书。”
    • <u>标签用于给文本添加下划线，但在现代网页设计中，一般不建议直接使用<u>标签来添加下划线，因为下划线在网页中常被用于表示链接，容易造成混淆。如需添加下划线效果，更多地通过 CSS 样式来实现。
  2. 水平线标签
    • <hr>标签用于在页面中插入一条水平线，它是一个自闭合标签。水平线可以用于分隔不同主题或内容板块，增强页面的层次感。例如，在文章的不同章节之间插入<hr>标签，能让读者更清晰地分辨不同部分的内容：
<p>这是上一部分的内容。</p>
<hr>
<p>这是下一部分的内容。</p>
  1. div 标签
    • <div>标签是一个通用的容器标签，没有特定的语义，主要用于组织和划分页面内容块。它是一个块级元素，会独占一行，并且可以设置宽度、高度、边距、内边距等 CSS 属性。
    • 例如，可以使用<div>标签将页面分为头部、导航栏、主体内容、侧边栏和底部等不同的区域，然后分别对这些<div>设置样式，实现复杂的页面布局。
<div id="header">这是页面头部</div>
<div id="nav">这是导航栏</div>
<div id="main">
    <p>这是主体内容</p>
</div>
<div id="sidebar">这是侧边栏</div>
<div id="footer">这是页面底部</div>
  1. 自闭合标签
    • 像<br>（换行）、<img>（图片）、<input>（输入框）等标签属于自闭合标签，也叫单标签。它们在标签内部通过/>闭合，不需要单独的结束标签。
    • <br>标签用于在文本中强制换行。例如，在一首诗的 HTML 代码中，可以使用<br>标签来保持诗歌的分行格式：
<p>床前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡</p>
  1. 块元素和行内元素
    • 块元素（如<div>、<p>、<h1> - <h6>等）的特点是独占一行，其宽度默认是父元素的宽度，可以设置宽度、高度、边距、内边距等属性。块元素常用于构建页面的大结构和布局。
    • 行内元素（如<span>、<a>、<strong>、<em>等）不会独占一行，多个行内元素可以在同一行显示，其宽度和高度由内容决定，并且不能直接设置宽度和高度属性，但可以设置内边距、外边距的左右值。行内元素常用于对文本中的部分内容进行样式或功能设置。
    • 例如，在一段文本中，使用<span>行内元素可以对部分文字设置特殊样式：
<p>这是一段包含 <span style="color:red;">红色文字</span> 的文本。</p>
  1. 特殊符号
    • 在 HTML 中，一些符号具有特殊含义，如小于号（<）和大于号（>），如果直接在文本中输入，可能会被误认为是标签的开始和结束标志。因此，需要使用特殊符号实体来表示这些特殊字符。
    • 例如，小于号用<表示，大于号用>表示，空格用 表示。如果要在网页中显示3 < 5，在 HTML 代码中应写成3 < 5。

列表

  1. 列表简介
    • 列表在网页中用于组织和展示相关信息，使内容更有条理。根据不同的需求，可以选择不同类型的列表，如有序列表用于展示有顺序要求的内容，无序列表用于展示无顺序关系的项目集合，定义列表用于展示术语及其解释。
  2. 有序列表
    • 使用<ol>标签创建有序列表，列表项使用<li>标签。浏览器会自动为每个<li>元素添加数字序号，从 1 开始。例如：
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
  • 通过设置<ol>标签的type属性，可以指定序号的样式，如type="A"表示使用大写字母作为序号，type="i"表示使用小写罗马数字作为序号。
  1. 无序列表
    • 无序列表使用<ul>标签创建，列表项同样使用<li>标签。无序列表的列表项前会显示项目符号，默认是圆点。例如：
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
  • 项目符号的样式可以通过 CSS 进行修改，如将项目符号改为方块、三角形等，或者完全去除项目符号。
  1. 定义列表
    • 定义列表由<dl>标签定义，包含<dt>（定义术语）和<dd>（定义术语的解释）标签。例如：
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页样式。</dd>
</dl>
  1. HTML 语义化
    • HTML 语义化是指使用具有明确语义的标签来编写代码，使代码结构更清晰，易于理解和维护。例如，使用列表标签（<ol>、<ul>、<dl>）来组织列表内容，而不是单纯依靠 CSS 样式来模拟列表效果。
    • 语义化的代码对搜索引擎优化（SEO）非常重要，搜索引擎可以更好地理解网页的内容结构，从而提高网页在搜索结果中的排名。同时，对于使用辅助技术（如屏幕阅读器）的用户来说，语义化的代码能让他们更方便地浏览网页。

表格

  1. 表格简介
    • 表格用于以表格形式展示数据，方便用户查看和比较信息。在 HTML 中，通过一系列的表格标签来创建和定义表格的结构和内容。
  2. 基本结构
    • 表格由<table>标签定义，表格的行使用<tr>标签，单元格使用<td>标签。一个简单的表格至少包含一个<tr>和一个<td>。例如：
<table>
    <tr>
        <td>第一列内容</td>
        <td>第二列内容</td>
    </tr>
</table>
  1. 完整结构
    • 除了基本的<table>、<tr>、<td>标签外，表格还可以包含<thead>（表头）、<tbody>（表体）、<tfoot>（表尾）等标签，使表格结构更清晰。
    • <thead>标签用于定义表格的表头部分，通常包含列名。<tbody>标签包含表格的主要数据内容，<tfoot>标签用于定义表格的表尾，一般用于显示汇总信息或版权声明等。例如：
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>女</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">数据统计日期：2024年1月1日</td>
        </tr>
    </tfoot>
</table>
  1. 表格语义化
    • 合理使用表格标签，准确表达数据关系，能提升表格在不同设备和辅助技术中的显示效果和可访问性。例如，使用<th>标签定义表头单元格，屏幕阅读器可以识别表头信息，帮助视力障碍用户更好地理解表格内容。同时，搜索引擎也能更好地解析语义化的表格数据，对网页的索引和排名产生积极影响。
  2. 合并行：rowspan
    • 在<td>标签中设置rowspan属性，可实现单元格跨行合并。该属性的值表示单元格要跨越的行数。例如：
<table>
    <tr>
        <td rowspan="2">合并的单元格</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第二列</td>
    </tr>
</table>
  • 在实际应用中，当某些数据在多行中具有相同的含义或属于同一类别时，就可以使用rowspan进行合并，使表格结构更紧凑、数据更清晰。
  1. 合并列：colspan
    • 通过在<td>标签中设置colspan属性，可使单元格跨列合并，属性值代表要跨越的列数。示例如下：
<table>
    <tr>
        <td colspan="2">合并的单元格</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
  • 比如在制作课程表时，如果某节课持续两节课时，就可以使用colspan合并相应的单元格。

图片

  1. 图片标签
    • <img>标签用于在网页中插入图片，是一个自闭合标签。通过src属性指定图片的路径，alt属性提供图片的替代文本。例如：
<img src="example.jpg" alt="示例图片">
  • alt属性非常重要，当图片由于某种原因（如路径错误、网络问题）无法显示时，浏览器会显示alt属性中的文本，帮助用户了解图片的大致内容。同时，搜索引擎也会根据alt文本对图片进行索引和分类。
  1. 图片路径
    • 图片路径分为相对路径和绝对路径。相对路径是相对于当前 HTML 文件的路径。如果图片和 HTML 文件在同一文件夹下，直接写图片文件名即可，如src="image.jpg"；若图片在 HTML 文件的子文件夹中，格式为src="folder/image.jpg"；若在上级文件夹，则使用src="../image.jpg"，其中..表示返回上一级目录。
    • 绝对路径是图片在计算机或服务器上的完整路径，例如src="C:/website/images/image.jpg"（Windows 系统）或src="/Users/username/website/images/image.jpg"（Mac 系统）。在网页开发中，使用绝对路径可能会导致在不同环境下图片无法正常显示，因此相对路径更为常用。
  2. 图片格式
    • 常见的图片格式有 JPEG、PNG、GIF 等。JPEG 格式适用于照片等色彩丰富的图像，它采用有损压缩算法，能在保证一定图像质量的前提下大幅减小文件大小，但压缩过度会导致图像质量下降。
    • PNG 格式支持透明背景，常用于图标、logo 等需要透明效果的图片。它采用无损压缩，文件大小相对较大，但能完美保留图像细节。
    • GIF 格式支持简单动画，通过将多帧图像合并成一个文件实现动态效果，但它的色彩数量有限，主要用于一些简单的动画图标或表情包。
  3. 本章练习
    • 在 HTML 页面中插入多张不同格式的图片，分别使用相对路径和绝对路径进行引用，观察路径变化对图片显示的影响。
    • 为每张图片设置合适的alt文本，并在图片无法显示时检查alt文本是否正确显示。
    • 根据图片内容和用途，选择最合适的图片格式，对比不同格式图片在文件大小和显示效果上的差异。

超链接

  1. 超链接简介
    • 超链接是网页的重要交互元素，它允许用户点击文本或图像，跳转到其他页面、同一页面的不同位置，甚至是其他资源（如文件、电子邮件地址）。超链接使网页之间相互关联，形成一个庞大的信息网络。
  2. 内部链接
    • 内部链接用于链接到同一网站内的其他页面。通过指定相对路径实现，例如，若网站结构中有一个about.html页面，在index.html中创建指向它的链接可以写成：
<a href="about.html">关于我们</a>
  • 这种链接方式方便用户在网站内进行导航，提升用户体验。在实际项目中，通常会将网站的导航菜单设置为内部链接，使用户能够轻松访问不同页面。
  1. 锚点链接
    • 锚点链接用于链接到当前页面或其他页面的特定位置。首先需要在目标位置使用<a>标签并设置id属性来创建锚点，例如：
<a id="section1">这是目标位置</a>
  • 然后在链接中通过#锚点名来引用该锚点，如在同一页面创建跳转到上述锚点的链接：
<a href="#section1">跳转到指定位置</a>
  • 如果要跳转到其他页面的锚点，则需要在链接中加上目标页面的路径，如href="otherpage.html#section1"。锚点链接常用于长页面的导航，用户可以快速定位到感兴趣的内容。

表单

  1. 表单简介
    • 表单用于收集用户输入的数据，是实现网页交互的重要手段。常见的应用场景包括用户注册、登录、搜索、问卷调查等。通过表单，网站可以获取用户的各种信息，如姓名、密码、电子邮件地址等。
  2. form 标签
    • <form>标签定义表单区域，它有两个重要属性：action和method。action属性指定表单数据提交的目标地址，通常是服务器端的一个脚本文件，如action="submit.php"，该脚本负责处理表单提交的数据。
    • method属性指定提交方式，常用的有GET和POST。GET方式会将表单数据附加在 URL 后面进行提交，数据可见且有长度限制，适合提交少量非敏感数据；POST方式则将数据放在 HTTP 请求的消息体中提交，数据不可见且没有长度限制，更适合提交大量或敏感数据，如用户密码。
  3. input 标签
    • <input>标签是表单中最常用的输入元素，通过type属性可以设置多种输入类型。
    • 当type="text"时，创建单行文本框，用于用户输入单行信息，如用户名、搜索关键词等。例如：
<input type="text" name="username" placeholder="请输入用户名">
  • type="password"时，创建密码文本框，输入的内容会以星号或黑点显示，保护用户密码安全，如：
<input type="password" name="password" placeholder="请输入密码">
  1. 单选框
    • type="radio"用于创建单选框，用户只能从多个选项中选择一个。为实现单选效果，多个单选框需具有相同的name属性，例如：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • 每个单选框的value属性用于在提交表单时传递给服务器，表示用户选择的值。
  1. 复选框
    • type="checkbox"用于创建复选框，允许用户从多个选项中选择多个。每个复选框有独立的name和value属性，如：
<input type="checkbox" name="hobbies" value="reading">阅读
<input type="checkbox" name="hobbies" value="traveling">旅行
  1. 按钮
    • 按钮类型有多种，type="button"创建普通按钮，通常需要配合 JavaScript 为其添加点击事件；type="submit"创建提交按钮，用于将表单数据提交到form标签action属性指定的地址；type="reset"创建重置按钮，点击后会清空表单中的所有输入内容。例如：
<input type="button" value="普通按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
  1. 文件上传
    • type="file"用于创建文件上传控件，用户可以选择本地文件上传到服务器。例如：
<input type="file" name="uploadFile">
  • 在实际应用中，文件上传功能通常需要服务器端的支持来处理上传的文件。
  1. 多行文本框
    • 使用<textarea>标签创建多行文本框，用户可以输入多行文本内容。通过rows和cols属性可以设置文本框的行数和列数，例如：
<textarea rows="5" cols="30">请在此处输入内容</textarea>
  1. 下拉列表
    • 由<select>和<option>标签组成。<select>定义下拉列表，<option>定义列表选项，用户可以选择一个选项。例如：
<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

框架

  1. iframe 标签
    • <iframe>用于在当前网页中嵌入另一个网页，通过src属性指定嵌入网页的地址。例如：
<iframe src="https://www.example.com" width="500" height="300"></iframe>
  • 可以通过设置width和height属性来调整嵌入网页的显示尺寸。此外，还可以使用frameborder属性设置边框（frameborder="0"表示无边框），scrolling属性设置是否显示滚动条（scrolling="no"表示不显示滚动条）。

本文作者：韩熙隐ario

本文链接：https://www.cnblogs.com/arioya/p/18696592

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   韩熙隐ario  阅读(24)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起