HTML、CSS、JavaScript 总结

王睿丶
720 阅读9分钟

文章目录

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

1、开发技巧

1. Ctrl + 回车键 换到下行

2. Ctrl + shift + 回车键 换到上行

3. h1*6，在按Tab键 就会在编译器上自动生成6个h1标签

4. h1*6>{1级标题}，在按Tab键 就会生成6个h1标签，内容都是一级标题

5.

	h$*6>{$级标题}	生成h1、h2、h3...~h6标签，自动递增，而且里面的内容值也会自动递增
	$【读duo le】	它表示一个占位符，它会在每一次生成一行的时候自动递增

6. lorem + Tab 乱数假文，没有任何实际含义的文字，就是为了测试架构来使用的。

7. 插 lorem格式为：h1*6>lorem 就会生成一堆虚假的文字

8. h1*6>lorem1 表示生成6行里，每一行只有一个乱数单词，同理2就会有两个，3就会有三个等等

9. shift + tab 减缩进

2、常见问题

2.1、分割线标签、文字居中、背景图片充满全图

一丶 分割线标签

<hr>

二丶文字居中
以table为例：

<table border="1"align="center"></table>

三丶背景图片铺满整个网页：

	<html>
		<head>
			<meta charset="UTF-8">
			<title>img<title>
			<style type="text/css">
				body{
					background-image:url(img/index.jpg);
					background-size:cover;
				}
				</style>
				....
				....

注意：URL 路径是放在和网页同一个文件夹时才能直接写图片名字+扩展名，如果还专门创建了一个文件夹放置图片，记得要先写文件夹的名字再写图片名+扩展名！

2.2、HTML如何引入外部JS文件

在这里插入图片描述

2.3、HTML中 块级元素 如何转为 行内元素??

可以通过display: inline-block设置为行内元素。

2.4、怎么在字的中间加一条横线表示这些字被划掉了，用css。

删除线效果

2.5、用a标签在当前网页跳转和打开新页面再跳转

	在当前网页跳转
    <a href="http://www.itcast.cn/" target="_self">传智播客</a>
    打开新网页再跳转
    <a href="http://www.baidu.com" target="_blank">跳到百度</a>

2.6、锚点链接

    <li><a href="#one">平面广告设计</a></li>
    <li><a href="#two">网页设计与制作</a></li>
    <li><a href="#three">Flash互动广告动画</a></li>
    
    <h3 id="one">平面广告设计</h3>		
    <h3 id="two">网页设计与制作</h3>
    <h3 id="three">Flash互动广告动画</h3>

2.7、HTML5页面元素

视频地址：stu.ityxb.com/preview/det…

学习内容：
1、ul元素
2、ol元素
3、dl元素
4、列表的嵌套应用
5、header元素
6、nav元素
7、article元素
8、section元素
9、footer元素

代码：
链接：pan.baidu.com/s/1Uq87r7rT…
提取码：gvmf

结构：
在这里插入图片描述
代码截图：

01.html
在这里插入图片描述
02.html
在这里插入图片描述
03.html
在这里插入图片描述
04.html
在这里插入图片描述
05.html
在这里插入图片描述
06.html
在这里插入图片描述
07.html
在这里插入图片描述
08.html
在这里插入图片描述
在这里插入图片描述
09.html
在这里插入图片描述

2.8、CSS行内元素和块级元素的转换

blog.csdn.net/chengxu_kua…

2.9、 内部样式几种常用写法（类、id）

CSS — 内部样式几种常用写法（类、id）
22/100
发布文章
qq_27494201
未选择任何文件
效果图：
在这里插入图片描述

一丶类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.p1{
			color: red;
			size: 20px
		}
		.r1{
			color: red;
			size: 20px
		}
		.p2{
			color: red;
			size: 20px
		}
	
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul class="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul class="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul class="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>

二丶 id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		#p1{
			color: red;
			size: 20px
		}

		#r1{
			color: #0DFC8B;
			size: 20px
		}
		#p2{
			color: #F806D8;
		}
	</style>
