html基础学习（一）

小明的Fire计划
24 阅读19分钟

前言

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。 HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如,,,等等。 HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<”和“>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如， 标签可以写成 ， 或以任何其他方式。然而，习惯上与实践上都推荐将标签名全部小写。

一、HTML简介

1. HTML是什么

HTML：全称是Hyper Text Markup Language 中文名是超文本标记（标签）语言 作用：由各种标签组成，用来制作网页，告诉浏览器该如何显示页面

  • HTML不是一种编程语言，而是一种标记语言，它有一套标记标签 。
  • HTML使用标记标签来描述网页。
  • HTML文档包含了HTML标签及文本内容，HTML文档也叫做 Web 页面。

2. 作用

  • 制作网页，控制网页和内容的显示
  • 插入图片、音乐、视频、动画等多媒体
  • 通过链接检索信息
  • 使用表单获取用户信息，实现交互

3. 版本

W3C：World Wide Web Consortium 万维网联盟，制定Web技术相关标准和规范组织，HTML就是W3C制定的标准 两个版本：HTML 4.01、HTML5 官网：www.w3cschool.cn/

4. 后缀名

HTML文档的后缀名包含.html、.htm(常用的是.html)

二、HTML文档结构

1. 基本结构

1.1 简介

  • HTML标签是由尖括号包围的关键词，如 ，通过都是成对出现的，如
  • 以为根标签，包含： 头部和 主体部分
  • 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键字等摘要信息
  • 主体部分提供网页的具体内容，真正显示在页面中
  • 合理的进行缩进
  • 标签名不区分大小写，但一般都习惯全小写

1.2 开发工具

记事本notepad、Sublime、Notepad++、Dreamweaver、VSCode、WebStorm等 使用步骤：

  1. 新建文件（Ctrl+N），然后保存（Ctrl+S），指定后缀名为.html
  2. 编写HTML代码
  3. 在浏览器中打开文件

使用技巧：

  • 先保存再写代码，否则没有颜色提示
  • 创建一个文件夹，用于保存所有的网页内容，将文件夹拖放到Sublime中，便于管理
  • 显示/隐藏侧边栏

      方式1：查看——>侧边栏——>显示/隐藏侧边栏       方式2：先按Ctrl+K，紧接着按B

  • 显示多栏

      方式1：查看——>布局——>列数：2列       方式2：按Alt+Shift+2

1.3 浏览器

常见浏览器：IE微软、Chrome谷歌、Firefox火狐、Safari苹果 浏览器的作用是读取HTML文件，并以网页的形式显示 浏览器不会直接显示HTML标签，而是使用标签来解释网页的内容

1.4 网页结构

基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>这是页面标题(w3cschool.cn)</title>
</head>
<body>
  <h1>这是一个标题。</h1>
  <p>这是一个段落。</p>
</body>
</html>

注意：

  • 对于中文网页需要使用 <meta charset="utf-8">声明编码，否则会出现乱码。
  • 有些浏览器（如 360 浏览器）会设置 GBK 为默认编码，则你需要设置为 。
  • 虽然 Web 浏览器读取 HTML 文件作为网页显示，但并不直接显示 HTML 标签。
  • HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

这基础结构出现的标签是

标签 html 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签，以及一个结束标签。

