跳至主要內容
02-URL 简介

概述

URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。

https://www.example.com/path/index.html

所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才能在互联网上获取它们。

AI悦创原创...大约 8 分钟htmlwebhtmlweb
06-文本标签

历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。

<div>

<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>
AI悦创原创...大约 16 分钟htmlwebhtmlweb
12-表格标签

表格（table）以行（row）和列（column）的形式展示数据。

<table>，<caption>

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

<table>
  ... ...
</table>
AI悦创原创...大约 6 分钟htmlwebhtmlweb
05-网页的语义结构

HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

含义

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页。

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>
AI悦创原创...大约 6 分钟htmlwebhtmlweb
10-多媒体标签

除了图像，网页还可以放置视频和音频。

<video>

<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

<video src="example.mp4" controls>
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>
AI悦创原创...大约 8 分钟htmlwebhtmlweb
15-移动设备网页设计

<meta>的 viewport 设置

<meta>的 viewport 设置用来控制网页的视觉大小。

<meta name="viewport" content="initial-scale=1">
AI悦创原创...大约 1 分钟htmlwebhtmlweb
07-列表标签

列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。

有序列表是每个列表项前面有编号，呈现出顺序，就像下面这样。

1. 列表项 A
2. 列表项 B
3. 列表项 C

无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。

· 列表项 A
· 列表项 B
· 列表项 C
AI悦创原创...大约 5 分钟htmlwebhtmlweb
09-链接标签

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。

URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。

<a>

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>
AI悦创原创...大约 17 分钟htmlwebhtmlweb
08-图像标签

图片是互联网的重要组成部分，让网页变得丰富多彩。本章介绍如何在网页插入图片。

<img>

<img>标签用于插入图片。它是单独使用的，没有闭合标签。

<img src="foo.jpg">
AI悦创原创...大约 12 分钟htmlwebhtmlweb
11-iframe

<iframe>标签用于在网页里面嵌入其他网页。

基本用法

<iframe>标签生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。

<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">点击打开嵌入页面</a></p>
</iframe>
AI悦创原创...大约 5 分钟htmlwebhtmlweb
13-表单标签

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

<form>

简介

<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。

<form>
  <!-- 各种表单控件-->
</form>
AI悦创原创...大约 32 分钟htmlwebhtmlweb
04-HTML 字符编码

简介

网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。

一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式。

Content-Type: text/html; charset=UTF-8
AI悦创原创...大约 4 分钟htmlwebhtmlweb
14-其他标签

本章介绍一些最新引入标准的标签。

<dialog>

基本用法

<dialog>标签表示一个可以关闭的对话框。

<dialog>
  Hello world
</dialog>
AI悦创原创...大约 4 分钟htmlwebhtmlweb
03-网页元素的属性

简介

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。

<html lang="en">
AI悦创原创...大约 10 分钟htmlwebhtmlweb
01-HTML 语言简介

概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，点击链接就可以跳转到其他网页，从而构成了整个互联网。

1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础，CSS 和 JavaScript 都是基于 HTML 才能生效，即使没有这两者，HTML 本身也能使用，可以完成基本的内容展示。本教程只介绍 HTML 语言。

AI悦创原创...大约 12 分钟htmlwebhtmlweb
SVG Stroke 属性

欢迎关注我公众号：AI悦创，有更多更好玩的等你发现！

公众号：AI悦创【二维码】
AI悦创原创...小于 1 分钟svgweb前端svgweb前端
SVG <text>

SVG 文本 - <text>

<text> 元素用于定义文本。

实例 1

写一个文本：

I love SVG

下面是 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="0" y="15" fill="red">I love SVG</text>
</svg>
AI悦创原创...大约 2 分钟svgweb前端svgweb前端
SVG <path>

SVG 路径 - <path>

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath
AI悦创原创...大约 2 分钟svgweb前端svgweb前端