一只奋斗的小强

前端html面试题及答案

https://blog.csdn.net/qq_43645678/article/details/88807566

html基础知识：

1. 浏览器概念

HTML基础标签

1. html标签

注意点

html 标签是HTML页面的根元素，其中的lang属性可用于标记网页或部分网页的语言
en定义语言为英语,zh-CN定义语言为中文
lang这个属性不仅仅可以用在html标签上

作用：

根据根据lang属性来设定不同语言的css样式，或者字体。
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
当搜索引擎或者浏览器拿到语言标签后，有可能做一些针对指定语言的辅助操作等等

注意点

dir是国际化属性中的一员，dir属性定义了文字在浏览器中的排列方向.
如果定义整个HTML文档的排列方向应该在html标签中定义dir属性,
其它HTML标签也可以定义dir属性.
默认值：ltr – 代表左到右的排列方式 rtl – 代表右到左的排列方式

2. head标签

定义和用法

head 标签用于定义文档的头部，它是所有头部元素的容器。
head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：base, link , meta , script , style , 以及 title 。
title 定义文档的标题，它是 head 部分中唯一必需的元素

3. 常用的meta标签

搜索引擎优化（seo）；
定义页面使用语言；
自动刷新并指向新的页面；
实现网页转换时的动态效果；
控制页面缓冲；
网页定级评价；
控制网页显示的窗口等！

	
	
	
	
	
	
	
	

	
    

	
     //(注意后面的引号，分别在秒数的前面和网址的后面)

4. link标签

link 标签定义文档与外部资源的关系。
link 标签最常见的用途是链接样式表。
注释：link 元素是空元素，它仅包含属性。
注释：此元素只能存在于 head 部分，不过它可出现任何次数

5. title标签

文档标题

定义和用法

title 元素可定义文档的标题。
浏览器会以特殊方式来使用标题，并通常把它放置在浏览器窗口的标题栏或状态栏上。
文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称。
提示： title 标签是 head 标签中唯一要求包含的东西。
dir–(rtl/ltr)–规定元素中内容的文本方向;
lang–(language_code)–规定元素中内容的语言代码;

6. body标签

文档内容

定义和用法

body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

7. style标签


	
		
	
	
		Header 1
		A paragraph.

定义和用法

style 标签用于为 HTML 文档定义样式信息。
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
如需链接外部样式表，请使用 link 标签。
style 标签支持 HTML 中的全局属性。 style 标签支持 HTML 中的事件属性

8. HTML 标题


	这是标题 1
	这是标题 2
	这是标题 3
	这是标题 4
	这是标题 5
	这是标题 6

定义和用法

- h1 - h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。
- 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。
- 因此，请不要利用标题标签来改变同一行中的字体大小。
- 相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

9. HTML 段落


	这是一个段落。
	这是一个段落。
	这是一个段落。

定义和用法

- p 标签定义段落。
- p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定

10. HTML 文本标签


	//文本换行
	

	
	//文本加粗
	加粗内容
	加粗内容
	
	//文本倾斜
	  
	
	//水平线
   	空标记
	
	//删除线样式
	内容

11. HTML 链接


	这是一个链接使用了 href 属性

定义和用法

- a 标签定义超链接，用于从一张页面链接到另一张页面。
- a 元素最重要的属性是 href 属性，它指示链接的目标。
- 所有浏览器中，链接默认外观：下划线蓝色(未访问)–下划线紫色(已被访问)–下划线红色(活动链接)
- 可以使用 CSS 伪类向文本超链接添加复杂而多样的样式

提示和注释

- 如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target
  以及 type 属性。
- 被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
- 请使用 CSS 来设置链接的样式。

12. HTML 锚链接

通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步：


	1. 使用 “  链接文本  ” 创建链接文本；
	2. 使用相应的 id 名标注跳转目标的位置。

13. HTML 图片标签

定义和用法

- 从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像。
- img 标签创建的是被引用图像的占位空间。
- img 标签有两个必需的属性：src 属性和 alt 属性。
- img 标签支持 HTML 中的全局属性。
- img 标签支持 HTML 中的事件属性。

14. HTML 特殊字符标签

15. 注释标签

在HTML中还有一种特殊的标签——注释标签。
如要在HTML文档中添些便于阅读理解但又不显示在页面中的注释文字，就需使用注释标签。
注释内容不显示在浏览器窗口，但作为HTML文档内容一部分，也会被下载到用户计算机上，查看源代码时就可以看到。
其基本语法格式如下


	    ctrl + /       或者 ctrl +shift + /

HTML列表标签


	标签		描述
			定义无序列表。
			定义有序列表。
			定义列表的项目。
			定义目录列表。不赞成使用。
			定义定义列表。
			定义定义列表中的项目。
			定义定义列表中项目的描述。
			定义命令的菜单/列表。
		定义用户可以从弹出菜单调用的命令/菜单项目。
		定义命令按钮。

注意：

1.无序列表默认实心黑色圆点，type属性可改变，共三个值：
disc（默认）,circle（空心圆点）,square（实心黑色方块）
2.有序列表默认数字排序，type属性可以改变，有好几个值：1（数字）, a（字母）等等；shart属性可以改变排序从第几个开始，比如数字排序，start=“2”,排序第一个就不再是 1 ，而是 2 。
3.ul ol dl 之间是可以相互嵌套的

HTML表格标签


	标签		描述
			定义表格
			定义表格中的行。
			定义表格中的表头内容。
			定义表格中的主体内容。
			定义表格中的表注内容（脚注）。
	定义表格中一个或多个列的属性值。
	定义表格中供格式化的列组。
HTML表单标签

	标签			描述
			定义供用户输入的 HTML 表单。
			定义输入控件。
	 --- 文本输入
	 --- 定义单选按钮
	 --- 提交按钮
		定义多行的文本输入控件。
	<button>	定义按钮。
	<select>	定义选择列表（下拉列表）。
	<optgroup>	定义选择列表中相关选项的组合。
	<option>	定义选择列表中的选项。
	<label>		定义 input 元素的标注。
	<fieldset>	定义围绕表单中元素的边框。
	<legend>	定义 fieldset 元素的标题。
	<isindex>	不赞成使用。定义与文档相关的可搜索索引。
	<datalist>	定义下拉列表。
	<keygen>	定义生成密钥。
	<output>	定义输出的一些类型。
</body>
</code></pre> 
  <h3>HTML表单标签属性</h3> 
  <pre><code><body>
	<form accept-charset="UTF-8"> --- accept-charset 属性 --- 规定在被提交表单中使用的字符集（默认：页面字符集）
	
	<form action="action_page.php"> --- action 属性 --- 定义在提交表单时执行的动作
		注意：如果省略 action 属性，则 action 会被设置为当前页面
	
	<form autocomplete="off"> --- autocomplete 属性 --- 规定浏览器应该自动完成表单（默认：开启）

	<form ectype="application/x-www-form-urlencoded"> --- enctype 属性 --- 规定被提交数据的编码（默认：url-encoded）
	
	<form method="GET/POST"> --- method 属性 --- 规定在提交表单时所用的 HTTP 方法（GET 或 POST）
		1. 使用 GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
		注意：GET 最适合少量数据的提交。浏览器会设定容量限制。

		2. 使用 POST：表单正在更新数据，或者包含敏感信息（例如密码）。
		注意：POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
	<form name="firstname"> --- name 属性 --- 规定识别表单的名称（对于 DOM 使用：document.forms.name）

	<form novalidate> --- novalidate 属性 --- 规定浏览器不验证表单

	<form target="_blank"> --- target 属性 --- 	规定 action 属性中地址的目标（默认：_self）
	
</body>
</code></pre> 
  <h3>HTML表单元素</h3> 
  <pre><code><body>
	<input>元素及输入类型
	<input type="text"> --- 文本输入
	<input type="password"> 定义密码字段
	<input type="radio"> --- 定义单选按钮
	<input type="checkbox"> --- 定义复选框
	<input type="submit"> --- 提交按钮
	<input type="number"> --- 用于应该包含数字值的输入字段
	<input type="date"> --- 用于应该包含日期的输入字段
	<input type="color"> --- 用于应该包含颜色的输入字段
	<input type="range"> --- 用于应该包含一定范围内的值的输入字段
	<input type="month"> --- 允许用户选择月份和年份。
	<input type="week"> --- 允许用户选择周和年。
	<input type="time"> --- 允许用户选择时间（无时区）。
	<input type="datetime"> --- 允许用户选择日期和时间（有时区）。
	<input type="datetime-local"> --- 允许用户选择日期和时间（无时区）。
	<input type="email"> --- 用于应该包含电子邮件地址的输入字段。
	<input type="search"> --- 用于搜索字段（搜索字段的表现类似常规文本字段）。
	<input type="tel"> --- 用于应该包含电话号码的输入字段。
	<input type="url"> --- 用于应该包含 URL 地址的输入字段。
	
	<select> 元素（下拉列表）
	<option> 元素定义待选择的选项
		注意：列表通常会把首个选项显示为被选选项。我们能够通过添加 selected 属性来定义预定义选项
	<textarea> 元素定义多行输入字段（文本域）
	<button> 元素定义可点击的按钮
