handsomeDXhero
handsomeDXhero

前端学习笔记（四）HTML入门扩充

之前在学习HTML的时候，按照Web 前端怎样入门？中汪小黑的回答中所给的学习路线图，照着W3school的HTML基础教程，只学习到了HTML列表部分。在学习CSS的过程中，逐渐发现有一些HTML内容（块、类等等）并不熟悉。现在在开始着手做练手小项目静态网页之前，我想再把HTML的基础补习一下，把HTML基础教程全部看完，并且尽量手敲一下。

1.HTML块元素

是块级元素（block level element），用来组合其他HTML元素。
是内联元素（ inline element），用来作文本的容器。
这两者主要目的都是为了方便CSS设置样式。Div还可以用于文本布局。（以前用表格进行文本布局是不好的！）

2.HTML类：
对HTML元素（通常是div等）设置Class属性可以方便CSS来设置样式。例：

<div class="cities">

3.HTML布局：
Div元素常用作布局工具，方便通过CSS对其进行定位。
例：使用四个

来创建多列布局：（中间用到了之前所讲的CSS中的float，并且在页脚进行clear的手法）
HTML：

<body>

<div id="header">
<h1>City Galleryh1>
div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
div>

<div id="section">
<h1>Londonh1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
div>

<div id="footer">
Copyright W3School.com.cn
div>

body>

CSS：

如果使用HTML提供的新语义元素定义网页布局：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML：

<body>

<header>
<h1>City Galleryh1>
header>

<nav>
London<br>
Paris<br>
Tokyo<br>
nav>

<section>
<h1>Londonh1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
p>
section>

<footer>
Copyright W3School.com.cn
footer>

body>

CSS：

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

用

元素也可以进行布局，但是这样不好。就不贴代码了。

4.响应式web框架：即可以以可变尺寸传递网页的web设计。可以主要使用float来实现这个目的。例：


<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
style>
head>

<body>

<h1>W3School Demoh1>
<h2>Resize this responsive page!h2>
<br>

<div class="city">
<h2>Londonh2>
<p>London is the capital city of England.p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.p>
div>

<div class="city">
<h2>Parish2>
<p>Paris is the capital and most populous city of France.p>
div>

<div class="city">
<h2>Tokyoh2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.
p>
div>
body>
html>

还有一个方法，是使用现成的CSS框架。
CSS框架，说白了就是别人写好的CSS文件，里面对不同的class进行了格式定义。然后直接引用其中的class，就可以实现一些格式属性， 不需要自己来写完整的CSS文件。例，以下的HTML文件引用了bootstrap框架，因此不需要自己写CSS文件或者其他样式，就可以让文本带有特别的样式属性，并且在不同尺寸的设备上都能合适地显示网页内容：


<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demoh1> 
  <p>Resize this responsive page!p> 
div>
div>

<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>Londonh2>
    <p>London is the capital city of England.p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.p>
  div>
  <div class="col-md-4">
    <h2>Parish2>
    <p>Paris is the capital and most populous city of France.p>
  div>
  <div class="col-md-4">
    <h2>Tokyoh2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.p>
  div>
div>
div>

body>
html>

5.HTML框架
通过使用frameset，可以将窗口分成几行或几列，分别显示来自不同的html文件。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
frameset>

注：这种情况下，两列内容的滚动条是分开的。

