HTML大整合（下）

例4常用标签.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	HTML从入门到精通!
	<br>   <!--换行-->
	欢迎学习HTML技术

	<hr>

<p>
	超级文本标记语言是 标准通用标记语言下的一个应用，也是一种规范，一种 标准， 
HTML
HTML(16)
它通过标记符号来标记要显示的网页中的各个部分。网页 文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉 浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。 浏览器按顺序阅读网页 文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的 浏览器，对同一标记符可能会有不完全 相 同的解释，因而可能会有不同的显示效果。
</p>

<p>
	简易性：超级文本标记语言 版本升级采用 超集方式，从而更加灵活方便。
</p>
	

	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h4>四级标题</h4>
	<h6>六级标题</h6>
	<hr>
			<pre>
				<<HTML从入门到精通>>
				欢迎学习HTML技术
			</pre>
	
</body>
</html>123456789101112131415161718192021222324252627282930313233343536

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yw6CHVL1-1593240920356)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例4.png)]

案例5常用标签2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:400px;height:100px;background:red">导航部分</div>
	<div style="width:400px;height:500px;background:yellow">正文部分</div>
	<div style="width:400px;height:100px;background:blue">版权部分</div>
	<hr>

	iphone XP 不要8888，也不要1888，只要<span style="font-size:50px;color:red">98
	</span>
</body>
</html>123456789101112131415

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqLIPRpW-1593240920357)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例5.png)]

案例6常用标签3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="a" start="3">
		<li>吃鸡</li>
		<li>王者农药</li>
		<li>LOL</li>
		<li>WOL</li>
	</ol>
	<hr>

	<h3>亲爱的同学们</h3>
	<ul type="disc">
		<li>冯乐</li>
		<li>赵宁</li>
		<li>木木</li>
		<li>丹丹</li>
	</ul>
	<hr>

	<h3>术语的解释</h3>
	<dl>
		<dt>LOL</dt>
		<dd>它是由腾讯公司代理的一款网络游戏，中文称为叫英雄联盟</dd>
		<dd>它分为pc端和移动端</dd>
		<dt>HTML</dt>
		<dd>是一种用来制作网页的标记语言</dd>
		<dt>JAVA</dt>
		<dd>是一种跨平台的编程语言</dd>
	</dl>


</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZHuTwuN-1593240920359)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例6.png)]

案例7常用标签4.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="#FF7300" size="10px">
	<hr color="red">
	<hr color="blue" width="400">
	<hr color="#00FF00" width="50%">
	<div style="width:600px;height:300px;background:#FF7300">
		<hr color="red" width="50%" size="9px" align="right">
	</div>
	
</body>
</html>12345678910111213141516

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7sI2hPAB-1593240920359)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例7.png)]

案例8常用标签5.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="google.png" alt="图片加载失败...."title="只是一个标志">
	<hr>



	<div style="width:800px;height:800px;background:red">
		<img src="mac(1).jpg" alt=""width="50%">
		<div style="width:500px;height:500px;background:#CCCCCC">
			<img src="mac(1).jpg" alt=""width="50%">
		</div>
	</div>

	<img src="mac(1).jpg" alt=""width="50%"> 父容器body
</body>
</html>123456789101112131415161718192021

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yU93yyiJ-1593240920360)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例8.png)]

案例9其他标签.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <i>to</i>HTML! <br>
	welcome <em>to</em>HTML! <br>
	welcome to <address>上海市南京东路</address>
	<hr>

	HTML从<b>入门</b>到精通！
	HTML从<strong>入门</strong>到精通！
	<br>
	原价：<del>188元</del>, 优惠价：<span style="font-size:40px;color:#FF7300">
	98元</span>
	<hr>
	主讲:<ins>hector</ins>
	<br>
	<hr>
	水的分子表达式:H<sub>2</sub>0 <br>
	2<sup>3</sup>=8
	<hr>
	
</body>
</html>1234567891011121314151617181920212223242526

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdmsP4or-1593240920362)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例9.png)]

案例10头部标签.html

<!DOCTYPE html>
<html lang="en">
	<!-- 设置字符编号 -->
	<meta charset="UTF-8">
	<!-- 设置关键字 -->
	<meta name="keywords"content="IT教育，JAVA开发，WEB前端，
	Aandroid开发，python">
	<!-- 设置描述信息 -->
	<meta name="descaription" content="做专业的IT教育.....">
	<!-- 设置网站作者 -->
	<meta name="author" content="hector">
	<!-- 设置网站的跳转 -->
	<!-- <meta http-equiv="refrest" content="2";url=https://www.
	baidu.com -->
	<title>头部标签</title>
	<!-- 定义内部的CSS样式 -->
	<style>
		body{
			color:red;
		}
	</style>
	<!-- 引用外部的CSS样式文件 -->
	<link rel="stylesheet" href="CSS样式文件的路径">
	<!-- 定义或引用脚本 -->
	<<script>
		alert("欢迎登录")
	</script>
	<!-- 定义一个基础路径 -->
	<base href="../image/">
</head>
<body>
	IT教育，计算机等级考试--Hrctor
	<img src="../image/google.png" alt="">
	<img src="../image/p1.jpg" alt="">
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-445E4McR-1593240920362)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例10.png)]

案例11标签嵌套.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		alert("哈哈！ ");
	</script>
