Bootstrap

HTML基础知识及实践入门讲义

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：HTML是构建网页的基础语言，本讲义旨在为初学者提供HTML的基础知识与实践指南。内容包含HTML基本结构、元素和属性、表格和列表的使用、样式的内联与外部控制、布局和响应式设计原理、表单元素的介绍，以及使用Adobe Dreamweaver进行页面创建、编辑和响应式设计的方法。实践部分包含创建静态网页的实例，帮助学习者巩固所学知识。

1. HTML基础语法与结构

HTML是构建互联网世界的基础语言，它规定了网页内容的组织方式和结构。在本章中，我们将探索HTML的基本语法和结构，这将为后续章节中对网页内容和样式的详细处理打下坚实的基础。

HTML文档结构

首先，HTML文档具有一致的结构，通常包含一个 <!DOCTYPE html> 声明，紧接着是 <html> 根元素。在这个根元素内部，包含 <head> 和 <body> 两个主要部分： 

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

<head> 部分主要用于存放网页元数据，例如字符编码声明、网页标题、样式表链接和脚本引用等。而 <body> 部分则是展示给用户看的内容主体，包含所有可见的网页元素。

HTML元素和标签

HTML文档由一系列的元素组成，这些元素通过标签进行标记。HTML标签告诉浏览器如何显示元素内容。 

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

在上面的例子中， <p> 是开始标签， </p> 是结束标签，两者之间的内容将被浏览器识别为一个段落。

HTML注释

为了提高代码的可读性和便于团队协作，可以在HTML代码中添加注释。注释对用户不可见，浏览器在渲染网页时会忽略它们。 

<!-- 这是一个HTML注释 -->

通过本章的学习，你应该能理解并运用HTML的基础语法和结构创建一个基本的网页。随着学习的深入，我们将会在这个基础上，逐步添加样式和功能，使网页变得更加丰富和动态。

2. 标签和属性的应用

2.1 常用HTML标签的介绍与应用

2.1.1 文本标签：段落、标题、强调标签等

文本标签是构成网页内容的基石，它们包括但不限于段落、标题、强调等标签。这些标签不仅定义了文本的结构，还提供了语义上的帮助。

  • <p> ：段落标签，用于包裹一个独立的段落，浏览器会自动在其前后添加空行。
  • <h1> 到 <h6> ：标题标签， <h1> 代表最高级别标题， <h6> 代表最低级别标题，它们帮助定义文档的层级结构。
  • <strong> 和 <em> ：强调标签，其中 <strong> 用来表示内容的重要性较高，通常会被浏览器加粗显示；而 <em> 用于表示文本的强调语气，通常会被浏览器以斜体显示。 
<h1>这是一个主标题</h1>
<h2>这是一个二级标题</h2>
<p>这是一个段落。</p>
<p><strong>这个文本很重要</strong>，请特别关注。</p>
<p><em>请注意这个强调的文本。</em></p>

2.1.2 链接和图片标签：创建超链接和图像展示

链接和图片标签是网页中不可或缺的元素，它们为网页添加了超链接和图像展示的功能，使网页具有更丰富的交互性和视觉效果。

  • <a> ：锚（anchor）标签用于创建超链接， href 属性定义链接的目标地址。
  • <img> ：图像标签用于在网页中嵌入图片， src 属性指定图片的路径， alt 属性提供图片的文本替代描述。 
<!-- 链接标签的例子 -->
<a href="https://example.com">访问示例网站</a>

<!-- 图片标签的例子 -->
<img src="image.jpg" alt="示例图片描述">

2.1.3 表单标签：构建表单元素和交互界面

表单标签用于创建交互式的表单，使得用户可以通过表单向服务器提交数据。

  • <form> ：表单标签，它定义了表单的边界，包含表单元素。
  • <input> ：输入标签，用于创建各种表单控件，如文本框、密码框、单选按钮等。
  • <label> ：标签标签，用于定义输入控件的标注，与输入控件关联后，点击标签即可激活相应的控件。
  • <button> ：按钮标签，用于创建提交、重置或自定义的按钮。 
<form action="/submit-form" 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>

2.1.4 列表标签：有序列表和无序列表

列表标签用于展示有序或无序的列表，它们不仅能够清晰地展示信息，而且对搜索引擎优化（SEO）有积极作用。

  • <ol> ：有序列表，使用数字进行编号。
  • <ul> ：无序列表，使用项目符号或圆点进行标记。
  • <li> ：列表项，是 <ol> 和 <ul> 的子元素，每个列表项包含一个列表项目。 
<!-- 无序列表 -->
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

2.1.5 其他重要标签

