前端之标签第一天-前端-CSS教程

前端静态网页是网站开发中的一种基本形式，它是指那些内容在服务器端生成后不再变动、用户访问时直接返回固定html文件的网页。静态网页的特点和开发主要包括以下方面：

1. 内容不变性：

静态网页的内容在被创建之后即固定下来，不会随着用户的操作或不同时间点而改变。这意味着每个用户看到的内容都是相同的，且不依赖于数据库查询或其他动态数据源。

2. 技术栈：

- HTML (HyperText Markup Language)：

用于构建网页结构和内容，定义文档的各个部分如标题、段落、链接、图像等。

- CSS (Cascading Style Sheets)：

负责网页的样式设计，包括颜色、字体、布局、响应式设计等方面，使网页具有良好的视觉表现和用户体验。

- JavaScript

（可选）：虽然静态网页的主要内容不变化，但仍然可以使用JavaScript来实现客户端交互效果，比如表单验证、图片轮播、简单动画等。

3. 制作流程：

- 设计阶段：

通常会根据UI设计师提供的设计稿（例如PSD文件）进行布局规划。

- 切图与资源准备：

将设计稿切割成需要的图片资源，并优化尺寸和格式。

- 编码阶段：

使用HTML编写页面结构，CSS控制页面样式，如有必要，使用JavaScript增强交互功能。
- 测试与发布：

完成编码后，通过浏览器测试页面在不同设备和屏幕尺寸下的显示效果，并上传至服务器供用户访问。

4. 优点：

- 加载速度快：

因为无需服务器端处理，可以直接从服务器读取并发送给客户端，加载速度相比动态网页更快。

- 服务器负载低：

不需要运行复杂的脚本或者数据库查询，对服务器性能要求较低。

- 安全性相对较高：

不存在动态网页常见的SQL注入、跨站脚本攻击等问题。

5. 缺点：

- 内容更新繁琐：

每次内容修改都需要重新编辑HTML文件并上传到服务器。

- 不适合大型站点或频繁更新内容的场景：

静态网页的技术

对于博客、新闻类网站等需要实时更新信息的场景，静态网页的维护成本高。

总的来说，静态网页在简单的个人主页、展示型网站以及一些对SEO友好度要求高的场合较为常用。随着现代Web技术的发展，虽然动态网页应用更为广泛，但静态网页仍有着其不可替代的应用场景，尤其是结合静态站点生成器（SSG）可以生成预渲染的静态页面，既能保持加载速度优势，又能实现一定的动态特性。

静态网页（Static Web Page）是由HTML、CSS和JavaScript等技术编写的网页，这些页面的特点是内容固定不变，用户访问时服务器直接返回预设的文件，不涉及服务器端的数据处理或动态生成内容。

1. HTML (HyperText Markup Language)：

HTML是构成网页的基础标记语言，它定义了网页的结构和内容。HTML文档包含了文本、图像、链接、表格等各种元素，并通过标签（tags）来描述各个部分的功能和关系。

2. CSS (Cascading Style Sheets)：

CSS负责网页的样式设计，如字体、颜色、布局等视觉表现形式。通过CSS可以将网页的内容与样式分离，提高代码可读性和维护性。开发者可以通过CSS为HTML元素指定样式规则，使得网页具有统一且美观的外观。

3. JavaScript：

虽然静态网页本身不包含动态数据交互，但现代静态网页往往也会使用JavaScript进行客户端交互增强。JavaScript是一种脚本语言，可以在浏览器中运行，实现页面加载后的行为响应、表单验证、UI动态效果等功能。

4. 其他辅助技术：

- 图像（Images）：包括JPEG、PNG、SVG等格式的图片资源。
- 字体（Web Fonts）：例如通过`@font-face`引入自定义网络字体。
- favicon.ico：网站图标，显示在浏览器标签页上。
- 等等

总结来说，一个静态网页主要由HTML编写结构和内容，CSS控制样式，JavaScript（可选）添加交互性功能。用户每次请求时获取到的是预先制作好的相同内容，而不是根据用户的特定操作或者服务器状态动态生成的结果。随着前端框架的发展，如今也有越来越多基于JavaScript的静态站点生成器（SSG, Static Site Generator），它们可以从Markdown或其他源文件生成静态HTML网页，这些网页同样可以具有复杂的布局和交互特性，但在部署时已经是预渲染好的静态文件。

接下来，我们详细的介绍一下HTML标签

⚠️：HTML的文档的后缀名是html

1.标题标签

