head 元素里面的内容是一些“元数据”（元数据：描述数据的数据）

• 一般用于描述网页的各种信息，比如 字符编码、网页标题、网页图标

[](

)title 元素：网页的标题

title 元素：网页的标题

[](

)meta 元素：网页的字符编码

meta 元素用于设置网页的字符编码，不设置或者设置错误会导致乱码

• 一般都使用 UTF-8 编码，涵盖了世界上几乎所有的文字

在 HTML5 之前，meta 标签的写法也是比较复杂的

以下列出的元素大多数情况下都是在 head 元素内部使用：

• meta

• title

• style

• link

• base

• script

• noscritpt

[](

)base 元素：设置 a 元素的默认行为

base 元素用于设置当前页面所有 a 元素的默认行为；base 元素写在 head 元素中

body 元素：网页的具体内容和结构

body 元素里面的内容是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

官方文档是最权威的参考资料，可以查看 HTML5 相关的一切信息

• https://www.w3.org

• https://www.w3.org/standards/techs/html

HTML5 代码规范检测器：https://validator.w3.org/

h、p、strong 元素：文本样式

h 元素表示网页的标题（h1 ~ h6 共规定了6个等级的标题）

h 元素 和 SEO

h 元素有助于网站的 SEO (Search Engine Optimization) 优化，可以促进关键词排名

建议在网页中最多只有 1 个 h1 元素

乱用 h 元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，最后导致K站

p 元素表示文章中的一个段落（paragraph）

strong 元素用于强调某些文本，粗体的显示效果

pre、code、br 元素：结构样式

在默认情况下，HTML 代码中的大多数空格都会被浏览器压缩

• 比如一段连续的空格会被压缩成 1 个空格

如果想完全保留 HTML 代码中的空格、换行，可以使用 pre 元素

code 元素用于显示程序代码

br 元素是 单标签，表示强制换行

字符实体：显示特殊符号

HTML 中有一些字符是预留出来作特殊用途的，比如小于号 <、大于号 >

要想在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有 2 种：

• &entity_name;

• &#entity_number;

常用字符实体：

• 空格： 

• 大于号：>

• 小于号：<

• &：&

img 元素：显示图片

img 元素专门用来显示图片（img 是 image 的缩写）

<img src="https://www.baidu.com/img/bd_logo1.png" alt="占位文字称(图片加载失败的时候显示出)" width="100" height="100">


1.
2.
3.
4.
5.
6.
7.
8.
9.

src 属性用来设置图片的路径（URL）

• 绝对路径：完整的描述文件位置的路径

• 相对路径：由这个文件所在的文件夹引起的跟其它文件的路径关系

  . 代表当前文件夹，可以省略

  .. 代表上级文件夹

• 对于网页来说，不管什么操作系统，路径分隔符都是 /，不是 \

注意：

• img 元素如果只设置了 width，浏览器会自动根据图片宽高比计算出 height

  width 同理

• 在 HTML5 规范中，alt 是 img 元素的必要属性

• width、height 的默认单位是 px（像素）

[](

)图片与像素

web中常用的图片格式有：

• png：静态图片，支持透明

• jpg：静态图片，不支持透明

• gif：动态图片、静态图片，支持透明

像素：

• 像素（px）是图像显示的最小单位

• 每个像素都能表示一种颜色

• 计算机显示出来的图像都是由一堆像素组成的

• 组成图片的像素越多，显示越清晰

  

平时说的屏幕分辨率，一般都是用像素作为单位：

a 元素：定义超链接

a 元素的作用：定义超链接，用于打开新的URL

<!-- 点击链接就会自动跳转到百度页面 -->
<a rel="nofollow" href="https:///www.bbaidu.com">百度</a>


1.
2.
3.
4.
5.

常用属性

• href：指定要打开的 URL

  Hypertext Reference 的简称

• target：在哪里打开 URL

target 可以有以下几种取值

• _self：默认值，在当前窗口打开 URL

• _blank：在一个新的窗口中打开 URL

• _parent：在父窗口中打开 URL

• _top：在顶层窗口中打开 URL

• 某个 frame 的 name 值：在某个 frame 中打开 URL

  

思考：a 元素一定是用来跳转到新网页的么？

• 将以下 URL 放到 a 元素的 href 属性中会造成不同效果