在HTML中，还有其他一些标签虽然使用频率不高，但它们对于文档结构和可访问性都有着重要的作用。

  • <header> ：用于定义内容的头部区域，可包含导航链接、搜索框、作者信息等。
  • <footer> ：表示内容的尾部区域，常见的内容包括版权信息、联系信息等。
  • <nav> ：用于包含导航链接的部分，有助于定义文档的主要导航部分。
  • <section> ：代表文档中的一个独立区域，如章、节等。
  • <article> ：用于定义独立的、可独立分配或重复的内容区域，例如博客文章。
  • <aside> ：定义与页面其他内容间接相关的部分，比如侧边栏。 
<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>

<article>
  <h2>文章标题</h2>
  <p>这里是文章内容...</p>
</article>

<aside>
  <h3>侧边栏标题</h3>
  <p>这里是侧边栏内容...</p>
</aside>

<footer>
  <p>版权所有 © 公司名</p>
</footer>

2.2 HTML属性的作用与实践

2.2.1 全局属性：id、class、style等

全局属性对所有的HTML元素都有效，它们提供了元素更多元化的设置选项。

  • id ：标识符属性，用于为元素指定唯一的标识符，常用于CSS样式和JavaScript脚本。
  • class ：类别属性，用于为元素分配一个或多个类名，便于CSS选择器的应用和JavaScript的分组操作。
  • style ：内联样式属性，用于直接在元素上应用CSS样式规则，控制元素的样式表现。 
<p id="important-paragraph" class="highlight" style="color: red;">这是一个重要的段落，它被强调了。</p>

2.2.2 标签特定属性：表格宽度、链接target等

每个HTML标签都有可能拥有特定的属性，这些属性专门针对特定的标签，提供了更多的定制选项。

  • <table> 标签的 width 属性：用于设置表格的宽度，单位可以是像素值或百分比。
  • <a> 标签的 target 属性：用于指定链接在何处打开，如 _blank 表示在新窗口或新标签页中打开链接。 
<table width="100%">
  <!-- 表格内容 -->
</table>

<a href="https://example.com" target="_blank">在新窗口打开链接</a>

2.2.3 高级属性应用：表单验证、语义化标签使用

随着HTML5的推出，更多高级属性被引入，这些属性加强了网页的交互性和信息的语义化。

  • <input> 标签的 required 属性：这个属性可以强制用户必须填写输入字段，以确保表单的完整性和有效性。
  • <input> 标签的 type 属性：可以设置为 email 、 tel 、 date 等，以期待用户输入特定格式的数据，有助于浏览器进行初步的验证。 
<form action="/submit-form" method="post">
  <label for="email">邮箱地址:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="提交">
</form>

通过学习和实践这些标签和属性的应用，网页开发者能够构建功能丰富且结构清晰的网页内容。下一章节，我们将探讨表格和列表的创建方法，它们对于内容的组织和展示同样重要。

3. 表格和列表的创建方法

3.1 表格的构建与样式设计

表格是组织和展示信息的重要元素，尤其在数据展示和分析方面发挥着关键作用。本节将详细介绍如何构建和样式化表格，使它们不仅在功能上满足需求，还能在视觉上提升用户体验。

3.1.1 表格的基本结构：tr、td、th标签的使用

HTML中的表格主要由 <table> , <tr> , <td> 和 <th> 这四个基本标签组成。 <table> 标签定义了表格的整体结构，而 <tr> 标签用来定义表格中的一行（Table Row）。表格中的每一个单元格（Table Data）都由 <td> 标签表示，用于存放数据。而 <th> 标签通常用来表示表头单元格（Table Header），它常用于存放列标题，并默认以粗体居中显示。

HTML代码示例： 

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>前端开发</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>35</td>
    <td>产品经理</td>
  </tr>
</table>

3.1.2 表格的高级功能：合并单元格、表格布局

合并单元格是表格中非常实用的一个高级特性，它可以帮助我们创建更为复杂的表格布局。 <td> 和 <th> 标签中的 rowspan 属性用于跨行合并单元格，而 colspan 属性用于跨列合并单元格。

HTML代码示例： 

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>手机：</td>
    <td>13800000000</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td rowspan="2">35</td>
    <td>手机：</td>
    <td>13911111111</td>
  </tr>
  <tr>
    <td>邮箱：</td>
    <td>[email protected]</td>
  </tr>
</table>

在上述示例中，"联系方式"这一列标题跨越了两列。而"李四"的姓名只占据了一行，但其年龄和联系方式跨越了两行。

3.1.3 表格的样式美化：CSS与表格的结合

