跟我一起学前端之 HTML

最新推荐文章于 2024-06-07 18:11:32 发布

萍果吮雨

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量1.4k

点赞数

分类专栏：前端全栈 Web

本文链接：https://blog.csdn.net/qq_39872652/article/details/90080522

版权

前端同时被 3 个专栏收录

20 篇文章 1 订阅

订阅专栏

Web

6 篇文章 0 订阅

订阅专栏

全栈

2 篇文章 0 订阅

订阅专栏

前言:

此篇文章原是本人重学前端记录在印象笔记中的笔记,里面都是通过实践证明的观点,这有助于我们构建前端知识体系,里面有些知识笔者认为勾勒的非常精彩,也是其他培训机构不会讲到的内容。跟我一起学前端是一个系列,主要由(HTML篇、HTML5篇、CSS篇、CSS3篇、原生JavaScript篇、jQuery(JavaScript库)篇、Vue、React、Anglar (JavaScript框架)篇、Webpack、Gulp (模块化工具篇)、Git(版本控制)篇、浏览器解析机制篇、HTTP/HTTPS/IP/TCP(协议)篇、LESS、SASS(CSS 预编译语言)篇、JavaScript 算法与数据结构篇、JavaScript 设计模式篇等 …)构成。本文是该系列的第一篇欢迎大家阅读、提出意见。如果意见被采纳笔者会在文章结尾的说明处署上各位的名字,一起让这个系列强大起来吧!!!

HTML

html5

什么是 HTML ?

-1).html(Hyper Text Markup Language;超文本标记语言)是一种用于创建网页标准的标记语言,通过与 CSS、JavaScript 一起构建 WEB 应用界面。客户端浏览器可以接收与发送 HTML 的相关数据,并通过其解析与渲染机制为用户呈现图形化界面。
-2).通常以成对儿的标签的形式出现,对大小写不敏感,可以嵌入 JavaScript 脚本与 CSS 层叠样式表。
-3).在一定程度上描述着文档的外观与架构,所以其是一种标记语言而非是编程语言

HTML 发展简史!

时间	版本
1995年11月24日	HTML 2.0
1997年1月14日	HTML 3.2
1997年12月18日	HTML 4.0
1999年12月24日	HTML 4.01
2014年10月28日	HTML 5

SGML、HTML、XML、XHTML 之间的关系

SGML(Standard Generalized Markup Language)标准通用标记语言,是可以定义标记语言的元语言。
HTML 与 XML 均派生于它, HTML 是其一个应用,XML 是其一个子集。
SGML具有非常强大的适应性,在小型应用中难以普及,所以为了弥补这一缺憾导致了 XML 的出现, XML 的产生就是为了简化它,并达到通用的目的
XHTML (eXtensible Hyper Text Markup Language;可扩展的超文本标记语言),与 HTML不同的是前者基于 XML 而后者基于 SGML ,前者语法严谨,标签必须闭合、标签名称必须小写、必须符合嵌套标准等 …而后者语法松散,语法相对严谨有利于机器的解析、语法相对宽松有利于开发者自由的发挥。
XML 多用于在 Web 上或者其他多种数据源间进行数据交换。与 HTML 不同的是,HTML 用于显示数据而 XML 则被用于传输和存储数据。二者一个专注展示、一个专注存储与交换。

为什么 H5 中不需要引入 DTD(Document Type Definition)?

XHTML - 约束:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XML - 约束:

<?xml version="1.0" encoding="UTF-8"?>
	<beans xmlns="http://www.springframework.org/schema/beans"
	     	    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 	    xmlns:myns="http://www.mycompany.com/schema/myns"
	 	    xsi:schemaLocation="
	 	    http://www.springframework.org/schema/beans
	 	    http://www.springframework.org/schema/beans/spring-beans.xsd
	 	    http://www.mycompany.com/schema/myns
	 	    http://www.mycompany.com/schema/myns/myns.xsd">
	</beans>

HTML 4.01 - 约束:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5 - “约束”

<!DOCTYPE html>

因为 XML 为 SGML 的子集,所以必然会有 dtd 约束、XHTML 基于 XML为了约束 HTML 语言规范的产物也理应引入 dtd 约束。只有 HTML5 之前版本是 SGML 的一个应用,所以必然也会引入 dtd 约束,但是 HTML5 不是基于 SGML (具体基于什么暂时未知) 所以不必引入 dtd 约束。

HTML5的设计者认为DTD的表达能力太有限，HTML5验证器（基本上是http://validator.nu的HTML5模式及其在http://validator.w3.org/nu/上的副本）使用模式和临时检查，而不是基于DTD的验证。

<!DOCTYPE html> 这是 H5 的 DOCTYPE 声明,与 HTML 4 以及其以前的版本不一样的地方就在于其 DOCTYPE 声明加入了 DTD 约束,就像上面所说的,这样一来既不美观又给开发人员带来不便(前缀太长)。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
其中 http://www.w3.org/TR/html4/loose.dtd 就是传说中的 DTD 约束,浏览器会根据其规定的规则对 HTML 进行解析。
----->来自 HTML 4.1 版本的 DTD 约束(详细内容)(传送门)

但其实 <!DOCTYPE html> 的重要作用除了在检查 HTML 语法之外,另一个重要作用则在于其是告诉浏览器该以什么模式进行解析。
由于历史原因,在早期的时候各个浏览器对 HTML 的实现标准不同就导致有很多的老网页针对的是个别浏览器的实现而制定的页面,这就导致了日后将页面跑在其他浏览器上的时候会出现比较 “怪异”的显示,导致了很大的不兼容性,而且通常这部分网页都没有 DOCTYPE 声明。所以针对各个浏览器都通过自己的一套实现来解释网页的行为就称为浏览器的 怪异模式(兼容模式)Quirks mode,而后来则出现了 W3C 的语言规范,各大浏览器厂商也都纷纷采用该组织制定的语言规范,这才使得日益严重的兼容问题得到了缓解。其方法就是在文档的开头添加 DOCTYPE 声明并指定对应的 DTD 约束,浏览器就会按照 W3C 规定的统一的语言标准来解析网页,这一行为又称为浏览器的 标准模式(严格模式)Strict/Standards mode。针对没有 DOCTYPE 声明的或者 DOCTYPE 声明错误的浏览器都会采用 怪异模式 进行解释,而针对有 DOCTYPE 声明的浏览器一般会采用 标准模式 进行解释。
下面是有 DOCTYPE 声明的浏览器采取的解释策略图:

而集于万千宠爱与一身的 HTML5 则是基本被在以浏览器的标准模式下进行解释。

如果不写 `DOCTYPE` 声明,对页面是否产生影响?为什么?