</head>
<body>

	<h1>本周末任务计划</h1>
	<ul id="p1">
		<li>去书店买书</li>
		<li>去逛街，给爸爸妈妈买新衣服</li>
		<li>周六早上9点去见客户</li>
		<li>周日带着乐乐去去公园画画</li>
	</ul>

	<h1>老哥排行榜</h1>
	<ul id="r1">
		<li>海阔天空</li>
		<li>甜蜜蜜</li>
		<li>一路上有你</li>
		<li>我是一只小小鸟</li>
	</ul>

	<h1>友情链接</h1>
	<ul id="p2">
		<li>购书指南</li>
		<li>账户管理</li>
		<li>配送方式</li>
	</ul>


</body>
</html>

效果图：
在这里插入图片描述

一丶类

<h1>本周末任务计划</h1>
<ul class="p1">
	<li>去书店买书</li>
	<li>去逛街，给爸爸妈妈买新衣服</li>
	<li>周六早上9点去见客户</li>
	<li>周日带着乐乐去去公园画画</li>
</ul>

<h1>老哥排行榜</h1>
<ul class="r1">
	<li>海阔天空</li>
	<li>甜蜜蜜</li>
	<li>一路上有你</li>
	<li>我是一只小小鸟</li>
</ul>

<h1>友情链接</h1>
<ul class="p2">
	<li>购书指南</li>
	<li>账户管理</li>
	<li>配送方式</li>
</ul>

二丶 id

<h1>本周末任务计划</h1>
<ul id="p1">
	<li>去书店买书</li>
	<li>去逛街，给爸爸妈妈买新衣服</li>
	<li>周六早上9点去见客户</li>
	<li>周日带着乐乐去去公园画画</li>
</ul>

<h1>老哥排行榜</h1>
<ul id="r1">
	<li>海阔天空</li>
	<li>甜蜜蜜</li>
	<li>一路上有你</li>
	<li>我是一只小小鸟</li>
</ul>

<h1>友情链接</h1>
<ul id="p2">
	<li>购书指南</li>
	<li>账户管理</li>
	<li>配送方式</li>
</ul>

文章目录 暂无目录 文章内添加@[TOC]自动根据文章标题生成目录

Markdown 1575 字数 111 行数 当前行 1, 当前列 0HTML 1351 字数 88 段落
引用 – Ctrl+Shift+Q

2.10、外部、内部、内联及它们的优先级顺序

一丶外部样式

首先先在相对与网页同一个路径下建立一个扩展名以.css的文件，将它用记事本打开，放入代码：
如图：
在这里插入图片描述
然后利用 link 标签即可导入外部样式文件，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
		
		<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>
	<p>加油！</p>
</body>
</html>

效果图：
在这里插入图片描述

—————————————————————————————————————————

二丶内部样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

	<style type="text/css">
		p{
			text-align: center;
			font-size: 30px;
		}
	</style>
	
</head>

<body>

	<p>加油！</p>

</body>
</html>

—————————————————————————————————————————

三丶内联样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

</head>

<body>

	<p style="text-align: center;font-size: 30px;color: red">加油！</p>

</body>
</html>

—————————————————————————————————————————

四丶优先级详解

  • 如果在HTML文件中同时出现了三种样式的写法，那么他们会查漏补缺，意思也就是说会把没有的效果自动加上去，已有的效果才会按照它们各自的优先级大小进行选择。
  • 那么优先级顺序为：内联样式 > 内部样式 > 外部样式

2.11、console.log(iVal)是什么？显示在哪里？

1.是什么？

两种含义：
1.终端的输入输出信息的记录日志
2.console.log()是用来调适javascript的

2.在哪里？
拿谷歌浏览器来说，进入页面，然后按f12进入页面调试模式，里面有一个console选项，你点一下，就可以看到你console.log输出的内容了

3、知识总结

3.1、元素、属性、属性分类、空元素、元素嵌套、元素家族、、根元素、 lang属性、文档头—head、编码、文档元数据—meta、 body、文档声明

一丶 元素
元素 = 起始标记 + 结束标记 + 元素内容 + 元素属性

二丶 属性
属性=属性属性名 + 属性值

三丶 属性分类
局部属性：某些元素特有的属性
全局属性：所有元素通用 比如：title

四丶 空元素
有些元素没有结束标记，这样的元素叫做：空元素，它是不会显示内容的

五丶 元素嵌套

元素嵌套是可以的，比如说：

	<div>
	<p></p>		正确
	</div>