表格的样式设计不仅影响着视觉效果，还能改善用户的阅读体验。通过CSS对表格进行样式设计，可以控制表格的边框、背景颜色、文字对齐方式、字体样式等。

CSS样式代码示例： 

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

在上述CSS代码中，我们设置表格宽度为100%，表示表格宽度将占满父容器的宽度。 border-collapse: collapse; 属性的作用是让表格边框合并为一个单一的边框。通过设置 <th> 和 <td> 的边框、内边距、文字对齐和背景色，使得表格具有更好的可读性和美观性。 :nth-child(even) 选择器用来为偶数行添加不同的背景色，以提高表格的可读性。

执行逻辑说明：

  1. 首先定义了表格的基本样式，宽度设置为100%，表示表格宽度将占满父容器的宽度。
  2. 边框合并为一个单一的边框，看起来更为整洁。
  3. 设置了表头和单元格的边框、内边距、文字对齐和背景色。
  4. 通过 :nth-child(even) 选择器为偶数行添加不同的背景色，使得行之间有很好的区分，方便阅读。

通过上述步骤，可以创建一个结构清晰、样式美观的表格，不仅便于信息的展示，还提升了页面的整体视觉效果。

4.1 CSS选择器与应用

4.1.1 基本选择器：元素、类、ID选择器

CSS选择器是CSS规则的基础部分，用于指定哪些HTML元素将被应用特定的样式规则。了解和掌握不同类型的选择器是编写有效CSS的关键。在这一部分，我们会探讨三种基本类型的选择器：元素选择器、类选择器和ID选择器。

元素选择器是一种简单且高效的选择器类型，它直接引用了HTML标签名。使用元素选择器，我们能够为页面上的所有对应元素应用同样的样式规则。 

p {
    color: blue;
}

在上述例子中，所有段落（ <p> 标签）的文字颜色将被设置为蓝色。

类选择器允许我们为特定的HTML元素指定样式，而不影响同一类型的其他元素。这对于创建具有相似属性但不同样式的元素尤其有用。类选择器以点号（ . ）开头，后跟类名。 

.highlight {
    background-color: yellow;
}

如果页面中的元素具有 class="highlight" 属性，那么这些元素的背景色将被设置为黄色。

ID选择器与类选择器非常相似，但它用于选择唯一的元素。ID在一个HTML页面中是唯一的，并且以井号（ # ）开头，后跟ID名。ID选择器允许我们对页面上某个特定的元素应用一种样式。 

#main-title {
    font-size: 24px;
    color: red;
}

在这个例子中，只有ID为 main-title 的元素的字体大小和颜色会按照规则改变。

4.1.2 组合选择器：后代、子代、相邻兄弟选择器

组合选择器允许我们选择特定关系的元素，基于它们在HTML文档中的位置。这包括后代选择器、子代选择器和相邻兄弟选择器。

后代选择器用于选择一个元素的所有后代元素，而不仅仅是它的直接子元素。它使用空格来分隔不同的选择器。 

ul a {
    color: green;
}

上述CSS规则会选中 <ul> 列表内的所有 <a> 标签，并将链接颜色设置为绿色。

子代选择器仅选择直接子元素，通过大于号（ > ）来表示。 

div > p {
    font-weight: bold;
}

在该规则下，只有 <div> 元素的直接子 <p> 标签的文字将被加粗。

相邻兄弟选择器（ + ）选择紧跟在另一个元素后的元素，两者必须具有相同的父元素。 

h2 + p {
    text-indent: 20px;
}

当一个 <p> 标签紧跟在 <h2> 标签之后时，这个 <p> 标签的第一个字符将会被缩进20像素。

4.1.3 伪类和伪元素选择器：链接、鼠标悬停等

伪类选择器用于定义元素的特殊状态，例如访问过的链接、悬停状态等。伪类选择器不指向任何实际的DOM元素，而是表示元素的某种状态或关系。伪类通过冒号（ : ）来定义。 

a:visited {
    color: purple;
}

在上面的例子中，所有访问过的链接将以紫色显示。

伪元素选择器用于选择元素的某些部分，如文本的第一个字符或第一行。伪元素通过双冒号（ :: ）来定义。 

p::first-line {
    font-weight: bold;
}

该CSS规则将段落的第一行文字加粗。

4.1.4 本节内容总结

在本章节中，我们深入了解了CSS选择器的基础，并探索了它们的多种用法。元素选择器、类选择器和ID选择器是我们构建样式基础的基石。组合选择器（后代选择器、子代选择器、相邻兄弟选择器）则让我们可以精确地定位和应用样式到特定的元素集合上。伪类和伪元素选择器让我们可以对元素的特定状态或部分进行样式化，为我们的设计提供了更多的可能性和灵活性。