</head>
<body>
	<div style="width:200px;height:200px;background:red">
		<p>
		hello
		</p>
	</div>
	<p style="width:300px;height:300px;background:green">
		<div style="width:200px;height:200px;background:blue">
			worid
		</div>
</body>
</html>1234567891011121314151617181920

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoPZWeC1-1593240920363)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例11.png)]

案例12超链接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
	<hr>
	<a href="d:/b.html" target="_self">b</a>
	<hr>
	<a href="c.html" target="_blank">c</a>
	<hr>
	<a href="../d.html">d</a>
	<hr>
	<a href="../../e.html">e</a>
</body>
</html>1234567891011121314151617

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xsXKs86m-1593240920364)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例12.png)]

案例13锚点链接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="#first">1 简介</a></li>
		<li><a href="#second">2 HTML版本</a></li>
		<li><a href="#three">3 特点</a></li>
		<li><a href="#four">4 编辑方式</a></li>
		<li><a href="#five">5 整体结构</a></li>
		<li><a href="#six">6 相关要求</a></li>
	</ol>

	<p>
		<a name="first">简介</a>
    </p>
    <P>
    HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
    <p>  
    自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
    </P>
    <p><a name="second">HTML版本</a></p>
    <p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 
    </p>
    <p>HTML历史上有如下版本：  
    ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
    ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br> 
    ③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
    ④HTML 4.0：1997年12月18日，W3C推荐标准。<br> 
    ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br> 
    ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
    </p>

    <p><a name="three">特点</a></p>
    <p>
    超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4] 
    简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4] 
    可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4] 
    平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4] 
    通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
    </p>

    <p><a name="four">编辑方式</a></p>
    <p>
    HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7] 
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7] 
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
    </p> 


    <p><a name="five">整体结构</a></p>
    <p>
    一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10] 
    标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
    </p>

    <p><a name="six">相关要求</a></p>
    <p>
    在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9] 
    文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
    html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9] 
    超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
    一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9] 
    标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9] 
    标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9] 
    HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
    </p>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQwkft9w-1593240920364)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例13.png)]

案例14页面间的锚点链接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="13.锚点链接.html#first" target="_blank">
		简介</a></li>
		<li><a href="13.锚点链接.html#second" target="_blank">
		HTML版本</a></li>
		<li><a href="13.锚点链接.html#three" target="_blank">
		特点</a></li>
		<li><a href="13.锚点链接.html#four" target="_blank">
		编辑方式</a></li>
		<li><a href="13.锚点链接.html#five" target="_blank">
		整体结构</a></li>
		<li><a href="13.锚点链接.html#six" target="_blank">
		相关要求</a></li>
</body>
</html>123456789101112131415161718192021

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Z1Yrksq-1593240920366)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例14.png)]

案例15功能链接.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="../image/hh.gif">点击此处下载图片</a>
	<br>

	<a href="mailto:422133899@qq.com">联系我们</a>
</body>
</html>123456789101112

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSbm5qsd-1593240920366)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例15.png)]

案例01.表格.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table border="2" width="400px" height="300px" align="
	center" bordercolor="red" bgcolor="#cccccc" backgroud
	="../..image/timg (1).jpg" cellspacing="0" cellpading="1">
		<tr alige="center" bgcolor="cyain">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="right">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="leign" valign="top">
			<td>hello</td>
			<td align="right" bgcolor="blue">hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
		<tr align="right" valign="bottom" background="
		../../image/hh.gif">
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
			<td>hello</td>
		</tr>
	</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b7NrHKsq-1593240920367)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例01.png)]

案例02.合并单元格.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>tb{hello$}*4)*4 -->
	<table border="1" width="500px" height="300px">
		<tr>
			<td colspan="4" align="center">hello1</td>
		</tr>
		<tr>
			<td rowspan="3">hello</td>
			<td>hello2</td>
			<td>hello3</td>
			<td>hello4</td>
		</tr>
		<tr>
			<td>hello2</td>
			<td rowspan="2" colspan="2">hello3</td>
		</tr>
		<tr>
			<td>hello2</td>
		</tr>
	</table>
</body>
</html>123456789101112131415161718192021222324252627

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53fwwown-1593240920368)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例02.png)]

案例03.表格的高级标签.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- table>(tr>td*4)*6 -->
	<table border="1" width="500px" height="300px" align="
	center">
	<caption><h2>学生基本信息表</h2></caption>
	<<thead bgcolor="cyan">
			<td>学号</td>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
	</thead>
	<tbody align="center" bgcolor="yellow">
	<tr>
			<td>1001</td>
			<td>小明</td>
			<td>19</td>
			<td>男</td>
		</tr>
		<tr>
			<td>1002</td>
			<td>小花</td>
			<td>18</td>
			<td>女</td>
		</tr>
		<tr>
			<td>1003</td>
			<td>小张</td>
			<td>19</td>
			<td>男</td>
		</tr>
		<tr>
			<td>1004</td>
			<td>小狗</td>
			<td>19</td>
			<td>男</td>
		</tr>
	</tbody>
		<tfoot bgcolor="#FF7300" align="center">
			<td width="%25">合计</td>
			<td colspan="3">4</td>
		</tfoot>
	</table>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rbf0ftcZ-1593240920368)(C:\Users\lenovo\Desktop\新建文件夹\静态网页2\案例\result\案例03.png)]