HTML中的标题标签用于定义文档的各级标题，共有六级，从<h1>到<h6>，其中<h1>是最重要的（最大的）标题，而<h6>是最不重要的（最小的）标题。这些标题标签不仅影响视觉呈现，还对网页内容结构和SEO（搜索引擎优化）有着重要作用。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>

    <!-- 一级标题 -->
    <h1>这是最重要的标题 - 主页标题</h1>

    <!-- 二级标题 -->
    <h2>这是次要标题 - 章节标题</h2>

    <!-- 其他级别的标题 -->
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题 - 最小的标题</h6>

</body>
</html>

通常建议每个页面只使用一个 <h1> 标签来表示页面的主要主题或标题，并根据需要合理使用其他级别标题以组织内容层次结构。搜索引擎爬虫会利用这些标题来理解网页的内容结构，因此合理的标题设置有助于提高网站的搜索排名。

2.段落标签

<p>标签在HTML（HyperText Markup Language）中代表段落元素，它用于定义文档中的文本段落。当浏览器解析HTML文档时，遇到<p>标签会为其中的文本内容创建一个新的视觉段落。

使用示例：

<p>这是一个段落。在这里可以输入任何想要展示给用户的一段文字内容。</p>

特性与作用：

默认样式：在没有CSS（Cascading Style Sheets）的情况下，浏览器会给<p>标签内的文本应用一个标准的段落间距和行距，使其在视觉上与其他段落区分。
结构化内容：<p>标签有助于网页内容的语义化和结构化，使开发者能够清晰地划分不同文本块，同时也有利于搜索引擎理解和抓取网页内容。
内联元素限制：<p>标签是一个块级元素（block-level element），它不能直接包含其他块级元素，但可以包含多个内联元素（inline elements），如<a>、<span>等。
换行规则：每个<p>标签都表示一个新的段落，因此浏览器会在相邻两个<p>标签之间自动插入一个换行符。
可样式化：通过CSS，开发者可以对<p>标签应用各种样式，包括但不限于字体大小、颜色、背景色、边距、填充等属性，以满足页面设计的需求。

正确且合理地使用<p>标签可以帮助构建具有良好可读性和易维护性的网页内容结构。

3.链接标签

HTML中的<a>标签（Anchor）用于创建超链接，它允许用户点击后跳转到另一个网页、同一页面内的锚点或其他资源，如电子邮件地址、文件下载等。以下是<a>标签的基本用法和属性：

<a href="url" target="_blank|_self|_parent|_top" rel="noopener noreferrer" download>
    可点击的文本或图像内容
</a>

href 属性：这是必需的属性，定义了链接的目标地址。它可以是一个完整的URL，也可以是同一个页面内的锚点（通过在href中指定锚点ID实现）。

<!-- 跳转到另一个网页 -->
<a href="https://www.baidu.***">访问示例网站</a>

<!-- 跳转到页面内的锚点 -->
<a href="#section1">跳转至第1节</a>
...
<div id="section1">这里是第1节的内容</div>

target 属性：可选，决定链接在何处打开。
- _self（默认）：在同一窗口或标签页中打开链接。
- _blank：在新窗口或标签页中打开链接。
- _parent：在当前框架集的父框架集中打开链接。
- _top：在整个浏览器窗口中打开链接，取消所有包含该链接的框架。
rel 属性：提供与目标链接之间的关系信息，例如 noopener noreferrer 可以防止新窗口覆盖当前窗口的导航历史记录，并阻止恶意脚本获取对原始窗口的引用。
download 属性：如果设置此属性，则表示链接指向的资源应该被下载而不是显示在浏览器中。
其他可能的属性：
- title：为链接添加提示文本，在鼠标悬停时显示。
- class、id：用于CSS样式选择器或JavaScript操作。
- style：直接在元素上应用内联样式。

举例说明一个完整且常见的<a>标签实例：

<a href="https://www.example.***" target="_blank" title="点击打开示例网站">
    访问示例网站
</a>

HTML锚点（Anchor）允许在同一页面内部进行跳转，通过给目标元素设置ID属性，并在链接中使用该ID作为href值的片段标识符。以下是一个HTML锚点示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点示例</title>
    <style>
        /* 仅为演示效果，设置每个section的高度和滚动条 */
        section {
            height: 400px;
            overflow-y: auto;
            border: 1px solid #***c;
            padding: 20px;
        }
    </style>
</head>
<body>

<h1>页面内容导航</h1>
<ul>
    <li><a href="#section1">跳转到第1节</a></li>
    <li><a href="#section2">跳转到第2节</a></li>
    <li><a href="#section3">跳转到第3节</a></li>
</ul>