理解这些选择器的使用方法和适用场景，能够帮助我们高效地构建美观且功能性强的网页。对于5年以上的IT从业者来说，深入掌握这些选择器的高级用法能够极大地提升其在Web开发领域的专业能力。

5. 页面布局与响应式设计技术

随着互联网技术的发展，网页布局和设计已经从单一的桌面浏览模式演进到多终端适应模式。响应式设计不仅是一种流行趋势，更是现代网页设计的标准实践。本章将深入探讨响应式设计的原理、优点、媒体查询和视口设置等关键技术，使您能够创建适应各种设备的现代网页。

5.1 响应式设计的必要性与原则

5.1.1 设备兼容性与用户体验的重要性

随着智能手机和平板电脑等移动设备的广泛使用，用户访问网页的设备种类变得多样化。传统固定的布局无法适应不同尺寸的屏幕，导致用户体验不佳。响应式设计的必要性在于它能确保网页在不同设备上都能保持良好的可读性和操作性，无论用户使用何种设备访问网站，都能获得一致的体验。

5.1.2 响应式设计的核心原则和优点

响应式设计的核心在于灵活的网格布局（flexible grid），这种布局可以根据屏幕尺寸进行调整。它使用百分比而非固定宽度来定义元素，利用媒体查询（Media Queries）在不同屏幕尺寸下应用不同的样式规则。响应式设计的优点包括：

  • 提高用户体验 ：页面能够适应不同设备，用户体验更加流畅。
  • 降低维护成本 ：只需一套代码和设计，就可以适配所有设备。
  • 提升搜索引擎排名 ：搜索引擎倾向于推荐响应式网站，因为它们对于移动用户更加友好。

5.1.3 实现响应式设计的步骤

要实现响应式网页设计，开发者需要遵循以下步骤：

  1. 构建灵活的网格布局 ：使用相对单位如百分比（%）和em单位，而不是固定的像素（px）。
  2. 媒体查询的应用 ：通过CSS中的@media规则，为不同屏幕尺寸定义特定的样式。
  3. 优化图片和媒体 ：使用矢量图形或响应式图片技术减少文件大小，确保加载速度。
  4. 测试和调整 ：在不同设备和浏览器上进行测试，确保布局和功能的正确性。

5.2 媒体查询和视口设置

5.2.1 媒体查询的语法和应用实例

媒体查询是CSS3中的一个特性，它允许为不同媒体类型和条件定义不同的样式。媒体查询的语法如下： 

@media not|only mediatype and (expressions) {
    CSS-Code;
}
  • mediatype ：可以是 all 、 print 、 screen 、 speech 等。
  • expressions ：可以是 min-width 、 max-width 、 orientation 等。

例如，要在屏幕宽度至少为600像素时应用特定样式，可以写成： 

@media screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

5.2.2 视口元标签的设置与用途

视口（viewport）是一个虚拟窗口，用于控制网页的尺寸和缩放级别。正确的视口设置对于响应式设计至关重要。通常在 <head> 部分加入以下元标签： 

<meta name="viewport" content="width=device-width, initial-scale=1">
  • width=device-width ：设置视口宽度等于设备的宽度。
  • initial-scale=1 ：页面初始缩放比例为1。

这个标签确保网页在不同设备上以适当的尺寸显示，避免了横向滚动条的出现，同时保持了页面内容的可读性。

5.2.3 媒体查询的高级应用

为了更精细地控制响应式布局，可以使用媒体查询的逻辑运算符，如 and 、 or 、 not 。结合使用多个媒体特性，可以让布局更加灵活。例如： 

@media screen and (min-width: 600px) and (orientation: landscape) {
    /* 当屏幕宽度大于等于600px且为横向时的样式 */
}

或者，使用 not 运算符来反转媒体查询： 

@media not all and (orientation: portrait) {
    /* 当不是纵向时应用的样式 */
}

通过媒体查询，开发者可以为不同的设备和视口条件定制样式，使网页布局能够适应各种浏览环境。

以上内容仅为第5章的概览，实际章节内容将包含更多技术细节、实践案例以及最佳实践建议，确保读者能够在阅读后掌握响应式设计的核心技能。

6. 交互式表单元素的使用

6.1 常见表单元素及验证技术

表单作为网页与用户交互的桥梁，其设计和功能实现对于构建动态网站至关重要。本节将探讨基本表单元素的种类和使用方法，以及表单验证技术的重要性。

6.1.1 输入类型：文本、密码、复选框等