案例04.表单的基本用法.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>用户注册</h2>
	<form action="" method="get" enctype="multipart/form-data">
	用户名：<input type="text" name="usname" maxlength="4" value="
	碧瑶" readonly="readonly">
	<br>
	密  码：<input type="password" name="pwd" size="6">
	<br>
	年  龄：<input type="text" name="age" value="18" disabled="">
	<br>
	性	别: <input type="radio" name="sex" value="male">男
			<input type="radio" name="sex" value="female" checked>女
	<br>
	爱	好: <input type="checkbox" name="hobby" value="eat" checked>吃饭
			<input type="checkbox" name="hobby" value="sleep">睡觉
			<input type="checkbox" name="hobby" value="doudou">打豆豆
	<hr>
	头  像: <input type="file" name="head" accept="image/jpg">
			<input type="hidden" name="usr_id" value="8888">
	<br>
	<input type="submit" value="注  册">
	<input type="reset" value="重  置">
	<hr>
	<input type="image" src="../../image/tijiao.gif">
	<input type="image" src="../../image/chongtian.gif">
	<hr>
	<input type="button" value="普通按钮">
	</form>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2qAPVMq-1593240920368)(C:\Users\lenovo\Desktop\project\result\案例04-2.png)]

案例05.特殊表单元素.html

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	学  历：
	<select name="degree">
		<option value="0">--请选择你的学历--</option>
		<option value="dazhuan">大专</option>
		<option value="benke" selected>本科</option>
		<option value="yanjiusheng">研究生</option>
		<option value="shuoshi">硕士</option>
	</select>
	<br>
	城  市：
	<select name="city">
		<optgroup label="山西省>"
			<option value="taiyuan">太原</option>
			<option value="datong">大同</option>
			<option value="changzhi">长治</option>
		</optgroup>
		<optgroup label="山东省">
			<option value="jinan">济南</option>
			<option value="qingdao">青岛</option>
			<option value="rizhao">日照</option>
		</optgroup>
		<optgroup label="江苏省">
			<option value="nanjing">南京</option>
			<option value="suzhou">苏州</option>
			<option value="yangzhou">扬州</option>
		</optgroup>
	</select>
	<br>
	服务协议；
	<textarea name="introduce" rows="10" cols="100"  readonly>
		请遵守本网站的相关协议和国家的法律法规...
		请遵守本网站的相关协议和国家的法律法规...
		请遵守本网站的相关协议和国家的法律法规...
		请遵守本网站的相关协议和国家的法律法规...
		请遵守本网站的相关协议和国家的法律法规...
	</textarea>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slxqIosF-1593240920370)(C:\Users\lenovo\Desktop\project\result\案例05.png)]

案例06.其他表单元素.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<fieldset>
		<legend>个人信息</legend>
		<label for="name">用户名</label>
		<input type="text" name="ursname" id="name"><br>
		<label for="email">邮  箱</label>
		<input type="text" name="email" id="email"><br>
	</fieldset>

	<hr>

	<input type="submit" value="提交按钮">
	<input type="reset" value="重置按钮">
	<input type="image" src="../../image/tijiao.gif">
	<input type="button" value="普通按钮">
	<hr>

	<button type="submit">提交按钮</button>
	<button type="reset">重置按钮</button>
	<button type="button">普通按钮</button>
	<button><img src="../../image/tijiao.gif" alt=""></button>
	<hr>
	<fieldset>
		<legend>院校信息</legend>
		学号：<input type="text" name="stuld"><br>
		学校：<input type="text" name="stuSchool"><br>
		专业：<input type="text" name="stuMajor"><br>
	</fieldset>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hlv43r7m-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例06.png)]

案例07.内嵌框架.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<iframe src="top.html" width="100%" height="200px" frameborder="0" 
	scrolling="auto"></iframe>
	<h3>主体部分</h3>
	<br>
	<a href="01.表格.html" target="hello">01.html</a>
	<a href="02.合并单元格.html" target="hello">02.html</a>
	<br>
	<iframe src="./foot.html" width="600px" height="600px" frameborder
	="0" name="hello"></iframe>
</body>
</html>1234567891011121314151617

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvKrpi8R-1593240920371)(C:\Users\lenovo\Desktop\project\result\案例07.png)]

案例1>.html5新增.结构相关的标签.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<article>
		<header>标题</header>
		<section>
			第一段
		</section>
		<section>
			第二段
		</section>
		<footer>脚注</footer>
	</article>

	<aside>广告</aside>

	<figure>
		<figcaption>log标识</figcaption>
		<img src="../../image/facebook.png" alt="">
		<img src="../../image/google.png" alt="">
	</figure>
	<nav>
		<ul>
		<li>网页</li>
		<li>咨讯</li>
		<li>视频</li>
		<li>图片</li>
		<li>知道</li>
		<li>贴吧</li>
		<li>采购</li>
		<li>地图</li>
	</ul>
	</nav>
</body>
</html>1234567891011121314151617181920212223242526272829303132333435363738

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AR5V99DS-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例01…png)]