</body>
</code></pre> 
  <p> </p> 
  <h2>HTML 多媒体标签</h2> 
  <pre><code><video src="">
</video>
</code></pre> 
  <pre><code><video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>
</code></pre> 
  <ol> 
   <li>src: 告诉video标签需要播放的视频地址</li> 
   <li>autoplay: 告诉video标签是否需要自动播放视频</li> 
   <li>controls: 告诉video标签是否需要显示控制条</li> 
   <li>poster: 告诉video标签视频没有播放之前显示的占位图片</li> 
   <li>loop: 告诉video标签循环播放视频. 一般用于做广告视频</li> 
   <li>preload: 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效</li> 
   <li>muted:告诉video标签视频静音</li> 
   <li>width/height: 和img标签中的一模一样<br>  </li> 
  </ol> 
  <h3>audio 标签</h3> 
  <pre><code><audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>
</code></pre> 
  <p>audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poster</p> 
  <p> </p> 
  <p> </p> 
  <h1>CSS基础：</h1> 
  <h2>1. CSS 概述</h2> 
  <p> </p> 
  <p> </p> 
  <ul> 
   <li>CSS支持更丰富的文档外观</li> 
   <li>CSS可以为任何元素的文本和背景设置颜色</li> 
   <li>允许在任何元素外围设置边框</li> 
   <li>允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本</li> 
  </ul> 
  <h2>2. CSS 语法格式</h2> 
  <pre><code><style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
</style>
</code></pre> 
  <ol> 
   <li>style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)</li> 
   <li>style标签中的type属性其实可以不用写, 默认就是type="text/css"</li> 
   <li>设置样式时必须按照固定的格式来设置key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)</li> 
   <li>值的不同写法和单位</li> 
   <li>如果值为若干单词，则要给值加引号</li> 
   <li>如果要定义不止一个声明，则需要用分号将每个声明分开</li> 
   <li>空格和大小写不影响CSS样式</li> 
   <li>用逗号将需要分组的选择器分开，被分组的选择器可以分享相同的声明</li> 
   <li>子元素从父元素继承属性<br>  </li> 
  </ol> 
  <h2>3. 选择器</h2> 
  <h3>1. 元素（类型）选择器</h3> 
  <ol> 
   <li>文档的元素就是最基本的选择器。</li> 
   <li>如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，<br> 比如 p、h1、甚至可以是 html 本身。</li> 
  </ol> 
  <pre><code><style>
	html {color:black;}
	h1 {color:blue;}
	h2 {color:silver;}
</style>
</code></pre> 
  <h3>2. 通配符选择器</h3> 
  <p><strong>该选择器可以与任何元素匹配，就像是一个通配符。</strong></p> 
  <pre><code>* {color:red;}
</code></pre> 
  <h3>3. 选择器分组</h3> 
  <ol> 
   <li>通过分组，创作者可将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。</li> 
   <li>可以将任意多个选择器分组在一起，对此没有任何限制。</li> 
  </ol> 
  <pre><code>h2, p {color:gray;}
</code></pre> 
  <h3>4. 声明分组</h3> 
  <ol> 
   <li>对声明分组，一定要在各声明的最后使用分号，因为浏览器会忽略样式表中的空白符。</li> 
   <li>与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，<br> 也更易维护。</li> 
  </ol> 
  <pre><code>h1 {
	  font: 28px Verdana;
	  color: blue;
	  background: red;
  }
</code></pre> 
  <h3>5. 派生选择器</h3> 
  <ol> 
   <li>通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。</li> 
   <li>派生选择器允许你根据文档的上下文关系来确定某个标签的样式。</li> 
  </ol> 
  <pre><code>li strong {
    font-style: italic;
    font-weight: normal;
  }
</code></pre> 
  <h3>6. id 选择器</h3> 
  <ol> 
   <li>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。</li> 
   <li>id 选择器以 “#” 来定义。</li> 
   <li>id 属性只能在每个 HTML 文档中出现一次。</li> 
   <li>在现代布局中，id 选择器常常用于建立派生选择器。</li> 
   <li>id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用</li> 
  </ol> 
  <pre><code><p id="intro">This is a paragraph of introduction.</p>
#intro{background:silver;}
</code></pre> 
  <p><strong>类选择器与id选择器的区别</strong></p> 
  <ol> 
   <li>只能在文档中使用一次：在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。</li> 
   <li>不能使用 ID 词列表：ID 选择器不能结合用，因为 ID 属性不许有以空格分隔的词列表。</li> 
   <li>ID 能包含更多含义：可以独立于元素来选择 ID。</li> 
   <li>区分大小写：类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配</li> 
  </ol> 
  <h3>8. 多类选择器</h3> 
  <ol> 
   <li>在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。</li> 
   <li>把两个类选择器链接在一起，仅可选择同时包含这些类名的元素（类名的顺序不限）。</li> 
   <li>如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。</li> 
   <li>在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。</li> 
  </ol> 
  <pre><code><p class="important warning">
	This paragraph is a very important warning.
</p>
.important.warning {background:silver;}
</code></pre> 
  <h3>9. 属性选择器</h3> 
  <ol> 
   <li>对带有指定属性的 HTML 元素设置样式。</li> 
   <li>只有在规定 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。</li> 
   <li>在 IE6 及更低的版本中，不支持属性选择。</li> 
   <li>属性选择器在 XML 文档中很有用，因为 XML 语言针对元素和属性的用途<br> 指定元素名和属性名。</li> 
  </ol> 
  <p>1. 简单属性选择<br> 例：</p> 
  <p>a[href][title] {color:red;}<br><br> 2. 根据具体属性值选择<br> 注意：</p> 
  <p>这种格式要求必须与属性值完全匹配。<br> 如果属性值包含用空格分隔的值列表，匹配就可能出问题。<br> a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}<br><br> 3. 根据部分属性值选择<br> 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。<br> 如果忽略了波浪号，则说明需要完成完全值匹配。<br> p[class~="important"] {color: red;}<br><br> 4. 特定属性选择类型<br> *[lang|="en"] {color: red;}<br> 上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。<br>  </p> 
  <h3>10. 后代选择器</h3> 
  <p><strong>后代选择器可以选择作为某元素后代的元素。</strong></p> 
  <pre><code><h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
h1 em {color:red;}
h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。
</code></pre> 
  <h3>11. 子元素选择器</h3> 
  <p><strong>子元素选择器只能选择作为某元素子元素的元素。</strong></p> 
  <pre><code><h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
选择作为 h1 元素子元素的所有 strong 元素
</code></pre> 
  <h3>12. 相邻兄弟选择器</h3> 
  <p><strong>相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。</strong></p> 
  <pre><code>h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 
</code></pre> 
  <p> </p> 
  <p>伪类没看：.......................</p> 
  <p> </p> 
  <p> </p> 
  <h2>4. CSS样式插入</h2> 
  <h3>1. 外部样式表</h3> 
  <pre><code><head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
</code></pre> 
  <h3>2. 内部样式表</h3> 
  <pre><code><head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>
</code></pre> 
  <h3>3. 内联样式</h3> 
  <pre><code><p style="color: sienna; margin-left: 20px">
	This is a paragraph
