开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> HTML标签与URL字符编码 -> 正文阅读

[JavaScript知识库]HTML标签与URL字符编码

HTML

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

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

下面就是一个简单网页的 HTML 源码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>网页标题</title>
</head>
<body>
  <p>我是网页</p>
</body>
</html>

元素

浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，比如标签对应网页的p元素。

块级元素，行内元素

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。

块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

网页的基本标签

符合 HTML 语法标准的网页，应该满足下面的基本结构。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>


不管多么复杂的网页，都是从上面这个基本结构衍生出来的。

?<!doctype>

网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。

<html>?

<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

<head>的子元素一般有下面七个

??<meta>：设置网页的元数据。

??<link>：连接外部样式表。

??<title>：设置网页标题。

??<style>：放置内嵌的样式表。

??<script>：引入脚本。

??<noscript>：浏览器不支持脚本时，所要显示的内容。

??<base>：设置网页内部相对 URL 的计算基准。

`<meta>`

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。

`<title>`

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。

`<body>`

<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。

标题标签<hn >?</hn>?

????????n的取值从1到6逐渐变小，独占一行加粗加黑显示，与其他行有一定的行间距

水平线标签 <hr />

????????里面有一些属性象颜色（color）、大小（size）等等

段落标签

字体标签

换行标签 

????????其中有些属性：

????????size:指定内容的大小

????????color：指定内容的颜色

????????face：指定内容的字体

加粗：

斜体：

下划线：????????

图片标签

????????<img />

????????src:指的是图片显示的路径(位置)????????

????????width:指定图片的宽度，取值可以是像素值，也可以是百分比

????????height：指定图片的高度，取值可以是像素值，也可以是百分比

????????alt：当图片无法正常显示的时候给出的提示信息

路径分为两种：

????????绝对路径：

从盘符开始的到图片位置的完整描述：

类似~C:Program FilesImg.jpg

????????相对路径：

①同一级：直接写文件名称或者./文件名称

②上一级：../文件名称

③下一级：写上目录名称/文件名称

列表标签

????????有序列表：

type：可以选择数字、字母及阿拉伯数字作为前面的序号，

start：?从哪里开始计数

reversed：?表示颠倒顺序

????????无序列表：

type：可以选择前面的样式实心圆、空心圆和方块

????????超链接标签

href:指定跳转的位置

target：指定跳转页面显示的位置(取值：_self 、_blank)

????????表格标签

border：边框的宽度?

width：表格的宽?

height：表格的高?

align：元素的位置居中、上、下、左、右?

bgcolor：背景色

-------------------------------------------------------------分割线-------------------------------------------------------------------

URL

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

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

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

只要资源可以通过互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。

URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。

网址的组成部分

https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor
协议     主机             端口    路径               查询参数                  锚点
HTTPS   www.example.com   80   /path/index.html   ?key1=value1&key2=value2  #anchor