<!-- 下载文件 -->
https://github.com/CoderMJLee/MJRefresh/archive/master.zip
<!-- 发送邮件 -->
mailto:12345@qq.com
<!-- 打开对应的工具进行下载 -->
ed2k://|file|%E7%94%9F%E6%B4%BB%E5%A4%A7%E7%88%86%E7%82%B8.The.Big.Bang.Theory.S10E24.END.%E4%B8%AD%E8%8B%B1%E5%AD%97%E5%B9%95.WEB-HR.AAC.1024X576.x264-%E4%BA%BA%E4%BA%BA%E5%BD%B1%E8%A7%86.mp4|194911068|a3285a9ddbea54f5200d3367ec376a58|h=ky54pschiappe5afeqic3oujrue7sxta|/
<!-- 打开迅雷进行下载 -->
thunder://QUFodHRwOi8vNDEuZGwueTgwcy5uZXQ6OTIwLzEzMDMvW+a1t+i0vOeOi13nrKw1ODbpm4YvW+a1t+i0vOeOi13nrKw1ODbpm4ZfaGQubXA0Wlo=


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

[](

)iframe 元素：嵌入 HTML 文档

iframe 元素可以实现：在一个 HTML 文档中嵌入其他 HTML 文档

<iframe src="https://www.baidu.com" frameborder="1" width="400px" height="400px">
</iframe>


1.
2.
3.
4.
5.
6.
7.
8.
9.

frameborder 属性用于规定是否显示边框：1-显示、0-不显示

[](

)锚点链接：在网页内进行跳转

锚点链接可以实现：跳转到网页中的具体位置

<a rel="nofollow" href="#one">go</a>


1.
2.
3.

点击go会定位到：

• id 值为 one 的任何元素

• name 值为 one 的 a元素

<a rel="nofollow" href="#">回到最顶部</a>


1.
2.
3.

如果 href="#" 则点击后会回到当前页面的最顶部

<a rel="nofollow" href="index.html#one">首页第一节</a>


1.
2.
3.

利用以上方法可以跳转到其他页面的指定位置

[](

)伪链接：点击后不跳转 URL

伪链接：没有指明具体链接地址的链接

• 有时点击链接并不希望打开新的 URL，而是希望干点别的事情，这时可以使用伪链接

• 点击链接后具体要做什么事情，需要编写对应的 JavaScript 代码

如果暂时不做任何事，可以先写成下面形式：

<a rel="nofollow" href="#" onclick="return false;">伪链接1</a>
<a rel="nofollow" href="javascript:">伪链接2</a>


1.
2.
3.
4.
5.

所以有时候可以把链接当作按钮来使用

[](

)图片链接

img 元素跟 a 元素一起使用，可以实现图片链接

URL

======================================================================

浏览器访问  https://www.baidu.com/img/bdlogo.gif 的过程：

什么是 URL？

• URL 的全称是 Uniform Resource Locator（统一资源定位符）

• URL 就是资源的地址、位置，互联网上的每个资源都有一个唯一的URL

• 通过 1 个 URL，能找到互联网上唯一的 1 个资源

URL 的基本格式 = protocol://hostname/path = 协议://主机地址/路径

URL 常见的协议：

• http：超文本传输协议，访问的是远程的网络资源，格式是 http://

  http 协议是在网络开发中最常用的协议

  https 协议相当于是 http 协议的安全版

• file：访问的是本地计算机上的资源，格式是 file://（不用加主机地址）

• mailto：访问的是电子邮件地址，格式是 mailto:

• ftp：访问的是共享主机的文件资源，格式是 ftp://

• ed2k：通过支持 ed2k（专用下载链接）协议的 P2P 软件访问该资源，格式是 ed2k://

  代表软件：电驴

• thunder：通过支持 thunder（专用下载链接）协议的 P2P 软件访问该资源，格式是 thunder://

  代表软件：迅雷

URL更具体更完整的语法格式为：

• protocol://hostname[:port]/path/[;parameters][?query]#fragment

• 例： http://www.baidu.com:80/s?wd=ios#page

port：端口号

• 一台拥有 IP 地址的主机可以提供许多服务，比如 Web 服务、FTP 服务、SMTP 服务等

• 主机通过 “IP 地址 + 端口号” 来区分不同的服务，端口号类似于营业厅的窗口

最后

分享一些资料给大家，我觉得这些都是很有用的东西，大家也可以跟着来学习，查漏补缺。

完整版获取：狂戳这里免费领取~

《Java高级面试》

《Java高级架构知识》

《算法知识》