案例02.>HTML5新增.语义相关.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <mark>to</mark> html!
	<hr>
	我在<time datetime="2020年2月14日">情人节</time>有个会!
	<hr>
	<details>
		<summary>HTML简介</summary>
		<p>HTML是一门用来制作网页的标签语言</p>
		<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
	</details>
	<meter max="100" min="1" value="30"></meter>
	<hr>

	<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
	<hr>

	<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
	<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
	<meter max="100" min="1" value="10" high="60" low="20" optimum="65"></meter>
	<hr>

	<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="65" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="40" high="60" low="20" optimum="15"></meter>
	<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
	<hr>

	<meter max="100" min="1" value="15" high="60" low="20" optimum="35"></meter>
	<meter max="100" min="1" value="70" high="60" low="20" optimum="35"></meter>
	<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
	<hr>

	<progress value="10" max="50"></progress>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcuZlH7Z-1593240920373)(C:\Users\lenovo\Desktop\project\result\案例02.。.png)]

案例03>HTML5新增.表单相关.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="" autocomplete="on" id="myform">
		<label for="email">邮箱</label>
		<input type="email" name="email" id="email">

		<br>
		<label for="home">个人主页:</label>
		<input type="url" name="home" id="home">

		<br>
		<label for="phone">电话：</label>
		<input type="tel" name="phone" id="phone">

		<br>
		<label for="keywords">关键字:</label>
		<input type="search" name="keywords" id="keywords">

		<br>
		<label for="num">数字：</label>
		<input type="range" name="num" id="num" min="1" max="10" step="2">

		<br>
		<label for="birthday">出生日期：</label>
		<input type="datetime" name="birthday" id="birthday">

		<br>
		<label for="color">颜色：</label>
		<input type="color" name="color" id="color">

		<br>
		<label for="name">用户名:</label>
		<input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus="">

		<br>
		<label for="age">年龄：</label>
		<input type="text" name="age id="age pattern="\d{1,2}">
		<br>
		<label for="city">城市：</label>
		<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
		<datalist id="citylist">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">深圳</option>
			<option value="4">广州</option>
		</datalist>
		<hr>
		<input type="submit" form="myform">
	</form>
</body>
</html>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ul7yIjAz-1593240920374)(C:\Users\lenovo\Desktop\project\result\案例03…png)]

案例04>HTML5新增.多媒体相关.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
	<source src="../../audio/earth.ogg">
	<source src="../../audio/water.mp3">
	您的浏览器不支持audio标签，请更换浏览器
</audio>

<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpMsaoe7-1593240920375)(C:\Users\lenovo\Desktop\project\result\案例04…png)]

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

	<br>
	<label for="phone">电话：</label>
	<input type="tel" name="phone" id="phone">

	<br>
	<label for="keywords">关键字:</label>
	<input type="search" name="keywords" id="keywords">

	<br>
	<label for="num">数字：</label>
	<input type="range" name="num" id="num" min="1" max="10" step="2">

	<br>
	<label for="birthday">出生日期：</label>
	<input type="datetime" name="birthday" id="birthday">

	<br>
	<label for="color">颜色：</label>
	<input type="color" name="color" id="color">

	<br>
	<label for="name">用户名:</label>
	<input type="text" name="usrname" id="name" placeholder="请输入用户名" required="" autocomplete="on" autofocus="">

	<br>
	<label for="age">年龄：</label>
	<input type="text" name="age id="age pattern="\d{1,2}">
	<br>
	<label for="city">城市：</label>
	<input type="text" name+"city" id="city" list="citylist" autocomplete="off">
	<datalist id="citylist">
		<option value="1">北京</option>
		<option value="2">上海</option>
		<option value="3">深圳</option>
		<option value="4">广州</option>
	</datalist>
	<hr>
	<input type="submit" form="myform">
</form>
1234567891011121314151617181920212223242526272829303132333435363738394041