但是一定要注意！元素不能相互嵌套！比如说：

<div>
	<p>			错误
	</div>		
	</p>

六丶 元素家族

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

七丶 文档声明—!DOCTYPE

<!DOCTYPE html>

【1】
文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5，不写文档声明，将导致浏览器进入怪异渲染模式。

【2】
这个不是元素要注意！

八丶 根元素—html

<html lang="en"></html>

根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素。
HTML5版本中没有强制要求书写该元素（根元素）。

九丶 lang属性

【1】
lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言（汉语、英文等等）书写而成的。

【2】
在lang属性中设置汉语，html lang=“zh-CN”【已过时】，html lang=“cmn-hans”【现在用的是】

十丶 文档头—head

	<head>
		....
	</head>

文档头，文档头内部的内容，不会显示到页面上

十一丶 编码

中国大陆的编码—GB2312，台湾编码—GBK，万国码（世界所有语言的集合）— UTF-8，它的通用性很强，但是也有缺点

十二丶 文档元数据—meta

<meta>

【1】

元素的 charset 属性：指定网页内容编码

【2】

用于移动端设备屏幕适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【3】

告诉用户使用IE浏览器时，建议使用 edge 内核

<meta http-equiv="X-UA-Compatible" content="ie=edge">

十三丶 body

<body>

文档体，页面上所有要参与显示的元素，都应该放置到文档体中

3.2、语义化思想与规范

一丶 什么是语义化？
【1】每一个HTML元素都有具体的含义，比如：

a 超链接
p 段落
h 标题

【2】所有元素与展示效果无关，元素展示到页面中的效果，应该由CSS决定

我拿两张图举个例子：

在这里插入图片描述

在这里插入图片描述

那么肯定会有同学问了：为什么默认情况下h1就会加大加粗呢？
这是因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

所以说，一个效果的展示，跟她的元素是没有任何关系的，也就是说不管它是大是小，是粗是斜，他是什么元素的就是什么元素的，更不会因为展示效果改变它原有的元素名称！

二丶 重要理论

选择什么元素，取决于内容的含义，而不是显示出的效果，不要去想它显示什么样子的，记住！！！

三丶 为什么需要语义化
【1】为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

让我们浏览器的搜索引擎更好的理解我们想要表达的意思，那么计算机需要的理解就是靠我们【语义化的代码规范】

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

【2】语义化做得好的好处

搜索引擎会认为语义化做得好的网站，它就比较有好感，那么就会把这些网页放在靠前一点的位置展示给人们！

【3】让浏览器的内部插件功能得到更好的实现，增加用户的体验

比如说：现在的浏览器都有阅读模式、语音模式。那么我们使用语义化的去编写代码的话，就会让浏览器更好的理解我们的源代码，感觉它更加友好，使得插件的功能可以完全支持并且实现！
如果我们在看一篇小说，那么当我们点击阅读模式以后，它就会为我们屏蔽掉所有标题栏和广告，只显示标题与正文。像 h、p 这种元素，阅读模式都会将其内容显示出来，但是像 div 这种没有特殊语义的元素，有些浏览器的内核处理就会将它们的内容忽视掉，就不会展示，就是这个道理！

四丶 为什么我们需要知道并且一定要了解语义化
【1】
因为这在我们后面学习一些元素，还有一些属性的时候，会讲到一些过时的不推荐使用了，会对我们有着更深刻的理解。

【2】
在过去的HTML中有些元素和样式纯粹是为了考虑样式的，而在H5中元素跟样式是分离开的。！

##所以终上所述，我们一定要了解透 语义化 的概念

3.3、H5支持的元素、span、style=“display: inline”、 pre、 code

一丶 HTML5中支持的元素

在这里插入图片描述
链接：元素周期表

二丶 span

HTML5基本都会删除没有语义的元素，但是span很特殊，原因：利用三原色法则解释即可！

三丶 过去与现在对元素的分类

过去：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）；

现在：HTML5，已经弃用这种说法。（面试加分项），在HTML5 中叫做内容类别！来自W3C官方标准的说法！

四丶 style="display: inline；"

让内容不换行，就算是标题，或者其它元素都不会换行了！所以再一次说明了CSS决定了显示效果

五丶 pre

【1】空白折叠原则