重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 </code> 标签，就必须将这段文字嵌套于 <code><body></body></code> 标签内。例：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>25%,50%,25%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/frame_a.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/frame_b.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/frame_c.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>noframes</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>您的浏览器无法处理框架！<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>noframes</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>其他tips：<br> 1）行和列框架可以混合嵌套使用。<br> 2）noresize=“noresize”：使得框架不可调整尺寸。<br> 3）导航框架（感觉比较常用）：导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.htm” 的文件包含三个链接。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>120,*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/html_contents.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/frame_a.html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>showframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>4）框架内初始显示指定节：本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用</p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>C10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 进行标识。 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>20%,80%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/frame_a.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/link.html#C10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>5）使用导航框架跳转至指定的节：本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frameset</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>180,*<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/content.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>frame</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/example/html/link.html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>showframe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>frameset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>6.内联框架iframe：用于在网页内显示网页。（套娃）</p> <p><a href="http://img.e-com-net.com/image/info8/80d0430083404b04b97473fd6ef42933.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/80d0430083404b04b97473fd6ef42933.jpg" alt="前端学习笔记（四）HTML入门扩充_第1张图片" width="554" height="285" style="border:1px solid black;"></a><br> 可以用width和height为inframe设置尺寸，用frameborder设置边框。<br> Iframe还可以用作链接的目标（target，即点击链接后打开网页显示的位置，如新标签页等）例：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo_iframe.htm<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>iframe_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3school.com.cn<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>iframe_a<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>W3School.com.cn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>7.HTML脚本：<code><script></code>标签用于定义客户端脚本，比如JavaScript。<br> Script元素既可以包含脚本语句，也可以通过src属性指向外部脚本。<br> <code><noscript></code> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。<br> 如何应付老式的浏览器<br> 如果浏览器压根没法识别 <code><script></code> 标签，那么 <code><script></code> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <code><script></code> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。例（JavaScript）：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"Hello World!"</span><span class="token punctuation">)</span> <span class="token comment">//--></span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>8.HTML文件路径：<br> 文件路径会在链接外部文件时被用到，包括网页、图像、样式表、JavaScript。<br> 相对路径（使用相对路径是个好习惯！）：<br> <code><img src="picture.jpg"></code> picture.jpg 位于与当前网页相同的文件夹<br> <code><img src="images/picture.jpg"></code> picture.jpg 位于当前文件夹的 images 文件夹中<br> <code><img src="/images/picture.jpg"></code> picture.jpg 当前站点根目录（最上级目录）的 images 文件夹中<br> <code><img src="../picture.jpg"></code> picture.jpg 位于当前文件夹的上一级文件夹中<br> 绝对文件路径：<br> 绝对文件路径是指向一个因特网文件的完整URL，例：<br> <code><img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower"></code></p> <p>9.HTML头部元素<br> <code><head></code>元素是所有头部元素的容器。以下标签都可以添加到 head 部分：<code><title></code>、<code><base></code>、<code><link></code>、<code><meta></code>、<code><script></code>以及 <code><style></code>。<br> （1）HTML <code><title></code> 元素<br> <code><title></code> 标签定义文档的标题。<br> title 元素在所有 HTML/XHTML 文档中都是必需的。<br> title 元素能够：<br> 定义浏览器工具栏中的标题<br> 提供页面被添加到收藏夹时显示的标题<br> 显示在搜索引擎结果中的页面标题<br> （2）HTML <code><link></code> 元素<br> <code><link></code> 标签定义文档与外部资源之间的关系。<br> <code><link></code> 标签最常用于连接样式表：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mystyle.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <p>（3）HTML <code><style></code> 元素<br> <code><style></code> 标签用于为 HTML 文档定义样式信息。<br> 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span>yellow<span class="token punctuation">}</span> <span class="token selector">p</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <p>（4）HTML <code><meta></code> 元素<br> 元数据（metadata）是关于数据的信息。<br> <code><meta></code> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。<br> 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<br> <code><meta></code> 标签始终位于 head 元素中。<br> 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。<br> 针对搜索引擎的关键词<br> 一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。<br> 下面的 meta 元素定义页面的描述：<br> <code><meta name="description" content="Free Web tutorials on HTML, CSS, XML" /></code><br> 下面的 meta 元素定义页面的关键词：<br> <code><meta name="keywords" content="HTML, CSS, XML" /></code><br> name 和 content 属性的作用是描述页面的内容。<br> （5）HTML <code><script></code> 元素<br> <code><script></code> 标签用于定义客户端脚本，比如 JavaScript。</p> <p>10.HTML字符实体<br> HTML中某些字符是预留的，比如大于号>，小于号<等。<br> 例：小于号写作<code>&lt;</code>或<code>&#60;</code><br> 最常用的是不间断空格<code>&nbsp;</code>，因为浏览器会自动把HTML中的空格缩减为一个。所以如果想使用空格，就需要用这个。<br> 字符实体很多，实际使用时需要参考参考手册。写实体名会更方便记忆一些，但可能有的浏览器不支持实体名，而数字是支持性更好的。</p> <p>11.HTML URL（uniform resource locator统一资源定位符）<br> 网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：<br> scheme://host.domain:port/path/filename<br> 解释：<br> scheme - 定义因特网服务的类型。最常见的类型是 http<br> host - 定义域主机（http 的默认主机是 www）<br> domain - 定义因特网域名，比如 w3school.com.cn<br> :port - 定义主机上的端口号（http 的默认端口号是 80）<br> path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。<br> filename - 定义文档/资源的名称<br> 注：scheme也有多种，具体使用的时候再好好了解吧~</p> <p>URL字符编码：URL只能使用ASCII字符集来通过因特网进行发送。因此其他字符（包括中文等）会被替换为%加两位16进制数字。URL不能包含空格，一般用+代替。具体URL编码参考要参考URL编码参考手册。</p> <p>12.HTML web server<br> 发布自己的网页，需要把它存放在web服务器上。具体可参考web主机教程。</p> <p>13.HTML颜色<br> 颜色由红绿蓝混合而成，三个两位的16进制数字。例如#000000是黑色，#FF0000是红色。<br> 大多数浏览器也支持颜色名（brackets的自动补全功能会显示，非常方便）。颜色名有很多，但是仅有16种颜色被W3C的HTML4.0标准支持。<br> 最初，有216种跨平台web安全色。但是不知道现在这么做的意义还大不大。</p> <p>14.DOCTYPE声明（文档类型）<br> Web中文档的类型非常多，在html文件的开头进行声明，浏览器才能正确地显示文档。<br> 例：< !DOCTYPE >，它不是HTML标签，它只是为浏览器提供一项声明。</p> <p>附上来自W3School的HTML4.01速查手册<br> https://www.w3school.com.cn/html/html_quick.asp</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1288839372858269696"></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/1949543979942998016.htm" title="【前端学习笔记】CSS的两种盒子模型" target="_blank">【前端学习笔记】CSS的两种盒子模型</a> <span class="text-muted">花上</span> <div>CSS有两种盒子模型。一种是W3C的标准盒子模型。另一种是IE的盒子模型。W3C的标准盒子模型中width包括了width+padding+border。IE的盒子模型的width只有width，不包含padding和border。box-sizing的作用如果想要切换盒子模型，可以使用box-sizing属性。例：box-sizing:content-box是W3C盒子模型  box-sizin</div> </li> <li><a href="/article/1948847531521798144.htm" title="如何自学前端找到一份工作" target="_blank">如何自学前端找到一份工作</a> <span class="text-muted">luckySnail01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>建议先看下鱼皮的两个视频+如何学习技术文章：https://bcdh.yuque.com/staff-wpxfif/resource/rito86b49l53w1w2（前端1小时-1小时16分钟）https://www.bilibili.com/video/BV1nh411e7oG，超级详情的前端学习路线https://bcdh.yuque.com/staff-wpxfif/resource/nx</div> </li> <li><a href="/article/1948111160557498368.htm" title="前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题，使程序正常运行" target="_blank">前端项目启动 npm 安装 之 常见错误 意外解决了 一直报 esbuild 的问题，使程序正常运行</a> <span class="text-muted"></span> <div>写在前面：本文作为本人学习总结之用，同时分享给大家~个人前端博客网站：zhangqiang.hk.cn欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！通常要运行一个前端项目操作流程为：npminstall（用于安装库，可以理解为初试化用的）npmstart（启动项目）1、上面这两个为我们理想话的安装，实际上会遇到各种意想不到的bug，比如网络原因，这个时候我们要</div> </li> <li><a href="/article/1947176162606247936.htm" title="前端学习路线推荐" target="_blank">前端学习路线推荐</a> <span class="text-muted">oldfifteen</span> <div>第一阶段：HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。JS高级特征：正则表达式、排序算</div> </li> <li><a href="/article/1946470482282868736.htm" title="前端学习笔记：React.js中state和props的区别和联系" target="_blank">前端学习笔记：React.js中state和props的区别和联系</a> <span class="text-muted"></span> <div>文章目录1.`props`（属性）定义用途示例2.`state`（状态）定义用途示例3.核心区别4.常见使用场景props的场景state的场景5.交互模式父组件修改子组件状态子组件通知父组件6.最佳实践总结在React.js中，state和props是两个核心概念，用于管理组件的数据和数据流。它们的设计目的不同，但共同构成了React组件的状态管理系统。1.props（属性）定义外部传入的数据：</div> </li> <li><a href="/article/1943469324639465472.htm" title="前端学习 vben 之 axios interceptors" target="_blank">前端学习 vben 之 axios interceptors</a> <span class="text-muted">aha-凯心</span> <a class="tag" taget="_blank" href="/search/vben/1.htm">vben</a><a class="tag" taget="_blank" href="/search/admin%E5%90%AF%E8%88%AA/1.htm">admin启航</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习vben之axiosinterceptorsinterceptor拦截器，是一种软件设计模式，核心思想就是在程序执行的特定阶段（如请求发送前，响应返回后，方法调用前后等）自动插入自定义逻辑。实现对核心流程的“拦截”和增强。它本质上是一种面向切面编程（AOP）的具体实现，用于解耦横跨多个模块的通用功能（如日志、认证、错误处理）。axios中的interceptoraxios中实现了inter</div> </li> <li><a href="/article/1942511413318709248.htm" title="如何像我这样创建一个酷炫且能赚钱的网站（使用宝塔安装WordPress搭建子比主题）" target="_blank">如何像我这样创建一个酷炫且能赚钱的网站（使用宝塔安装WordPress搭建子比主题）</a> <span class="text-muted">海拥✘</span> <a class="tag" taget="_blank" href="/search/100%E4%B8%AA%E5%89%8D%E7%AB%AF%E4%BC%98%E8%B4%A8%E9%A1%B9%E7%9B%AE/1.htm">100个前端优质项目</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>个人网站:【海拥】【摸鱼小游戏】【神级源码资源网站】风趣幽默的前端学习课程：28个案例趣学前端想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】免费且实用的前端刷题（面经大全）网站：点击跳转到网站3ÿ</div> </li> <li><a href="/article/1940727187518844928.htm" title="学习记录：DAY33" target="_blank">学习记录：DAY33</a> <span class="text-muted">2301_79760424</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E6%97%A5%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">每日学习记录</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>前端学习之旅：Node.js模块与HTTP服务前言----------------------------------------又是许久许久没有更新，在苦哈哈弄完期末，然后花一天时间把计算机网络课设写了之后。现在又即将回到前后端学习的状态。我想现在正处于一个调整期的状态。一个是随着blog的不断堆积，有必要把它们整理成更具有逻辑性的知识片。另一个是我需要了解当前前后端需要学习的路线，这样我可以有</div> </li> <li><a href="/article/1939491137492414464.htm" title="JAVA进阶之路" target="_blank">JAVA进阶之路</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/Advance/1.htm">Advance</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JAVA进阶之路一、Java企业开发基础1.JavaWeb2.SSM框架3.Maven4.Springboot25.mybatis-plus6.前端学习（不算很重要）7.SpringSecurity（有时间再看，不重要）8.代码开发规范（不重要，有时间看）9.Git10.Linux（不重要，会用就行）二、Java企业开发进阶1.设计模式2.Redis（核心）3.消息队列RocketMQ(核心)4.</div> </li> <li><a href="/article/1937661839932452864.htm" title="vue3项目练习大全（附github源码）" target="_blank">vue3项目练习大全（附github源码）</a> <span class="text-muted">尔嵘</span> <a class="tag" taget="_blank" href="/search/Vue3.0/1.htm">Vue3.0</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>vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。2023年必将是vue3-ts主流，拥抱新技术必须是我们要接受的！如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下</div> </li> <li><a href="/article/1935683499407241216.htm" title="前端学习不迷茫（建议收藏）学习路线" target="_blank">前端学习不迷茫（建议收藏）学习路线</a> <span class="text-muted">aha-凯心</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>theme:cyanosis前端学习不迷茫（建议收藏）当你点进来的时候，我默认你是一个前端开发的新手，或者是一个想要了解前端开发的人。让我们开启前端学习路线指导之旅。什么是前端？狭义上的前端开发，是指使用HTML、CSS、JavaScript进行网页制作。而广义上的前端开发，则是包括了网页，微信小程序，手机app，电脑软件，电视app，等一系列有屏幕显示，可进行人机交互的开发工作。前端招聘要求这样</div> </li> <li><a href="/article/1933793485903687680.htm" title="【Python@arcpy】 GeoDataBase 导出为Shapefile" target="_blank">【Python@arcpy】 GeoDataBase 导出为Shapefile</a> <span class="text-muted">seelingzheng</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/arcpy/1.htm">arcpy</a><a class="tag" taget="_blank" href="/search/GIS%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">GIS可视化</a> <div>关注公众号"seeling_GIS"，领取前端学习视频资料数据源是gdb，需要用超图发布成服务，所有想到的办法就是通过将数据转换成shp然后在通过shp导入到超图udb文件中，然后发布成服务。虽然arcmap中能够通过界面化操作就能够实现，但是如果如果数据量过大，分类过多就比较费时费力，只是一个没有技术含量的体力活，所有想着用arcpy来实现通过脚本的方式批量转换。以下代码实现了gdb数据到shp</div> </li> <li><a href="/article/1933106532803735552.htm" title="Web API总结与深化进阶" target="_blank">Web API总结与深化进阶</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/%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/html/1.htm">html</a> <div>提示：这是一个非常弱智的前端学习者的一点追求弱智简单清晰的傻瓜笔记，一个经常打完代码打辩论的某弗雷尔卓德寒冷211高校的天天想家的孩子的“胡说八道”。这是第四节——WebAPI总结与深化进阶HHYYZZ的蓝旭笔记WebAPI进阶一、变量声明与WebAPI基本认知1、变量声明关键字特点使用场景注意事项var函数作用域，可重复声明旧版代码兼容存在变量提升，建议淘汰let块级作用域，不可重复声明需要重新</div> </li> <li><a href="/article/1932917646529982464.htm" title="前端学习＜四＞JavaScript基础——37-通过style对象获取和设置行内样式" target="_blank">前端学习＜四＞JavaScript基础——37-通过style对象获取和设置行内样式</a> <span class="text-muted"></span> <div>style属性的获取和修改在DOM当中，如果想设置样式，有两种形式：className（针对内嵌样式）style（针对行内样式）这篇文章，我们就来讲一下style。需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如：         Title        div{       border:6pxsolidred;    }      ​    ​   </div> </li> <li><a href="/article/1930808346361786368.htm" title="一文快速学习HTTP协议知识：前端学习调试必须掌握" target="_blank">一文快速学习HTTP协议知识：前端学习调试必须掌握</a> <span class="text-muted">Microi风闲</span> <a class="tag" taget="_blank" href="/search/%E3%80%90%E5%85%A8%E6%A0%88%E3%80%91%E5%85%A8%E6%A0%88%E5%BC%80%E5%8F%91/1.htm">【全栈】全栈开发</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E8%AF%95/1.htm">调试</a> <div>文章目录前言一、HTTP协议基础1.1HTTP协议概述1.2HTTP工作流程二、HTTP请求详解2.1请求结构2.2请求方法（HTTPMethods）2.3请求头（RequestHeaders）2.4请求参数三、HTTP响应详解3.1响应结构3.2状态码（StatusCodes）3.3响应头（ResponseHeaders）3.4响应体（ResponseBody）四、HTTP高级特性4.1持久连接</div> </li> <li><a href="/article/1930730570392858624.htm" title="【前端学习笔记】Redux" target="_blank">【前端学习笔记】Redux</a> <span class="text-muted">Love__Tay</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录前言Redux1简介2笔记创建一个ReduxStore从ReduxStore获取状态分发ActionEvent在Store里处理Action使用Switch语句处理多个Actions使用const声明ActionTypes注册Store监听器组合多个Reducers发送ActionData给Store使用中间件处理异步操作前言前端开发库学习笔记，仅供参考交流，如有侵权，请联系删除。Redu</div> </li> <li><a href="/article/1928179008613183488.htm" title="《前端学习》-css之border-image记录" target="_blank">《前端学习》-css之border-image记录</a> <span class="text-muted">颠沛流离笑忘书</span> <a class="tag" taget="_blank" href="/search/%E8%8F%9C%E9%B8%9F/1.htm">菜鸟</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>border-image:设置图像用作围绕元素的边框，必须要先设置border属性才能起作用。border-image的三大部分：1、用作边框的图像：border-image-source属性；定义：规定边框使用的图像，代替border-style属性中设置的边框样式，如果值为“none”,或者图像无法显示，则使用border-style设置的边框样式，可使用绝对路径与相对路径，例：div{bor</div> </li> <li><a href="/article/1928059877188497408.htm" title="JavaScript- 4.3 轮播图实现指南" target="_blank">JavaScript- 4.3 轮播图实现指南</a> <span class="text-muted">Yvonne爱编码</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/%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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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> <div>本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。HTML和CSS系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！本文实现了两种轮播图，大家可以都试一下！系列文章目录JavaScript-1.1行内、内部、外部三种引用方式JavaScrip</div> </li> <li><a href="/article/1926203263179354112.htm" title="前端学习 后端工程师 #2" target="_blank">前端学习 后端工程师 #2</a> <span class="text-muted">好学且牛逼的马</span> <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>#2JAVAweb知识点回顾#1前端三大件htmlcssjs（看的懂基础语法即可）4.DOM（前端底层原理了解即可）网页编程接口抽象成对象模型DOM事件DOM树动态操作->5.dom是bom的一部分DOM是Web开发的核心机制之一，通过将网页结构化，使JavaScript能高效控制页面动态行为。现代框架（如React、Vue）虽封装了部分DOM操作细节，但底层仍依赖DOM原理，理解DOM是前端开发</div> </li> <li><a href="/article/1925923258117451776.htm" title="JavaScript- 1.1 行内、内部、外部三种引用方式" target="_blank">JavaScript- 1.1 行内、内部、外部三种引用方式</a> <span class="text-muted">Yvonne爱编码</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/HBuilder/1.htm">HBuilder</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/javascript/1.htm">javascript</a> <div>本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。HTML和CSS系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！系列文章目录JavaScript-1.1行内、内部、外部三种引用方式JavaScript-1.2ECMA基本语法和控制流Jav</div> </li> <li><a href="/article/1925919856088117248.htm" title="CSS-5.1 Transition 过渡" target="_blank">CSS-5.1 Transition 过渡</a> <span class="text-muted">Yvonne爱编码</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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/HBuilder/1.htm">HBuilder</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！系列文章目录CSS-1.1css选择器CSS-2.1实战之图文混排、表格、表单、学校官网一级导航栏CSS-3.1盒子模型-块级元素、行</div> </li> <li><a href="/article/1924886913680994304.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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%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>一什么是设计模式设计模式（Designpattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。二设计原则要学会设计模式，首先要了解设计模式所依托的设计原则：（1）单一职责原则（SRP原则）：一个对象（方法）只做一件事情。运用的设计模式：代理模式，单例模式，装饰者模式等。（2）最少知识原则（LKP原则）</div> </li> <li><a href="/article/1924195978252972032.htm" title="WEB前端学习JAVA的一些建议" target="_blank">WEB前端学习JAVA的一些建议</a> <span class="text-muted">caperxi</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%9A%84Java%E4%B9%8B%E8%B7%AF%EF%BC%9ADOM/1.htm">前端开发的Java之路：DOM</a><a class="tag" taget="_blank" href="/search/%E5%88%B0/1.htm">到</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/%E7%9A%84%E8%B7%A8%E7%95%8C%E7%AC%94%E8%AE%B0/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>作为前端开发者转型Java，需结合已有编程思维（如JS异步、组件化），聚焦Java核心差异（强类型、JVM、框架生态），以**“项目驱动+前后端联动”**加速上手。一、学习资源优化（前端友好型）1.快速入门：语法+核心特性（1-2周）视频课（B站免费）：黑马Java基础（3天速通）：重点看「面向对象」「异常处理」「集合框架」，对比JS的类、Promise异常、数组操作（如ArrayListvsJS</div> </li> <li><a href="/article/1917547531445792768.htm" title="2025.3.29-2025.8.29前端学习计划" target="_blank">2025.3.29-2025.8.29前端学习计划</a> <span class="text-muted">jjjjjjjjj¢</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>详细学习计划（4月-8月，每周安排）目标：在5个月内掌握Vue3源码、TypeScript高级用法、微前端（qiankun）、Node.js、前端性能优化、地图&WebGL。4月：Vue3源码&TypeScript高级目标：深入理解Vue3响应式原理&熟练TypeScript类型进阶，能编写高质量前端代码。Week1（4.1-4.7）：Vue3响应式原理✅Vue3reactive&ref实现原理✅</div> </li> <li><a href="/article/1916184636829003776.htm" title="前端学习笔记之5 静态页面练习(登录)" target="_blank">前端学习笔记之5 静态页面练习(登录)</a> <span class="text-muted">庞仕山</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/html/1.htm">html</a> <div>引言:博主目前是一名iOS开发者,所会的语言有Objective-C和Swift,目前正在学习前端;这篇文章只是作为我的笔记发在这里,供自己业余时间看看;全是很基础的东西,看到的小伙伴酌情略过吧^_^效果图:1.代码-HTML登录欢迎登录下次自动登录忘记密码?登录还没账号?马上注册社交账号登录2.代码-CSS*{padding:0px;margin:0px;}body{background-col</div> </li> <li><a href="/article/1915739127374999552.htm" title="前端学习之CSS---定位、锚点、精灵图、浮动、窗口自适应" target="_blank">前端学习之CSS---定位、锚点、精灵图、浮动、窗口自适应</a> <span class="text-muted">Jonahr</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>定位、锚点、精灵图、浮动、窗口自适应一、定位—positionposition:static/absolute/relative/fixed/stickystatic:默认值absolute:绝对定位，脱离文档流，当没有父元素或者父元素没有定位，参照物为浏览器窗口的第一屏有父元素且父元素有定位时，参照物为父元素relative:相对定位，不脱离文档流，相对于自己的初始位置fixed:固定定位，脱离</div> </li> <li><a href="/article/1915287041344598016.htm" title="一些实用的网站...持续更新" target="_blank">一些实用的网站...持续更新</a> <span class="text-muted">吴_知遇</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>文章目录学习CursorAIIDE额外的网站学习英语的网站学习编程的网站学习Cursor链接：Cursor入门教程链接：前端学习_MDN链接：极客学习网站(python)_需要付费链接：可视化的学习代码网站——codedexAIIDE国内第一款AIIDE产品TraeAI，让AI融入到了编码阶段中，掌握AI编程技能，不仅能够应对未来的技术变革，还能在竞争激烈的市场中脱颖而出。支持用户免费使用Clau</div> </li> <li><a href="/article/1915226161600851968.htm" title="学习记录：DAY13" target="_blank">学习记录：DAY13</a> <span class="text-muted">2301_79760424</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E6%97%A5%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">每日学习记录</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>Vue前端学习之旅：工程化、ElementPlus与路由配置前言有两天没更新blog了，不是因为我懒哈，主要是确实没有学什么新东西。昨天做前端的时候被狠狠卡住了，因为不会构建Vue工程。所以花点时间学学前端，大概两到三天。日程2：00起床，写了一会接口文档，开始学习前端。18:00，吃了顿饭，回来继续。经典修bug不看报错位置，找半天问题发现找错地方了22:00，快进了一些地方，来写写要点。学习内</div> </li> <li><a href="/article/1911468873698308096.htm" title="前端学习——nodejs篇" target="_blank">前端学习——nodejs篇</a> <span class="text-muted">每月一瓶米诺地尔</span> <a class="tag" taget="_blank" href="/search/apaas%E7%BA%BF%E6%90%AD%E5%BB%BA/1.htm">apaas线搭建</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><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>是的，当你实例化一个类时，会自动执行该类的构造函数（constructor）。例如：constBaseService=require("./Base");classStoreServiceextendsBaseService{constructor(data={}){data.model="store";super(data);}//获取所有门店idasyncfindOneByStoreId(st</div> </li> <li><a href="/article/1908925684399534080.htm" title="裸辞后找工作有多难？分享个人经历+面经+学习路线【内含免费下载初级前端面试题】- 回忆我的2023" target="_blank">裸辞后找工作有多难？分享个人经历+面经+学习路线【内含免费下载初级前端面试题】- 回忆我的2023</a> <span class="text-muted">前端Jerry_Zheng</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%88%86%E4%BA%AB/1.htm">前端面试分享</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>个人博客主页一个努力学习的程序猿专栏：HTML和CSSJavaScriptjQueryVueVue3ReactTypeScriptuni-appLinux前端面试分享前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)前端踩坑日记（ElementUI）重要的说明放在前面（“免责声明”）：因为大家也都知道面试的时候，一个问题肯定会有多</div> </li> <li><a href="/article/92.htm" title="log4j对象改变日志级别" target="_blank">log4j对象改变日志级别</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/level/1.htm">level</a><a class="tag" taget="_blank" href="/search/log4j%E5%AF%B9%E8%B1%A1%E5%90%8D%E7%A7%B0/1.htm">log4j对象名称</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E7%BA%A7%E5%88%AB/1.htm">日志级别</a> <div>log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l</div> </li> <li><a href="/article/219.htm" title="elk+redis 搭建nginx日志分析平台" target="_blank">elk+redis 搭建nginx日志分析平台</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/kibana/1.htm">kibana</a><a class="tag" taget="_blank" href="/search/logstash/1.htm">logstash</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l</div> </li> <li><a href="/article/346.htm" title="Yii2设置时区" target="_blank">Yii2设置时区</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/timezone/1.htm">timezone</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较</div> </li> <li><a href="/article/473.htm" title="js实现前台动态添加文本框，后台获取文本框内容" target="_blank">js实现前台动态添加文本框，后台获取文本框内容</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a> <div> &lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://w</div> </li> <li><a href="/article/600.htm" title="持续集成工具" target="_blank">持续集成工具</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a> <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行</div> </li> <li><a href="/article/727.htm" title="数据结构哈希表(hash)总结" target="_blank">数据结构哈希表(hash)总结</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。 &nbsp; </div> </li> <li><a href="/article/854.htm" title="乱七八糟" target="_blank">乱七八糟</a> <span class="text-muted">程序员是怎么炼成的</span> <div>eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件 &nbsp;后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/ &nbsp; jvm博客： http://yunshen0909.iteye.com/blog/2</div> </li> <li><a href="/article/981.htm" title="职场人伤害了“上司” 怎样弥补" target="_blank">职场人伤害了“上司” 怎样弥补</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div> 由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，</div> </li> <li><a href="/article/1108.htm" title="深入浅出url编码" target="_blank">深入浅出url编码</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a> <div>出处：http://blog.csdn.net/yzhz&nbsp; 杨争&nbsp;&nbsp; http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的</div> </li> <li><a href="/article/1235.htm" title="建表后创建表的约束关系和增加表的字段" target="_blank">建表后创建表的约束关系和增加表的字段</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%9A%84%E7%BA%A6%E6%9D%9F%E5%85%B3%E7%B3%BB/1.htm">标的约束关系</a><a class="tag" taget="_blank" href="/search/%E5%A2%9E%E5%8A%A0%E8%A1%A8%E7%9A%84%E5%AD%97%E6%AE%B5/1.htm">增加表的字段</a> <div>&nbsp; 下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式 &nbsp; 1,增加字段(student表中增加 姓名字段) &nbsp; alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10); &nbsp; &nb</div> </li> <li><a href="/article/1362.htm" title="Uploadify 3.2 参数属性、事件、方法函数详解" target="_blank">Uploadify 3.2 参数属性、事件、方法函数详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/uploadify/1.htm">uploadify</a> <div>一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路</div> </li> <li><a href="/article/1489.htm" title="精通Oracle10编程SQL(16)使用LOB对象" target="_blank">精通Oracle10编程SQL(16)使用LOB对象</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR</div> </li> <li><a href="/article/1616.htm" title="【Resin一】Resin服务器部署web应用" target="_blank">【Resin一】Resin服务器部署web应用</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/resin/1.htm">resin</a> <div>工作中，在Resin服务器上部署web应用，通常有如下三种方式： &nbsp; 配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app &nbsp; 在resin.xml中,可以为一个host配置多个web-app &nbsp; &lt;cluster id=&quot;app&q</div> </li> <li><a href="/article/1743.htm" title="red5简介及基础知识" target="_blank">red5简介及基础知识</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a> <div>&nbsp; 简介 &nbsp; Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正</div> </li> <li><a href="/article/1870.htm" title="angular.fromJson" target="_blank">angular.fromJson</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+%E5%AE%98%E6%96%B9API/1.htm">AngularJS 官方API</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a> <div>angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: &lt;!DOCTYPE HTML&gt; &lt;h</div> </li> <li><a href="/article/1997.htm" title="java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I" target="_blank">java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ</div> </li> <li><a href="/article/2124.htm" title="web实时通讯" target="_blank">web实时通讯</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路</div> </li> <li><a href="/article/2251.htm" title="[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?" target="_blank">[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a> <div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思 &nbsp;&nbsp;&nbsp; 如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢? &nbsp;&nbsp;</div> </li> <li><a href="/article/2378.htm" title="oracle 外部表" target="_blank">oracle 外部表</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%A4%96%E9%83%A8%E8%A1%A8/1.htm">外部表</a><a class="tag" taget="_blank" href="/search/external+tables/1.htm">external tables</a> <div>&nbsp;&nbsp;&nbsp; oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho</div> </li> <li><a href="/article/2505.htm" title="aop相关的概念及配置" target="_blank">aop相关的概念及配置</a> <span class="text-muted">daysinsun</span> <a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a> <div>切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环</div> </li> <li><a href="/article/2632.htm" title="初一上学期难记忆单词背诵第二课" target="_blank">初一上学期难记忆单词背诵第二课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么&nbsp; China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da</div> </li> <li><a href="/article/2759.htm" title="Linux日志分析常用命令" target="_blank">Linux日志分析常用命令</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a> <div>1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询&quot;get&quot;字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照</div> </li> <li><a href="/article/2886.htm" title="JSONP 原理分析" target="_blank">JSONP 原理分析</a> <span class="text-muted">fantasy2005</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jsonp+%E8%B7%A8%E5%9F%9F/1.htm">jsonp 跨域</a> <div>转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的</div> </li> <li><a href="/article/3013.htm" title="使用connect by进行级联查询" target="_blank">使用connect by进行级联查询</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E5%AD%90/1.htm">父子</a><a class="tag" taget="_blank" href="/search/Connect+by/1.htm">Connect by</a><a class="tag" taget="_blank" href="/search/%E7%BA%A7%E8%81%94/1.htm">级联</a> <div>使用connect by进行级联查询 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：</div> </li> <li><a href="/article/3140.htm" title="一个不错的能将HTML表格导出为excel,pdf等的jquery插件" target="_blank">一个不错的能将HTML表格导出为excel,pdf等的jquery插件</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/jquery%E6%8F%92%E4%BB%B6/1.htm">jquery插件</a> <div>发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf &lt;html&gt; &lt;head&gt; &lt;title&gt;Export html table to excel an</div> </li> <li><a href="/article/3267.htm" title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</a> <div>关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，</div> </li> <li><a href="/article/3394.htm" title="如何禁止页面缓存" target="_blank">如何禁止页面缓存</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader(&quot;Pragma&quot;,&quot;No-cache&quot;); response.setHeader(&quot;Cache-Control&quot;,&quot;no-cach</div> </li> <li><a href="/article/3521.htm" title="以代码的方式管理quartz定时任务的暂停、重启、删除、添加等" target="_blank">以代码的方式管理quartz定时任务的暂停、重启、删除、添加等</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">定时任务管理</a><a class="tag" taget="_blank" href="/search/spring-quartz/1.htm">spring-quartz</a> <div>&nbsp; &nbsp; &nbsp; 【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不</div> </li> <li><a href="/article/3648.htm" title="EXT实例" target="_blank">EXT实例</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div>&nbsp; （1） 增加一个按钮 &nbsp; JSP: &nbsp; &lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;% String path = request.getContextPath(); Stri</div> </li> <li><a href="/article/3775.htm" title="数学学习在计算机研究领域的作用和重要性" target="_blank">数学学习在计算机研究领域的作用和重要性</a> <span class="text-muted">xjnine</span> <a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.&nbsp;&nbsp;无奈本人实在见地</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>