<!-- 定义带有锚点的目标区域 -->
<section id="section1">
    <h2>第1节标题</h2>
    <p>这里是第1节的内容，可能很长...</p>
</section>

<section id="section2">
    <h2>第2节标题</h2>
    <p>这里是第2节的内容，也可能很长...</p>
</section>

<section id="section3">
    <h2>第3节标题</h2>
    <p>这里是第3节的内容，同样可能很长...</p>
</section>

</body>
</html>

在这个示例中，当用户点击导航列表中的一个链接时，浏览器会滚动到具有对应ID属性的<section>元素位置。

4.<hr> 标签

在 HTML 页面中创建水平线。

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

`5.<br>`标签

是HTML（HyperText Markup Language）中的一个单标签元素，全称为“line break”，即换行符。它的主要功能是在网页中插入一个软换行，使得文本内容在显示时能在指定位置进行换行。

使用示例：

<p>这是第一行文本内容<br>这是第二行文本内容</p>

在这个例子中，当浏览器解析并渲染这段HTML代码时，"这是第一行文本内容"与"这是第二行文本内容"之间会有一个换行，它们分别位于两行独立的行上展示。

注意，<br>标签是一个自闭合标签，不需要成对出现，直接写入即可。它通常用于文本内容中需要手动换行但又不属于新段落的情况，比如地址、诗歌、邮箱签名等。而在HTML中创建新段落则应使用<p>标签。

6.b标签和i标签

`<b>`和`<i>`是HTML中用于文本样式的标签，但它们在不同的HTML版本中有不同的语义含义：

1. `<b>`标签：

- 在早期的HTML（如HTML4）中，`<b>`标签（bold）主要用来表示文本加粗样式，不承载特殊的语义意义，纯粹是为了视觉上的强调。
- 到了HTML5，`<b>`标签被重新定义为一种“本义强调”（stylistic emphasis），它用来表示文本中的某个部分需要在语气或表现上有所突出，而不一定是重要的内容。例如，它可以用来标记产品名称、品牌名或者用户搜索关键词等。

2. `<i>`标签：

- 在HTML4及以前，`<i>`标签（italic）主要用于呈现斜体文本，同样没有明确的语义信息，通常用于引文、外来词、技术术语或生物学名等的排版。
- 在HTML5规范中，`<i>`标签被赋予了新的语义，即表示一个不同于普通文本的语音或样式变异，可以用来表示外语短语、专业术语、变量名、想象内容、诗歌引用等内容，或者是具有特殊语境下的文字。

尽管如此，在现代网页设计与开发中，为了更好的语义化和无障碍访问支持，推荐使用更具有语义化的标签来替代 `<b>` 和 `<i>` 标签：
- 若要强调重要性，请使用 `<strong>` 标签代替 `<b>`。
- 若要表示语气上的强调或着重，请使用 `<em>` 标签代替 `<i>`。

同时，根据实际应用场景，可能还有其他更适合的语义标签，例如 `<cite>` 用于引用作品标题，`<dfn>` 用于定义术语等。

运行结果是：

7. `<code>` 标签：

- `<code>` 是HTML中用于表示计算机代码片段或编程语法的标签。它将文本内容以等宽字体显示，通常为单色、无衬线字体，这样有助于区分普通文本与代码样式的文本。

示例：

8.`<sub>` 和 `<sup>` 标签：

- `<sub>`（Subscript）：此标签用于创建下标文本，即位于当前行文字底部的小号字符，常用于化学式、数学公式和脚注等场景。

- `<sup>`（Superscript）：此标签用于创建上标文本，即位于当前行文字顶部的小号字符，常见于指数、平方根符号、引用文献编号等。

这两个标签都是行内元素，并且它们的内容通常比周围文本小一些，位置根据标签类型分别位于文本的上部或下部。

示例：

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

接下来，介绍一下字体标签

9.img标签

`<img>`标签在HTML中用于向网页中插入图像。这是一个自闭合（self-closing）的元素，意味着它不需要结束标签。

基本语法结构如下：

<img src="image-source.jpg" alt="Alternative text" width="width-value" height="height-value" />

各个属性说明：

- **src** (必需)：指定了图片文件的URL或路径。例如，`src="images/picture.jpg"` 就表示图片源位于当前目录下的“images”子目录中的“picture.jpg”文件。

- **alt** (推荐使用)：提供了图像的替代文本描述，当图像无法加载或用户禁用了图片显示时，浏览器会显示这个文本内容。此外，这对于辅助技术（如屏幕阅读器）和SEO优化也是至关重要的。