</p>
</code></pre> 
  <h3>4. 多重样式</h3> 
  <p><strong>如果某些属性在不同的样式表中被同样的选择器定义，<br> 那么属性值将从更具体的样式表中被继承过来。</strong></p> 
  <p> </p> 
  <h2>5. CSS 样式属性</h2> 
  <p>1. 背景属性</p> 
  <p><strong>CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/6886a0f6a368415fb46e131861ecd3c1.jpg" target="_blank"><img alt="前端html面试题及答案_第7张图片" height="170" src="http://img.e-com-net.com/image/info8/6886a0f6a368415fb46e131861ecd3c1.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p><strong>css3 新背景属性</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/bcaaf941e289470c926a08532dd8a7d8.jpg" target="_blank"><img alt="前端html面试题及答案_第8张图片" height="154" src="http://img.e-com-net.com/image/info8/bcaaf941e289470c926a08532dd8a7d8.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>2. 文本属性</h3> 
  <p><strong>CSS 文本属性可定义文本的外观</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/ebb90d68a53f47d080e3156b949b9450.jpg" target="_blank"><img alt="前端html面试题及答案_第9张图片" height="363" src="http://img.e-com-net.com/image/info8/ebb90d68a53f47d080e3156b949b9450.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>3. 字体属性</h3> 
  <p><strong>CSS 字体属性定义文本的字体系列</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/ec2871c967974adfbe18fb213dec8cbe.jpg" target="_blank"><img alt="前端html面试题及答案_第10张图片" height="175" src="http://img.e-com-net.com/image/info8/ec2871c967974adfbe18fb213dec8cbe.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>4. 链接属性</h3> 
  <p><strong>我们能够以不同的方法为链接设置样式。</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/450b23073e2441729601b27cdb9860c4.jpg" target="_blank"><img alt="前端html面试题及答案_第11张图片" height="196" src="http://img.e-com-net.com/image/info8/450b23073e2441729601b27cdb9860c4.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>5. 列表属性</h3> 
  <p><strong>CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/0a31842f21f24ddd9822739c2affbebe.jpg" target="_blank"><img alt="前端html面试题及答案_第12张图片" height="161" src="http://img.e-com-net.com/image/info8/0a31842f21f24ddd9822739c2affbebe.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>6. 表格属性</h3> 
  <p><strong>CSS 表格属性可以帮助您极大地改善表格的外观。</strong><br><strong>CSS Table 属性</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/00fa2e70e4244ebe9f50b7aaf3c46da8.jpg" target="_blank"><img alt="前端html面试题及答案_第13张图片" height="222" src="http://img.e-com-net.com/image/info8/00fa2e70e4244ebe9f50b7aaf3c46da8.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>7. 轮廓属性</h3> 
  <p><strong>轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</strong><br><strong>CSS outline 属性规定元素轮廓的样式、颜色和宽度。</strong></p> 
  <p><a href="http://img.e-com-net.com/image/info8/e95cf96ac08240ebaac3fbb17fce02c2.jpg" target="_blank"><img alt="前端html面试题及答案_第14张图片" height="167" src="http://img.e-com-net.com/image/info8/e95cf96ac08240ebaac3fbb17fce02c2.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <h2>6. CSS 三大特性</h2> 
  <p>1. 继承性</p> 
  <ul> 
   <li>作用： 
    <ul> 
     <li>给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性</li> 
    </ul></li> 
   <li>示例代码：</li> 
  </ul> 
  <pre><code> <style>
        div{
            color: red;
        }
</style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<!--p会变成红色-->
</code></pre> 
  <ul> 
   <li>注意点: 
    <ul> 
     <li>并不是所有的属性都可以继承, 只有以<code>color/font-/text-/line-</code>开头的属性才可以继承</li> 
     <li>在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承</li> 
    </ul></li> 
   <li>继承性中的特殊性 
    <ul> 
     <li><code><a></code>标签的文字颜色和下划线是不能继承的</li> 
     <li><code><h></code>标签的文字大小是不能继承的</li> 
    </ul></li> 
  </ul> 
  <h3>2. 层叠性</h3> 
  <p><strong>CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性</strong></p> 
  <ul> 
   <li>作用: 
    <ul> 
     <li>层叠性就是CSS处理冲突的一种能力</li> 
    </ul></li> 
   <li>示例代码：</li> 
  </ul> 
  <pre><code><style>
   p{
        color: red;
    }
    .para{
        color: blue;
    }
</style>
<p id="identity" class="para">我是段落</p>

<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->
</code></pre> 
  <p>注意点:</p> 
  <ul> 
   <li>层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性</li> 
  </ul> 
  <h3>3. 优先级</h3> 
  <ul> 
   <li>作用: 
    <ul> 
     <li>当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定</li> 
    </ul></li> 
   <li>优先级判断的三种方式 
    <ul> 
     <li>间接选中就是指继承</li> 
     <li>如果是间接选中, 那么就是谁离目标标签比较近就听谁的</li> 
    </ul></li> 
  </ul> 
  <pre><code><style>
 li{
    color: blue;
   }
  ul{
    color: red;
   }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示蓝色 -->
</code></pre> 
  <p>相同选择器(直接选中)</p> 
  <ul> 
   <li>如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的</li> 
  </ul> 
  <pre><code><style>
 p{
            color: blue;
      }
    p{
            color: red;
      }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示红色 -->
