整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML的基本语法以及如何使用HTML来创建网页

一部分：HTML简介

什么是HTML？

HTML代表超文本标记语言（Hypertext Markup Language）。它是一种用于构建网页的标记语言。HTML文件包含一组标签，这些标签用于定义网页的结构和内容。浏览器读取HTML文件，并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式，并提供交互元素，例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构：

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

让我们逐步解释这个结构：

  • <!DOCTYPE html>：这是文档类型声明，它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
  • <html>：HTML文档的根元素。所有其他元素都包含在<html>标签内。
  • <head>：包含与文档相关的元信息，如页面标题、字符集声明和外部样式表链接。
  • <title>：定义网页的标题，显示在浏览器标签页上。
  • <body>：包含网页的主要内容，如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称，例如<p>表示段落，<img>表示图像。标签通常成对出现，有一个开始标签和一个结束标签。例如：

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

<p>是开始标签，</p>是结束标签，文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的，不需要结束标签，例如<img>用于插入图像。

HTML注释

在HTML中，你可以使用注释来添加说明性文字，注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾，如下所示：

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

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素：

  • <p>：定义一个段落。
  • <h1>到<h6>：定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。
  • <strong>：定义强调文本，通常以粗体显示。
  • <em>：定义强调文本，通常以斜体显示。
  • <a>：定义超链接，允许用户点击跳转到其他页面。

示例：

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像，可以使用<img>标签。它是一个自封闭标签，需要指定图像的src属性来指定图像文件的路径。

示例：

htmlCopy code
<img src="image.jpg" alt="图像描述">
  • src：指定图像文件的路径。
  • alt：提供图像的替代文本，用于无法加载图像时的文字描述。

链接

通过使用<a>标签，可以在网页中创建链接。链接通常包含在文本或图像中，并使用href属性指定目标URL。

示例：

<a href="https://www.example.com">访问示例网站</a>
  • href：指定链接的目标URL。

列表

HTML支持有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）。

无序列表

无序列表使用<ul>标签定义，每个列表项使用<li>标签。

示例：

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义，每个列表项使用<li>标签。

示例：

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

定义列表

定义列表使用<dl>标签定义，每个定义项目使用<dt>标签定义术语，使用<dd>标签定义描述。

示例：

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表单

HTML表单允许用户与网页进行交互，提交数据。以下是HTML表单的基本元素：

<form>元素

<form>元素用于创建表单，可以包含文本字段、复选框、单选按钮、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>
  • action：指定表单数据提交的目标URL。
  • method：指定提交方法，通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据，常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签，type属性设置为"text"。

示例：

<input type="text" name="username" placeholder="用户名">
  • type：指定字段类型。
  • name：指定字段的名称。
  • placeholder：设置文本框的占位符文本。

密码框

密码框使用<input>标签，type属性设置为"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签，type属性设置为"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • name：指定单选按钮组的名称。
  • value：指定每个选项的值。

复选框

复选框使用<input>标签，type属性设置为"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select>和<option>标签创建。<select>定义下拉列表，而<option>定义选项。

示例：

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>
  • name：指定下拉列表的名称。
  • 每个<option>标签表示一个选项，使用value属性定义选项的值。

第四部分：HTML样式和CSS

HTML用于定义网页的结构和内容，但要使网页看起来更吸引人，需要使用CSS（层叠样式表）。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例：

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中，并通过<link>标签将其链接到HTML文档。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表：

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素，你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单，HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识，但HTML是一个广泛的主题，还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助，让你能够开始创建自己的网页。继续学习和实践，你将成为一个熟练的网页开发者。

eb 开发主要会用到 HTML 和 CSS，而可视化则较少涉及 HTML 和 CSS。可视化更多地要同浏览器的 Canvas、SVG、WebGL 等其他图形 API 打交道。

Web 开发着重于处理普通的文本和多媒体信息，渲染普通的、易于阅读的文本和多媒体内容；可视化开发则着重于处理结构化数据，需要深入渲染引擎层，从而控制细节，让浏览器渲染出各种相对复杂的图表和图形元素。