在源代码中的连续空白字符（空格、换行、制表），在页面显示时，都会被折叠为一个空格

【2】格式

在pre元素中的内容不会出现空白折叠，所以在pre元素内部出现的内容，会按照源代码格式出现在页面上

【3】通常

该元素通常用于在网页中显示一些代码。

【4】本质

pre 元素功能的本质：它有一个默认的css属性

六丶 code

显示代码时，通常外面套code元素，code表示代码区域,这么做是为了让浏览器更好的理解为里面放的东西是，这样就能做到万无一失的显示了！

例如：

<code>
	<pre>
		var i = 2;
		if(i){
			console.log(i);
		}	
	</pre>
</code>

也可以写成：

	<code style="white-space:pre">
		var i = 2;
		if(i){
			console.log(i);
		}	
	</code>

3.4、Entity、常用符号、&、&

一丶 HTML 实体字符（Entity）

通常用于在页面中显示一些特殊符号，举个例子比如要想显示一个P元素，那么我们应该写成 ：

 &lt;p&gt;

二丶 两种方式：

&单词 【推荐】

&#数字

三丶 常用符号

  • 小于符号 <
  • 大于符号 >
  • 空格符号 &nbsp
  • 版权符号 &copy
  • &符号 &amp

3.5、a元素详解

一丶 跳转
错误的

<a href="www.baidu.com/">百度</a>

正确的

<a href="https://www.baidu.com/">百度</a>

\

二丶 href属性
1.普通链接 — 跳转地址
2.锚链接 — 跳转某个锚点（锚链接）
3.功能链接
-执行JS代码，javascript：
-发送邮件,mailto：
-拨号，tel

\

三丶 锚点链接
【1】
在当前页面中，地址栏不会转动，只是跳转到当前页面对应位置

【2】
在这里插入图片描述

在这里插入图片描述

<a href="#chapter2">章节2</a>

<h2>章节1</h2>
<p></p>
<h2 id="chapter2">章节2</h2>
<p></p>
<h2>章节3</h2>
<p></p>
<h2>章节4</h2>
<p></p>
<h2>章节5</h2>
<p></p>
<h2>章节6</h2>
<p></p>

这样就可以使得 h2 与 a元素产生关联
适合用在：目录功能上

【3】虽然锚点也会改变地址，但是锚点与链接本质上都是一样的，都是跳转。

\

四丶 如何快速回到网页顶部

<a href="#">回到顶部</a>
当浏览器发现#号后，就会自动回到顶部，这是浏览器的规则

\

五丶 锚点地址分析
【1】链接对比
原地址：file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html

先地址：
file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html#chapter2

多了#chapter2，那么这个就是锚点链接的唯一标识

【2】直接使用锚点地址：
file:///G:/Web/18%E8%BD%AF%E4%BB%B6301/web_four/zuoye3/indexone.html#chapter2
不仅可以跳到该链接页面，还可以直接转移到章节2这个锚点！

\

六丶 快速跳链接并转义到锚点位置《高级方法》
题目：
现在有一种需求，就是：在别的页面要求你点击链接会调抓到那个页面，并且还会自动转移到章节2，怎么做到？

高级方法：
index.html

<body>
	<a href="#chapter2">章节2</a>
	
	<h2 id="chapter1">章节1</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus hic eum tenetur repellat necessitatibus nulla, distinctio minus pariatur, porro natus consectetur eos! Incidunt ea ut, unde at sed laudantium et.</p>
	<h2 id="chapter2">章节2</h2>
	<p>Quo culpa, commodi inventore natus, voluptas enim harum non illum vel dolore tempora facere officia minus facilis sapiente optio amet doloremque distinctio quidem fugiat nesciunt deleniti nisi, nulla debitis. Maxime.</p>
	<h2 id="chapter3">章节3</h2>
	<p>Architecto expedita sit deleniti ab veritatis, ullam illo velit, suscipit sed natus nulla doloremque consequatur assumenda. Consequatur aperiam labore voluptatibus, dolorum vero error voluptate officiis repellendus ullam, modi itaque quo.</p>
	<h2 id="chapter4">章节4</h2>
	<p>Reiciendis quae, soluta culpa eveniet praesentium veritatis minima laudantium quasi, libero provident. Minus dignissimos aut molestias, molestiae error iure repudiandae nihil maxime sed, nam saepe nesciunt quisquam, facilis doloribus ex.</p>
	<h2 id="chapter5">章节5</h2>
	<p>Consequuntur, vitae deleniti praesentium illum molestiae itaque impedit fugit ea tenetur. Est laborum corporis doloremque obcaecati inventore maxime ipsum, maiores enim, tempore ad cupiditate voluptatibus pariatur qui eos sint, necessitatibus.</p>
	<h2 id="chapter6">章节6</h2>
	<p>Necessitatibus consequatur totam dolore consequuntur ut vero quibusdam odio nihil? Praesentium eum nisi eaque non facilis necessitatibus illo quam animi unde fugit voluptate ipsum voluptatum ab dicta, quis suscipit iusto.</p>