</code></pre> 
  <p>不同选择器(直接选中)</p> 
  <ul> 
   <li>如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠</li> 
   <li>id>类>标签>通配符>继承>浏览器默认</li> 
  </ul> 
  <pre><code><style>
  #identity{
            color: purple;
        }
        .para{
            color: pink;
        }
        p{
            color: green;
        }
        *{
            color: blue;
        }
        li{
            color: red;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示紫色 -->
</code></pre> 
  <p> </p> 
  <p> </p> 
  <h3>3. 优先级权重</h3> 
  <p>1. 权重的计算规则</p> 
  <p><span id="cke_bm_16715S"> </span> </p> 
  <ul> 
   <li>首先先计算选择器中有多少个id, id多的选择器优先级最高</li> 
   <li>如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高</li> 
   <li>如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高</li> 
   <li>如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的</li> 
   <li>注意点:</li> 
   <li>只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的<span id="cke_bm_16715E"> </span><br>  </li> 
  </ul> 
  <p>2. !important</p> 
  <p>作用:</p> 
  <p> </p> 
  <ul> 
   <li>用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高</li> 
  </ul> 
  <pre><code><style>
        #identity{
            color: purple;
            font-size: 50px;
        }
        .para{
            color: pink ;
        }
        p{
            color: green !important;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示绿色 -->
</code></pre> 
  <p>注意点:</p> 
  <ul> 
   <li><code>!important</code>只能用于直接选中, 不能用于间接选中</li> 
   <li>通配符选择器选中的标签也是直接选中的</li> 
   <li><code>!important</code>只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升</li> 
   <li><code>!important</code>必须写在属性值得分号前面</li> 
   <li><code>!important</code>前面的感叹号不能省略</li> 
  </ul> 
  <p> </p> 
  <h2>7. CSS 盒子模型</h2> 
  <h3>1. CSS 框模型概述</h3> 
  <p><strong>CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。</strong><br><a href="http://img.e-com-net.com/image/info8/19a244210c6848629ee7fb5a81dcf3bb.jpg" target="_blank"><img alt="前端html面试题及答案_第15张图片" height="575" src="http://img.e-com-net.com/image/info8/19a244210c6848629ee7fb5a81dcf3bb.jpg" width="543" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>背景应用于由内容和内边距、边框组成的区域。</li> 
   <li>内边距、边框和外边距都是可选的，默认值是零。</li> 
   <li>增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。</li> 
   <li>内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。</li> 
   <li>外边距可以是负值，而且在很多情况下都要使用负值的外边距。<br>  </li> 
  </ul> 
  <p>还有四点没看完.......</p> 
  <p> </p> 
  <h2>8. CSS 定位</h2> 
  <h3>1. CSS定位概述</h3> 
  <p><strong>基本思想：</strong><br> 允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、<br> 另一个元素甚至浏览器窗口本身的位置。</p> 
  <p><strong>可以使用 display 属性改变生成的框的类型.</strong></p> 
  <p>(将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样)<br> (把 display 设置为 none，让生成元素没有框, 该框及内容不再显示，不占用文档空间。)<br> (把文本添到块级元素（比如 div）开头。即使没把文本定义为段落，它也当作段落对待)<br><a href="http://img.e-com-net.com/image/info8/2852c44e7c7b47cdbc01516e6abcf5a8.jpg" target="_blank"><img alt="前端html面试题及答案_第16张图片" height="215" src="http://img.e-com-net.com/image/info8/2852c44e7c7b47cdbc01516e6abcf5a8.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p>几个定位........</p> 
  <p> </p> 
  <p> </p> 
  <h3>6. CSS浮动</h3> 
  <ol> 
   <li>CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。</li> 
   <li>一个浮动元素尽量向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止。</li> 
   <li>浮动元素之前的元素将不会受到影响。浮动元素之后的元素将围绕它。</li> 
   <li>如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。</li> 
   <li>任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。</li> 
   <li>假如一行上只有极少空间可供浮动元素,这元素会跳至下一行,这过程持续到某一行有足够空间为止。</li> 
  </ol> 
  <p><a href="http://img.e-com-net.com/image/info8/470bf15fd36e4592a406b6afe38181b1.jpg" target="_blank"><img alt="前端html面试题及答案_第17张图片" height="220" src="http://img.e-com-net.com/image/info8/470bf15fd36e4592a406b6afe38181b1.jpg" width="650" style="border:1px solid black;"></a></p> 
  <h3>7. CSS浮动问题</h3> 
  <p>背景不显示：<br> 由于浮动产生，如果父级设置CSS背景颜色或图片,父级不能被撑开,导致背景不能显示</p> 
  <p><br> 边框不撑开:<br> 如果父级设置CSS边框属性,由于子级使用float属性,产生浮动,父级不被撑开,<br> 导致边框不随内容被撑开.</p> 
  <p><br> margin padding设置值没正确显示:<br> 浮动导致父级子级之间设置css padding, margin属性值不正确<br> 特别是上下边的padding和margin不能正确显示。<br>  </p> 
  <h3>8. CSS清除浮动</h3> 
  <p>1. 对父级设置适合CSS高度<br> 2. clear:both清除浮动：</p> 
  <p>新建样式选择器CSS命名为“.clear”,对应选择器样式为“clear:both”<br> 在父级“”结束前加此div引入“class=“clear””样式<br> 3. 父级div定义 overflow:hidden:</p> 
  <p>因为overflow:hidden属性相当于是让父级紧贴内容，<br> 这样即可紧贴其对象内内容（包括使用float的div盒子），<br> 从而实现了清除浮动。<br> 对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。<br> 优点是可以很少CSS代码即可解决浮动产生。<br><a href="http://img.e-com-net.com/image/info8/bcfe43edb0104e94bd90f3b36ccabbb6.jpg" target="_blank"><img alt="前端html面试题及答案_第18张图片" height="282" src="http://img.e-com-net.com/image/info8/bcfe43edb0104e94bd90f3b36ccabbb6.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p> </p> 
  <h2>9. CSS 对齐问题</h2> 
  <p>1. 使用 margin 属性来水平居中对齐</p> 
  <p><strong>可通过将左和右外边距设置为 “auto”，来对齐块元素。</strong></p> 
  <pre><code>.center
{
	margin-left:auto;
	margin-right:auto;
	width:70%;
	background-color:#b0e0e6;
}
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素
</code></pre> 
  <p>2. 文本居中对齐</p> 
  <p><strong>如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;</strong></p> 
  <pre><code>.center {
    text-align: center;
    border: 3px solid green;
}
</code></pre> 
  <p>3. 图片居中对齐</p> 
  <p><strong>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中</strong></p> 
  <pre><code>img {
    display: block;
    margin: auto;
    width: 40%;
}
</code></pre> 
  <p>4. 使用 position 属性进行左和右对齐</p> 
  <p><strong>绝对定位元素会被从正常流中删除，并且能够交叠元素。</strong><br><strong>当使用 position 属性时，请始终设置 !DOCTYPE 声明</strong></p> 
  <pre><code>.right
{
	position:absolute;
	right:0px;
	width:300px;
	background-color:#b0e0e6;
}
</code></pre> 
  <p>5. 使用 float 属性来进行左和右对齐</p> 
  <p><strong>当使用 float 属性时，请始终设置 !DOCTYPE 声明</strong></p> 
  <pre><code>.right
{
	float:right;
	width:300px;
	background-color:#b0e0e6;
}
</code></pre> 
  <p>6. 使用 padding 垂直居中对齐</p> 
  <pre><code>.center {
    padding: 70px 0;
    border: 3px solid green;
}
</code></pre> 
  <p>7. 使用 line-height 垂直居中对齐</p> 
  <pre><code>.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</code></pre> 
  <p>8. 使用 position 和 transform 垂直居中对齐</p> 
  <pre><code>.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</code></pre> 
  <p> </p> 
  <p>其他还没看........</p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <h2> 初识 javascript基础：</h2> 
  <h3>1. JavaScript 简介</h3> 
  <ul> 
   <li>JavaScript（缩写：JS） 是互联网上最流行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。</li> 
   <li>最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。</li> 
   <li>JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。<br>  </li> 
  </ul> 
  <p>脚本语言<br> JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行,而JavaScript 是在程序的运行过程中逐行进行解释。<br> 基于对象<br> JavaScript 是一种基于对象的脚本语言,不仅可以创建对象, 也能用现有对象<br> 内置大量现成对象，编写少量程序可以完成目标<br> 简单<br> JavaScript 语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言,其设计简单紧凑<br> 可以使用任何文本编辑工具编写<br> 只需要浏览器就可以执行程序<br> 动态性<br> JavaScript 是一种采用事件驱动的脚本语言,它不需要经过 Web 服务器就可以对用户的输入做出响应。<br> 跨平台性<br> JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持。<br>  </p> 
  <h3>3. JavaScript 的作用</h3> 
  <ul> 
   <li><strong>HTML 页面是静态的，而 JavaScript 可以弥补 HTML 语言的缺陷，实现 Web 页面客户端的动态效果。</strong></li> 
   <li><strong>JavaScript 可以输出字符、数字、以及 HTML。</strong></li> 
  </ul> 
  <p><strong>JavaScript 作用：</strong></p> 
  <p> </p> 
  <p> </p> 
  <ol> 
   <li>动态改变 HTML 内容，属性，样式</li> 
   <li>动态显示或隐藏 HTML 元素</li> 
   <li>验证表单数据</li> 
   <li>响应事件</li> 
  </ol> 
  <h3>4. JavaScript 的组成</h3> 
  <p>1. ECMAScript<br> JavaScript的语法标准<br> ECMA是一个组织，即欧洲计算机制造商协会<br> ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容<br> JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容<br> 2. DOM<br> JavaScript操作网页上的元素的API<br> 3. BOM<br> JavaScript操作浏览器的部分功能的API<br>  </p> 
  <h3>5. JavaScript 的使用场景</h3> 
  <ul> 
   <li>网页特效</li> 
   <li>动态数据处理</li> 
   <li>移动端开发（RN，Weex）</li> 
   <li>服务端开发（Node.js）</li> 
   <li>命令行工具（Node.js）</li> 
   <li>物联网与人工智能（Ruff）</li> 
   <li>游戏开发（cocos2d-js）</li> 
  </ul> 
  <p> </p> 
  <h2>2. JavaScript 基本语法入门</h2> 
  <h3>1. JS 书写样式</h3> 
  <p>1. 行内式</p> 
  <ul> 
   <li>虽然可以写在标签的属性中，但是结构与行为耦合，不方便维护，不推荐使用</li> 
  </ul> 
  <pre><code>方式一：
<button onclick="alert('今天天气很好!');">今天天气?</button>
方式二：
<a href="javascript:alert('你点疼我了！！');">点我</a>
</code></pre> 
  <p>2. 页内式</p> 
  <ul> 
   <li><script></script>标签中的js代码一般写在文档的尾部</li> 
   <li>网页是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素)</li> 
   <li>HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。</li> 
   <li>    所以如果把js代码如果写在<head>中, 那么js代码执行完毕之前后续网页无法被加载<br>  </li> 
  </ul> 
  <pre><code>方法一：文档尾部
<body>
   ......
   <script type="text/javascript">
      alert("今天天气很好！");
   </script>
</body>

方法二：文档头部
<head>
	<meta charset="utf-8">
	<script>
		console.log("hello world")
	</script>
</head>
</code></pre> 
  <p>3. 外链式</p> 
  <p> </p> 
  <p> </p> 
  <ul> 
   <li>在 HTML 中从外部引入 JavaScript，通过调用<code>.js</code> 为后缀的文件来引入</li> 
   <li>从外部引入 JS 文件放在 body 的结尾处，因为网页加载是从上到下加载</li> 
   <li>如果在 开头引入 JS 文件，有些代码不能正确执行</li> 
   <li>外链式的<code>script</code>代码块中不能编写js代码, 即便写了也不会执行</li> 
  </ul> 
  <pre><code><script type="text/javascript" src="index.js">
   alert("今天天气很好！"); // 不会被执行
</script>
</code></pre> 
  <ul> 
   <li>由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度</li> 
  </ul> 
  <pre><code><script type="text/javascript" src="01-js书写格式.js"></script>
</code></pre> 
  <p><strong>在外部文件中放置脚本有如下优势：</strong></p> 
  <p> </p> 
  <p> </p> 
  <ul> 
   <li>分离了 HTML 和代码</li> 
   <li>使 HTML 和 JavaScript 更易于阅读和维护</li> 
   <li>已缓存的 JavaScript 文件可加速页面加载</li> 
  </ul> 
  <p> </p> 
  <h3>2. 输出 HelloWorld</h3> 
  <ul> 
   <li>JavaScript 没有任何打印或者输出的函数。</li> 
   <li>JavaScript 可以通过不同的方式来输出数据。</li> 
  </ul> 
  <p>1. 使用弹出警告框</p> 
  <ul> 
   <li><strong>通过 alert()方法输出数据。控制浏览器弹出一个警告框</strong></li> 
  </ul> 
  <pre><code><script>
	window.alert("我是警告框。");
</script>
</code></pre> 
  <p>2. 使用弹出输入框</p> 
  <ul> 
   <li><strong>在网页中弹出输入框，一般用于接收用户输入的信息</strong></li> 
  </ul> 
  <pre><code>prompt("Hello, World！"); 
</code></pre> 
  <p>3. 使用弹出提示框</p> 
  <ul> 
   <li><strong>在网页中弹出提示框，显示信息，该方法一般与if判断语句结合使用</strong></li> 
  </ul> 
  <pre><code> confirm("Hello，JavaScript！"); 
</code></pre> 
  <p>4. 直接写入HTML文档</p> 
  <ul> 
   <li>通过 document.write()方法来输出想要显示的内容。</li> 
   <li>如果在文档已完成加载 后执行 document.write，整个 HTML 页面将被覆盖。</li> 
  </ul> 
  <pre><code><script>
	document.write("这是输入内容，输入到HTML中")