可视化用一句话来说，本质上就是将数据信息组织起来后，以图形的方式呈现出来。

Web端可视化的四种方式：

方式一：Html + Css

现代浏览器的 HTML、CSS 表现能力很强大，完全可以实现常规的图表展现，比如，我们常见的柱状图、饼图和折线图。

一些简单的可视化图表，用 CSS 来实现很有好处，既能简化开发，又不需要引入额外的库，可以节省资源，提高网页打开的速度。

用 CSS 实现柱状图其实很简单，原理就是使用网格布局（Grid Layout）加上线性渐变（Linear-gradient）。代码及效果如下：

.bargraph {
        display: grid;
        width: 150px;
        height: 100px;
        padding: 10px;
        transform: scaleY(3);
        grid-template-columns: repeat(5, 20%);
}

.bargraph div {
        margin: 0 2px;
}

.bargraph div:nth-child(1) {
        background: linear-gradient(to bottom, transparent 75%, #37c 0, #37c 85%, #3c7
}

.bargraph div:nth-child(2) {
        background: linear-gradient(to bottom, transparent 74%, #37c 0, #37c 89%, #3c7
}

.bargraph div:nth-child(3) {
        background: linear-gradient(to bottom, transparent 60%, #37c 0, #37c 83%, #3c7
}

.bargraph div:nth-child(4) {
        background: linear-gradient(to bottom, transparent 55%, #37c 0, #37c 75%, #3c7
}

.bargraph div:nth-child(5) {
        background: linear-gradient(to bottom, transparent 32%, #37c 0, #37c 63%, #3c7
}



而要实现饼图，可以使用圆锥渐变，方法也很简单，上代码。

.piegraph {
        display: inline-block;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-image: conic-gradient(#37c 30deg, #3c7 30deg, #3c7 65deg, orange 6
}



除此之外，用 HTML 和 CSS 也可以实现折线图。可以用高度很小的 Div 元素来模拟线段，用 transform 改变角度和位置，这样就能拼成折线图了。另外，如果使用 clip-path 这样的高级属性，我们还能实现更复杂的图表，比如，用不同的颜色表示两个不同折线的面积。


从 CSS 代码里，很难看出数据与图形的对应关系，有很多换算也需要开发人员自己来做。这样一来，一旦图表或数据发生改动，就需要我们重新计算，维护起来会很麻烦。

其次，HTML 和 CSS 作为浏览器渲染引擎的一部分，为了完成页面渲染的工作，除了绘制图形外，还要做很多额外的工作。比如说，浏览器的渲染引擎在工作时，要先解析 HTML、SVG、CSS，构建 DOM 树、RenderObject 树和 RenderLayer 树，然后用 HTML（或 SVG）绘图。当图形发生变化时，我们很可能要重新执行全部的工作，这样的性能开销是非常大的。


传统的 Web 开发，因为涉及 UI 构建和内容组织，所以这些额外的解析和构建工作都是必须做的。而可视化与传统网页不同，它不太需要复杂的布局，更多的工作是在绘图和数据计算。所以，对于可视化来说，这些额外的工作反而相当于白白消耗了性能。

因此，相比于 HTML 和 CSS，Canvas 和 WebGL 更适合去做可视化这一领域的绘图工作。它们的绘图 API 能够直接操作绘图上下文，一般不涉及引擎的其他部分，在重绘图像时，也不会发生重新解析文档和构建结构的过程，开销要小很多。

方式二：SVG

SVG 是一种基于 XML 语法的图像格 式，可以用图片（img 元素）的 src 属性加载。而且，浏览器更强大的是，它还可以内嵌 SVG 标签，并且像操作普通的 HTML 元素一样，利用 DOM API 操作 SVG 元素。甚至， CSS 也可以作用于内嵌的 SVG 元素。

比如，上面的柱状图，如果用 SVG 实现的话，可以用如下所示的代码来实现：

<!-- 
dataset = {
total: [25, 26, 40, 45, 68],
current: [15, 11, 17, 25, 37],
}
-->
  <svg xmlns="http://www.w3.org/2000/svg" width="120px" height="240px" viewbox="<g" transform="translate(0, 100) scale(1, -1)"> 
   <g> 
    <rect x="1" y="0" width="10" height="25" fill="#37c" /> 
    <rect x="13" y="0" width="10" height="26" fill="#37c" /> 
    <rect x="25" y="0" width="10" height="40" fill="#37c" /> 
    <rect x="37" y="0" width="10" height="45" fill="#37c" /> 
    <rect x="49" y="0" width="10" height="68" fill="#37c" /> 
   </g> 
   <g> 
    <rect x="1" y="0" width="10" height="15" fill="#3c7" /> 
    <rect x="13" y="0" width="10" height="11" fill="#3c7" /> 
    <rect x="25" y="0" width="10" height="17" fill="#3c7" /> 
    <rect x="37" y="0" width="10" height="25" fill="#3c7" /> 
    <rect x="49" y="0" width="10" height="37" fill="#3c7" /> 
   </g>  
  </svg>

从上面的 SVG 代码中，可以一目了然地看出，数据 total 和 current 分别对应 SVG 中两个 g 元素下的 rect 元素的高度。也就是说，元素的属性和数值可以直接对应起来。而 CSS 代码并不能直观体现出数据的数值，需要进行 CSS 规则转换。具体如下图所示：


在上面这段 SVG 代码中，g 表示分组，rect 表示绘制一个矩形元素。除了 rect 外，SVG 还提供了丰富的图形元素，可以绘制矩形、圆弧、椭圆、多边形和贝塞尔曲线等等。具体可查看 MDN SVG。

SVG 绘制图表与 HTML 和 CSS 绘制图表的方式差别不大，只不过是将 HTML 标签替换成 SVG 标签，运用了一些 SVG 支持的特殊属性。

HTML 的不足之处在于 HTML 元素的形状一般是矩形，虽然用 CSS 辅助，也能够绘制出各种其它形状的图形，甚至不规则图形，但是总体而言还是非常麻烦的。而 SVG 则弥补了这方面的不足，让不规则图形的绘制变得更简单了。因此，用 SVG 绘图比用 HTML 和 CSS 要便利得多。

SVG 图表也有缺点。在渲染引擎中，SVG 元素和 HTML 元素一样，在输出图形前都需要经过引擎的解析、布局计算和渲染树生成。而且，一个 SVG 元素只表示一种基本图形，如果展示的数据很复杂，生成图形的 SVG 元素就会很多。这样一来，大量的 SVG 元素不仅会占用很多内存空间，还会增加引擎、布局计算和渲染树生成的开销，降低性能，减慢渲染速度。这也就注定了 SVG 只适合应用于元素较少的简单可视化场景。

方式三：Canvas

除了 SVG，使用 Canvas 上下文来绘制可视化图表也很方便，但是在绘制方式上， Canvas 和 HTML/CSS、SVG 又有些不同。

无论是使用 HTML/CSS 还是 SVG，它们都属于声明式绘图系统，也就是我们根据数据创建各种不同的图形元素（或者 CSS 规则），然后利用浏览器渲染引擎解析并渲染出来。 但是 Canvas 不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。

首先，Canvas 元素在浏览器上创造一个空白的画布，通过提供渲染上下文，赋予开发者绘制内容的能力。只需要调用渲染上下文，设置各种属性，然后调用绘图指令完成输出，就能在画布上呈现各种各样的图形。

为了实现更加复杂的效果，Canvas 还提供了非常丰富的设置和绘图 API，我们可以通过操作上下文，来改变填充和描边颜色，对画布进行几何变换，调用各种绘图指令，然后将绘制的图形输出到画布上。具体可以查看MDN Canvas。

总结来说，Canvas 能够直接操作绘图上下文，不需要经过 HTML、CSS 解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas 比 HTML/CSS 和 SVG 要快得多。

因为 HTML 和 SVG 一个元素对应一个基本图形，所以我们可以很方便地操作它们，比如在柱状图的某个柱子上注册点击事件。而同样的功能在 Canvas 上就比较难实现，因为对于 Canvas 来说，绘制整个柱状图的过程就是一系列指令的执行过程，其中并没有区分“A 柱子”、“B 柱子”，很难单独对 Canvas 绘图的局部进行控制。不过这并不代表就不能控制 Canvas 的局部了。实际上，通过数学计算是可以通过定位的方式来获取局部图形的。

Canvas 和 SVG 的使用也不是非此即彼的，它们可以结合使用。因为 SVG 作为一种图形格式，也可以作为 image 元素绘制到 Canvas 中。举个例子，可以先使用 SVG 生成某些图形，然后用 Canvas 来渲染。这样，既可以享受 SVG 的便利性，又可以享受 Canvas 的高性能了。

方式四：WebGL

WebGL 绘制比前三种方式要复杂一些，因为 WebGL 是基于 OpenGL ES 规范的浏览器实现的，API 相对更底层，使用起来不如前三种那么简单直接。 一般情况下，Canvas 绘制图形的性能已经足够高了，但是在三种情况下有必要直接操作更强大的 GPU 来实现绘图。

第一种情况，如果要绘制的图形数量非常多，比如有多达数万个几何图形需要绘制，而且它们的位置和方向都在不停地变化，即使用 Canvas 绘制了，性能还是会达到瓶颈。这个时候，就需要使用 GPU 能力，直接用 WebGL 来绘制。

第二种情况，如果要对较大图像的细节做像素处理，比如，实现物体的光影、流体效果和一些复杂的像素滤镜。由于这些效果往往要精准地改变一个图像全局或局部区域的所有像素点，要计算的像素点数量非常的多（一般是数十万甚至上百万数量级的）。这时候即使采用 Canvas 操作，也会达到性能瓶颈，所以也要用 WebGL 来绘制。

第三种情况是绘制 3D 物体。因为 WebGL 内置了对 3D 物体的投影、深度检测等特性，所以用它来渲染 3D 物体就不需要我们对坐标做底层的处理了。在这种情况下，WebGL 无论是在使用上还是性能上都有很大优势。

总结：

HTML+CSS 的优点是方便，不需要第三方依赖，甚至不需要 JavaScript 代码。如果要绘制少量常见的图表，可以直接采用 HTML 和 CSS。它的缺点是 CSS 属性不能直观体现数据，绘制起来也相对麻烦，图形复杂会导致 HTML 元素多，而消耗性能。

SVG 是对 HTML/CSS 的增强，弥补了 HTML 绘制不规则图形的能力。它通过属性设置图形，可以直观地体现数据，使用起来非常方便。但是 SVG 也有和 HTML/CSS 同样的问题，图形复杂时需要的 SVG 元素太多，也非常消耗性能。

Canvas 是浏览器提供的简便快捷的指令式图形系统，它通过一些简单的指令就能快速绘制出复杂的图形。由于它直接操作绘图上下文，因此没有 HTML/CSS 和 SVG 绘图因为元素多导致消耗性能的问题，性能要比前两者快得多。但是如果要绘制的图形太多，或者处理大量的像素计算时，Canvas 依然会遇到性能瓶颈。

WebGL 是浏览器提供的功能强大的绘图系统，它使用比较复杂，但是功能强大，能够充分利用 GPU 并行计算的能力，来快速、精准地操作图像的像素，在同一时间完成数十万或数百万次计算。另外，它还内置了对 3D 物体的投影、深度检测等处理，更适合绘制 3D 场景。

当今互联网时代，HTML 和 Markdown 都是非常流行的标记语言。HTML 用于构建网页结构和内容，而 Markdown 则以其简洁易读的语法被广泛用于编写文档、博客文章等。在很多场景下，我们需要将 HTML 内容转换为 Markdown 格式，例如网页内容抓取、文档格式转换等。

Rust 作为一门以安全、性能和可靠性著称的系统级编程语言，也提供了相应的库来处理 HTML 到 Markdown 的转换。本文将介绍一个名为 htmd 的 Rust 库，它提供了一种高效且易于使用的方式来完成这项任务。

htmd 简介

htmd 是一个受 JavaScript 库 turndown.js 启发而开发的 Rust 库，用于将 HTML 文档转换为 Markdown 格式。它具有以下特点：

  • 功能丰富： 提供了与 turndown.js 相媲美的丰富选项，可以灵活地控制转换过程。
  • 可靠性高： 通过了 turndown.js 的所有测试用例，确保转换结果的准确性。
  • 依赖项少： 仅依赖于 html5ever 库，轻量级且易于集成。
  • 性能优异： 转换速度快，能够高效处理大型 HTML 文档。

htmd 的安装

在使用 htmd 之前，我们需要先安装它。将以下依赖项添加到你的 Cargo.toml 文件中：

[dependencies]
htmd = "0.1"

htmd 的使用

基本转换

使用 htmd 进行 HTML 到 Markdown 的基本转换非常简单。以下代码展示了如何将一个 <h1> 标签转换为 Markdown 中的 # 标题：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::new();
    let html = "<h1>这是一个标题</h1>";
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 这是一个标题\n");
}

跳过标签

在某些情况下，我们可能希望跳过 HTML 文档中的某些标签，例如 <script> 和 <style> 标签。htmd 提供了 skip_tags 方法来实现这一点：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .skip_tags(vec!["script", "style"])
        .build();

    let html = r#"
        <script>
            // 一些 JavaScript 代码
        </script>
        <h1>这是一个标题</h1>
    "#;

    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 这是一个标题\n");
}

自定义标签处理器

htmd 允许我们自定义标签处理器来处理特定的 HTML 标签。例如，我们可以定义一个处理器将 <img> 标签转换为 Markdown 中的图片语法：

use htmd::{HtmlToMarkdown, HandleResult};
use html5ever::tendril::StrTendril;
use html5ever::QualName;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .add_handler(
            vec!["img"],
            |el| {
                let src = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "src")
                    .map(|(_, value)| value.as_ref());

                let alt = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "alt")
                    .map(|(_, value)| value.as_ref());

                match (src, alt) {
                    (Some(src), Some(alt)) => Some(format!("![{}]({})", alt, src)),
                    _ => None,
                }
            },
        )
        .build();

    let html = r#"<img src="https://example.com/image.jpg" alt="图片描述">"#;
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "![图片描述](https://example.com/image.jpg)\n");
}

