02-URL 简介

概述

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

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

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


AI悦创原创
  • html
  • web
  • html
  • web
大约 8 分钟
06-文本标签

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

<div>

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

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

<div class="main">

AI悦创原创
  • html
  • web
  • html
  • web
大约 16 分钟
12-表格标签

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

<table><caption>

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

<table>
  ... ...
</table>

<caption>总是<table>里面的第一个子元素,表示表格的标题。该元素是可选的。

<table>

AI悦创原创
  • html
  • web
  • html
  • web
大约 6 分钟
05-网页的语义结构

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

含义

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

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


AI悦创原创
  • html
  • web
  • html
  • web
大约 6 分钟
10-多媒体标签

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

<video>

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

<video src="example.mp4" controls>
  <p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件</a></p>

AI悦创原创
  • html
  • web
  • html
  • web
大约 8 分钟
15-移动设备网页设计

<meta>的 viewport 设置

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

<meta name="viewport" content="initial-scale=1">

这表示网页初始加载不进行放大或缩小。

下面代码指定网页适配的视口宽度。

<meta name="viewport" content="width=320">

AI悦创原创
  • html
  • web
  • html
  • web
大约 1 分钟
07-列表标签

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

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

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

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

· 列表项 A
· 列表项 B
· 列表项 C

<ol>

<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。


AI悦创原创
  • html
  • web
  • html
  • web
大约 5 分钟
09-链接标签

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

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

<a>

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

<a href="https://wikipedia.org/">维基百科</a>

AI悦创原创
  • html
  • web
  • html
  • web
大约 17 分钟
2
3
4