表单元素包括各种输入控件，如 <input> ， <textarea> ， <button> 等，它们定义了用户可以输入不同类型数据的字段。下面是一些常见的输入类型和它们的HTML代码示例： 

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  <label>兴趣爱好：</label>
  <input type="checkbox" id="hobby1" name="hobby" value="sports">
  <label for="hobby1">运动</label>
  <input type="checkbox" id="hobby2" name="hobby" value="reading">
  <label for="hobby2">阅读</label><br>
  <input type="submit" value="提交">
</form>

每个 <input> 标签通过 type 属性定义输入字段的类型，如 text 、 password 、 checkbox 等。 <label> 标签提供用户友好的标签文本，并通过 for 属性与对应控件的 id 属性关联，从而提高表单的可访问性。

6.1.2 表单验证方法：客户端验证和服务器验证

表单验证确保用户输入的数据符合特定要求，比如是否必填、格式是否正确等。表单验证可以在客户端和服务器端进行。

  • 客户端验证 ：使用JavaScript或内置的HTML5验证特性进行，可以在用户提交数据之前即刻提供反馈。 
<form>
  <label for="email">电子邮件地址：</label>
  <input type="email" id="email" name="email" required>
  <input type="submit">
</form>

上面的例子利用了HTML5的 email 类型和 required 属性，可以进行简单的格式和必填验证。

  • 服务器端验证 ：在服务器接收到数据之后进行验证，是最可靠的方式，因为它可以防止恶意用户绕过客户端验证。 服务器端代码示例（假设使用PHP）： 
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["email"])) {
    echo "Email is required.";
  } else {
    // 这里可以添加进一步的验证逻辑
    echo "Email is valid.";
  }
}
?>

6.1.3 表单提交与数据处理

当表单提交后，需要在服务器端进行数据处理。通常，数据将通过HTTP请求发送到服务器，服务器脚本再对数据进行处理。

服务器端接收数据的基本示例（继续使用PHP）： 

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST["name"];
  $password = $_POST["password"];
  // 这里可以根据需要保存数据到数据库等
  echo "Name: " . htmlspecialchars($name) . "<br>";
  echo "Password: " . htmlspecialchars($password);
}
?>

在处理表单数据时，应始终注意数据的清洁和验证，防止诸如SQL注入等安全问题。

6.2 创新交互设计：HTML5新特性

HTML5引入了新的表单元素和特性，增强了表单的功能和用户体验。本小节将探讨这些新特性及其在现代网页设计中的应用。

6.2.1 新增表单元素：日期、颜色、范围等

HTML5扩展了表单元素的种类，提供了如日期选择器、颜色选择器、滑块等控件，从而提高了用户交互的便利性。

  • 日期选择器 ： 
<input type="date" id="birthday" name="birthday">
  • 颜色选择器 ： 
<input type="color" id="favcolor" name="favcolor">
  • 滑块 ： 
<input type="range" id="volume" name="volume" min="0" max="100">

6.2.2 HTML5表单的增强功能和兼容性处理

HTML5的增强功能使得表单更加易用和强大，但是对这些新特性的支持因浏览器而异。为了保证表单在所有浏览器中的可用性，可以使用一些兼容性技术。

一个常见的方法是使用JavaScript的 polyfill 技术，例如 Modernizr ，它可以帮助检测浏览器对HTML5特性的支持，并在不支持的情况下提供替代方案。 

<script src="modernizr.js"></script>

通过合理运用JavaScript和回退机制，可以使HTML5表单元素在旧版浏览器中表现得和在现代浏览器中一样好。

通过以上两个小节，我们不仅了解了HTML表单元素的基础使用，还涉及了HTML5的创新特性和兼容性处理，从而让表单设计更加富有互动性和用户体验。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：HTML是构建网页的基础语言，本讲义旨在为初学者提供HTML的基础知识与实践指南。内容包含HTML基本结构、元素和属性、表格和列表的使用、样式的内联与外部控制、布局和响应式设计原理、表单元素的介绍，以及使用Adobe Dreamweaver进行页面创建、编辑和响应式设计的方法。实践部分包含创建静态网页的实例，帮助学习者巩固所学知识。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
联邦学习[隐私集合求交PSI]
计算机毕业设计springboot房产中介管理系统 房地产中介信息化平台 房产中介信息管理系统
git新建一个项目如何合并其他项目
Java——列表（List）
【大模型科普】大模型：人工智能的前沿（一文读懂大模型）
Spring Security（认证与权限）
vim如何设置制表符表示的空格数量
python大一知识点,Python复习知识点（一）
基于.NetCore开发博客项目 StarBlog - (23) 文章列表接口分页、过滤、搜索、排序
6款支持中文语音识别开源软件的简单使用
;