多线程处理

htmd 支持多线程处理，可以充分利用多核 CPU 的性能来加速转换过程。以下代码展示了如何使用多线程将多个 HTML 文档转换为 Markdown：

use htmd::HtmlToMarkdown;
use std::sync::Arc;
use std::thread;

fn main() {
    let markdown = Arc::new(HtmlToMarkdown::new());
    let html_docs = vec![
        "<h1>文档 1</h1>",
        "<h2>文档 2</h2>",
        "<h3>文档 3</h3>",
    ];

    let threads: Vec<_> = html_docs
        .into_iter()
        .map(|html| {
            let markdown = markdown.clone();
            thread::spawn(move || {
                let result = markdown.convert(html).unwrap();
                println!("{}", result);
            })
        })
        .collect();

    for thread in threads {
        thread.join().unwrap();
    }
}

结论

htmd 是一个功能强大且易于使用的 Rust 库，用于将 HTML 文档转换为 Markdown 格式。它提供了丰富的选项、自定义标签处理器和多线程支持，可以满足各种转换需求。如果你正在寻找一种高效可靠的 HTML 到 Markdown 转换解决方案，htmd 绝对值得一试。


在线咨询
上一篇：网页设计HTML零基础入门
下一篇：FreeMarker基本语法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石家庄看香高人 任县 兴隆县 边坝县 杜尔伯特 桂东县 泰和县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com   www.hmttv.cn
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服