概述
URL 是“统一资源定位符”(Uniform Resource Locator)的首字母缩写,中文译为“网址”,表示各种资源的互联网地址。下面就是一个典型的 URL。
https://www.example.com/path/index.html
URL 是“统一资源定位符”(Uniform Resource Locator)的首字母缩写,中文译为“网址”,表示各种资源的互联网地址。下面就是一个典型的 URL。
https://www.example.com/path/index.html
历史上,网页的主要功能是文本展示。所以,HTML 提供了大量的文本处理标签。
<div>
<div>
是一个通用标签,表示一个区块(division)。它没有语义,如果网页需要一个块级元素容器,又没有其他合适的标签,就可以使用这个标签。
它的最常见用途就是提供 CSS 的钩子,用来指定各种样式。所以在早期,下面层层包裹的<div>
就很常见。
<div class="main">
<div class="article">
<div class="title">
<h1>文章标题</h1>
</div>
</div>
</div>
表格(table)以行(row)和列(column)的形式展示数据。
<table>
,<caption>
<table>
是一个块级容器标签,所有表格内容都要放在这个标签里面。
<table>
... ...
</table>
HTML 标签的名称都带有语义(semantic),使用时应该尽量符合标签的语义,不要用错误语义的标签。语义良好的网页,天然具有良好的结构,对于开发者易读易写,容易维护,也能帮助计算机更好地处理网页内容。
HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
除了图像,网页还可以放置视频和音频。
<video>
<video>
标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示<video>
内部的子元素。
<video src="example.mp4" controls>
<p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a>。</p>
</video>
<meta>
的 viewport 设置<meta>
的 viewport 设置用来控制网页的视觉大小。
<meta name="viewport" content="initial-scale=1">
列表是一系列排列好的项目,主要分成两类:有序列表和无序列表。
有序列表是每个列表项前面有编号,呈现出顺序,就像下面这样。
1. 列表项 A
2. 列表项 B
3. 列表项 C
链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。
URL 是链接指向的地址。链接不仅可以指向另一个网页,也可以指向文本、图像、文件等资源。可以这样说,所有互联网上的资源,都可以通过链接访问。
<a>
链接通过<a>
标签表示,用户点击后,浏览器会跳转到指定的网址。下面就是一个典型的链接。
<a href="https://wikipedia.org/">维基百科</a>
图片是互联网的重要组成部分,让网页变得丰富多彩。本章介绍如何在网页插入图片。
<img>
<img>
标签用于插入图片。它是单独使用的,没有闭合标签。
<img src="foo.jpg">
<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>
表单(form)是用户输入信息与网页互动的一种形式。大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单。
表单由一种或多种的小部件组成,比如输入框、按钮、单选框或复选框。这些小部件称为控件(controls)。
<form>
<form>
标签用来定义一个表单,所有表单内容放到这个容器元素之中。
<form>
<!-- 各种表单控件-->
</form>
网页包含了大量的文字,浏览器必须知道这些文字的编码方法,才能把文字还原出来。
一般情况下,服务器向浏览器发送 HTML 网页文件时,会通过 HTTP 头信息,声明网页的编码方式。
Content-Type: text/html; charset=UTF-8
本章介绍一些最新引入标准的标签。
<dialog>
<dialog>
标签表示一个可以关闭的对话框。
<dialog>
Hello world
</dialog>
网页元素的属性(attribute)可以定制元素的行为,不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。
<html lang="en">
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悦创,有更多更好玩的等你发现!
<text>
<text>
元素用于定义文本。
写一个文本:
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>
<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