</script>
</code></pre> 
  <p>5. 写到控制台</p> 
  <ul> 
   <li>通过 console.log()将数据写入到控制台，数据只在控制台中显示，并不显示在网页中。</li> 
   <li>通过 console.log()方法写入到控制台中，页面是没有我们输入的这个数据。</li> 
   <li>通常 console.log()被用来检查错误。</li> 
  </ul> 
  <pre><code><script>
	console.log("Hello World!");
	console.warn("警告输出！"); 
	console.error("错误输出！"); 
</script>
</code></pre> 
  <p>6. 使用 innerHTML</p> 
  <pre><code><script>
 	document.getElementById("demo").innerHTML = 5 + 6;
</script>
</code></pre> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <p> </p> 
  <h3>3. JS 语句</h3> 
  <p> </p> 
  <p>5. JavaScript 标识符<br> 1. 标识符格式</p> 
  <p>标识符中可以含有字母、数字、_、$<br> 标识符不能以数字开头<br> 标识符不能是ES中的关键字或保留字<br> 在 JavaScript 中预定义的运算符如：+、-、*、/、%不可以用于定义标识符<br> 标识符一般都采用驼峰命名法<br> 在JS底层保存的标识符采用的是Unicode编码，所以UTF-8中所有的字符都可以作为标识符<br> 2. Smalltalk 法则</p> 
  <p>每个标识符可以有若干个单词左右连接而成<br> 常量标识符应该全部使用大写字母来表示区别<br> 一般标识符应该全部使用小写字母以示区别<br> 特殊常量标识符应该以大写字母开头以示区别<br> 函数的标识符应该以小写字母开头以示区别<br> 不要使用JavaScript 中预定义保留的关键字<br> JavaScript 严格区分大小写字母<br>  </p> 
  <p>6. JavaScript 注释<br> JavaScript 注释可用于提高代码的可读性。 注释不会被执行。<br> 注释常用来调试程序，因为注释掉的代码并不会被执行。<br> 在写代码的时候，注释是很有必要的，提高了代码的可读性。要养成写注释的习惯。<br> 注意点<br> 单行注释可以嵌套单行注释、多行注释<br> 多行注释可以嵌套单行注释<br> 多行注释不能嵌套多行注释</p> 
  <pre><code><script>
	1. 单行注释：以 // 开头。
	2. 多行注释：以 /* 开始，以 */ 结尾。
</script>
</code></pre> 
  <h3>4. JS 基本概念</h3> 
  <p>1. JavaScript 关键字</p> 
  <p> </p> 
  <p><a href="http://img.e-com-net.com/image/info8/792f3fc82a754a5a8cbbb97aea610951.jpg" target="_blank"><img alt="前端html面试题及答案_第19张图片" height="216" src="http://img.e-com-net.com/image/info8/792f3fc82a754a5a8cbbb97aea610951.jpg" width="650" style="border:1px solid black;"></a></p> 
  <p> </p> 
  <p>2. JavaScript 变量</p> 
  <p>3. JavaScript 常量</p> 
  <p> </p> 
  <p>https://blog.csdn.net/qq_43645678/article/details/93380462</p> 
  <ul> 
   <li> 
    <ul> 
     <li><strong>JavaScript语言用于程序控制或者执行特定操作的英语单词</strong></li> 
     <li><strong>它们是被JavaScript语言赋予了特殊含义的英文单词</strong></li> 
     <li><strong>注意点</strong></li> 
    </ul> 
    <ul> 
     <li>关键字不能用作变量名、函数名</li> 
     <li>关键字严格区分大小写</li> 
    </ul> 
    <ul> 
     <li><strong>常见关键字</strong></li> 
    </ul> 
    <ul> 
     <li> <p>变量是用于存储信息的"容器"。</p> <p>在应用程序中，使用变量来作为值的符号名<br> 变量的名字又叫做标识符，其需要遵守一定的规则<br> 格式： var 变量名 = 变量值;<br> 用 var 声明的且未赋初值的变量，值会被设定为 undefined<br> 变量的作用域</p> <p>所有函数之外声明的变量，叫全局变量，因为它可被当前文档中任何其他代码所访问<br> 在函数内部声明的变量，叫做局部变量，因为它只能在该函数内部访问<br> 在函数内声明的变量在函数外使用会出错，引用错误<br> 声明变量要在使用变量之前，如果在使用变量之后声明变量，会返回 undefined<br> 变量名对大小写敏感，a 和 A 代表不同的两个变量<br>  </p> </li> 
    </ul><p> </p> <p> </p> <p> </p> <p> </p> <p>参考于.....................</p> 
    <ul> 
     <li> 
      <ul> 
       <li>JavaScript 中的用 <code>const</code> 来声明定义常量。</li> 
       <li><code>const</code> 定义的常量必须初始化，不初始化会报错。</li> 
       <li>常量在第一次定义之后不可再次赋值，如果在严格模式下运行会报错。</li> 
      </ul></li> 
    </ul><p> </p> <p> </p> </li> 
  </ul> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1274433638800310272"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端面试)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1891302346894405632.htm"
                           title="web前端面试问什么，【前端，2024华为前端高级面试题及答案" target="_blank">web前端面试问什么，【前端，2024华为前端高级面试题及答案</a>
                        <span class="text-muted">uiuuyy67</span>
<a class="tag" taget="_blank" href="/search/2024%E5%B9%B4%E7%A8%8B%E5%BA%8F%E5%91%98%E5%AD%A6%E4%B9%A0/1.htm">2024年程序员学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a>
                        <div>效果截图：用户名是只读的，所以无法在text文本框里输入值；账号是禁用的，直接变成灰色了。2.input标签常用的type属性值讲解text文本框password密码框radio单选框checkbox复选框file文件选择hidden隐藏域hidden是用户看不见的东西，给管理员（写网页的）操作保存信息的！submit提交reset重置（2）select下拉框option：下拉选项（下拉框的基本标</div>
                    </li>
                    <li><a href="/article/1891289237018439680.htm"
                           title="前端高级面试题" target="_blank">前端高级面试题</a>
                        <span class="text-muted">阿芯爱编程</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>以下是一些高级前端面试题及答案：一、性能优化如何对大型前端项目进行性能剖析（profiling）？答案：使用ChromeDevTools中的Performance面板。可以记录页面加载和交互过程中的各种性能指标，如脚本执行时间、渲染时间、重绘和回流次数等。利用Lighthouse工具，它可以对网页进行全面的性能评估，包括加载性能、可访问性、最佳实践等方面，并给出优化建议。在代码中手动插入性能测量点</div>
                    </li>
                    <li><a href="/article/1891184069010583552.htm"
                           title="前端框架Vue内容回顾" target="_blank">前端框架Vue内容回顾</a>
                        <span class="text-muted">GISer_Jinger</span>
<a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采</div>
                    </li>
                    <li><a href="/article/1891078912692252672.htm"
                           title="Flux架构：构建可预测的Web应用状态管理体系" target="_blank">Flux架构：构建可预测的Web应用状态管理体系</a>
                        <span class="text-muted">阿珊和她的猫</span>