- **width** 和 **height** (可选)：分别定义了图片的宽度和高度，单位通常是像素。设置这些属性可以帮助浏览器预先预留出正确的位置来放置图片，并且可以提高页面加载速度，因为浏览器可以在图片加载前就开始渲染布局。

其他可能用到的属性还包括：

- **title**：为图片提供额外的提示信息，鼠标悬停在图片上时通常会显示。
- **loading** (HTML5 新特性)：控制图片的加载策略，例如 `loading="lazy"` 表示延迟加载，只有当图片即将进入视口时才开始加载。

需要注意的是，为了保证网页内容的可访问性和搜索引擎友好性，应当始终为 `<img>` 标签提供有意义的 `alt` 属性值。

10.HTML表格

HTML表格由一系列标签构成，主要用于在网页上展示和组织结构化的数据。以下是一些关键的HTML表格标签及其功能：

<table> 标签：定义整个表格，是所有表格内容的容器。
```
<table>
  
</table>
```

<thead> 标签：用于定义表格的头部（表头行），通常包含列标题。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <!-- 更多列标题 -->
    </tr>
  </thead>
</table>

<tbody> 标签：用于定义表格的主体部分，包含了表格的主要数据行

<table>
  <tbody>
    <tr>
      <td>单元格数据1</td>
      <td>单元格数据2</td>
      <!-- 更多单元格 -->
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

<tfoot> 标签：用于定义表格的页脚部分，通常包含总结或计算结果等信息。

<table>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>计算结果</td>
    </tr>
  </tfoot>
</table>

<tr> 标签：定义表格中的行（Row）。
<th> 标签：定义表格中的表头单元格，通常具有粗体和居中对齐的效果，用于显示列标题。
<td> 标签：定义表格中的标准单元格（Data Cell），用来存放表格的具体数据。
边框属性：border 属性可以设置表格边框的宽度，默认情况下HTML表格没有边框，需要通过CSS样式来添加边框样式。
合并单元格：
- colspan 属性允许一个单元格跨越多个列。
- rowspan 属性允许一个单元格跨越多个行。

例如：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td rowspan="2">30</td> <!-- 这个单元格跨两行 -->
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>广州</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总人数</td> <!-- 这个单元格跨两列 -->
      <td>3人</td>
    </tr>
  </tfoot>
</table>

以上是一个基本的HTML表格结构示例，实际上还可以结合CSS进行复杂的样式定制和交互处理。

12.HTML 列表标签

HTML 中有三种主要类型的列表标签，它们分别是无序列表（Unordered Lists）、有序列表（Ordered Lists）和定义列表（Definition Lists）。每种列表类型都有其特定的用途和结构。

1. **无序列表 (Unordered Lists)**：
使用 `<ul>` 标签创建一个无序列表，其中的每个列表项由 `<li>`（list item）标签表示。浏览器通常会为无序列表项显示点状、圆点或实心方块等项目符号。

   <ul>
     <li>列表项 1</li>
     <li>列表项 2</li>
     <li>列表项 3</li>
   </ul>

2. **有序列表 (Ordered Lists)**：
使用 `<ol>` 标签创建一个有序列表，同样使用 `<li>` 标签定义列表项，但浏览器会自动为每个列表项添加一个编号（默认从1开始递增）。

   <ol>
     <li>第一项</li>
     <li>第二项</li>
     <li>第三项</li>
   </ol>

3. **定义列表 (Definition Lists)**：
定义列表用于展示术语及其定义，它包含两个部分：术语（术语名）和描述（术语解释）。术语用 `<dt>`（definition term）标签定义，描述则用 `<dd>`（definition description）标签定义。

  <dl>
     <dt>术语 1</dt>
     <dd>这是术语 1 的详细描述。</dd>
     
     <dt>术语 2</dt>
     <dd>这是术语 2 的详细描述。</dd>
   </dl>

这些列表标签在网页中常用于组织内容、展示项目清单、步骤说明、术语解释等多种场景。

以上介绍了常用的大部分标签，剩下的标签我在下一篇介绍链接：

点击跳转

感谢支持，请各位美女点赞

前端笔记开发语言 html5 html 学习

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端之标签第一天

哈哈哈

分享到：

前端静态网页是网站开发中的一种基本形式，它是指那些内容在服务器端生成后不再变动、用户访问时直接返回固定html文件的网页。静态网页的特点和开发主要包括以下方面：

1. **内容不变性**：

2. **技术栈**：

- **HTML (HyperText Markup Language)**：

- **CSS (Cascading Style Sheets)**：

- **JavaScript**

3. **制作流程**：