<head> 标签
```html
<head>元素包含了所有的头部标签元素。

<head>元素必须包含文档的标题（`title`），可以包含样式、脚本、meta元数据信息以及其他更多的信息

标签

<body> 元素定义文档的主体。

<body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

1.5 HTML骨架

1.5.1 DOCTYPE文档说明

文档类型声明，告诉浏览器该网页的 HTML版本

注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

1.5.2 网页语言

<html lang="en">  /*识别网页使用的语言 */
   
</html>

作用：搜索引擎归类 + 浏览器翻译 常见语言：zh-CN简体中文/en英文

1.5.3 字符编码

<meta charset="UTF-8"> 识别网页所使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码。 常见字符编码：

  1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
  2. GB2312：6000+ 汉字
  3. GBK：20000+ 汉字

注意点：开发中 统一使用 UTF-8 字符编码 即可

<!--告诉浏览器所使用的HTML版本为HTML5-->
<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!--charset="UTF-8" 规定网页的字符编码  -->
    <meta charset="UTF-8">

    <!-- ie(兼容性差) / edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

1.6  SEO

1，简介 SEO（Search Engine Optimization）：搜索引擎优化 作用：让网站在搜索引擎上的排名靠前 提升SEO的常见方法：

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4. ……

2，SEO三大标签

  1. title：网页标题标签
  2. description：网页描述标签
  3. keywords：网页关键词标签

1.7 ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

语法格式：

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

实例：

     <!-- link:favicon : 浏览器标题栏图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

1.6 HTML5文档头部相关标签

1.设置页面标题标签 标签用于定义HTML页面的标题，即给网页取一个名字，该标签必须位于<head>标签之内。 > <title>和标签之间的内容将显示在浏览器窗口的标题栏中

2.定义页面元信息标签

在HTML中，标签一般用于定义页面的特殊信息，例如页面关键字，页面描述等。他是提供给“搜索蜘蛛”看的。

在WEB技术中,我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”

简单地说，标签就是告诉“搜索蜘蛛”这个页面是做什么的。让更多人可以搜到/ 属性：

  • name：用于指定元数据的名称
  • http-equiv：用于指定HTTP头部信息。可以改变浏览器对待页面的行为方式

name属性的取值如表所示：

属性值说明
keywords网页关键字，可以有多个，而不只一个
description网页描述
author网页作者
copyrght(版权)网页信息
2.1 <meta>中name属性
  1. 在标签中使用name和content属性可以为搜索引擎提供信息。
<meta name="名称" content="值">

属性说明：

  • name属性用于提供搜索内容的名称
  • content属性用于提供对应的搜索内容值

实例：

  • 设置网页关键字，例如中国大学MOOC网站的关键字设置如下：
<meta name-"keywords"
content="中国大学Mooc,Mooc,慕课，在线学习，在线教育，
大规模开放式在线课程，网络公开课，视频公开课，大学公开课，大学Mooc,Icourse163,
幕课网，MOOc学院"/>

其中，

  • name属性的值为keywords,用于定义搜索内容名称为网页关键字
  • content属性用于定义关键字的具体内容，多个关键字内容之间可以用“,”分割。
  • 设置网页描述，例如某图片网站的描述信息设置如下:
<meta name="description" 
  itemprop-"description" content-"中国大学MoOc(蒸课)是爱课程网携手网易云课堂
打造的在线学习平台，每一个有提升意愿的人，
都可以在这里学习我国优质的大学课程，学完还能获得认证证书。
中国大学Mooc是国内优质的中文Mooc学习平台，拥有众多985高校的大学课程，与名师零距离接触。"/>

其中，

  • name属性的值为description,用于定义搜索内容名称为网页描述
  • content属性用于定义描述的具体内容
  • 设置网页作者，例如可以为网站增加作者信息：
<meta name="author" content="技术部">
  • name属性的值为author,用于定义搜索内容名称为网页作者
  • content属性用于定义具体的作者信息
  • 如果要声明网页文档的版权归属于某个人或某个组织，可以在meta标签中使用name属性，属性值为"copyright"：
<meta name="copyright" content="Copyright © 2023 TOM">
2 . 中http-equiv属性

在标签中使用http-equiv和content属性可以设置服务器端发送给浏览器的头部信息，为浏览器显示该页面提供相关的参数标准

<meta http-equiv="名称" content="值">

属性说明：

  • http-equiv属性提供参数
  • content属性提供对应的参数值。

实例：

  • 设置字符集

例如，将字符集设置为GBK，代码如下：

<meta http-equiv="Content-Type" content="text/html;charset=gbk">
  • http-equiv属性的值为Content-Type
  • Content属性的值为text/html和charset=gbk,这两个属性值中间用";"隔开。

这段代码用于说明当前文档类型为HTML，字符集为中文编码

在HTML5中，字符集的写法简化，变为如下代码：

<meta charset="utf-8">
  • 设置页面自动刷新与跳转

例如，定义某个页面6s后跳转到百度页面，代码如下：

<meta http-equiv="refresh" content="6; url=http://www.baidu.com">
  • http-equiv属性的值为refresh
  • content的值为数值和URL，中间用“；”隔开。

这段代码用于在规定的时间后跳转到目标页面，时间以秒为单位

2. 标签

2.1 标签组成

一个完整的HTML标签的组成：

<标签名 属性名="属性值">内容</标签名>

说明：属性值要用引号引起来，一般使用双引号

2.2 标签分类

根据标签是否关闭，分为：关闭型、非关闭型

  • 关闭型：有结束标签，即成对出现
<title></title>
<body></body>
<h1></h1>
  • 非关闭型：没有结束标签 根据标签是否独占一行，分为：块级标签、行级标签
  • 块级标签：显示为块状，独自占一行
<h1></h1>
<hr/>
  • 行级标签：在行内显示，可以与其他内容在同一行显示
<span></span>
  • 行内块标签：具有行内元素的特性，又具有块级元素的特性。
<textarea rows="4" cols="50" style="width: 100%; height: 50px;"></textarea>
<img>
<input>

提示：行内块标签可以在一行内显示，并且可以设置宽度和高度。

2.3 标签关系

包含（嵌套）关系：<head> <title></title> </head> 
父子关系，<title>嵌套在<head>中<head>为父、<title>为子。

并列关系：<html> <head></head> <body></body> </html>  
兄弟姐妹<head>`与`<body>`并列同级于<html>`中，<head>和<body>是兄弟关系。

注意： 在并列关系的例子中，<head>和<body>两者与<html>也是父子关系。

2.4 标签属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置**属性**
  • 属性可以在元素中添加**附加信息**
  • 属性一般描述于**开始标签**
  • 属性总是以键值对（名称/值）的形式出现，比如：name="value"。

设置属性的基本语法格式：

<标签名 属性1=“属性值”  属性2=“属性值”  属性3=“属性值”....>内容</标签名>

属性实例： 这是一个链接使用了 href 属性。

<a href="http://www.baidu.cn">这是一个链接</a>  <!--点击该标签，跳转到地址所在的地方-->

键值对的定义：

  • 键：值的编号或名称。
  • 值：要存放的数据。

2.4.1 html属性值

属性值应该始终被包括在引号内。

注意：双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

注意：

  • 属性和属性值对大小写不敏感。
  • 但在推荐标准中，依然推荐使用小写的属性/属性值。

2.4.2 HTML 常用的属性

下面列出了 HTML 常用的属性，适用于大多数 HTML 元素。

属性描述
class为 html 元素定义一个或多个类名（类名从外部样式文件引入或在 HTML 文件的<style>标签中定义）
id定义元素的唯一 id
style规定元素的内联样式
title规定元素的额外信息（可在工具提示中显示）

class 属性 定义： 为 HTML 元素定义一个或多个类名。

注意：class 属性通常用于指向样式表中的类。可重复

例子

<p class="intro">这是一个段落，定义了一个类名。</p>

<p class="intro color">这是另一个段落定义多个类名。</p>

id 属性 定义： HTML 元素的唯一的 id。

注意：id 在 HTML 文档中必须是唯一的。

例子：

<h1 id="header">hello,world</h1>

注意： 一个 id 属性只能定义给一个 HTML 元素，即 id 是唯一的。

style属性 定义：用于为元素提供内联CSS样式

注意： 内联CSS是指直接在HTML元素中应用CSS样式，而不是在外部或内部样式表中定义样式。

<p style="background-color:blue; color:white;">这是一个段落。</p>
<!-- 该标签使p标签范围中的背景颜色是蓝色，字体颜色是白色 -->

2.5 HTML颜色

HTML颜色除了特定的标签要求外，都是由十六进制符号，颜色的英文单词

  1. HTML 颜色由一个十六进制符号来定义，这个符号就由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00），最大值是 255（十六进制：#FF）

  1. 由英文单词来定义，就是普通的red(红色),blue(蓝色)，orange(橙色)等。

3. 注释

注释在浏览器中是不会显示，是用来标注解释，但通过查看源代码是可以看到 添加或取消注释的快捷键：**Ctrl+/** HTML注释如下：

<!--注释内容 -->

4. 实体字符

也称为特殊字符，用于显示一些特殊符号，如：< > & 空格 等 语法：

&实体字符名称

常用实体字符：

&lt;   <     小于号   less than
&gt;   >     大于号   greater than
&nbsp;  空格  space 对于连续的空白字符（包含空格、缩进、换行等），在浏览器中显示时只会显示为一个空格，默认情况下，四个&nbsp；等于一个汉字
&amp;  &      与
&quot;  "     双引号
&yen ；  ￥     人民币/日元
&copy;  ©     版权符号 copyright
&reg;   ®     注册符号 register
&times;  ×    关闭符号

注：实体字符名称是区分大小写，即大小写敏感 目前基本上都使用HTML5：

三，常用标签

1.基本标签

标签含义说明
br换行标签非关闭型
p段落标签关闭型，块级标签，前后有明显的间隔
h1,h2....h6标题标签按照h1到h6逐渐变小，块级标签，加粗显示
pre预格式化文本标签保留编码时的格式
div分区标签常作用容器来使用，一般用来页面布局，块级标签
span范围标签默认没有任何效果，一般用来设置行内的特殊样式
ol,li有序标签有顺序的项目列表
ul,li无序标签无顺序的项目列表
dl,dt,dd定义列表对术语、图片等进行描述定义的列表
hr水平线标签非关闭型、块级标签
img图像标签非关闭型、行级标签

1.1 有序列表

ol: 全称是ordered list li: 全称是list item **定义：**表示有序列表，通常渲染为一个带编号的列表。 默认使用阿拉伯数字，从1开始标记，可以通过属性（type）进行修改

  • type属性：设置列表前的符号标记，取值：数字1（默认）、字母a或A、罗马数字i或I
  • start属性：设置起始值，值必须是数字

用法：

<ol type="值" start="1">
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ol>

案例：

<ol>
   <li> 网页</li>
   <li>咨询</li>
   <li>知乎</li>
   <li>贴吧</li>
   <li>视频</li>
		</ol>

1.2 无序列表

ul: 全称是unordered list li: 全称是list item **定义：**表示一系列无序的列表项目，通常渲染为项目符号列表 默认使用实心圆作为符号标记，可以通过属性进行修改

  • type属性：设置列表前的符号标记，取值：disc实心圆（默认）、circle空心圆、square正文形、none不 显示符号

用法:

<ul type="disc">
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ul>

案例：

<ul>
   <li> 网页</li>
   <li>咨询</li>
   <li>知乎</li>
   <li>贴吧</li>
   <li>视频</li>
		</ul>

1.3 定义列表

自定义列表以

标签开始。每个自定义列表标题以
开始。每个自定义列表项的描述以
开始。 dl:全称是definition list **dt: 全称是definition title ** dd: 全称是definition description 用法：

<dl>
  <dt>标题</dt>
    <dd>描述</dd>
  <dt>标题</dt>
    <dd>描述</dd>
  ......
</dl>

案例：

<dl>
		<dt>水果</dt>
			<dd>梨子</dd>
			<dd>西瓜</dd>
			<dd>草莓</dd>
		<dt>数码产品</dt>
			<dd>手机</dd>
			<dd>相机</dd>
			<dd>电脑</dd>
	</dl>

1.4 水平线标签

hr: horizontal 定义：在页面上显示一条水平线。 常用属性：

  • color：颜色 两种写法：              颜色名称，如red、green、blue、white、black、pink、orange等            16进制的RGB：Red、Green、Blue，用法：#RRGGBB，每个颜色的范围是0­255，转换为16进制 为00­FF               如#FF0000、#00FF00、#0000FF、#FFFFFF、#000000、#CCCCCC、#FF7300。
  • size 粗细，数值
  • width 宽度 两种写法：              像素，绝对值（固定值）               百分比，相对值，相对于父容器的宽度的百分比
  • align 对齐 取值：center（默认）、left、right

作用：表示文档中的主题性内容更改 案例：

<hr color="red" size="5" width="200px">

1.5图像标签

img: image **定义：**将一张图片嵌入文档 常见图片格式：.jpg、.png、.gif、.bmp 语法：

<img src="url">

常用属性：

  • src：source 指定图片的路径（来源），必须有 如果图片与html页面在同一个文件夹中，可以直接写图片名称 习惯上，会将多个图片放到统一的文件夹中，如images，此时需要在图片名称的前面添加文件夹的名称 images/
  • alt：当图片无法显示时的提示信息
  • title：当鼠标停留在图片上时显示的提示信息
  • width/height：设置图片的宽和高
  1. 默认图片原尺寸显示 如果只设置其中的一个，则另一个按比例缩放 如果同时设置宽和高，可能会导致图片变形
  2. 两种写法： 像素，绝对值（固定值） 百分比，相对值，相对于父容器的尺寸的百分比

案例：

<img src="../images/rabbit.jpg" width="200px" height="150px" alt="兔子" title="rabbit">

2.其他标签

标签含义说明
i斜体标签全称是italic
em强调的内容在浏览器中显示时一般为斜体
address地址在浏览器中显示时一般为斜体，块级标签
b加粗显示全称是bold
strong强调的内容在浏览器中显示时一般为加粗
del删除线delete
ins下划线
sub下标
sup上标
bdo设置文本方向通过属性dir="rtl"设置文本从右到械显示 right to left，也可以反过来
abbr设置文字缩写通过title属性设置当属性停留在文字上时显示的提示信息
small相当于当前字号减小一号
big相当于当前字号增加一号

3.头部标签

meta 定义网页的摘要信息，如字符编码、关键字、描述、作者等

<head>
	<!-- 设置字符编码 -->
	<meta charset="UTF-8">
	<!-- 设置关键字 -->
	<meta name="keywords" content="it,HTML,CSS..">
	<!-- 设置描述信息 -->
	<meta name="description" content="做专业的教育。。。。。">
	<!-- 设置作者 -->
	<meta name="author" content="小明">
	<!-- 实现刷新跳转 -->
	<!-- <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> -->
</head>
  • title 定义网页的标题
  • style 定义内部CSS样式
  • link 引用外部CSS样式
<!-- 引用外部CSS样式文件 -->
	<link rel="stylesheet" href="CSS样式文件的路径">
  • script 定义或引用脚本
  • base 定义基础路径 默认以当前页面文件所在位置为相对路径的参照
<!-- 定义基础路径 -->
	<base href="images/"> 
<!-- 载入图片时，可以直接引用在images中的图片，不需在前面加入images,修改了现在的路径 -->

4.标签嵌套

一个标签中嵌套着另一个标签 标签不能瞎嵌套，如以下嵌套是错误的：

<p style="width: 300px;height: 300px;background: green;">
<div style="width: 200px;height: 200px; background: blue;">world</div>
</p>

浏览器渲染后显示的页面代码与编码时有所不同 浏览器提供的开发工具：用来帮助开发人员查看和调试页面 如何打开：

  • 在页面中右击——>检查/审查元素/查看元素
  • 按F12

常用工具：

  • Elements：从浏览器的角度查看页面，浏览器渲染页面时的结构内容
  • Console：控制台，显示各种警告和错误信息
  • Network：查看网络请求信息，浏览器向服务器请求了哪些资源、资源大小、加载资源花费的时间

四、超链接

1.简介

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，你可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 使用超链接可以从一个页面跳转到另一个页面，实现页面间的导航

当鼠标移动到超链接文本上时，鼠标箭头会变成一只小手

超链接的有三种类型：

  • 普通链接/页面间链接，跳转到另一个页面
  • 锚链接，跳转到锚点
  • 功能性链接，实现特殊功能

2.基本用法

使用标签创建超链接 语法：

<a href="链接地址" target="链接打开位置">链接文本或图像</a>

常用属性：

  • href 链接地址/路径，链接地址
  • target 链接打开位置，取值： _self（自身、当前，默认值）、_blank(空白、新的)、_parent（父层框架）、_top（顶层框架）、自定义

       路径分类：

  • 相对路径

      相对于当前文件的所在路径       不是以根开始的路径        . 表示当前路径       .. 表示上一级路径

  • 绝对路径

      以根开始的路径        www.baidu.com        D:/Software/b.html

2.1 超链接属性

target属性 在 标签中使用 target 属性，你可以规定在何处打开链接文档。 target 属性值有：

  • _blank：在新窗口中打开被链接文档。
  • _self：默认。在相同的框架中打开被链接文档。
  • _parent：在父框架集中打开被链接文档。
  • _top：在整个窗口中打开被链接文档。
  • framename：在指定的框架中打开被链接文档。

实例：

<a href="https://www.baidu.cn" target="_blank">访问百度</a>

title属性 title提示文本  鼠标放到链接上显示的文字

<a href="https://www.baidu.cn" target="_blank" title="w3cschool">访问百度</a>

3.锚链接

3.1 简历

点击链接后跳转指定的位置（锚点 anchor） 锚链接的分类：

  • 页面内的锚链接
  • 页面间的锚链接

3.2 页面内的锚链接

步骤：

  1. 定义锚点（标记）
<a name="锚点名称">目标位置</a>
  1. 链接锚点
<a href="#锚点名称">链接文本</a>

3.3 页面间的锚链接

<a href="目标页面#锚点名称">链接文本</a>

4.功能性链接

5.URL

5.1 简介

URL：Uniform Resource Locator 统一资源定位符，用来定位资源所在位置，最常见的就是网址

https://t1.huanqiu.cn/4ac5853976fa0f2a7fbdac13593ddb32.jpg
https://www.baidu.com/img/bd_logo1.png
https://www.w3cschool.cn/

5.2 组成

https://www.baidu.com:80/web/html/images/logo.png?name=tom&age=21&sex=male#first
https://www.baidu.com/s?ie=utf­8&f=8&rsv_bp=1&rsv_idx=1&rsv_sug1=10&rsv_sug7=100&bs=ssl
file://d:\Users\User\Desktop\code\day02
ftp://ftp.itany.com/note/HTML.md
https://www.w3cschool.cn/
http://xiazai.zol.com.cn/btzhongzi_soft_index/btzhongzi_page_1.html

一个完整的URL由8个部分组成：

  • 协议 protocol，如： http 超文本传输协议，用来访问Web网站 HyperText Transfer Protocol https 更加安全的协议 ftp 文件传输协议，用来访问服务器上的文件，实现文件的上传和下载  File Transfer Protocol file 文件协议，用来访问本地文件
  • 主机名 hostname 服务器地址，如www.baidu.com、ftp.itany.com
  • 端口 port 位于主机名的后面，使用冒号隔开 不同的协议使用不同的端口号，如：http使用80，https使用443，ftp使用21 如果使用的是默认端口，则端口可以省略 如果使用的不是默认端口，则必须指定端口
  • 路径 path 目标文件所在的路径结构，如：/web/html/images/
  • 资源 resource 要访问的目标文件，如：logo.png
  • 查询字符串 query string，也称为参数 在资源后面使用?开头的一组名称/值 名称和值之间以=隔开，多个之间以&隔开，如：?name=tom&age=21&sex=male
  • 锚点 anchor，在资源后面使用#开头的文本，如：#first
  • 身份认证 authentication，指定身份信息，如：ftp://账户:密码@ftp.itany.com/note/HTML.md
avatar
文章
阅读
粉丝