</body>

那么就会跳转到 文件名.html 网页的第三章目录下，为什么能直接写文件名呢？第一点！这两个网页都是在同一个根目录下，也就是相对路径下，否则注意要转移到对应目录在写文件名**

one.html

<body>
	<a href="indexone.html#chapter2">点我跳到第二章</a>
</body>

这里用了相对路径的方法，因为这两个网页都在同一个工程里，所以可以直接用
文件名.html#chapter2，这种相对路径的链接，直接快速转移

\

七丶 锚点链接的感悟

不是说锚链接他一定不刷新页面，而是你要看这个锚点是不是在它自己的页面内！如果是自己的页面就不会刷新，如果是别的页面就会刷新，那么这种情况就跟链接跳转是一样的了

\

八丶 功能链接
【1】弹出对话框
点击后，触发某个功能，执行JS代码，如下：

在这里插入图片描述

	<a href="javascript:alert('你好！')">
		弹出：你好！
	</a>

\

【2】发送邮件

要求：
发送邮件虽然要下载exchange软件，但是还是有用的
场景：
联系我们就可以用到

	<a href="mailto:2345679879@qq.com">
		点击给我发送邮件
	</a>

【3】拨打电话

要求：
PC端需要安装拨号软件，手机端点击可以直接触发功能
场景：
联系我们就可以用上

	<a href="tel:17897545688">
		点击给我拨打电话
	</a>

\

九丶 target 属性

-self：在当前页面窗口中打开，
-blank：在新窗口中打开 (默认值)

【1】跳转并且覆盖掉当前网页，也就是说不会打开新的网页进行跳转，而是覆盖掉当前页面

	<a href="https：//douyu.com" target="_self">	覆盖掉当前页面
		斗鱼直播
	</a>

\

十丶 title属性
在元素中插入title属性，会有提示的效果，意思就是说，鼠标指着链接按钮，会提示用户 斗鱼，每个人的直播平台，这样的文字

<a href="https：//douyu.com" target="_blank" title="斗鱼，每个人的直播平台">	不会覆盖会打开新建一个窗口
		斗鱼直播
</a>

效果：
在这里插入图片描述

十一丶 快速开发


h2>{章节1}	=	<h2>章节1</h2>

(h2>{章节1})+p>lorem	=	<h2>章节1</h2>


	<p>
		lorem..........（乱数假文）
	</p>


‘+’号表示兄弟的意思，对兄弟元素（拥有同一个父元素）有作用

如果不假括号：h2>{章节1}+p>lorem


<h2>章节1
	<p>	lorem..........（乱数假文）	</p>
</h2>


((h2>{章节1})+p>lorem)*6


	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>
	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>
	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>
	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>
	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>
	<h2>章节1</h2>
	<p> lorem..........（乱数假文）</p>


((h2>{章节$})+p>lorem*1000)*6

	<h2>章节1</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2>章节2</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2>章节3</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2>章节4</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2>章节5</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2>章节6</h2>
	<p> lorem..........（乱数假文1000个单词）</p>



((h2[id="chapter$"]>{章节$})+p>lorem*1000)*6	，这里的' [ ] '，表示添加属性，里面放入要添加的属性值就可以了
	<h2  id="chapter1">章节1</h2>
	<p > lorem..........（乱数假文1000个单词）</p>
	<h2 id="chapter2">章节2</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2  id="chapter3">章节3</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2  id="chapter4">章节4</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2  id="chapter5">章节5</h2>
	<p> lorem..........（乱数假文1000个单词）</p>
	<h2  id="chapter6">章节6</h2>
	<p> lorem..........（乱数假文1000个单词）</p>