```

效果

[外链图片转存中…(img-ul7yIjAz-1593240920374)]

案例04>HTML5新增.多媒体相关.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls="" autoplay=""
loop="" muted="" preload="metadeta"></audio> -->
<audio controls="">
	<source src="../../audio/earth.ogg">
	<source src="../../audio/water.mp3">
	您的浏览器不支持audio标签，请更换浏览器
</audio>

<video src="../../video/volcano.mp4" controls="" width="400px" poster
="../../image/ timg (1).jpg"></video>
</body>
</html>123456789101112131415161718

效果

[外链图片转存中…(img-vpMsaoe7-1593240920375)]

原文链接：https://blog.csdn.net/WanXuang/article/details/106982782?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160513384519724835852804%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160513384519724835852804&biz_id=&utm_medium=distribute.pc_search_top_result.none-task-code-2~all~top_position~default-1-106982782-12.nonecase&utm_term=html

作者：WanXuang

出处：从CSDN

文同步本人掘金平台的文章：https://juejin.cn/post/6844903569317953550

继承

许多的OO语言都支持两种继承方法：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于函数没有签名，在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承，而且实现主要是依靠原型链来实现的。[p162]

原型链

原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。回顾下构造函数、原型和实例的关系: 每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function(){
	return this.property;
}
function SubType(){
	this.subProperty = false;
}

// 继承了SuperType,重点哦
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
	return this.subProperty;
}

var instance = new SubType();
console.log(instance.getSuperValue()); // true
复制代码

原型链继承带来两个问题：一是原型实际上变成了另一个类型的实例，于是，原先的实例属性也就变成了现在原型的属性，共享了属性。二是在创建子类型的实例时，不能在没有影响所有对象实例的情况下向超类型的构造函数传递参数。

借用构造函数

借用构造函数解决原型链继承带来的不能向构造函数传递仓鼠的问题。这里使用到了apply()或者call()方法在新创建的对象上执行构造函数。

function SuperType(){
	this.colors = ['red','blue','green'];
}
function SubType(){
	// 继承SuperType
	SuperType.call(this); // SuperType.apply(this)同效
}

var instance1 = new SubType();
instance1.color.push('black');
console.log(instance1.colors); // 'red,blue,green,black'

var instance2 = new SubType();
console.log(instance2.colors); // 'red,blue,green'
复制代码

上面的例子中，我在父类型构造函数中没有传参数，看者感兴趣的话可以自己加下参数来实验一番咯。

借用构造函数解决了原型链继承的确定，但是又没有接纳原型链的优点：共享。下面的组合继承结合了原型链和借用构造函数，容纳了两者的优点。

组合继承

组合继承的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

function SuperType(name){
	this.name = name;
	this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
	console.log(this.name);
}
function SubType(name,age){
	// 继承属性
	SuperType.call(this,name);
	this.age = age;
}

// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor =SubType; // 避免重写构造函数指向错误
SubType.prototype.sayAge = function(){
	console.log(this.age);
}

var instance1 = new SubType('nicholas' , 29);
instance1.colors.push('black');
console.log(instance1.colors); // 'red,blue,green,black'
instance1.sayName(); // 'nicholas'
instance1.sayAge(); // 29

var instance2 = new SubType('greg' , 27);
console.log(instance2.colors); // 'red,blue,green'
instance2.sayName(); // 'greg'
instance2.sayAge(); // 27
复制代码

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为了JavaScript中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

原型式继承

原型式继承是借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义的类型。

function object(o){ // 传入一个对象
	function F(){};
	F.prototype = o;
	return new F();
}

var person = {
	name : 'nicholas',
	friends: ['shelby','court','van']
};

var anotherPerson = object(person);
anotherPerson.name = 'greg';
anotherPerson.friends.push('rob');

var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'linda';
yetAnotherPerson.friends.push('barbie');

console.log(person.friends); // 'shelby,court,van,rob,barbie'
复制代码

寄生式继承

寄生式继承是与原型继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式类似，即是创建了一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的做了所有工作一样返回对象。

function object(o){ // 传入一个对象
	function F(){};
	F.prototype = o;
	return new F();
}
function createAnother(original){
	var clone = object(original);
	clone.sayHi = function(){
		console.log('hi');
	};
	return clone;
}
var person = {
	name : 'nicholas',
	friends : ['shelby','court','van']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 'hi'
复制代码

上面的例子中，新对象anotherPerson不仅具有person的所有属性和方法，而且还有了自己的sayHi()方法。

寄生组合式继承

组合继承是JavaScript最常用的继承模式；不过，它也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。寄生组合式继承能够解决这个问题。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型的原型的一个副本而已。寄生组合式继承的基本模式如下：

function inheritPrototype(subType,superType){
	var prototype = Object(superType.prototype); // 创建对象
	prototype.constructor = subType; // 增强对象，防止下面重写constructor属性
	subType.prototype = prototype; // 指定对象
	
}
复制代码

一个完整的例子如下,相关插图见书[p173]:

function inheritPrototype(subType,superType){
	var prototype = Object(superType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
	
}
function SuperType(name){
	this.name = name;
	this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
	alert(this.name);
}
function SubType(name, age){
	SuperType.call(this, name); // 只在这调用了一次超类型的构造函数
        this.age = age;
}

inheritPrototype(SubType , SuperType);

SubType.prototype.sayAge = function(){
	console.log(this.age);
}

var instance = new SubType('nicholas' , 29);
复制代码

上面的例子的高效处体现在它只调用了一次SuperType构造函数，并且避免了在SubType.prototype上创建不必要的，多余的属性。与此同时，原型链还能保持不变；因此还能正常使用instanceof和inPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。我的理解是，函数内的函数使用到外层函数的变量延长变量的生存时间，造成常驻内存。例子见下：

function foo(){
    var a = 2;
    return function(){
		a += 1;
		console.log(a);
	}
}

var baz = foo();

baz(); // 3
baz(); // 4
baz(); // 5
baz(); // 6
复制代码

上面的例子中，外部的函数foo()执行完成之后，正常的情况下应该销毁a变量的，但是内部的返回的匿名函数使用到该变量，不能销毁。如果需要销毁的话，可以改写成下面：

function foo(){
	var a = 2;
	return function(){
		a += 1;
		console.log(a);
	}
}
var baz = foo();
baz(); // 3

baz = null; // 将内部的匿名函数赋值为空
复制代码

从闭包说起

谈到了闭包，这让我想起了不久前刷知乎看到一篇文章。自己整理如下：

for(var i = 0 ; i < 5; i++){
	setTimeout(function(){
		console.log(i);
	},1000)
}
console.log(i);

// 5,5,5,5,5,5
复制代码

上面的代码是输出了6个5，而这6个5是这样执行的，先输出全局中的console.log(i)，然后是过了1秒种后，瞬间输出了5个5（为什么用瞬间这个词呢，怕看者理解为每过一秒输出一个5）。解读上面的代码的话，可以通过狭义范围(es5)的理解：同步 => 异步 => 回调（回调也是属于异步的范畴，所以我这里指明了狭义啦）。先是执行同步的for,遇到异步的setTimeout(setTimeout和setInterval属于异步哈)后将其放入队列中等待，接着往下执行全局的console.log(i)，将其执行完成后执行异步的队列。

追问1:闭包

改写上面的代码，期望输出的结果为：5 => 0,1,2,3,4。改造的方式一：

for(var i = 0; i < 5; i++){
	(function(j){
		setTimeout(function(){
			console.log(j);
		},1000);
	})(i);
}
console.log(i);

// 5,0,1,2,3,4
复制代码

上面的代码巧妙的利用IIFE(Immediately Invoked Function Expression:声明即执行的函数表达式)来解决闭包造成的问题，闭包的解析看上面。

方法二：利用js中基本类型的参数传递是按值传递的特征，改造代码如下

var output = function(i){
	setTimeout(function(){
		console.log(i);
	},1000);
};
for(var i = 0; i < 5; i++){
	output(i); // 这里传过去的i值被复制了
}
console.log(i);

// 5,0,1,2,3,4
复制代码

上面改造的两个方法都是执行代码后先输出5，然后过了一秒种依次输出0,1,2,3,4。

如果不要考虑全局中的console.log(i)输出的5，而是循环中输出的0,1,2,3,4。你还可以使用ES6的let块级作用域语法,实现超级简单:

for(let i = 0; i < 5; i++){
	setTimeout(function(){
		console.log(i);
	},1000);
}

// 0,1,2,3,4
复制代码

上面是过了一秒钟后，依次输出0,1,2,3,4。这种做法类似于无形中添加了闭包。那么，如果使用ES6语法的话，会怎样实现5,0,1,2,3,4呢？

追问2:ES6

改造刚开始的代码使得输出的结果是每隔一秒输出0,1,2,3,4，大概第五秒输出5。

在不使用ES6的情况下：

for(var i = 0; i < 5; i++){
	(function(j){
		setTimeout(function(){
			console.log(j);
		},1000*j);
	})(i);
}
setTimeout(function(){
	console.log(i);
},1000*i);

// 0,1,2,3,4,5
复制代码

上面的代码简单粗暴，但是不推荐。看题目是每隔一秒输出一个值，再回调实现最后的5输出，这个时候应该使用ES6语法来考虑，应该使用Promise方案：

const tasks = [];
for(var i = 0; i < 5; i++){// 这里的i声明不能改成let，改成let的话请看下一段代码
	((j)=>{
		tasks.push(new Promise((resolve)=>{ // 执行tasks
			setTimeout(()=>{
				console.log(j);
				resolve(); // 这里一定要resolve,否则代码不会按照预期执行
			},1000*j);
		}))
	})(i);
}

Promise.all(tasks).then(()=>{ // 执行完tasks，回调
	setTimeout(()=>{
		console.log(i);
	},1000);
});

// 符合要求的每隔一秒输出
// 0,1,2,3,4,5
复制代码

如果是使用let，我的改造如下：

const tasks = [];
for (let i = 0; i < 5; i++) {
		tasks.push(new Promise((resolve) => {
			setTimeout(() => {
				console.log(i);
				resolve();
			}, 1000 * i);
		}));
}

Promise.all(tasks).then(() => {
	setTimeout(() => {
		console.log(tasks.length);
	}, 1000);
});

// 0,1,2,3,4,5
复制代码

上面的代码比较庞杂，可以将其颗粒话，模块化。对上面两段代码的带var那段进行改造后如下：

const tasks = []; // 这里存放异步操作的Promise
const output = (i) => new Promise((resolve) => {
	setTimeout(()=>{
		console.log(i);
	},1000*i);
});

// 生成全部的异步操作
for(var i = 0; i < 5; i++){
	tasks.push(output(i));
}
// 异步操作完成之后，输出最后的i
Promise.all(tasks).then(() => {
	setTimeout(() => {
		console.log(i);
	},1000);
});

// 符合要求的每隔一秒输出
// 0,1,2,3,4,5
复制代码

追问3:ES7

既然ES6的Promise可以写，那么ES7是否可以写呢，从而让代码更加简洁易读？那就使用到到了异步操作的async await特性啦。

// 模拟其他语言中的sleep，实际上可以是任何异步操作
const sleep = (time) => new Promise((resolve) => {
	setTimeout(resolve , time);
});

(async () => {
	for(var i = 0; i < 5; i++){
		await sleep(1000);
		console.log(i);
	}
	
	await sleep(1000);
	console.log(i);
})();

// 符合要求的每隔一秒输出
// 0,1,2,3,4,5
复制代码

浏览器窗口位置

IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性，分别表示浏览器窗口相对于屏幕左上角和上边的位置[p197]。Firefox则以screenX和screenY属性来表示。为了兼容各个浏览器，可以入下面这样写：

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;
复制代码

浏览器窗口大小

由于浏览器厂商以及历史的问题，无法确认浏览器本身的大小，但是可以取得视口的大小[p198]。如下：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
    
if(typeof pageWidth != "number"){
	if(document.compatMode == 'CSS1Compat'){ // 标准模式下的低版本ie
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	}else{ // 混杂模式下的chrome
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}
复制代码

上面的示例可以简写成下面这样：

var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientHeight;
var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
复制代码

canvas中的变换

为绘制上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果。[p453]

可通过下面的方法来修改变换矩阵:

rotation(angle):围绕原点旋转图像angle弧度
scale(scaleX,scaleY)
translate(x,y): 将坐标原点移动到(x,y)。执行这个变换后，坐标(0,0)会变成之前由(x,y)表示的点。

JSON

关于JSON，最重要的是要理解它是一种数据格式，不是一种编程语言。

对象字面量和JSON格式比较

先来看下对象字面量demo写法：

var person = {
	name : "nicholas",
	age : 29
};

# 上面的代码也可以写成下面的
var person = {
	"name" : "nicholas",
	"age" : 29
};
复制代码

而上面的对象写成数据的话，就是下面这样了：

{
	"name": "nicholas ",
	"age": 29
}

# 可到网站 https://www.bejson.com/ 验证
复制代码

⚠️ 与JavaScript对象字面量相比，JSON对象又两个地方不一样。首先，没有声明变量(JSON中没有变量的概念)。其次，没有分号(因为这不是JavaScript语句，所以不需要分号)。留意的是，对象的属性必须加双引号(不是单引号哦)，这在JSON中是必须的。

stringify()和parse()

可以这么理解：JSON.stringify()是从一个object中解析成JSON数据格式，而JSON.parse()是从一个字符串中解析成JSON数据格式。

var person = {
	name: 'nicholas',
	age: 29
};

var jsonText = JSON.stringify(person);

console.log(jsonText);

// {"name":"nicholas","age":29}
复制代码

var strPerson = '{"name":"nicholas","age":29}';
var jsonText = JSON.parse(strPerson);

console.log(jsonText); // { name: 'nicholas', age: 29 }
复制代码

XMLHttpRequest对象

XMLHttpRequest对象用于在后台与服务器交换数据。它是Ajax技术的核心[p571]。

XMLHttpRequest对象能够使你：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

XMLHttpRequest的使用：

# 创建XHR对象 => open()准备发送 => send()传送数据

// 创建对象，对浏览器做兼容
function createXHR(){
	if(typeof XMLHttpRequest != 'undefined'){ // IE7+和其他浏览器支持
		return new XMLHttpRequest();
	}else if(typeof ActiveXObject != 'undefined'){
		if(typeof arguments.callee.activeXString != 'string'){
			var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; // 低版的ie可能遇到三种不同版本的XMR对象
			var i , len;
			for(i = 0,len = versions.length; i < len ; i++){
				try{
					new ActiveXObject(version[i]);
					arguments.callee.activeXString = versions[i];
					break;
				}catch (ex){
					// 跳过
				}
			}
		}
		return new ActiveXObject(arguments.callee.activeXString);
	}else{
		throw new Error("No XHR object available.");
	}
}
var xhr = createXHR();

// 准备发送数据
xhr.open("get","path/to/example.txt",false);// 非异步，异步的话第三个参数改为true

// 传送数据
xhr.send(null); // get方法不需要传数据

// 判断状态嘛，获取服务器返回的数据
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
	console.log(xhr.responseText);
}else{
	console.log("Request was nsuccessful : " + xhr.status);
}
复制代码

跨域解决方案

何为跨域呢？只要访问的资源的协议、域名、端口三个不全相同，就可以说是非同源策略而产生了跨域了，这是狭义的说法。广义的说法：通过XHR实现Ajax通信的一个主要限制，来源于跨域的安全策略；默认情况下,XHR对象只能访问包含它的页面位于同一个域中的资源[p582]。注：部分文字和代码引用自前端常见跨域解决方案（全）

CORS

CORS（Cross-Origin Resource Sharing，跨资源共享）定义了在必须访问跨资源时，浏览器与服务器应该如何沟通。其背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。 复杂的跨域请求应当考虑使用它。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无需设置，如果要带cookie请求：前后端都要设置。

1.前端设置

1.) 原生ajax

function createCORSRequest(method,url){ // 兼容处理，ie8/9需要用到window.XDomainRequest
	var xhr = new XMLHttpRequest();
	// 前端设置是否带cookie
	xhr.withCredentials = true;
	
	if("withCredentials" in xhr){ // 其他的用到withCredentials
		xhr.open(method,url,true);
	}else if(typeof XDomainRequest != 'undefined'){
		xhr = new XDomainRequest();
		xhr.open(method , url);
	}else{
		xhr = null;
	}
	
	return xhr;
}

// get请求
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
	request.onload = function(){
		//  对request.responseText 进行处理 
	};
	request.send();
}

// post请求，带cookie
var requestXhr = createCORSRequest("post","http://www.somewhere-else.com/page/");
requestXhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
requestXhr.send("user=admin");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
复制代码

2.)jquery ajax

上面写了一大堆原生的，看得头都有点大了，还是使用jquery ajax 比较舒服:

$.ajax({
	...
	xhrFields: {
		withCredentials: true // 前端设置是否带cookie
	},
	crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
	...
});
复制代码

3.) vue框架

在vue-resource封装的ajax组建中加入以下代码:

Vue.http.options.credentials = true;
复制代码

2.服务器设置

若后端设置成功，前端浏览器控制台上就不会出现跨域报错的信息，反之，说明没有成功。

1.） java后台

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需写全（协议+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");
复制代码

2.) node后台

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');
复制代码

JSONP

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，在后来的web服务中非常流行。简单的跨域请求用JSONP即可。

通常为了减轻web服务器的负载，我们把js,css,img等静态资源分离到另一台独立域名的服务器，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1.前端实现

1.）原生实现

<script>
	var script = document.createElement('script');
	script.type = 'text/javascript';
	
	// 传参并指定回调执行函数为onBack
	script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
	document.head.appendChild(script);
	
	// 回调执行函数
	function onBack(res){
		console.log(JSON.stringify(res));
	}
</script>
复制代码

服务器返回如下（返回时即执行全局函数）：

onBack({"status": true,"user":"admin"})
复制代码

2.）jquery ajax

$.ajax({
	url: 'http://www.domain2.com:8080/login',
	type: 'get',
	dataType: 'jsonp', // 请求方式为jsonp 
	jsonpCallback: 'onBack', // 自定义回调函数名
	data: {}
});
复制代码

3.）vue.js

this.$http.jsonp('http://www.domain2.com:8080/login',{
	params: {},
	jsonp: 'onBack '
}).then((res)=>{
	console.log(res);
});
复制代码

2.后端nodejs代码的示范：

var qs = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request',function(req,res){
	var params = qs.parse(req.url.split('?')[1]);
	var fn = params.callback;
	
	// jsonp返回设置
	res.writeHead(200,{"Content-Type":"text/javascript"});
	res.write(fn + '('+JSON.stringify(params)+')');
	
	res.end();
});

server.listen('8080');
console.log('Server is running at port 8080 ...');
复制代码

⚠️ jsonp缺点：只能实现get一种请求。

WebSocket协议跨域

WebSocket protocol 是 HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯。

原生的WebSocket API使用起来不太方便，示例中使用了socket.io，它很好的封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

1.前端代码

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>
复制代码

2.node socket后台

var http = require('http');
var socket = require('socket.io');

// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});
复制代码

requestAnimationFrame()帧动画

requestAnimationFrame 创建平滑的动画[p682]。在此之前都是使用setTimeout或者setInterval实现，requestAnimationFrame与它们相比：

不需要时间间隔，会贴切浏览器的刷新频率
在切换到另外的页面时，会停止运行

使用的示范如下：

爬虫设计中，H5页面是指使用HTML5技术构建的网页。以下是几个关于H5的爬虫设计示例：

使用BeautifulSoup解析H5页面：

python复制代码import requests  from bs4 import BeautifulSoup    url = 'http://example.com'  # 目标H5页面的URL  response = requests.get(url)  soup = BeautifulSoup(response.text, 'html.parser')    # 使用BeautifulSoup解析H5页面的内容  # ...

使用Scrapy框架爬取H5页面：

首先，确保已经安装了Scrapy框架。然后，创建一个新的Scrapy项目，并在spiders目录下创建一个新的爬虫文件，例如h5_spider.py。在爬虫文件中，可以使用Scrapy提供的API来爬取H5页面。

python复制代码import scrapy    class H5Spider(scrapy.Spider):      name = 'h5'      allowed_domains = ['example.com']  # 允许爬取的域名      start_urls = ['http://example.com']  # 起始URL        def parse(self, response):          # 使用response对象处理H5页面的内容          # ...

使用Selenium模拟浏览器行为获取H5页面：

对于动态加载的H5页面，使用常规的爬虫方法可能无法获取完整的内容。在这种情况下，可以使用Selenium模拟浏览器的行为来获取完整的H5页面。首先，确保已经安装了Selenium库。然后，使用以下代码示例：

python复制代码from selenium import webdriver  from selenium.webdriver.chrome.options import Options  import time    url = 'http://example.com'  # 目标H5页面的URL  chrome_options = Options()  chrome_options.add_argument('--headless')  # 在后台运行浏览器，不弹出窗口  driver = webdriver.Chrome(options=chrome_options)  # 创建浏览器实例  driver.get(url)  # 打开目标页面  time.sleep(2)  # 等待页面加载完成，根据实际情况调整等待时间  html = driver.page_source  # 获取完整的H5页面内容  driver.quit()  # 关闭浏览器实例    # 处理获取到的H5页面内容  # ...

这些示例展示了使用不同方法来爬取H5页面的基本思路。根据具体的页面结构和需求，你可能需要进一步调整代码以处理页面内容

在线咨询

上一篇：如何在浏览器账中查看网页的HTML源代码？
下一篇：那些被 Vue3 废弃的特性（小白必看）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML大整合（下）

例4常用标签.html

案例5常用标签2.html

案例6常用标签3.html

案例7常用标签4.html

案例8常用标签5.html

案例9其他标签.html

案例10头部标签.html

案例11标签嵌套.html

案例12超链接.html

案例13锚点链接.html

案例14页面间的锚点链接.html

案例15功能链接.html

案例01.表格.html

案例02.合并单元格.html

案例03.表格的高级标签.html

案例04.表单的基本用法.html

案例05.特殊表单元素.html

案例06.其他表单元素.html

案例07.内嵌框架.html

案例1>.html5新增.结构相关的标签.html

案例02.>HTML5新增.语义相关.html

案例03>HTML5新增.表单相关.html

案例04>HTML5新增.多媒体相关.html

案例04>HTML5新增.多媒体相关.html

继承

原型链

借用构造函数

组合继承

原型式继承

寄生式继承

寄生组合式继承

闭包

从闭包说起

浏览器窗口位置

浏览器窗口大小

canvas中的变换

JSON

对象字面量和JSON格式比较

stringify()和parse()

XMLHttpRequest对象

跨域解决方案

CORS

JSONP

WebSocket协议跨域

requestAnimationFrame()帧动画

您的项目需求