<a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章</div>
                    </li>
                    <li><a href="/article/1890811727436640256.htm"
                           title="疯狂前端面试题(四)" target="_blank">疯狂前端面试题(四)</a>
                        <span class="text-muted">吃蛋糕的居居</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/firefox/1.htm">firefox</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a>
                        <div>一、Ajax、JSONP、JSON、Fetch和Axios技术详解1.Ajax（异步JavaScript和XML）什么是Ajax？Ajax是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过`XMLHttpRequest`对象实现。优点-支持同步和异步请求。-能够发送和接收多种格式的数据（如JSON、XML等）。缺点-原生代码较复杂。-不支持跨域请求（需要服务器配置CORS或使用JSO</div>
                    </li>
                    <li><a href="/article/1890793818513534976.htm"
                           title="Web前端面试题(持续更新中)" target="_blank">Web前端面试题(持续更新中)</a>
                        <span class="text-muted">Bearin</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
                        <div>一、闭包是什么JS中内层函数可以访问外层函数的变量，使内部私有变量不受外界干扰，起到保护和保存的作用，我们把这个特性称作闭包。好处：1.隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。2.让我们可以使用回调，操作其他函数内部；3.变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；坏处：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起</div>
                    </li>
                    <li><a href="/article/1890792305711968256.htm"
                           title="2024年最新入门基于Node的Web框架——Koa(2)，2024年最新前端开发面试题及答案" target="_blank">2024年最新入门基于Node的Web框架——Koa(2)，2024年最新前端开发面试题及答案</a>
                        <span class="text-muted">2301_82243626</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>最后文章到这里就结束了，如果觉得对你有帮助可以点个赞哦开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},“querystring”:“search=koa&keyword=context”}responseresponse对象是用于设置一些响应信息给客户端，这些和http请求的响应字段是一样的。比如说可以设置状态码、响应格式等相关信息。app.use(async(c</div>
                    </li>
                    <li><a href="/article/1890715515962322944.htm"
                           title="React Hooks 与 Vue Composition API 的区别" target="_blank">React Hooks 与 Vue Composition API 的区别</a>
                        <span class="text-muted">阿珊和她的猫</span>
<a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录1.设计哲学ReactHooksVueCompositionAPI2.使用方式ReactHoo</div>
                    </li>
                    <li><a href="/article/1890136450104619008.htm"
                           title="前端面试题" target="_blank">前端面试题</a>
                        <span class="text-muted">木輮</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>文章目录一、闭包（完）二、原型链（完）三、防抖和节流（完）四、Vue相关1、MVC和MVVM的区别2、v-model原理3、vue中的data为什么是一个函数？（面试常问）4、v-if和v-show的区别5、v-for中为什么要有key6、dist目录打包后过大，解决办法？7、watch和computed的区别8、子组件给父组件传递数据9、全局事件总线：可以实现任意组件间的数据传递10、Vue生命</div>
                    </li>
                    <li><a href="/article/1890080603802497024.htm"
                           title="前端面试题" target="_blank">前端面试题</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
                        <div>以下是一些前端较新的面试题：一、现代框架相关（以React为例）ReactHooks（如useState、useEffect）与传统类组件相比有什么优势？答案：代码更简洁：Hooks允许在不编写类组件的情况下使用状态和其他React特性。例如，使用useState可以轻松在函数组件中添加状态，而类组件需要通过this.state和this.setState来管理状态，代码相对繁琐。更好的逻辑复用：</div>
                    </li>
                    <li><a href="/article/1889881338299871232.htm"
                           title="2024年前端最全Java进阶(五十五)-Java Lambda表达式入门_eclipse lambda(2)，程序员面试技巧和注意事项" target="_blank">2024年前端最全Java进阶(五十五)-Java Lambda表达式入门_eclipse lambda(2)，程序员面试技巧和注意事项</a>
                        <span class="text-muted">2401_84435192</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>算法冒泡排序选择排序快速排序二叉树查找:最大值、最小值、固定值二叉树遍历二叉树的最大深度给予链表中的任一节点，把它删除掉链表倒叙如何判断一个单链表有环由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】"And</div>
                    </li>
                    <li><a href="/article/1889881338949988352.htm"
                           title="2024年Java进阶(五十五)-Java Lambda表达式入门_eclipse lambda，2024年最新阿里员工面试" target="_blank">2024年Java进阶(五十五)-Java Lambda表达式入门_eclipse lambda，2024年最新阿里员工面试</a>
                        <span class="text-muted">2401_84446712</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>最后一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家###基本的Lambda例子  现在,我们已经知道什么是l</div>
                    </li>
                    <li><a href="/article/1889872008347447296.htm"
                           title="Prettier 如何处理代码格式化" target="_blank">Prettier 如何处理代码格式化</a>
                        <span class="text-muted">阿珊和她的猫</span>
<a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
                        <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录1.缩进和空格2.分号和引号3.换行和空行4.样式规则5.自定义规则6.总结Prettier是</div>
                    </li>
                    <li><a href="/article/1889689048017072128.htm"
                           title="ESLint 如何处理 ES6+ 语法" target="_blank">ESLint 如何处理 ES6+ 语法</a>
                        <span class="text-muted">阿珊和她的猫</span>
<a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录1.配置环境2.配置解析器选项3.使用插件4.配置规则5.总结ESLint是一个流行的Java</div>
                    </li>
                    <li><a href="/article/1889377397829070848.htm"
                           title="[vue3] Ref Reactive" target="_blank">[vue3] Ref Reactive</a>
                        <span class="text-muted">533_</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>【b站-【前端面试】Vue3ref与reactive区别】Ref：Ref用于创建一个响应式的基本数据类型，比如数字、字符串等。它将普通的数据变成响应式数据，可以监听数据的变化。使用Ref时，我们可以通过.value来访问和修改数据的值。Reactive：Reactive则用于创建一个响应式对象，可以包含多个属性。通过Reactive，我们可以将整个对象变成响应式，使对象的任何属性发生变化时都能被检</div>
                    </li>
                    <li><a href="/article/1886966620778196992.htm"
                           title="20250108慧能科技前端面试" target="_blank">20250108慧能科技前端面试</a>
                        <span class="text-muted">uperficialyu</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%AE%9E%E6%88%98%E6%95%B4%E7%90%86/1.htm">前端面试实战整理</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>目录ajax怎么取消请求移动端怎么实现px尺寸vite和webpack的区别设计模式讲一下什么是原型链讲一下什么是闭包实现eventbus事件循环项目发布后，如何对项目进行优化，怎么优化vue2的diff算法和vue3的diff算法的区别1.ajax怎么取消请求原生JavaScript（XMLHttpRequest）创建XMLHttpRequest对象发送请求，通过调用其abort()方法来取消请</div>
                    </li>
                    <li><a href="/article/1885583220016214016.htm"
                           title="JavaScript中的隐式类型转换" target="_blank">JavaScript中的隐式类型转换</a>
                        <span class="text-muted">阿珊和她的猫</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。文章</div>
                    </li>
                    <li><a href="/article/1885528247937069056.htm"
                           title="Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践" target="_blank">Web前端最全Koa 基础篇（二）—— 路由与中间件(1)，前端组件化架构实践</a>
                        <span class="text-muted">2401_84447112</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>最后如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基本使用router.get(“/”,asyncctx=>{ctx.body=“h</div>
                    </li>
                    <li><a href="/article/1885250658383228928.htm"
                           title="【前端面试】深入了解Node.js基础" target="_blank">【前端面试】深入了解Node.js基础</a>
                        <span class="text-muted">贾明恣</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>前端与node.jsNode.js不是一门语言也不是框架，而是JavaScript运行时环境。基于GoogleV8引擎、同时它通过封装和抽象操作系统提供的底层功能，以及使用Libuv等c++/c的核心模块，扩展了JavaScript功能，使得JavaScript能够同时具有DOM操作(浏览器)和I/O、文件读写、操作数据库(服务器端)……能力，是目前最简单的全栈式语言。前端开发者经常需要安装Nod</div>
                    </li>
                    <li><a href="/article/1884457471976730624.htm"
                           title="2024年前端面试题加答案" target="_blank">2024年前端面试题加答案</a>
                        <span class="text-muted">2401_86372526</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>26、eval是做什么的？eval可以把字符串解析成JS代码并运行；避免使用eval,不安全，非常消耗性能；把JSON字符串传换成JSON对象时可以使用eval。27、null和underfined的区别？null表示定义了一个对象，值为“空值”；underfined表示这个不存在这个值。28、说说同步和异步的区别？同步：在同一时间内不允许出现别的操作。异步：在同一时间内允许不同的操作。29、de</div>
                    </li>
                    <li><a href="/article/1882144613356072960.htm"
                           title="2025年前端发展趋势" target="_blank">2025年前端发展趋势</a>
                        <span class="text-muted">贵州数擎科技有限公司</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：github晓智元宇宙、数字孪生引擎、前端面试题大家好！我是[晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！</div>
                    </li>
                    <li><a href="/article/1882139059283881984.htm"
                           title="2024大厂高级前端面试题汇总！" target="_blank">2024大厂高级前端面试题汇总！</a>
                        <span class="text-muted">前端小羽——互联网大厂</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。以下是面试题汇总，前端进阶系列会持续深入更新面试题解，共勉！阿里使用过的koa2中间件koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍pm2master挂了的话pm2怎</div>
                    </li>
                    <li><a href="/article/1882134900451110912.htm"
                           title="2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)" target="_blank">2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)</a>
                        <span class="text-muted">2401_89693619</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>3.阐述清楚浮动的几种方式（常见问题）1.父级div定义height原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题2.父级div定义overflow:hidden原理：必须定义width或zoom:1，同时不能定义height，使用overflow:</div>
                    </li>
                    <li><a href="/article/1882134521323778048.htm"
                           title="2024Web前端人事面试题总结精选_前端面试项目相关提问" target="_blank">2024Web前端人事面试题总结精选_前端面试项目相关提问</a>
                        <span class="text-muted">2401_86638424</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>api然后我们前端直接调用，当然如果后台还没写好就先自己造假数据来完成。平常都是用webpack来构建项目等等。2、你觉得你个性上最大的优点是什么？回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。3、说你最大的缺点？回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱忌妒人、非常懒、脾气大、工作效率</div>
                    </li>
                    <li><a href="/article/1882129986391961600.htm"
                           title="2025年前端面试题汇总" target="_blank">2025年前端面试题汇总</a>
                        <span class="text-muted">涔溪</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>JavaScript核心异步编程Promise、async/await的工作原理及应用场景。如何处理并发请求，使用Promise.all()或Promise.race()等方法。解释事件循环机制，理解微任务（microtask）与宏任务（macrotask）的区别。原型链深入理解JavaScript中的原型继承模型。举例说明如何通过修改原型对象影响所有实例。闭包定义闭包及其作用，如实现私有变量和函</div>
                    </li>
                    <li><a href="/article/1881785093714931712.htm"
                           title="前端面试题-手写篇-万字长文！" target="_blank">前端面试题-手写篇-万字长文！</a>
                        <span class="text-muted">前端Jason</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a>
                        <div>1.手写实现EventBus实现一个简单的EventBus（事件总线）可以让我们在不同的组件或模块之间进行事件驱动的通信。下面是一个用JavaScript手写实现EventBus的基本例子：classEventBus{constructor(){this.events={};//存储事件名与对应的监听器}//注册事件监听器on(event,listener){if(!this.events[eve</div>
                    </li>
                    <li><a href="/article/1881771727260807168.htm"
                           title="ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面_reactnative 脚手架" target="_blank">ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面_reactnative 脚手架</a>
                        <span class="text-muted">2401_84438654</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
                        <div>算法冒泡排序选择排序快速排序二叉树查找:最大值、最小值、固定值二叉树遍历二叉树的最大深度给予链表中的任一节点，把它删除掉链表倒叙如何判断一个单链表有环由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】sudo</div>
                    </li>
                    <li><a href="/article/1881181051267641344.htm"
                           title="一句话就能回答的前端面试题（2024年10月最新版）" target="_blank">一句话就能回答的前端面试题（2024年10月最新版）</a>
                        <span class="text-muted">小姐姐呀～</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>1、v-if和v-show的区别相同点:v-if和v-show都可以控制dom元素的展示和隐藏不同点：v-if的显示隐藏是将dom元素整个添加或删除而v-show的隐藏是为该元素添加CSS样式display:none,dom元素还在一般进入页面不需要频繁显示或隐藏就用v-if2、data()为什么是一个函数为了防止多个组件实例对象共用一个data，产生数据污染3、什么是闭包闭包就是内部函数定义一个</div>
                    </li>
                    <li><a href="/article/1881130465839083520.htm"
                           title="[20250119]-前端面试题——React篇" target="_blank">[20250119]-前端面试题——React篇</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>[20250119]-前端面试题——React篇面试问题记录问题1请简单介绍一下React18有哪些更新。回答：React18的主要更新包括：并发渲染：React18引入了并发渲染（ConcurrentRendering），使得React能在后台进行渲染工作，避免阻塞UI更新，提升性能。自动批处理：React18会自动批处理多次setState更新，减少不必要的渲染，提升性能。useIdHook：</div>
                    </li>
                    <li><a href="/article/1880155672683802624.htm"
                           title="2024最新前端面试题(八股文)一阶段总结（html，css）!!!!新手必看必背!通俗易通!全面!全是干货！" target="_blank">2024最新前端面试题(八股文)一阶段总结（html，css）!!!!新手必看必背!通俗易通!全面!全是干货！</a>
                        <span class="text-muted">沐光M</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端面试题</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>1.网络中使用最多的图片格式有哪些•gif支持动画，只有全透明和不透明两种模式，只有256种颜色,适用于简单动画、徽标和简单图形等应用场景。•jpeg常见格式,采用有损压缩算法，保持图像质量的同时减小文件大小,体积较小，不支持透明，不支持动画•png采用无损压缩算法，体积也相对较小，支持透明背景，不支持动画•svg一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰•BMP画质最好</div>
                    </li>
                                <li><a href="/article/70.htm"
                                       title="PHP如何实现二维数组排序？" target="_blank">PHP如何实现二维数组排序？</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E3%80%80/1.htm">排序　</a>
                                    <div>二维数组在PHP开发中经常遇到，但是他的排序就不如一维数组那样用内置函数来的方便了，（一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】）。二维数组的排序需要我们自己写函数处理了，这里UncleToo给大家分享一个PHP二维数组排序的函数： 
代码： 
functionarray_sort($arr,$keys,$type='asc'){
$keysvalue= $new_arr</div>
                                </li>
                                <li><a href="/article/197.htm"
                                       title="【Hadoop十七】HDFS HA配置" target="_blank">【Hadoop十七】HDFS HA配置</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div>基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。 
  
测试环境有三台 
hadoop.master 
hadoop.slave1 
hadoop.slave2 
  
hadoop.master包含的组件NameNode, JournalNode, Zookeeper，DFSZKFailoverController</div>
                                </li>
                                <li><a href="/article/324.htm"
                                       title="由wsdl生成的java vo类不适合做普通java vo" target="_blank">由wsdl生成的java vo类不适合做普通java vo</a>
                                    <span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/wsdl/1.htm">wsdl</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a>
                                    <div>开发java webservice项目时，如果我们通过SOAP协议来输入输出，我们会利用工具从wsdl文件生成webservice的client端类，但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用，当然有一中情况例外，如果这个自动生成的类里面的properties都是基本数据类型，就没问题，但是如果有集合类，就不行。原因如下： 
1)使用了集合如Li</div>
                                </li>
                                <li><a href="/article/451.htm"
                                       title="JAVA海量数据处理之二（BitMap）" target="_blank">JAVA海量数据处理之二（BitMap）</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/bitmap/1.htm">bitmap</a><a class="tag" taget="_blank" href="/search/bitset/1.htm">bitset</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a>
                                    <div>         路漫漫其修远兮，吾将上下而求索。想要更快，就要深入挖掘 JAVA 基础的数据结构，从来分析出所编写的 JAVA 代码为什么把内存耗尽，思考有什么办法可以节省内存呢？   啊哈！算法。这里采用了 BitMap 思想。  
   
首先来看一个实验：  
指定 VM 参数大小： -Xms256m -Xmx540m </div>
                                </li>
                                <li><a href="/article/578.htm"
                                       title="java类型与数据库类型" target="_blank">java类型与数据库类型</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心，因为大多数hbm文件是自动生成的，但有些时候诸如：数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况，就会手动的去对应数据库与java的数据类型关心，当然比较简单的数据类型即使配置错了也会很快发现问题，但有些数据类型却并不是十分常见，这就给程序员带来了很多麻烦。 
&nb</div>
                                </li>
                                <li><a href="/article/705.htm"
                                       title="Linux命令" target="_blank">Linux命令</a>
                                    <span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a>
                                    <div>系统信息 
arch 显示机器的处理器架构(1) 
uname -m 显示机器的处理器架构(2) 
uname -r 显示正在使用的内核版本 
dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) 
hdparm -i /dev/hda 罗列一个磁盘的架构特性 
hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 
cat /proc/cpuinfo 显示C</div>
                                </li>
                                <li><a href="/article/832.htm"
                                       title="java常用JVM参数" target="_blank">java常用JVM参数</a>
                                    <span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a>
                                    <div>-Xms：初始堆大小，默认为物理内存的1/64(<1GB)；默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制 
-Xmx：最大堆大小，默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时，JVM会减少堆直到 -Xms的最小限制 
-Xmn：新生代的内存空间大小，注意：此处的大小是（eden+ 2</div>
                                </li>
                                <li><a href="/article/959.htm"
                                       title="我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点" target="_blank">我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a>
                                    <div>方法一：

    <bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory" 
    factory-method="createMusicBoxStatic"></bean>
    

    方法二：
   </div>
                                </li>
                                <li><a href="/article/1086.htm"
                                       title="mysql查询性能优化之二" target="_blank">mysql查询性能优化之二</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/UNION/1.htm">UNION</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2%E4%BC%98%E5%8C%96/1.htm">查询优化</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95%E4%BC%98%E5%8C%96/1.htm">索引优化</a>
                                    <div>

1 union的限制
  有时mysql无法将限制条件从外层下推到内层，这使得原本能够限制部分返回结果的条件无法应用到内层
  查询的优化上。
  如果希望union的各个子句能够根据limit只取部分结果集，或者希望能够先排好序在
  合并结果集的话，就需要在union的各个子句中分别使用这些子句。
  
  例如 想将两个子查询结果联合起来，然后再取前20条记录，那么mys</div>
                                </li>
                                <li><a href="/article/1213.htm"
                                       title="数据的备份与恢复" target="_blank">数据的备份与恢复</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%81%A2%E5%A4%8D/1.htm">数据恢复</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%87%E4%BB%BD/1.htm">数据备份</a>
                                    <div> 数据的备份与恢复的方式有: 表,方案 ,数据库; 
  
  
数据的备份: 
导出到的常见命令; 
参数                        说明
USERID         确定执行导出实用程序的用户名和口令
BUFFER        确定导出数据时所使用的缓冲区大小，其大小用字节表示
FILE               指定导出的二进制文</div>
                                </li>
                                <li><a href="/article/1340.htm"
                                       title="线程组" target="_blank">线程组</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E7%BB%84/1.htm">线程组</a>
                                    <div>有些程序包含了相当数量的线程。这时，如果按照线程的功能将他们分成不同的类别将很有用。 
       线程组可以用来同时对一组线程进行操作。 
       创建线程组：ThreadGroup g = new ThreadGroup(groupName); 
 &nbs</div>
                                </li>
                                <li><a href="/article/1467.htm"
                                       title="top命令找到占用CPU最高的java线程" target="_blank">top命令找到占用CPU最高的java线程</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/top/1.htm">top</a>
                                    <div>上次分析系统中占用CPU高的问题，得到一些使用Java自身调试工具的经验，与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程 
top -Hp 28174 -d 1 -n 1
32694 root      20   0 3249m 2.0g  11m S    2  6.4   3:31.12 java         </div>
                                </li>
                                <li><a href="/article/1594.htm"
                                       title="【持久化框架MyBatis3四】MyBatis3一对一关联查询" target="_blank">【持久化框架MyBatis3四】MyBatis3一对一关联查询</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a>
                                    <div>  
当两个实体具有1对1的对应关系时，可以使用One-To-One的进行映射关联查询 
  One-To-One示例数据 
以学生表Student和地址信息表为例，每个学生都有都有1个唯一的地址(现实中，这种对应关系是不合适的，因为人和地址是多对一的关系)，这里只是演示目的 
  
学生表 
  
CREATE TABLE STUDENTS 
(
  </div>
                                </li>
                                <li><a href="/article/1721.htm"
                                       title="C/C++图片或文件的读写" target="_blank">C/C++图片或文件的读写</a>
                                    <span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/%E5%86%99%E5%9B%BE%E7%89%87/1.htm">写图片</a>
                                    <div>先看代码： 
 
 

/*strTmpResult是文件或图片字符串
 * filePath文件需要写入的地址或路径
 */
int writeFile(std::string &strTmpResult,std::string &filePath)
{
    int i,len = strTmpResult.length();
    	unsigned cha</div>
                                </li>
                                <li><a href="/article/1848.htm"
                                       title="nginx自定义指定加载配置" target="_blank">nginx自定义指定加载配置</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码：  
upstream nodejs {
    server 127.0.0.1:3000;
    #server 127.0.0.1:3001;
    keepalive 64;
}

server {
    liste</div>
                                </li>
                                <li><a href="/article/1975.htm"
                                       title="java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方" target="_blank">java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/double/1.htm">double</a>
                                    <div>

public class Power {

	/**
	 *Q71-数值的整数次方
	 *实现函数double Power(double base, int exponent)，求base的exponent次方。不需要考虑溢出。
	 */
	private static boolean InvalidInput=false;
	public static void main(</div>
                                </li>
                                <li><a href="/article/2102.htm"
                                       title="Android四大组件的理解" target="_blank">Android四大组件的理解</a>
                                    <span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%9B%9B%E5%A4%A7%E7%BB%84%E4%BB%B6%E7%9A%84%E7%90%86%E8%A7%A3/1.htm">四大组件的理解</a>
                                    <div> 分享一下，今天在Android开发文档-开发者指南中看到的:          
         
          App components are the essential building blocks of an Android </div>
                                </li>
                                <li><a href="/article/2229.htm"
                                       title="[宇宙与计算]涡旋场计算与拓扑分析" target="_blank">[宇宙与计算]涡旋场计算与拓扑分析</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a>
                                    <div> 
 
     怎么阐述我这个理论呢？ 。。。。。。。。。 
 
 
      首先： 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。 
 
      我们要在宇宙中寻找到一个适合人类居住的行星，时间非常重要，早一个刻度和晚一个刻度，这颗行星的</div>
                                </li>
                                <li><a href="/article/2356.htm"
                                       title="同一个Tomcat不同Web应用之间共享会话Session" target="_blank">同一个Tomcat不同Web应用之间共享会话Session</a>
                                    <span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/session/1.htm">session</a>
                                    <div>实现两个WEB之间通过session 共享数据 
 
查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下： 
 
If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme</div>
                                </li>
                                <li><a href="/article/2483.htm"
                                       title="springmvc Spring3 MVC，ajax，乱码" target="_blank">springmvc Spring3 MVC，ajax，乱码</a>
                                    <span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a>
                                    <div>  
 springmvc Spring3 MVC @ResponseBody返回，jquery ajax调用中文乱码问题解决       
Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法，具体实</div>
                                </li>
                                <li><a href="/article/2610.htm"
                                       title="搭建WAMP环境" target="_blank">搭建WAMP环境</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/wamp/1.htm">wamp</a>
                                    <div>这里先解释一下WAMP是什么意思。W:windows，A：Apache，M：MYSQL，P：PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。  
    工欲善其事，必须先利其器。因为笔者的系统是WinXP，所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-</div>
                                </li>
                                <li><a href="/article/2737.htm"
                                       title="yii2 使用raw http request" target="_blank">yii2 使用raw http request</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/http/1.htm">http</a>
                                    <div>Parses a raw HTTP request using yii\helpers\Json::decode() 
  
To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class: 
'request' =&g</div>
                                </li>
                                <li><a href="/article/2864.htm"
                                       title="Quartz-1.8.6 理论部分" target="_blank">Quartz-1.8.6 理论部分</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2207691 一.概述 
基于Quartz-1.8.6进行学习，因为Quartz2.0以后的API发生的非常大的变化，统一采用了build模式进行构建； 
什么是quartz? 
  
答：简单的说他是一个开源的java作业调度框架，为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp</div>
                                </li>
                                <li><a href="/article/2991.htm"
                                       title="什么是POJO？" target="_blank">什么是POJO？</a>
                                    <span class="text-muted">gupeng_ie</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>POJO--Plain Old Java Objects(简单的java对象) 
  
POJO是一个简单的、正规Java对象，它不包含业务逻辑处理或持久化逻辑等，也不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。 
  
POJO对象有时也被称为Data对象，大量应用于表现现实中的对象。如果项目中使用了Hiber</div>
                                </li>
                                <li><a href="/article/3118.htm"
                                       title="jQuery网站顶部定时折叠广告" target="_blank">jQuery网站顶部定时折叠广告</a>
                                    <span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>效果体验：http://hovertree.com/texiao/jquery/4.htmHTML文件代码： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页顶部定时收起广告jQuery特效 - HoverTree<</div>
                                </li>
                                <li><a href="/article/3245.htm"
                                       title="Spring boot内嵌的tomcat启动失败" target="_blank">Spring boot内嵌的tomcat启动失败</a>
                                    <span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/spring+boot/1.htm">spring boot</a>
                                    <div>根据这篇guide创建了一个简单的spring boot应用，能运行且成功的访问。但移植到现有项目（基于hbase）中的时候，却报出以下错误： 
  
  
SEVERE: A child container failed during start
java.util.concurrent.ExecutionException: org.apache.catalina.Lif</div>
                                </li>
                                <li><a href="/article/3372.htm"
                                       title="leetcode: sort list" target="_blank">leetcode: sort list</a>
                                    <span class="text-muted">michelle_0916</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/linked+list/1.htm">linked list</a><a class="tag" taget="_blank" href="/search/sort/1.htm">sort</a>
                                    <div>Sort a linked list in O(n log n) time using constant space complexity. 
====analysis======= 
mergeSort for singly-linked list  
====code=======      /** 
 * Definition for sin</div>
                                </li>
                                <li><a href="/article/3499.htm"
                                       title="nginx的安装与配置,中途遇到问题的解决" target="_blank">nginx的安装与配置,中途遇到问题的解决</a>
                                    <span class="text-muted">qifeifei</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a>
                                    <div>我使用的是ubuntu13.04系统，在安装nginx的时候遇到如下几个问题，然后找思路解决的，nginx 的下载与安装 
  
wget http://nginx.org/download/nginx-1.0.11.tar.gz
tar zxvf nginx-1.0.11.tar.gz
./configure
make
make install 
  
安装的时候出现</div>
                                </li>
                                <li><a href="/article/3626.htm"
                                       title="用枚举来处理java自定义异常" target="_blank">用枚举来处理java自定义异常</a>
                                    <span class="text-muted">tcrct</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a>
                                    <div>在系统开发过程中，总少不免要自己处理一些异常信息，然后将异常信息变成友好的提示返回到客户端的这样一个过程，之前都是new一个自定义的异常，当然这个所谓的自定义异常也是继承RuntimeException的，但这样往往会造成异常信息说明不一致的情况，所以就想到了用枚举来解决的办法。 
 
1，先创建一个接口，里面有两个方法，一个是getCode, 一个是getMessage 
 

public </div>
                                </li>
                                <li><a href="/article/3753.htm"
                                       title="erlang supervisor分析" target="_blank">erlang supervisor分析</a>
                                    <span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a>
                                    <div>当我们给supervisor指定需要创建的子进程的时候，会指定M,F,A,如果是simple_one_for_one的策略的话，启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组，A ++ OtherArgs。那么这个时候就有个问题了，既然参数不一致，那</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>
	定义表格标题。
			定义表格中的表头单元格。
	
		定义表格中的单元。