a[href="chapter$"]*6>{章节$}
	<a href="chapter1">章节1</a>
	<a href="chapter2">章节2</a>
	<a href="chapter3">章节3</a>
	<a href="chapter4">章节4</a>
	<a href="chapter5">章节5</a>
	<a href="chapter6">章节6</a>

这时候会发现，还少了一个' # '号，那要如何解决呢？
按住鼠标的滚轮键，从顶一直盖到低，光标就会锁定6个位置，在打一个' # ' 号，
就会同时添加6个元素的属性

3.6、路径的写法

一丶 站内资源与站外资源
站内资源：当前网站的资源

站外资源：菲当前网站的资源

\

二丶 绝对路径和相对路径

对 站外资源 使用：绝对路径

对 站内资源 使用：相对路径

\

三丶 绝对路径的书写个格式
url地址：

协议名://主机名:端口号/路径

比如：

mbs.baidu.com/newspage/da…

www.renren.com/

协议名：http（安全性较低，一般是小公司或者政府再或者拿来做官网用的）、https（安全）、file（本地）

主机名：域名、IP地址（比如：192.168.92.11）

端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443，这些端口在浏览器中都会被隐藏，如果我们写了依然可以访问的到

比如说：
人人网：www.renren.com:80//
百度首页：www.baidu.com:443/.

当跳转目标和当前页面的协议相同时，可以省略协议。
举个例子：
比如说你写了一个HTML页面，有个按钮，有按钮超链接，复制当前路径去打开浏览器，在粘贴那个路径你会发现你的协议是http协议，而且点击可以跳转到对应网页
但是如果你是在文件中打开的这个页面，你点击就会找不到网页了，为什么？
这是因为，这个时候你的协议名不再是http，因为你是文件打开，所以你的协议名这时候变成了file，不信你去浏览器看下网址就知道了

\

四丶 相对路径的书写个格式

以./开头，./表示当前资源所在的目录

…/表示返回上一级目录

举个例子：你创了一个新的工程文件夹并且新建了一个网页index.html，由于现在网页是两种不同的类型，你要分类，所以你就在这个新工程文件里新建了一个子文件夹，
里面新建了一个网页，然后这个时候你子文件夹里的网页想要访问同一个工程下的网面的网页，就需要打上如下：当前网页时：index.html

	<a href="./subhtmls/a.html">
		subhtmls.html - > a.html
	</a>

分析一下，./表示的是这个网页当前所在的文件夹，那么是不是工程？那么如果你想用相对路径的写法，就需要在/子文件夹再/网页文件才能访问得到
如果是在同一个文件夹下，就不用写/，直接写文件名即可，例如：a.html

那么反过来，如果想从a.html中点击超链接返回到index.html，怎么做呢？

	<a href="./../相对路径的写法.html">	
	分析一波，首先./表示回到当前目录，
	../回到上一级目录，那么index.html就是在上一级目录，所以说
		相对路径的写法.html		才需要这么写
	</a>

3.7、图片元素

一丶 元素
img 插入图片

map 地图
-area（子元素）

figuer 指代、定义，通常用于把图片、图片标题、描述包裹起来
-figcaption（子元素）

二丶 属性
【1】
img的 src 属性：source（路径）

【2】
img的 alt 属性：当图片资源失效时，将使用该属性的文字替代图片
这个属性有三种可用场景：

  • 服务器那边不小心把这张图片删掉了，那么是无法访问的到这张图片的
  • 突然断网了，图片加载到一半，这时候图片是损坏状态，就用这个属性的文字替代
  • 程序员编写这张图片的路径写错了，那么肯定访问不到，这时候也要文字替换掉

【3】

map的 name 属性：让map与img产生关联

【4】
map的area（子元素）的四大属性：

  • shape 形状（圆形，矩形，多边形），圆形—circle，长方形—rect，多边形—poly
  • coords 形状关键点的坐标
  • href 点击这个形状的链接地址
  • alt 当图片掩饰不出来时，文字显示的内容
  • target 点击链接时，是新窗口还是自身的窗口

\

三丶 图片链接

	<a href="">
	<img src="....." alit="......">
	</a>

\