<!DOCTYPE html> 标签不属于 HTML5 中的标签。
不写 <!DOCTYPE html> 标签不会对页面产生影响,但是这会影响浏览器选择解析的模式。
写 DOCTYPE 声明浏览器就会启用 标准模式 ->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试浏览器的解析模式</title>
    <style>
        div {
            margin-left: 5px;
            padding-left: 2px;
            border: 1px solid green;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div>
    Hello World!
</div>
</body>
</html>

不写或者书写错误的 DOCTYPE 就会导致浏览器启用 怪异模式。

<html>
<head>
    <meta charset="utf-8">
    <title>测试浏览器的解析模式</title>
    <style>
        div {
            margin-left: 5px;
            padding-left: 2px;
            border: 1px solid green;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<div>
    Hello World!
</div>
</body>
</html>

没错: CSS1Compat 代表标准模式,BackCompat 代表怪异模式(通过 document.compatMode 语句来进行检测)

如果在页面第一行处不写 `DOCTYPE` 声明会怎样(页面可否能够正常解析)?

页面可以正常解析,但是浏览器会开启 怪异模式 进行解析,即抛弃 W3C 标准规范,按照浏览器各自的实现方式去解析。故为了页面可以在其他的浏览器上面跑,强烈建议将 DOCTYPE 声明加上!

HTML5 与 HTML 的区别?什么又是标签语义化?为什么要实现标签语义化? H5 新增了哪些语义化标签?

H5 标签的语义化程度得到了很大程度的提高,并且为表单提供了新的类型与属性,提高了表单的多元化。摒弃了 flash 等第三方插件,直接支持音频功能。支持了 canvas 绘图,这在需要大量线条等效果的情况下,可以避免因操纵过多的 DOM 元素而导致的浏览器崩溃问题,并且其格式本身为 pic ,方便下载却占用很少的内存。支持 SVG ,我们都知道 SVG 是基于 XML 的描述 2D 的图形语言,这就意味着 SVG 中的每个 DOM 元素都是可用的。支持很多的新型 API 比如拖放、地理定位、离线存储、Web存储、应用程序缓存、WebSocket、WebWorkers等 H5 原生 API 这简直就是一大利器,相比较以前的 HTML 规范来说,H5` 的功能更加的多元化、语言规则更加宽松、并且基本无兼容性问题或兼容问题较小。

所谓标签语义化就是合理的标签做合理的事情。

实现标签语义化主要有以下几点意义:
-1).有利于代码维护
-2).使代码的可读性变高,便于开发
-3).便于搜索引擎抓取,有利于 SEO 优化
-4).使页面结构清晰并正确的传达网页想要表述的内容

H5 新增加的语义化标签有:

<article><!-- 定义页面独立的内容区域 -->
<aside><!-- 定义页面的侧边栏内容 -->
<bdi><!-- 允许您设置一段文本，使其脱离其父元素的文本方向设置 -->
<command><!-- 定义命令按钮，比如单选按钮、复选框或按钮 -->
<details><!-- 用于描述文档或文档某个部分的细节 -->
<dialog><!-- 定义对话框，比如提示框 -->
<summary><!-- 标签包含 details 元素的标题 -->
<figure><!-- 规定独立的流内容（图像、图表、照片、代码等等）。 -->
<figcaption><!-- 定义 <figure> 元素的标题 -->
<footer><!-- 定义 section 或 document 的页脚。 -->
<header><!-- 定义了文档的头部区域 -->
<mark><!-- 定义带有记号的文本。 -->
<meter><!-- 定义度量衡。仅用于已知最大和最小值的度量。 -->
<nav><!-- 定义导航链接的部分。 -->
<progress><!-- 定义任何类型的任务的进度。 -->
<rt><!-- 定义字符（中文注音或字符）的解释或发音。 -->
<section><!-- 定义文档中的节（section、区段）。 -->
<time><!-- 定义日期或时间。 -->
<wbr><!-- 规定在文本中的何处适合添加换行符。 -->
<canvas><!-- 画布 -->
<audio><!-- 定义音频内容 -->
<video><!-- 定义视频 -->
...

HTML 标签的学习

什么是 `元素` ?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

在上述代码中我们有 <html> 根元素、<head> 元素、<body> 元素、<meta> 元素、<title> 元素、<h1> 元素
<h1>Hello World!</h1> 这个叫做 h1 标签,其中间的 Hello World 是其(元素/标签)内容

什么是 `属性`?

上述代码 <meta charset="utf-8"> 中的 charset 就是 <meta> 的字符集属性,而 utf-8 被称为属性值。

标题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <hr>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <hr>
</body>
</html>

h1 ~ h6 标题的大小是依次递减,而且其重要程度也呈递减趋势。所以 h1 不能轻易使用,并且 h1 ~ h6 最好也都用于标题切勿用于他处!
hr 是水平线

段落

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
<h1>引用</h1>
<i>一段文字</i>
<p>
    是不是我的页面占用了太多的内存？
    - 内存时间轴视图 以及 Chrome 任务管理器 可以帮助你来确认是否占用了过多的内存。内存视图在监察过程中可以实时跟踪 DOM 节点数目、文件以及 JS 事件监听器。有一条重要法则需要记住：避免保留对已经不需要的 DOM 元素的引用，不必要的事件监听器请解除绑定，对于大量的数据，在存储时请注意不要存储用不到的数据。
</p>
</body>
</html>

虽然在 <p> 元素内容中的开始加上了 TAB 缩进,以及在 内存? 后面使用了换行但是浏览器效果并没有出现期待的效果,可见 <p> 元素会自动的删除空格以及换行
改进:通过 CSS 实现缩进,通过 <br> 元素实现换行

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
    <style type="text/css">
        p {
            text-indent: 2rem;
        }
    </style>
</head>
<body>
<h1>引用</h1>
<i>一段文字</i>
<p>
    是不是我的页面占用了太多的内存？<br /> - 内存时间轴视图 以及 Chrome 任务管理器 可以帮助你来确认是否占用了过多的内存。内存视图在监察过程中可以实时跟踪 DOM 节点数目、文件以及 JS 事件监听器。有一条重要法则需要记住：避免保留对已经不需要的 DOM 元素的引用，不必要的事件监听器请解除绑定，对于大量的数据，在存储时请注意不要存储用不到的数据。
</p>
</body>
</html>

文本格式化

※虽然 <b> 元素、 <i> 元素和 <strong> 元素、<em> 元素效果一样,但是含义却不一样,前一组强调的是文本本身的样式、后一组强调的是文本很重要需要突出显示。但是 W3C 明确表明,<b> 元素与 <i> 元素应该在迫不得已的时候使用,正常情况下标题有 h1 ~ h6 ,强调文本有 <em>元素、重要文本有 <strong> 元素、高亮有 <mark> 元素,或者可以通过 CSS 来设置。

b 标签 - 定义粗体文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - b(加粗)</title>
</head>
<body>
Hello <b>World!</b>
</body>
</html>

em 标签 - 定义斜体文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - i(斜体)</title>
</head>
<body>
Hello <em>World!</em>
</body>
</html>

strong 标签 - 重要文本

※ W3C 也明确表明,除了强调某个重要文本而使用该标签,如果仅仅是为了追求页面效果那应该使用 CSS 来控制实现。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - strong(重要)</title>
</head>
<body>
The text is very <strong>important</strong>
</body>
</html>

em 标签 - 强调文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - em(强调)</title>
</head>
<body>
This is a important <em>apple!</em>
</body>
</html>

small 标签 - 定义小号文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - small(小号)</title>
</head>
<body>
The text is very <small>small!</small>
</body>
</html>

sub与sup 标签 - 上下标

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - subAndsup(上下标)</title>
</head>
<body>
H<sub>2</sub>o
<br />
2<sup>2</sup> = 4
</body>
</html>

del与ins 标签 - 删除和插入文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - delAndins(删除与插入)</title>
</head>
<body>
Don't delete <del>me</del> <ins>you</ins>!
</body>
</html>

code、kbd、samp、var 标签 - 计算机文本、键盘文本、计算机样本文本、变量

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - code&kbd&samp&var(计算机、键盘、样本、变量)</title>
</head>
<body>
<code>computer text!</code><br>
<kbd>computer keyboard!</kbd><br>
<samp>compute style text!</samp><br>
var <var>arr</var> = [1, 2, 3];

</body>
</html>

pre 标签 - 预格式文本

预格式文本就是保留你在页面设置的缩进、空格、换行,绝对固定布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - pre(预格式)</title>
</head>
<body>
<pre>
    <p>     The software is provided "AS IS" without any warranty, either expressed or implied, including,but not limited to,
the implied warranties of merchantability and fitness for articular purpose. The author will not be liable for any special,
incidental,consequential or indirect damages due to loss of data or any other reason.
    </p>
</pre>
</body>
</html>

abbr 标签 - 定义缩写文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - abbr(缩写).html</title>
</head>
<body>
This is <abbr title="World Wide Web">WWW</abbr>!
</body>
</html>

address 标签 - 定义地址文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - address(地址)</title>
</head>
<body>
<footer>
    <address>
        <em>TEL:</em>17803218829
        <br>
        <em>E-Mail:</em><a href="###">Go mail -> </a>
    </address>
</footer>
</body>
</html>

这个 <address> 元素就是描述地址,其实乍一看好像并没有实际意义,但是还是那句话,标签语义化很重要!

bdo 标签 - 定义方向文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - bdo(方向)</title>
</head>
<body>
<bdo dir="ltr">321</bdo>
<bdo dir="rtl">654</bdo>
</body>
</html>

实际上通过 dir 属性的 rtl 属性值就可以实现翻转文本的效果

cite 标签 - 定义作品标题

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - cite(作品标题)</title>
</head>
<body>
<cite>《朝花夕拾》</cite> is LX's book!
</body>
</html>

dfn 标签 - 定义项目名称

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>4.格式化文本 - dfn(项目名)</title>
</head>
<body>
The project is <dfn>YHShop</dfn>!
</body>
</html>

a 标签 - 定义超链接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5.超链接</title>
    <style>
        #text {
            width: 100px;
            text-align: center;
            position: relative;
            top: 700px;
        }

    </style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度 _blank</a><br>
<a href="https://www.baidu.com" target="_self">百度 _self</a><br>
<a href="https://www.baidu.com" target="_parent">百度 _parent</a><br>
<a href="https://www.baidu.com" target="_top">百度 _top</a>

<!-- 测试链接到同一文档的不同位置 -->

<h2>App 排名</h2>
<a href="#nav_zh">知乎</a>
<span>微博</span>
<span>CSDN</span>

<p id="text">
    <a id="nav_zh">知乎</a>
    知乎是一个 ...。AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<p>
    <a id="nav_wb">微博</a>
    ...
</p>
<p>
    <a id="nav_csdn">CSDN</a>
    ...
</p>
</body>
</html>

※.特殊功能 -> <a> 元素不仅可以链接到外部资源同时也可以链接到内部文档的任何位置上。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>5.超链接</title>
    <style>
        #text {
            width: 100px;
            text-align: center;
            position: relative;
            top: 700px;
        }

    </style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度 _blank</a><br>
<a href="https://www.baidu.com" target="_self">百度 _self</a><br>
<a href="https://www.baidu.com" target="_parent">百度 _parent</a><br>
<a href="https://www.baidu.com" target="_top">百度 _top</a>

<!-- 测试链接到同一文档的不同位置 -->

<h2>App 排名</h2>
<a href="#nav_zh">知乎</a>
<span>微博</span>
<span>CSDN</span>

<p id="text">
    <a id="nav_zh">知乎</a>
    知乎是一个 ...。AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<p>
    <a id="nav_wb">微博</a>
    ...
</p>
<p>
    <a id="nav_csdn">CSDN</a>
    ...
</p>
</body>
</html>

这是一个缩略图

真实情况

点击 知乎 看看是否可以跳转到下面

成功跳转,这其实涉及到 URI(uri而不是URL) 方面的一些知识。这里不做过多介绍。

头部标签

※.头部标签 head 总共包含 7 种标签。<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>。

-1).title(页面标题;通常显示在页卡部位)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - title</title>
</head>
<body>
<h1>网页标题通常显示在页卡部分!通常由 title 控制!</h1>
</body>
</html>

-2).style(内嵌 CSS 样式),包含 3 个属性。(type、scoped、media)

=> type 属性:规定样式表的 MIME 类型

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - title</title>
    <style type="text/css">
        h1 {
            text-align: center;
            color: #00F;
        }
    </style>
</head>
<body>
    <h1>Hello World ...</h1>
</body>
</html>

=> scoped 属性:将样式应用到 style 元素的父元素及其子元素上,但是主流浏览器都不支持。
=> media 属性:根据媒体设备的不同选择相应的样式表(常用属性值:print、screen)。
-> print 属性值(停用一切关于页面上的所有 CSS 样式,而是采用被标识 print 的样式表)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - title</title>
    <style type="text/css">
        h1 {
            text-align: center;
            color: #00F;
        }
    </style>
    <style type="text/css" media="print">
        h1 {
            color: #0F0;
        }
    </style>
</head>
<body>
    <h1>Hello World ...</h1>

    <div>
        <!-- scoped 属性:将样式应用到 `style` 元素的父元素及其子元素上,但是主流浏览器都不支持。 -->
        <style scoped>
            div {
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background: red;
            }
        </style>
        <span>
            Hello
        </span>
    </div>
    <div>
        <span>World ...</span>
    </div>
</body>
</html>

打印之前:

打印预览:

-> screen 属性值根据设备的不同选择不同的 CSS 资源。

-3).link(外部引入资源),主要有 6 个属性(href、hreflang、sizes、media、rel、type)

=> href:定义链接文档的位置(引入外部资源)。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link</title>
    <link href="../static/css/6.头部标签%20-%20link.css">
</head>
<body>
    <p class="show">Hello World!</p>
</body>
</html>

再来看看目录结构

但是页面并没有丝毫的样式

而且请求只发送了一个页面的请求,却迟迟未发送有关样式表的请求(没有去请求 CSS 资源当然没有样式了)

=> rel(定义当前文档与被链接文档之间的关系;有两个属性值(stylesheet与icon)前者代表样式表,后者代表页卡图标)
这个时候必须通过 rel 来指定 link 加载的资源的模式。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link.css">
</head>
<body>
    <p class="show">Hello World!</p>
</body>
</html>

如图所示,在请求面板上看到,除了发送的页面的请求,还多了一个有关样式表的请求,将样式表请求到以后才可能会有渲染发生。
所以初步总结,当使用 link 标签的时候如果不指定 rel的话,浏览器就不知道该请求什么资源,所以也就谈不上渲染样式了,因为对应的 CSS 资源都没拿到,凭借什么去渲染呢?
rel 还有一个 icon 属性值,表示加载的资源是页卡的 logo 标。
我们把 gitHub 上面的 logo 标拿过来用下。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link.css">
    <link rel="icon" href="https://github.githubassets.com/favicon.ico">
</head>
<body>
    <p class="show">Hello World!</p>
</body>
</html>

=> hreflang(定义链接资源的语言形式)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link.css" hreflang="zh">
    <link rel="icon" href="https://github.githubassets.com/favicon.ico">
</head>
<body>
    <p class="show">Hello World!</p>
</body>
</html>

我们已经指定为中文了,下面是语言表:

=> 在 <link> 元素中的 media属性也同样有两个属性值(print、screen),用法与 style 那个应该是如出一辙。
-> print

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link.css" hreflang="zh">
    <link rel="icon" href="https://github.githubassets.com/favicon.ico">
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link(print).css" media="print">
</head>
<body>
    <p class="show">Hello World!</p>
</body>
</html>

正常状态

打印预览

-> screen 略!

=> type:指定被链接文本的 MIME 类型(4个可选参数 text/css、text/plain、text/xml、text/html)
-> text/css

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link(type)</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link(type).css" type="text/css">
</head>
<body>
    <h1>Hello World ...</h1>
</body>
</html>

-> text/plain

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>6.头部标签 - link(type)</title>
    <link rel="stylesheet" href="../static/css/6.头部标签%20-%20link(type).css" type="text/plain">
</head>
<body>
    <h1>Hello World ...</h1>
</body>
</html>

-> text/html,与 text/xml 的情况与 text/plain 相同,浏览器找不到对应类型的资源所以最终结果无法渲染。
其中:

名称	类型
text/plain	文本
text/html	html 文档
text/xml	xml
text/css	层叠样式表

-4).meta(规定 html 文档的元数据);属性包括(content、charset、http-equiv、name)

=> charset 属性;规定当前页面采取的编码集

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="ISO-8859-1">
    <title>7.规定元数据 - meta</title>
</head>
<body>

</body>
</html>

采取了 ISO-8859-1 的编码

换为中文或英文编码
<meta charset="UTF-8">

具体编码集分类
IANA 编码集

=> content 属性;属性值(description、keywords)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="前端,HTML,测试">
    <meta name="description" content="正在重学前端的路程上 ...">
    <meta name="author" content="刘杰">
    <meta name="copyright" content="Copyright © 2019 YHStudio.com Inc.All Rights Reserved">
    <title>7.规定元数据 - meta</title>
</head>
<body>

</body>
</html>

=> http-equiv 属性;属性值(“timer; URL=…?”)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="前端,HTML,测试">
    <meta name="description" content="正在重学前端的路程上 ...">
    <meta http-equiv="refresh" content="10; URL=https://www.baidu.com/">
    <title>7.规定元数据 - meta</title>
</head>
<body>

</body>
</html>

10s 后自动跳转到百度。

=> name 属性;通常与上述属性配合使用,略

-5).base(将页面上所有的相对 URL 规定基准的 URL)

以前觉得这个标签就是多余,可是直到今天看见了一篇文章告诉我我错了,这个 base 标签实在是太有用处了。
他可以帮助你提高页面的权重，可以简化页面链接的结构，有利于 SEO 优化。
举个"栗子"
就拿我们平时项目中的图片路径来说吧,相信大家的项目目录结构绝对不是简简单单的吧,至少是这样:
甚至稍微大一点的项目目录结构会更加的复杂。
这就导致了我们的路径嵌套现象极为严重,这绝对在一定程度上拉低了页面性能,当然这仅仅指的是相对路径,但是真正的将项目部署到后台通常需要将相对路径换为绝对路径,绝对路径?太恶心了。
http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/static/img/h5.png 这样你说恶心不?
但是使用 base 标签之后就会集中权重提升性能。

使用 base 标签之前:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.规定元数据 - base</title>
</head>
<body>
<a href="5.超链接.html">点我啊</a>
<form action="5.超链接.html" method="get">
    <input type="submit" value="GO!">
</form>

<img src="http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/static/img/h5.png" alt="h5">
</body>
</html>

没问题,可以正常访问,但是仔细看看 img 标签的 URL 吓人不?要是图片再多点吓人不?

使用 base 标签之后

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.规定元数据 - base</title>
    <base href="http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/static/img/" target="_blank">
</head>
<body>
<a href="5.超链接.html">点我啊</a>
<form action="5.超链接.html" method="get">
    <input type="submit" value="GO!">
</form>

<img src="h5.png" alt="h5">

</body>
</html>

ok!这样一看是不是顺眼多了?
但是有一点:此时你再访问 5.超链接.html 也就是你点击上面的超链接与提交 form 表单你会发现访问不到 5.超链接.html 了。是 404 !what???

仔细看一下路径发现不对

改正一下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.规定元数据 - base</title>
    <base href="http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/static/img/" target="_blank">
</head>
<body>
<a href="/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/templates/5.超链接.html">点我啊</a>
<form action="5.超链接.html" method="get">
    <input type="submit" value="GO!">
</form>

<img src="h5.png" alt="h5">

</body>
</html>

真的可以跳转了,但是问题又来了,要是多几个 a 标签怎么办?很长的嵌套路径这个问题依然没有得到妥善解决,虽然我们已经处理了图片的路径。
进一步改善:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.规定元数据 - base</title>
    <base href="http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/" target="_blank">
</head>
<body>
<a href="templates/5.超链接.html">点我啊</a>
<form action="templates/5.超链接.html" method="get">
    <input type="submit" value="GO!">
</form>

<img src="static/img/h5.png" alt="h5">

</body>
</html>

这样是不是又好很多?我们只是将 src 后面的路径去掉,这部分路径自由定制,这不就灵活起来了吗!
那如果我想加一个外链怎么办? base 标签可是会进行干扰的啊,不用担心, base 标签拦截的只是相对路径,假如要加外链直接加上即可。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>8.规定元数据 - base</title>
    <base href="http://localhost:63342/%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%20HTML%20%E4%B8%8E%20CSS/src/" target="_blank">
</head>
<body>
<a href="templates/5.超链接.html">点我啊</a>
<form action="templates/5.超链接.html" method="get">
    <input type="submit" value="GO!">
</form>

<img src="static/img/h5.png" alt="h5">

<a href="https://weibo.com/">微博</a>

</body>
</html>

点击 微博 超链接

非常完美

-6). noscript(在用户浏览器不支持 `<script>` 脚本元素的时候,给用户以提示)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>9.不支持脚本时的提示 - noscript</title>
    <noscript>
        <strong style="text-align: center;display: block;margin: 0 auto;">
            对不起您的浏览器不支持 &lt;script&gt; 脚本元素,导致有些页面效果或者功能使用异常,问题原因可能是浏览器版本较低或者浏览器已经禁用该功能,请进行手动配置!
        </strong>
        <hr>
    </noscript>
</head>
<body>

<button id="btn" value="btn-test">弹框 ...</button>

<script type="text/javascript">
    // 为 btn 绑定点击事件监听
    btn.addEventListener('click', function() {
        alert(this.value);
    }, false);
</script>
</body>
</html>

通过以上代码,就可以通过 <noscript> 元素来检测用户客户端的浏览器是否支持 <script> 元素,并给与提示。下面的 js 脚本代码应该不会执行(前提是浏览器不支持 script 哦!!! 笔者已经将浏览器的相关功能关闭了)。

然后点击 btn

并没有 alert 弹窗出现。
下面就是开启 <script> 脚本功能

再回来刷新页面

可以看到, <noscript> 元素提示的字迹消失。
再点击 btn

-7). script(脚本);有5个属性(async、defer、src、type、charset)

=> charset 脚本的语言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.脚本 - script</title>
    <script charset="UTF-8">
        alert("Hello!");
    </script>
    <style>
        div {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           text-align: center;
           line-height: 100px;
           background: pink;
        }
    </style>
</head>
<body>
    <div>Hello Script ...</div>
</body>
</html>

正如图片所示,没有指定 type 属性脚本依然执行成功了,这就说明 type 属性可以加可以不加换句话说 type 属性的默认属性值就是 text/javascript。

=> type 脚本的 MIME 类型
type 属性默认属性值就是 text/javascript。
其他属性值参看官方说明:Media Types

=> src 脚本的路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.脚本 - script</title>
    <!--<script charset="UTF-8">
        alert("Hello!");
    </script>-->
    <script type="text/javascript" src="../static/js/10.脚本%20-%20script.js"></script>
    <style>
        div {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           text-align: center;
           line-height: 100px;
           background: pink;
        }
    </style>
</head>
<body>
    <div>Hello Script ...</div>
</body>
</html>

10.脚本 - script.js

alert("Hello!");

=> async 脚本异步执行(相对于页面剩余的内容)(仅仅用于外链,不用于内嵌)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.脚本 - script</title>
    <script charset="UTF-8" async>
        alert("Hello!");
    </script>
    <style>
        div {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           text-align: center;
           line-height: 100px;
           background: pink;
        }
    </style>
</head>
<body>
    <div>Hello Script ...</div>
</body>
</html>

可见这个 async 属性用在内嵌的 <script> 元素中的时候是不会发挥作用的。
来试一试这个外链的方式引入 script 脚本设置 async 属性会不会有效!

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.脚本 - script</title>
    <script type="text/javascript" src="../static/js/10.脚本%20-%20script.js" async></script>
    <style>
        div {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           text-align: center;
           line-height: 100px;
           background: pink;
        }
    </style>
</head>
<body>
    <div>Hello Script ...</div>
</body>
</html>

这是怎么回事?为什么不是异步执行的?
其实遇见这种情况我们可以通过 Chrome devtools(谷歌浏览器开发者工具) 来进行分析。
截取关键时段的时间线进行观察:
首先观察同步执行脚本的页面的解析过程。
代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>testAsync</title>
    <script type="text/javascript">
        alert("Hello!");
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background: pink;
        }
    </style>
</head>
<body>

<div>Hello Script ...</div>


</body>
</html>

效果不用说了上面两张图说明了一切,下面通过时间线看看页面是怎样被加载的

实际上就是这样一个过程 : 解析 -> 中断解析执行脚本 -> 继续解析剩余内容 -> 重新计算样式 -> 布局 -> 更新渲染树 -> 将渲染树的内容打印到页面上

再来通过时间线分析一下, 设置了 async 也就是上面我们有疑问的地方,为什么设置了却未发生想要的结果呢?
因为当我们为 script 脚本设置了 async 属性之后,实际上也确实是立即异步下载了对应资源并执行,只不过其执行的速度比较快所以我们看到的结果和以前一样,但是这并不意味着 async 属性仅仅只是个摆设。倘若设置了 async 属性的脚本执行的速度稍慢,而 html 文档解析的速度稍快,结果则会是先出现渲染的结果再出现 “alert” 弹框。
时间线分析一波:

实际上就是这样一个过程 : 解析(同时发送请求 script 脚本资源) -> 解析完毕 -> 执行脚本 -> 布局 -> 更新渲染树 -> 将渲染树的内容打印到页面上
但是这个过程充满着不确定性,就像上面所说的, “谁快谁上”。
再来看看一个实验:
将 10.脚本 - script.js 内容改为

for(let i = 0; i < 100000;i++) {
    console.info("ok");
}

这根上面说的执行的顺序又不一样了,所以还是应了那句话,因为是异步,所以谁快谁上。

=> defer 脚本在页面解析完成之后执行(仅仅用于外链,不用于内嵌)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10.脚本 - script</title>
    <script src="../static/js/10.脚本%20-%20script(defer).js" defer></script>
    <style>
        div {
           width: 100px;
           height: 100px;
           border-radius: 50%;
           text-align: center;
           line-height: 100px;
           background: pink;
        }
    </style>
</head>
<body>
    <div>Hello Script ...</div>
</body>
</html>

10.脚本 - script(defer).js

for(let i = 0; i < 10000; i++) {
    console.info("bingo!");
}

结合时间线分析一波

实际上是这样一个过程:
解析 -> 重新计算样式 -> 布局 -> 更新渲染树 -> 将渲染树的内容打印到页面上 -> 执行脚本

=> 综上所述,小图一张以作总结

css 引入

※.说到 CSS 的引入问题无非就 4 种方式:(内联式、内嵌式、外链式、导入式)
四种方式各有千秋,但是在其"背景"、兼容性、以及 JavaScript 获取和操纵上面的情况可是大不相同。

内联式

<div class="box-third" style="width: 100px;height: 
100px;border-radius: 50%;text-align: 
center;line-height: 100px;background: 
purple;">third</div>

内联式这种方式应该是以前最早的时候我们为 html 设计样式的时候所选择的方案。
这样做首先第一点,直接将样式加在对应的标签上面这样更加直观。但是该种方案有着一定的缺点，但是这样一来就导致了标签内容的冗长不利于维护与读写,满篇的样式代码没有遵守页面结构与样式设计分离的原则。所以这种方式必定是过时的,但是针对于个别元素在特殊情况下也可以使用。

内嵌式

    <style type="text/css" rel="stylesheet">
        .box-first {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            background: pink;
        }
    </style>

内嵌式在笔者看来一些简单的,单一的单页可以使用该种方式,并且这种方式也是笔者在开发模式下惯用的方式。
初步实现了"分离"的效果但还是不是特别彻底,但是代码可维护性与整洁度都比内联式的方式要提升一个档次。
缺点就是同样没有遵循 “页面结构与样式代码分离的原则” 。代码少还可以,一旦样式代码过多也同样不利于维护,这也是笔者无法忍受的。

外链式

<link rel="stylesheet" 
href="../static/css/11.css%20-%20stylesheet(link).css">

这种方式可以说彻底的遵循了 “页面结构与样式分离的原则”。尽管通过这种方式在解析的时候可能还会另外发送一个请求对应的 CSS 资源,但是这依然首选的方案,原因有二:
-1).结构层次分明 html 与样式表真正分离便于维护。
-2).link 属于 html 原生的标签基本不存在兼容问题,并且对 JavaScript 的支持很友好,甚至可以通过 JavaScript 动态的添加 link 标签来添加样式。

导入式

    <style type="text/css" rel="stylesheet">
        @import url("../static/css/11.css - stylesheet(import).css");
    </style>

导入式也彻底的实现了"页面结构与样式代码" 分离的原则,但是其是属于 CSS 语法的支持,存在一定的兼容问题。

=> 综上所述:在开发环境或者生产环境的时候最好使用外链式(link)。在开发环境中可以适当使用内嵌式但是在项目正式上线之前定要替换为外链式(link)。

外链式(link)与导入式(@import)的区别

-1).功能上:

-> @import 仅仅只是具有导入 CSS 资源这一项功能,而 link 除了导入 CSS 资源意外,还可以通过其他属性来实现定义页卡图标与定制 RSS。

<!-- 定制 RSS -->
<link href="rss.xml" type="application/rss+xml" rel="alternate" title="My Website's RSS Feed" />

-2).兼容上:

-> @import 属于 CSS 语法的支持,在 CSS 2.1才支持该语法,就是说只能在 IE 5+ 能正常使用。而 link 标签则是 html 原生的标签所以其不存在兼容问题。

-3).解析顺序上

要想弄明白 link 与 import 的加载顺序以及各种情况下的加载过程,需要通过 Google Chrome's Devtools's TimeLine 进行分析。
以下主要进行这几点分析:
-1).html + link + @import 共同加载
-2).html + 多个 link 共同加载
-3)html + 多个 @import 共同加载
-4).html + 多个 link + 多个 @import 共同加载
-5).·html· + link 中包含着 @import 加载

(1).`html` + `link` + `@import` 共同加载

代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test_html_css_loaded_hli</title>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hli(import).css');
    </style>
    <link type="text/css" rel="stylesheet" href="css/test_html_css_loaded_hli(link).css">
</head>
<body>
    <div id="box-first">first</div>
    <div id="box-second">second</div>
</body>
</html>

css:
test_html_css_loaded_hli(link).css

#box-second {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: green;
}

test_html_css_loaded_hli(import).css

#box-first {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: pink;
}

NetWork:

通过上图可说明,浏览器加载页面的时候会先到 cache(缓存) 中去找寻所需资源文件,如果资源文件存在并且未过期也未更新则取用该资源文件,如果不存在或者已过期或者有更新则重新进行请求,并且 link 引用的资源要比 import 引入的资源要快、要早。

通过上图我们可以知道,蓝线代表 DOM 树构建完成、红线代表页面有关的所有资源加载完成。结合以 (link) 请求的时序图与 (import) 请求的时序图则说明,无论采取 (link) 还是 (import) 的方式引入 CSS 资源其都是在 DOM 结构构建完毕后才加载完毕的,而非网上说的: link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。其实只要稍微懂点浏览器解析常识与 Google Chrome's Devtools 的使用,不难分析出来这句话简直是漏洞百出。

TimeLine

综上所述: 使用 link 引入 CSS 资源要早于并且快于使用 @import 引入的 CSS 资源。
并非像网上所说的 @import 引入的资源要在 html 结构全部解析完成之后才会加载。而是在 html 文档正在解析时,解析到 link 或者 @import 的时候会像服务器发送请求,同时 html 不会等到请求到资源并下载后才会继续解析,而是直接在发送请求后立即继续解析而不受其干扰,请求的资源在 DOM 树构建完毕后加载完成并进行样式表的解析、布局、更新渲染树 … 。

(2).`html` + 多个 `link` 共同加载

代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test_html_css_loaded_hl</title>
    <link rel="stylesheet" href="css/test_html_css_loaded_hl(link_1).css">
    <link rel="stylesheet" href="css/test_html_css_loaded_hl(link_2).css">
    <link rel="stylesheet" href="css/test_html_css_loaded_hl(link_3).css">
</head>
<body>
    <div id="box-first">first</div>
    <div id="box-second">second</div>
    <div id="box-third">third</div>
</body>
</html>

test_html_css_loaded_hl(link_1).css

#box-first {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: pink;
}

test_html_css_loaded_hl(link_2).css

#box-second {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: green;
}

test_html_css_loaded_hl(link_3).css

#box-third {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: orange;
}

NetWork:

通过上图,可以了解到,虽然说多个 link 标签共同加载,并不能做到像网上说的那样同时并行下载,其实可以做到并行下载,但"同时" 是不可能的(这根 CPU 的执行权有着一定的关系)。但是虽然做不到 “同时” 但是其加载的时间相差不多。
即使是多个 link 共同加载,也是有着先后顺序,并且其顺序就是开发者定义好的顺序。所以 link 是有序的。

TimeLine:

综上所述:通过 link 引入 CSS 资源是顺序的,是按照请求发送的时候的顺序进行加载与解析的。所以说使用 link 来定义资源,不会乱!!!

(3)`html` + 多个 `@import` 共同加载

多个 @import 并不像网上说的那样不堪,一说 @import 好像只能是非并行加载,其实不然,经过实践证明,即使是 @import 也是可以并行加载的,只不过有些时候会出现非并行加载的情况。所以相比较 link ,@import比较不稳定加载速度较慢可能出现非并行加载的情况。
随机取样两次测试:
测试一:
NetWork:

TimeLine:

测试结果: 通过 @import 引入的多个 CSS 加载情况为既有并行又有非并行的加载。

测试二:
NetWork:

TimeLine:

由上图可知,通过 @import 引入的多个 CSS 资源是非并行下载的。

由上图分析可知:通过 @import 引入多个 CSS 资源可能是并行下载的、可能是非并行下载的、也有可能是既有并行又有非并行下载的。所以 @import 不稳定。

(4).`html` + 多个 `link` + 多个 `@import` 共同加载

代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test_html_css_loaded_hm(li)</title>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hm(li)(import_3).css');
    </style>
    <link rel="stylesheet" type="text/css" href="css/test_html_css_loaded_hm(li)(link_3).css">
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hm(li)(import_2).css');
    </style>
    <link rel="stylesheet" type="text/css" href="css/test_html_css_loaded_hm(li)(link_2).css">
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hm(li)(import_1).css');
    </style>
    <link rel="stylesheet" type="text/css" href="css/test_html_css_loaded_hm(li)(link_1).css">
</head>
<body>
    <div id="box-first">first</div>
    <div id="box-second">second</div>
    <div id="box-third">third</div>
    <div id="box-forth">forth</div>
    <div id="box-fifth">fifth</div>
    <div id="box-sixth">sixth</div>
</body>
</html>

NetWork:

TimeLine:

由上图可见即使将 CSS 的顺序在一开始定义的时候打乱但是其在加载的时候依然会先加载 link 方式请求的资源然后再加载 @import 方式请求的资源，但是无论是哪种方式其请求资源的先后顺序都是按照一开始定义的顺序进行工作的。

(5).`html` + `link` 中包含着 `@import` 加载

由上图可知,被引用在 link 中的那两个 @import 的加载时机就是在 link 解析到他们二位的时候。

-4).JavaScript 脚本的可操纵性上

-> 可以通过 JavaScript 插入 link 标签来引入 CSS 资源并更改样式,但是 JavaScript 做不到直接插入 @import 来实现同样的功能。只能依次插入 style 标签或者 link 标签,以他们为载体实现同样的功能。
-> 但无论是 @import 方式导入的 CSS 资源,还是通过 link 引入的资源都是可以通过 JavaScript 来设置/更改样式。
代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test_html_css_loaded_hl(i)</title>
    <link rel="stylesheet" href="css/test_html_css_loaded_hl(i)(link).css" type="text/css">
</head>
<body>
    <div id="box-first">first</div>
    <div id="box-second">second</div>
    <div id="box-third">third</div>
</body>
</html>

再来看看 @import 是否支持 JavaScript 动态更改样式规则
代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>test_html_css_loaded_hi</title>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hi(import_1).css');
    </style>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hi(import_2).css');
    </style>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hi(import_3).css');
    </style>
    <style type="text/css" rel="stylesheet">
        @import url('css/test_html_css_loaded_hi(import_4).css');
    </style>
</head>
<body>
    <div id="box-first">first</div>
    <div id="box-second">second</div>
    <div id="box-third">third</div>
    <div id="box-forth">forth</div>
</body>
</html>

同样, @import 方式导入的 CSS 资源同样支持通过 JavaScript 来设置改变样式。
这一点即使在 IE 5 中测试都是通过了的。

通过 JavaScript 脚本语言来获取 CSS 样式(注意兼容)。

其实 JavaScript 这个获取 CSS 会因浏览器而异,以前的浏览器对于 JavaScript 获取 CSS 的结果与当今浏览器对于 JavaScript 获取 CSS 的结果大不相同。
简单说 .style 方法是各个浏览器都支持的方法,但是其只能够获取内联式的 CSS 样式。但是以 Chrome 、FireFox为首的非 IE 浏览器与IE 浏览器都有一套自己的获取 CSS 样式表规则的策略。

Chrome 与 FireFox等非 IE 浏览器:

通过 window.getComputedStyle 方法来获取目标元素的 CSS 样式表的规则集合。再通过 .getPropertyValue 方法来获取具体的 CSS 样式表规则。
具体语法:window.getComputedStyle(“Ele”)[‘伪类’].getPropertyValue(“属性名称”).
注意以上的写法还可以写成:document.defaultView.getComputedStyle("Ele")['伪类'].getPropertyValue("属性名").

IE < 9:

通过 Ele.currentStyle 来获取目标元素的 CSS 样式表的规则集合。再通过 .getAttribute(属性名")来获取具体的 CSS 样式表规则。
具体语法: Ele.currentStyle.getAttribute("属性名")

IE >= 9:

既可以通过 window/document.defaultView .getComputedStyle("Ele")['伪类'].getPropertyValue("属性名")来获取具体的 CSS 样式表规则,也可以通过 Ele.currentStyle.getAttribute("属性名")来获取具体的 CSS 样式表规则。就是说 IE 9以上的版本增加了对非 IE 浏览器获取具体的 CSS 样式表规则的方法的支持。

代码详述:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.css - stylesheet</title>
    <style type="text/css" rel="stylesheet">
        #box-first {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
            background: pink;
        }
    </style>
    <style type="text/css" rel="stylesheet">
        @import url("../src/static/css/11.css - stylesheet(import).css");
        body {
            background: aliceblue;
        }
    </style>
    <link rel="stylesheet" href="../src/static/css/11.css%20-%20stylesheet(link).css">
</head>
<body>
<div id="box-first">first</div>
<div id="box-second">second</div>
<div id="box-third" style="width: 100px;height: 100px;border-radius: 50%;text-align: center;line-height: 100px;background: purple;">third</div>
<div id="box-forth">forth</div>

<script type="text/javascript">
    // 整个案例不使用 let 来声明变量的原因是为了兼容 IE 9 以下版本的 IE 浏览器
    // 获取目标元素
    var box_first = document.getElementById("box-first");
    var box_second = document.getElementById("box-second");
    var box_third = document.getElementById("box-third");
    var box_forth = document.getElementById("box-forth");


    // 非 IE 浏览器
    void(function() {

    // 获取 CSS 样式(Xxx.style 方式)

    var embedded = box_first.style.backgroundColor;

    console.log(embedded);// ""

    var _import = box_second.style.backgroundColor;

    console.log(_import);// ""

    var inline = box_third.style.backgroundColor;
    console.log(inline);// purple

    var outerChain = box_forth.style.backgroundColor;
    console.log(outerChain);// ""
    // 结论: 通过 Xxx.style 获取到的是目标元素的 css 样式,只不过仅仅只能获取到内联式中的样式,获取不到其他方式中的样式。
    })();

    console.log("-- 分界线 --");

    void(function() {

    // 获取 CSS 样式(Xxx.getComputedStyle(Xxx, null))
    var embedded = window.getComputedStyle(box_first, ":hover")['background'];
        console.log(embedded);// rgb(255, 192, 203) none repeat scroll 0% 0% / auto padding-box border-box

    var _import = window.getComputedStyle(box_second, ":after")['width'];
        console.log(_import);// 200px

    var inline = window.getComputedStyle(box_third, ":before")['height'];
        console.log(inline);// auto

    var outerChain = document.defaultView.getComputedStyle(box_forth, ":before")['height'];
        console.log(outerChain);// 200px

    var test_prop_1 = window.getComputedStyle(box_first, null).getPropertyValue("width");
        console.log(test_prop_1);// 打印 100px

        // 总结: 通过 window.getComputedStyle(Xxx, ":伪类")['具体属性']/document.defaultView.getComputed(Xxx, ":伪类")['具体属性']获取目标元素的样式,但是需要注意几个问题:
        /**
         * -1).通过 window.getComputedStyle 方法可以获取到内联、内嵌、导入、外链 四种方式定义的 CSS 样式中的属性值,有效的弥补了 Xxx.style 方式的不足。
         *
         * -2).如果需要获取伪类元素的属性值,则可以在第二个参数中指定将要获取的伪类元素的名称,但是这个伪类元素也是有限制的,仅仅限于:
         * :after、:before、:first-line、:first-letter、:selection、:backdrop,如果不需要指定伪类元素可以第二参数可以使用 null 来进行占位。
         *
         * -3).这个方法存在浏览器的兼容性,在低版本的 IE 中不适用,但是现在的版本的 IE 也支持了此方法。
         *
         * -4).window.getComputedStyle 这个方法获取的是目标元素的属性集合,如果想要获取其中某一个属性的值,就通过 .getPropertyValue("Prop名称")
         * 来获取。
         */
    })();

    // IE 浏览器
    void(function() {
    // 获取 CSS 样式,通过 Ele.currentStyle();
    var embedded = box_first.currentStyle.getAttribute("font-size");
        console.log(embedded);// 16px

        // 在 IE 中,其实 Ele.currentStyle.getPropertyValue("...")与window.getComputedStyle("Ele", null).getPropertyValue("..."); 是一样的,获取的也是目标元素的 css 属性集合,只不过前者适用于 IE 领域后者适用于 Google Chrome 等非 IE 领域
        // 但是仅限于以前的 IE ,现在的 IE 既可以用 getComputedStyle 与可以用 currentStyle。
    })();

</script>
</body>
</html>

效果:
Chrome 与 FireFox等非 IE 浏览器:

由此可见Chrome 与 FireFox等非 IE 浏览器不支持 IE 专有的方法

IE < 9:

由此可见 IE 9 版本以下的 IE 浏览器并不支持 Chrome 与 FireFox等非 IE 浏览器所支持的获取具体的 CSS 样式表规则的方法。

IE >= 9:

由此可见 IE 9 以上版本的 IE 浏览器支持 Chrome 与 FireFox等非 IE 浏览器所支持的获取具体的 CSS 样式表规则的方法。

切记:

准备:
11.css - stylesheet(loaded)-3.css:

#box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    background: green;
}

通过 @import 引入资源在其所在的 style 标签中是可以书写其他样式的:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.css - stylesheet(loaded)-2</title>
    <style type="text/css" rel="stylesheet">
        /*通过 @import 方式来引入 CSS 资源*/
        @import url('css/11.css - stylesheet(loaded)-3.css');
        #box {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box">Hello World</div>
</body>
</html>

这样自然不会有事

但是如果写成这样

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11.css - stylesheet(loaded)-2</title>
    <style type="text/css" rel="stylesheet">
        /*通过 @import 方式来引入 CSS 资源*/
        #box {
            color: aquamarine;
        }
        @import url('css/11.css - stylesheet(loaded)-3.css');
    </style>
</head>
<body>
    <div id="box">Hello World</div>
</body>
</html>

则 @import 引入的资源无效

总结:故如果一个 style 中既包含 @import 也包含其他的样式规则,其他的样式规则必须在其后面,否则无效。

图像标签 - img

img 标签中有很多属性,包括(src、alt、title、ismap)等

-> src 就不说了,规定图像的地址。没有这个属性图像在页面上就无法展示(因为压根都找不到这个图像)
-> alt 当图像无法显示的时候显示该文本。
-> title 当鼠标移动到图片上时显示该文本
-> ismap 将图像规定为服务器端图像映射(即,点击图片任意一点,将该点的坐标发送到服务器端)
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.图像 - img</title>
</head>
<body>
<a href="https://www.baidu.com/">
    <img src="../static/img/h5.png" alt="alt_h5" title="title_h5" ismap>
</a>
</body>
</html>

图像标签 - map

map 外语中除了地图还有映射的意思。使用 map 标签的一大特点就是可以通过规定坐标来规定页面中图像的可点击区域而不是全部可被点击。
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>12.图像 - map</title>
    <style type="text/css" rel="stylesheet">
        html,body {
            width: 100%;
            height: 100%;
            background: aquamarine;
        }
    </style>
</head>
<body>
    <img src="../static/img/h5.png" alt="测试 map_alt" title="测试 map_title" usemap="#test_map">
    <map name="test_map">
        <area shape="poly" coords="29,40,41,184,100,198,157,183,170,40" href="https://www.baidu.com/" alt="h5_map">
    </map>
</body>
</html>

当我们点击盾牌以外整张图片以内的区域上时

按下去没有任何反应,当我们将鼠标移动到盾牌上时再去点击

立马跳转到百度。
值得注意的是 area 标签中的 shape 与 target 属性,area 包括(default(全部区域)、rect(矩形区域)、circle(圆形区域)、poly(多边形区域))。

表格标签 - table

table 代表表格,但是 table 默认是不显示边框线的,须在 table 标签上设置边框线的尺寸方能显示。
并且 table 中有两个属性(调节内容边距(cellpadding)与边框线间距(cellspacing))
-> 内容边距(cellpadding):
内容边距实际上指的就是将表格内部内容元素在上下左右添加 padding。

-> 边框线间距(cellspecing)
边框线间距实际上指的就是表格与表格边框之间的距离。

td 中有两个属性 (colspan(合并列)、rowspan(合并行));

table 中还有几个元素是比较重要的。包括(caption(表格标题)、colgroup(表格列的组)、thead(表格页眉)、tbody(表格主体)、tfoot(表格页脚))。

代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>13.表格 - table</title>
    <style type="text/css" rel="stylesheet">
        table {
            width: 100%;
            height: 100%;
            border: none;
        }
        table caption {
            padding-bottom: 10px;
            font-size: 20px;
        }
        table tr:nth-child(odd) {
            background: #F9F9F9;
        }
        table tr {
            border: none;
            text-align: center;
        }
        table tr:hover {
            background: #FCF8E3;
        }
        table tr:nth-child(1) th {
            border-top: none;
        }
        table tr th,td {
            border: none;
        }
        table tr th,td {
            border-top: 1px solid lightgrey;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="15" cellspacing="0">
        <caption>The table's title</caption>
        <colgroup>
            <col span="2" style="border: 1px solid pink;">
            <col style="border: 1px solid green;">
        </colgroup>
        <thead>
            <tr>
                <th>name</th>
                <th>level</th>
                <th>money</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>3</td>
                <td>100</td>
            </tr>
            <tr>
                <td>Tim</td>
                <td>2</td>
                <td>200</td>
            </tr>
            <tr>
                <td>Jim</td>
                <td>1</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">bingo!!!</td>
            </tr>
            <tr>
                <td rowspan="2">!!!bingo</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

效果:

列表 - (ol、ul、li、dl、dt、dd)

有序列表(ol)

三个属性要记住:

-1).`start` 起始数字单位。

-2).`reversed` 倒序。

-3).`type` 前方列表图标样式(1、A、a、I(大写罗马数字)、i(小写罗马数字))

无序列表(ul)

无序列表较为简单,仅仅有一个需要注意的,就是 type 属性(disc(实心圆)、square(实心方块)、circle(空心圆))。

自定义列表这块比较少用,但是也是可以派上用场的。

主要记住 dl dt dd 的用法即可。

代码:
html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>14.列表 - (ol ul li dl dt dd)</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol start="5" reversed type="i">
        <li>John</li>
        <li>Jim</li>
        <li>Tim</li>
        <li>Tom</li>
        <li>Ben</li>
    </ol>
    <hr>
    <!-- 无序列表 -->
    <ul type="circle">
        <li>John</li>
        <li>Jim</li>
        <li>Tim</li>
        <li>Tom</li>
        <li>Ben</li>
    </ul>
    <!-- 自定义列表 -->
    <hr>
    <dl>
        <dt>fruit</dt>
        <dd>apple</dd>
        <dd>pear</dd>
        <dt>food</dt>
        <dd>rice</dd>
        <dd>noodles</dd>
    </dl>
</body>
</html>

表单 - input

表单当中,H5 的出现新增了几种表单的类型与属性,但就其根本性质而言,如果仅仅是提交普通的文本域到服务器的话,直接正常操作的就可以了,但如果是上传文件就必须在 form 标签中加上 enctype="multipart/form-data" ,但是如果我们的表单是文本域与文件混合上传则也同样必须加上这个属性,只不过如果是 Java 获取参数时则不能再使用以前的 getParameter("Propertype name") 的方式了。

maxlength:是限定输入的字符数
placeholder:是默认显示字符
required:是禁止表单项为空
autocomplete:表单自动完成功能,需记住此功能需要提交表单后才可用(on开启/off关闭)。
min:是最小值(包括数字与日期)
max:是最大值(包括数字与日期)
step: 合法数字间隔
multiple:是在 file 类型的表单中允许上传多个文件
src:是应用到 image 类型的表单中,显示的图片路径
checked :是应用到单选或者多选表单中设置默认选中状态的
disabled:是禁用表单控件

fieldset 标签是表单组,其标题是通过 legend 标签进行设置的。
select 标签代表下拉列表
datalist 标签也代表下拉列表可以与 input 中的 list 属性进行联动。
option 下拉列表项

表单类型:

type	释义
text	普通文本
password	密码域
range	滑块
date	日期
datetime-local	本地时间
color	颜色
tel	电话
search	搜索
url	地址
week	日期(周)
time	日期(时间)
month	日期(月)
week	日期(周)
number	数字
file	上传
checked	多选
radio	单选
button	普通按钮
image	图片按钮(带有提交功能)
hidden	隐藏域
email	邮箱地址
submit	提交
reset	清空重置

代码:
jsp:
index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>form test</title>

</head>

<body>

<form action="dealForm" method="post" autocomplete="on">

    <fieldset>

        <legend>beautiful form ...</legend>

        <label for="userName">用户名:

            <input type="text" name="userName" maxlength="5" id="userName" required placeholder="请输入用户名">

        </label><br>

        <label for="pwd">密码:

            <input type="password" name="pwd" maxlength="6" id="pwd">

        </label><br>

        <label for="age">年龄:

            <input type="range" min="18" max="99" name="age" id="age">

        </label><br>

        <label for="date">日期:

            <input type="date" name="date" max="2019-05-08" id="date">

        </label><br>

        <label for="datetime-local">本地日期:

            <input type="datetime-local" min="1998-05-06" name="datetime-local" id="datetime-local">

        </label><br>

        <label for="color">颜色:

            <input type="color" name="color" id="color">

        </label><br>

        <label for="email">E-Mail:

            <input type="email" name="email" id="email">

        </label><br>

        <label for="tel">TEL:

            <input type="tel" name="tel" id="tel">

        </label><br>

        <label for="search">search keywords:

            <input type="search" name="search" id="search">

        </label><br>

        <label for="url"><u>url</u>:

            <input type="url" name="url" id="url">

        </label><br>

        <label for="week">日期(周):

            <input type="week" name="week" id="week">

        </label><br>

        <label for="time">日期(时间):

            <input type="time" name="time" id="time">

        </label><br>

        <label for="month">日期(月):

            <input type="month" name="month" id="month">

        </label><br>

        <label for="number">数字:

            <input type="number" name="number" step="10" id="number">

        </label><br>

        <label for="file">上传:

            <input type="file" name="file" id="file" multiple>

        </label><br>

        <label for="">水果:

            <input type="checkbox" name="selectoer_one" value="apple">苹果

            <input type="checkbox" name="selectoer_two" value="banana">香蕉

            <input type="checkbox" name="selectoer_three" value="pear">梨子

        </label><br>

        <label for="">性别:

            <input type="radio" name="sex" value="sir" checked>男

            <input type="radio" name="sex" value="miss">女

        </label><br>

        <!-- 测试按钮 -->

        <label for="">测试:

            <input type="button" name="btn" disabled value="test-btn">

            <input type="image" src="https://www.runoob.com/try/demo_source/img_submit.gif" value="test-btn-image">

        </label><br>

        <!-- 隐藏域 -->

        <label for="hidden">隐藏:

         <input type="hidden" name="hidden" id="hidden">

        </label>
                <!-- 下拉列表 -->

        <label for="eat">

         <select id="eat" name="eat" multiple>

             <optgroup label="fruit">

                 <option value="apple">apple</option>

                 <option value="pear">pear</option>

             </optgroup>

             <optgroup label="food">

                 <option value="rice">rice</option>

                 <option value="bread">bread</option>

             </optgroup>

         </select>       

        </label>

        <label for="money">

         <input list="datalist" name="money" id="money">

         <datalist id="datalist">

             <option value="15000">15000</option>

             <option value="30000">30000</option>

         </datalist>

        </label>


        <label for="">OFF/ON

            <input type="submit" value="GO!">

            <input type="reset" value="clear!">

        </label><br>

    </fieldset>

</form>

<a href="test_formaction.jsp">测试 submit 按钮的 formaction 属性</a>

</body>

</html>

test_formaction.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>test_formaction</title>

</head>

<body>

    <form action="dealReq">

        <input type="text" name="userName">

        <input type="submit" value="dealReq">

        <input type="submit" formaction="dealData" value="dealData">

    </form>

</body>

</html>

DealDataController.java

package com.YHStudio.form_test.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class DealDataController
 */
@WebServlet("/dealData")
public class DealDataController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DealDataController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 设置字符编码
		request.setCharacterEncoding("utf-8");
		// 获取请求参数
		String name = request.getParameter("userName");
		// 设置响应字符编码集
		response.setCharacterEncoding("utf-8");
		response.setHeader("content-Type", "text/html;charset=utf-8");
		// 输出信息
		response.getWriter().print("dealData name: " + name);
	}

}

DealRequestController.java

package com.YHStudio.form_test.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class DealRequestController
 */
@WebServlet("/dealReq")
public class DealRequestController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DealRequestController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 设置请求字符编码集
		request.setCharacterEncoding("utf-8");
		// 接收请求的数据
		String name = request.getParameter("userName");
		// 设置响应字符编码集
		response.setCharacterEncoding("utf-8");
		response.setHeader("content-Type", "text/html;charset=utf-8");
		// 输出信息
		response.getWriter().print("dealReq name: " + name);
	}

}

DealFormController.java

package com.YHStudio.form_test.controller;

import java.io.IOException;
import java.util.Map;
import java.util.Map.Entry;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class DealFormController
 */
@WebServlet("/dealForm")
public class DealFormController extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DealFormController() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 设置请求字符集编码
		request.setCharacterEncoding("utf-8");
		// 获取参数集合
		Map<String, String[]> reqArgMap = request.getParameterMap();
		System.out.println(reqArgMap);
		if(reqArgMap.isEmpty() || reqArgMap == null) {
			
		}else {
			String key = null;
			String[] val = null;
			for(Entry<String, String[]> item : reqArgMap.entrySet()) {
				key = item.getKey();
				val = item.getValue();
				if("file".equals(key) || "eat".equals(key)) {
					for(int i = 0; i < val.length; i++) {
						System.out.println("key: " + key + ";value: " + val[i]);
					} 
 				}else {
					System.out.println("key: " + key + ";value: " + val[0]);
				}
			}
		}
	}

}

效果图:

提交后页面空白,这是正常的,因为我们并没有在后台设置转发页面所以页面默认会是这样的状态,看下后台获取的信息:

再测试一下, submit 按钮的 formaction 属性。

由此就是表单部分知识的总结。

页面框架 - iframe

说道这个 iframe 是自从 frame 被删除之后出现的产物,功能也和 frame 基本相同。但是相比之下,iframe 要比 frame 灵活,因为:
-1).frame 必须要在 frameset 下才能完成工作,而 iframe 则和其他的标签一样无需寄生在谁的下面,正常使用就可以了,少了很多的顾忌。
-2).frame 的布局通常是嵌套起来并且横竖切割,板板直直的不太美观,僵死。 iframe 则通过 CSS 来调整位置与大小和样式,极为灵活与美观。
-3).frame 是当前页面的布局框架,可以说在每一个 frameset 下面的 frame 都是一个单独独立的个体,与当前页面相独立。而 iframe 则与其不同, iframe 与当前页面保持为一个整体,属于内嵌到当前页面中去的,属于当前页面的一部分。
-4).frameset 标签元素不能与 body 标签共存,而 iframe 就没有这个限制。
综上所述: frame 以及它的 frameset 必将会被 iframe 所取代!
※.需要注意的是:iframe 可以实现轮询与跨域,这部分内容在后面以专题的形式详述!!!
这里暂时只介绍简单的用法。
(1).iframe 默认尺寸为 300 X 150
(2).iframe 属性之 src 属性(引用目标资源)
(3).iframe 属性之 frameborder 属性(是否显示边框,两个值;0 -> 不显示、1 -> 显示)
(4).iframe 属性之 scrolling 属性(是否显示滚动条;两个值;yes -> 显示、no -> 不显示、auto -> 自适应)
(5).iframe 属性之 sandbox 属性(规定子页面的权限;四个值;allow-same-origin(将 iframe 中包含的内容视为同源)、allow-top-navigtion(允许 iframe 从顶级页面的导航处获取资源信息)、allow-form(允许提交表单)、allow-script(允许脚本执行)、" "(以上提到的指令全部开启))
※.但是如果要将 iframe 页面的尺寸调整为一屏并且取消掉滚动条,可以通过设置 CSS 上面下功夫,比如取消默认边距以及在 body 处设置 overflow-y: hidden;
(6).srcdoc 是向子页面输出一段 html 代码的执行结果
代码:
html:
16.框架 - iframe.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>15.框架 - iframe</title>
    <style type="text/css" rel="stylesheet">
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;

        }

    </style>
</head>
<body>
    <!-- 默认大小为 300 * 150 -->
    <iframe src="http://www.baidu.com" srcdoc="<h3>iframe!!!</h3>" frameborder="0" scrolling="no"></iframe>

</body>
</html>

16.框架 - iframe(2).html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>15.框架 - iframe</title>
    <style type="text/css" rel="stylesheet">

    </style>
</head>
<body>
    <!-- 默认大小为 300 * 150 -->
    <iframe src="16.框架%20-%20iframe(3).html" frameborder="0" scrolling="auto" sandbox=""></iframe>

</body>
</html>

16.框架 - iframe(3).html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body {
            background: pink;
        }
    </style>
</head>
<body>

<h1>time loading ...</h1>
<button id="btn">get Time ...</button>
<script type="text/javascript">
    // 获取当前时间
    btn.addEventListener('click', function() {
        document.querySelectorAll('h1')[0].innerHTML = new Date();
    }, false);
</script>
</body>
</html>

效果:

其中 srcdoc 不仅仅可以放置标签内容,即使放置一段脚本也是可以滴:

键入 ctrl +Enter

然后去掉 srcdoc 这个属性

不要惊讶,这个确实是百度而不是自己写的静态页面,给你搜索个老虎测试一把:

地址没变但是页面效果变了,这就充分说明,这个页面使用的是 iframe

再来看看 sandbox 属性是怎么限定子页面的权限的,我们以限定子页面能否执行 JavaScript
为例:
禁止

不管怎么按都不会显示时间,因为脚本已经被禁止执行了。
解禁

时间也显示了,说明子页面的脚本执行了。

颜色

颜色表示方式有三种:

方式	例子
外文名	red
16进制颜色	#F9F9F9
rgb	rgb(255, 255, 255)
rgba	rgba(0, 0, 0, 0.5)

-> rgba(red green blue alpha) 其实是红色、绿色、蓝色以及他们的混合色再加上透明度。

字符实体

向在网页中想表达 >< 尖括号的时候一定会报警告,以及当你输入10个空格后仅仅发现一个有效,等,遇见这种类似问题就需要 字符实体 来帮忙传送门

URL

统一资源定位符中的一种,用于定位资源位置,有相对与绝对之分。

协议(scheme):

schame	访问	作用
http	超文本传输协议	以 http:// 开头的普通网页,不加密
https	安全超文本传输协议	安全网页加密所有的信息交换
ftp	文件传输协议	用于上传或下载资源至网站
file	本地文件资源协议	用于操作本地计算机上面的文件

URL 编码:

传送门

`参考文献`

1.HTML - 菜鸟教程
2.HTML - 维基百科
3.XML技术 - 百度百科
4.XHTML - 维基百科
5.SGML - MBA 智库百科
6.简短的 SGML 教程 - sgmltut
7.浏览器的三种文本渲染模式
8.文档声明 - 简书
9.标准模式与怪异模式 - 博客园
10.DOCTYPE 文档类型声明 - CSDN
11.为什么H5中只需要规定doctype - CSDN
12.H5面试—Doctype作用 - CSDN
13.深入理解DOCTYPE的作用 - CSDN
14.正确理解HTML,XHTML页面的头部doctype定义 - CSDN
15.HTML5头部为什么只需要写DOCTYPE html? - CSDN
16.DOCTYPE 文档类型声明 - CSDN
17.什么是及的重要性？- 博客园
18.浏览器的标准模式与怪异模式 - 简书
19.XML中约束文档的引用和书写 - CSDN
20.HTML5 DTD 基于SGML的HTML5语法实验
21.HTML5 - 维基百科
22.DTD的局限性 - CSDN
23.Validator.nu (X)HTML5 网页HTML/XHTML 线上验证器 - techcoke
24.Validator.nu Living Validator
25.Nu Html Checker
26.SGML/HTML/XML之间的关系 - 博客园
27.HTML <!DOCTYPE> 标签 - W3school
28.很重要 - iteye
29.标记验证服务 - W3C
30.怪异模式 - 维基百科
31.HTML基础标签之DOCTYPE声明 - 百度百家号
32.HTML 4.01 Strict DTD - W3C
33.HTML5的新特性概述（上）- 掘金
34.HTML5新特性概述(下) - 掘金
35.特别企划 | Adobe Flash“众望所归”地死了 - REEBUF
36.html语义化是什么意思？为什么要进行html语义化？- iwellen
37.前端工程师：标签那么屌，为啥你们都不用？
38.网站权重低?是因为你还不知道这些提升权重的方法
39.简短的SGML教程
40.SGML资源概述
41.HTML中显示特殊字符，如尖括号 “<”,">"等等
42.Media Types - iana
43.浅谈script标签的defer和async - 掘金
44.DOM系列：动态添加CSS样式规则 - Web 前端技能
45.img标签中alt和title属性的正确使用 - 脚本之家
46.CHROME浏览器如何设置无图浏览? - 百度百科
47.table合并单元格 colspan（跨列）和rowspan（跨行）- 微博
48.CSS文件加载方式之@import与link href调用的优缺点分析 - 酷站代码
49.不要使用@import - 酷勤网
50.读《不要使用@import》- 简书
51.浏览器的并行加载机制是怎样的 - segmentfault
52.高性能网站设计：不要使用@import - 前端观察
53.link与@import的区别 - CSDN
54.了解CSS中的@import - segmentfault
55.autocomplete=“off” inpu属性 - 百度知道
56.autocomplete - 百度百科
57.JS设置CSS样式的几种方式 - 博客园
58.获取元素CSS值之getComputedStyle方法熟悉 - 张鑫旭
59.【CSS进阶】原生JS getComputedStyle等方法解析 - 博客园
60.getComputedStyle第二个参数的作用 - oschina(开源中国)
61.[Web开发] 在网页中动态加入RSS feed 元素 - CSDN
62.你必读的 RSS 订阅源有哪些? - 知乎
63.你真的理解@import和link引入样式的区别吗 - 掘金
64.css link和@import区别用法 - divcss5
65. 解决eclipse中导入项目中文乱码的问题 - CSDN
66.Multiple Contexts have a path of "/xxxx"问题解决
67.为什么上传文件的表单需要设置enctype=“multipart/form-data” - CSDN
68.chrome浏览器保存的密码怎么不能自动填充啊? - 百度知道
69.request和response的中文乱码问题 - 博客园
70.HTML <iframe> 标签 - w3c school
71.iframe, 我们来谈一谈 - 掘金
72.frame和iframe的区别 - CSDN

尾声:

Author: 萍果吮雨
Maintainers: 萍果吮雨、虚位以待、虚位以待、虚位以待、虚位以待、…
如果本文对大家有帮助的话,可以持续关注笔者,剩下的篇幅也将陆续开放,如有意见请发送至笔者邮箱:
QQ: pgsy@qq.com
sina:ljcd123@sina.com
Google:pingguoshunyu@gmail.com

最后,原创不易欢迎打赏!!!如需转载请注明出处。本文首发 gupaoedu.com ,第二站 CSDN如在此平台之外看到本文或者极大雷同又未经笔者允许或注明出处视为侵权,笔者有权通过法律途径维护权益,本文仅代表个人观点与平台无关!!!

萍果吮雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跟我一起学前端之 HTML

前言:此篇文章原是本人重学前端记录在印象笔记中的笔记,里面都是通过实践证明的观点,这有助于我们构建前端知识体系,里面有些知识笔者认为勾勒的非常精彩,也是其他培训机构不会讲到的内容。跟我一起学前端是一个系列,主要由(HTML篇、HTML5篇、CSS篇、CSS3篇、原生JavaScript篇、jQuery(JavaScript库)篇、Vue、React、Anglar (JavaScript框架)篇、...
复制链接

扫一扫