四丶 img的高级使用
在这里插入图片描述
一张图片要求：点击木星跳转到木星链接，点击水星跳转到水星链接，怎么做到？

【1】要让img元素与map元素产生关联：

	<a href="">
	<img usemap="#solarMap" src="....." alit="......">
	</a>

	<map name="solarMap">
		
	</map>

跟锚链接原理差不多，不过这里的唯一表示使用的是 name属性注意！这样就让map与img产生了关联

【2】测量坐标

坐标知识点：原点是在图片的左上角，注意是图片！！！x向右是增加，y向下增加

注意：量坐标的时候，要使用浏览器标准尺寸(%100)，否则会不准确
【3】测量圆形
在这里插入图片描述
圆形坐标测量：确定圆心坐标与半径长度即可 —— 用来量图形
coords =“360，204，48”，第一个是x坐标，第二个是y坐标，第三个是半径

【4】测量长方形
长方形测量：确定左上角坐标与右下角坐标即可 —— 用来量文字
coords =“360，204，48，69” ，第一个和第二个参数是左上角坐标，三四是右下角坐标

五丶 figuer 元素（HTML标准）
和figuer元素联用，这样是为了增强语义化的编码规范，让浏览器更好的理解我们的代码

在这里插入图片描述
这样就可以让浏览器独栋，这三个 p , h2 , img 这三个元素是有关联的

六丶 figuer-figcaption子元素（HTML5标准）

在HTML5中，推荐使用figcaption子元素包住标题元素，也是增强HTML5语义化标准规范

所以说，只要包住上图的p元素就可以了，

3.8、媒体元素

一丶 元素

video 视频
-source 解决网页视频兼容性问题

audio 音频

\

二丶 属性

video 的 controls 属性：控制控件的显示，取值只能为controls【布尔属性】

video 的 autoplay 属性：自动播放【布尔属性】

video 的 muted 属性：静音播放【布尔属性】

video 的 loop 属性：循环播放【布尔属性】

\

三丶 src属性
src资源可以是外界的，也可以是自己内部的
外界用绝对路径，内部用相对路径

四丶 controls属性
默认情况下，视频的播放键是不会显示的，需要我们利用controls属性

五丶 在HTML5中，个别属性特性：

某些属性，只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性

六丶 布尔属性
布尔属性，在HTML5中，可以不用书写属性值

七丶 muted属性
某些浏览器为了考虑用户不要被 恶意视频吓到，会禁用这种一打开网页自动播放的功能，
用 muted 属性来解决

在这里插入图片描述

八丶 audio元素的几个属性
【1】
直接使用src导入资源，打开网页是不会显示任何东西的，也不会打开音乐，那么这时我们就需要使用controls属性，让他的控件显示出来

【2】
用法与视频一样

九丶 兼容性问题！

  • 旧版本的浏览器不支持这两个元素
  • 不同的浏览器支持的音视频格式可能不一致
    视频有两种格式：mp4、webm

在这里插入图片描述

十丶 source属性
上述问题就会导致某些旧的浏览器无法成功播放为了解决这种问题，我们就需要使用video的source属性，将video的src属性换到 source 元素里即可！

在这里插入图片描述

十一丶 浏览器版本过低的情况

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

avatar
文章
阅读
粉丝
相关推荐
前端面试题总结（初级前端：HTML + CSS + JavaScript + Ajax + Vue2全家桶）
6.3k阅读
 · 
141点赞
一位前端新人学习 HTML 和 CSS 的总结笔记
1.8k阅读
 · 
12点赞
2023前端面试题总结
149k阅读
 · 
2.1k点赞
前端基础面试题（HTML,CSS,JS）
46k阅读
 · 
491点赞
🌄 JavaScript 的三座大山
89k阅读
 · 
1.5k点赞
两行CSS让页面提升了近7倍渲染性能！
111k阅读
 · 
1.9k点赞
为什么我们正在放弃 CSS-in-JS
221k阅读
 · 
193点赞
React CSS-In-JS 方案 : Linaria Vs Styled-Components
212k阅读
 · 
131点赞
使用 HTML、CSS 和 JavaScript 制作纸牌记忆游戏
1.7k阅读
 · 
14点赞
HTML+CSS实现聚光灯效果
3.0k阅读
 · 
50点赞

友情链接：