慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记
Html和CSS的关系
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
标签的语法
1. 标签由英文尖括号<和>括起来，如就是一个标签。
2. html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
如：
（1）
（2）
（3）
3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么
必须放在的前面。如下图所示。
4. HTML标签不区分大小写，和是一样的，但建议小写，因为大部分程序员都以小写为准。
认识html文件基本结构
这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。
...
...
代码讲解：
1. 称为根标签，所有的网页标签都在中。
2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
</code></pre>
<h2 id="认识head标签">认识head标签</h2>
<blockquote>
<p>做得好，下面我们来了解一下标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。</p>
<p>下面这些标签可用在 head 部分：</p>
</blockquote>
<pre><code><head>
<title>...
标签：在<title>和 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
例如：
hello world
标签的内容“hello world”会在浏览器中的标题栏上显示出来
</code></pre>
<h2 id="了解html的代码注释">了解HTML的代码注释</h2>
<blockquote>
<p>什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。</p>
<p>语法：</p>
</blockquote>
<pre><code><!--注释文字 -->
</code></pre>
<blockquote>
<p>注释代码是不会在结果窗口中显示出来的。</p>
</blockquote>
<h2 id="语义化让你的网页更好的被搜索引擎理解">语义化，让你的网页更好的被搜索引擎理解</h2>
<blockquote>
<p>在这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。</p>
<p>标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。</p>
<p>讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？</p>
<ol>
<li><p>更容易被搜索引擎收录。</p></li>
<li><p>更容易让屏幕阅读器读出网页内容。</p></li>
</ol>
</blockquote>
<h2 id="了解标签为你的网页添加标题">了解标签，为你的网页添加标题</h2>
<pre><code>文章的段落用<p>标签，那么文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。
注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1>
h1-h6标签的默认样式：
标签代码：
<body>
<h1>一级标题</h1>
<h1>二级标题</h1>
<h1>三级标题</h1>
<h1>四级标题</h1>
<h1>五级标题</h1>
<h1>六级标题</h1>
</body>
</code></pre>
<blockquote>
<p>可以看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。</p>
</blockquote>
<h2 id="加入强调语气使用strong和em标签">加入强调语气，使用strong和em标签</h2>
<pre><code>有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
语法：
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
<em>的内容在浏览中显示为斜体，<strong>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。
</code></pre>
<h2 id="使用span标签为文字设置单独样式">使用span标签为文字设置单独样式</h2>
<pre><code>这一小节讲解<span>标签，我们对<em>、<strong>、<span>这三个标签进行一下总结：
1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。
如下面例子：
<p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
语法：
<span>文本</span>
</code></pre>
<h2 id="q标签短文本引用">q标签，短文本引用</h2>
<pre><code>想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。
语法：
<q>引用文本</q>
如下面例子：
<p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p>
讲解：
1. 在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字，所以需要使用<q></q>实现引用。
2. 注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
</code></pre>
<h2 id="blockquote标签长文本引用">blockquote标签，长文本引用</h2>
<pre><code><blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。
如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<blockquote>。
语法:
<blockquote>引用文本</blockquote>
如下面例子：
<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>
浏览器对<blockquote>标签的解析是缩进样式。
</code></pre>
<h2 id="使用br标签分行显示文本">使用br标签分行显示文本</h2>
<blockquote>
<p>语法：</p>
</blockquote>
<pre><code>xhtml1.0写法：
<br />
html4.01写法：
<br>
</code></pre>
<blockquote>
<p>大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。</p>
</blockquote>
<pre><code>与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。
讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。
总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。
</code></pre>
<h2 id="为你的网页中添加一些空格">为你的网页中添加一些空格</h2>
<blockquote>
<p>在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入 。</p>
<p>语法：</p>
</blockquote>
<pre><code>
</code></pre>
<blockquote>
<p>在html代码中输入空格是不起作用的，</p>
</blockquote>
<h2 id="认识hr标签添加水平横线">认识hr标签，添加水平横线</h2>
<blockquote>
<p>在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code>html4.01版本 <hr>
xhtml1.0版本 <hr />
</code></pre></li>
<li><p>注意：</p> <pre><code>1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范
</code></pre></li>
</ul>
<h2 id="address标签为网页加入地址信息">address标签，为网页加入地址信息</h2>
<pre><code>一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><address>联系地址信息</address>
</code></pre></li>
<li><p>如：</p> <pre><code><address>文档编写：lilian 北京市西城区德外大街10号</address>
<address>
本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>
</address>
在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。
</code></pre></li>
</ul>
<h2 id="想加入一行代码吗使用code标签">想加入一行代码吗？使用code标签</h2>
<pre><code>在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法：
<code>代码语言</code>
注：如果是多行代码，可以使用<pre>标签。
</code></pre>
<h2 id="使用pre标签为你的网页加入大段代码">使用pre标签为你的网页加入大段代码</h2>
<pre><code>在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
</code></pre></li>
<li><p>如下代码：</p> <pre><code><pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<br>签，空格需要输入
注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
</code></pre></li>
</ul>
<h2 id="使用ul添加新闻信息列表">使用ul，添加新闻信息列表</h2>
<blockquote>
<p>在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表。</p>
<p>这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><ul>
<li>信息</li>
<li>信息</li>
......
</ul>
</code></pre></li>
<li><p>举例：</p> <pre><code><ul>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
</code></pre></li>
</ul>
<blockquote>
<p>ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点</p>
</blockquote>
<h2 id="使用ol添加图书销售排行榜">使用ol，添加图书销售排行榜</h2>
<pre><code>如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><ol>
<li>信息</li>
<li>信息</li>
......
</ol>
</code></pre></li>
<li><p>举例：</p></li>
</ul>
<blockquote>
<p>下面是一个热点课程下载排行榜：</p>
</blockquote>
<pre><code> <ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，
</code></pre>
<h2 id="认识div在排版中的作用">认识div在排版中的作用</h2>
<pre><code>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><div>…</div>
</code></pre></li>
<li><p>确定逻辑部分：</p> <pre><code>什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
</code></pre></li>
</ul>
<h2 id="给div命名使逻辑更加清晰">给div命名，使逻辑更加清晰</h2>
<pre><code> 在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><div id="版块名称">…</div>
</code></pre></li>
</ul>
<h2 id="table标签认识网页上的表格">table标签，认识网页上的表格</h2>
<blockquote>
<p>有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。</p>
</blockquote>
<ul>
<li><p>创建表格的四个元素：</p> <pre><code>table、tbody、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数。
</code></pre></li>
<li><p>总结：</p> <p>1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的</p> <p>2、表头，也就是th标签中的文本默认为粗体并且居中显示</p></li>
</ul>
<h2 id="用css样式为表格加入边框">用css样式，为表格加入边框</h2>
<blockquote>
<p>Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。</p>
<p>在右侧代码编辑器中添加如下代码：</p>
</blockquote>
<pre><code> <style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
</code></pre>
<blockquote>
<p>上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。</p>
</blockquote>
<h2 id="caption标签为表格添加标题和摘要">caption标签，为表格添加标题和摘要</h2>
<blockquote>
<p>表格还是需要添加一些标签进行优化，可以添加标题和摘要</p>
</blockquote>
<ul>
<li>摘要</li>
</ul>
<blockquote>
<p>摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。</p>
</blockquote>
<pre><code> 语法：<table summary="表格简介文本">
</code></pre>
<ul>
<li>标题</li>
</ul>
<blockquote>
<p>用以描述表格内容，标题的显示位置：表格上方。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
</code></pre></li>
</ul>
<h2 id="使用a标签链接到另一个页面">使用a标签，链接到另一个页面</h2>
<pre><code>使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
</code></pre></li>
<li><p>例如：</p> <pre><code><a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>
</code></pre></li>
</ul>
<blockquote>
<p>上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。</p>
<p>title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。</p>
</blockquote>
<ul>
<li>注意：</li>
</ul>
<blockquote>
<p>还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。</p>
</blockquote>
<h2 id="在新建浏览器窗口中打开链接">在新建浏览器窗口中打开链接</h2>
<pre><code> <a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
</code></pre>
<ul>
<li><p>如下代码：</p> <pre><code><a href="目标网址" target="_blank">click here!</a>
</code></pre></li>
</ul>
<h2 id="使用mailto在网页中链接email地址">使用mailto在网页中链接Email地址</h2>
<pre><code><a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。
</code></pre>
<ul>
<li>注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。</li>
</ul>
<h2 id="认识img标签为网页插入图片">认识img标签，为网页插入图片</h2>
<pre><code>在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
</code></pre></li>
<li><p>举例：</p> <pre><code><img src = "myimage.gif" alt = "My Image" title = "My Image" />
</code></pre></li>
<li><p>讲解：</p> <p>1、src：标识图像的位置；</p> <p>2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；</p> <p>3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；</p> <p>4、图像可以是GIF，PNG，JPEG格式的图像文件。</p></li>
</ul>
<h2 id="使用表单标签与用户交互">使用表单标签，与用户交互</h2>
<blockquote>
<p>网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><form method="传送方式" action="服务器文件">
</code></pre></li>
<li><p>讲解：</p> <pre><code>1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）。
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label>
<input type="password" name="pass" />
</form>
</code></pre></li>
<li><p>注意:</p> <pre><code>1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。
</code></pre></li>
</ul>
<h2 id="文本输入框密码输入框">文本输入框、密码输入框</h2>
<blockquote>
<p>当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><form>
<input type="text/password" name="名称" value="文本" />
</form>
</code></pre></li>
<li><p>1、type：</p> <pre><code>当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
</code></pre></li>
<li><p>2、name：为文本框命名，以备后台程序ASP 、PHP使用。</p></li>
<li><p>3、value：为文本输入框设置默认值。(一般起到提示作用)</p></li>
<li><p>举例：</p> <pre><code><form>
姓名：
<input type="text" name="myName">
<br/>
密码：
<input type="password" name="pass">
</form>
</code></pre></li>
</ul>
<h2 id="文本域支持多行文本输入">文本域，支持多行文本输入</h2>
<pre><code>当用户需要在表单中输入大段文字时，需要用到文本输入域。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><textarea rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。
</code></pre></li>
<li><p>举例：</p> <pre><code><form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
</form>
</code></pre></li>
</ul>
<h2 id="使用单选框复选框让用户选择">使用单选框、复选框，让用户选择</h2>
<pre><code>在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
</code></pre>
<ul>
<li><p>语法：</p> <pre><code><input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
</code></pre></li>
<li><p>注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。</p></li>
</ul>
<h2 id="使用下拉列表框节省空间">使用下拉列表框，节省空间</h2>
<blockquote>
<p>下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。</p>
</blockquote>
<ul>
<li><p>讲解：</p></li>
<li><p>1、value：</p> <pre><code><option value='提交值'>选项显示的值</option>
</code></pre></li>
<li><p>2、selected=”selected”：</p></li>
</ul>
<blockquote>
<p>设置selected=”selected”属性，则该选项就被默认选中。</p>
</blockquote>
<h2 id="使用下拉列表框进行多选">使用下拉列表框进行多选</h2>
<pre><code> 下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
</code></pre>
<h2 id="使用提交按钮提交数据">使用提交按钮，提交数据</h2>
<blockquote>
<p>在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><input type="submit" value="提交">
</code></pre></li>
</ul>
<blockquote>
<p>type：只有当type值设置为submit时，按钮才有提交作用</p>
<p>value：按钮上显示的文字</p>
</blockquote>
<h2 id="使用重置按钮重置表单信息">使用重置按钮，重置表单信息</h2>
<blockquote>
<p>当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><input type="reset" value="重置">
</code></pre></li>
</ul>
<blockquote>
<p>type：只有当type值设置为reset时，按钮才有重置作用</p>
<p>value：按钮上显示的文字</p>
</blockquote>
<h2 id="form表单中的label标签">form表单中的label标签</h2>
<blockquote>
<p>小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签–label，这一小节就来揭晓它的作用。</p>
<p>label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code><label for="控件id名称">
</code></pre></li>
<li><p>注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。</p></li>
<li><p>例子：</p> <pre><code><form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
</code></pre></li>
</ul>
<h2 id="认识css样式">认识CSS样式</h2>
<blockquote>
<p>CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。</p>
</blockquote>
<ul>
<li><p>如下列代码：</p> <pre><code>p{
font-size:12px;
color:red;
font-weight:bold;
}
</code></pre></li>
</ul>
<blockquote>
<p>使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。</p>
</blockquote>
<h2 id="css样式的优势">CSS样式的优势</h2>
<blockquote>
<p>为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就 可以通过设置样式来设置，而且只需要编写一条css样式语句。</p>
<p>第一步：把这三个短语用<span></span>括起来。</p>
<p>第二步：写入下列代码：</p>
</blockquote>
<pre><code> span{
color:red;
}
</code></pre>
<blockquote>
<p>观察结果窗口文字的颜色是否变为红色了。</p>
</blockquote>
<h2 id="css代码语法">CSS代码语法</h2>
<blockquote>
<p>css 样式由选择符和声明组成，而声明又由属性和值组成</p>
<p>选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。</p>
<p>声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：</p>
</blockquote>
<pre><code> p{font-size:12px;color:red;}
</code></pre>
<ul>
<li><p>注意：</p> <p>1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。</p> <p>2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：</p> <pre><code>p{
font-size:12px;
color:red;
}
</code></pre></li>
</ul>
<h2 id="css注释代码">CSS注释代码</h2>
<blockquote>
<p>就像在Html的注释一样，在CSS中也有注释语句：用/<em>注释语句</em>/来标明（Html中使用 )。</p>
</blockquote>
<h2 id="内联式css样式直接写在现有的html标签中">内联式css样式，直接写在现有的HTML标签中</h2>
<blockquote>
<p>CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。</p>
<p>内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：</p>
</blockquote>
<pre><code> <p style="color:red">这里文字是红色。</p>
</code></pre>
<ul>
<li><p>注意要写在元素的开始标签里，下面这种写法是错误的：</p> <pre><code><p>这里文字是红色。</p style="color:red">
</code></pre></li>
</ul>
<blockquote>
<p>并且css样式代码要写在style=”“双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：</p>
</blockquote>
<pre><code> <p style="color:red;font-size:12px">这里文字是红色。</p>
</code></pre>
<h2 id="嵌入式css样式写在当前的文件中">嵌入式css样式，写在当前的文件中</h2>
<pre><code> 现在有一任务，把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情（为每一个<span>标签加入sytle="font-size:18px"语句），本小节讲解一种新的方法嵌入式css样式来实现这个任务。
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。
</code></pre>
<h2 id="外部式css样式写在单独的一个文件中">外部式css样式，写在单独的一个文件中</h2>
<pre><code> 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
</code></pre>
<h2 id="三种方法的优先级">三种方法的优先级</h2>
<blockquote>
<p>有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况</p>
<p>1、使用内联式CSS设置“超酷的互联网”文字为粉色。</p>
<p>2、然后使用嵌入式CSS来设置文字为红色。</p>
<p>3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。</p>
<p>但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式</p>
<p>但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，</p>
</blockquote>
<h2 id="什么是选择器">什么是选择器？</h2>
<blockquote>
<p>每一条css样式声明（定义）由两部分组成，形式如下：</p>
</blockquote>
<pre><code> 选择器{
样式;
}
</code></pre>
<blockquote>
<p>在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。</p>
</blockquote>
<h2 id="标签选择器">标签选择器</h2>
<pre><code> 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
</code></pre>
<h2 id="类选择器">类选择器</h2>
<blockquote>
<p>类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。</p>
</blockquote>
<ul>
<li><p>语法：</p> <pre><code>.类选器名称{css样式代码;}
</code></pre></li>
<li><p>注意：</p> <pre><code>1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
</code></pre></li>
<li><p>使用方法：</p> <pre><code>第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/
</code></pre></li>
</ul>
<h2 id="id选择器">ID选择器</h2>
<blockquote>
<p>在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：</p>
</blockquote>
<pre><code>1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
</code></pre>
<h2 id="类和id选择器的区别">类和ID选择器的区别</h2>
<blockquote>
<p>学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：</p>
</blockquote>
<ul>
<li>相同点：可以应用于任何元素</li>
<li><p>不同点：</p> <p>1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。</p></li>
<li><p>下面代码是正确的：</p> <pre><code><p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
</code></pre></li>
<li><p>而下面代码是错误的：</p> <pre><code><p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
</code></pre></li>
<li><p>2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。</p></li>
<li><p>下面的代码是正确的(完整代码见右侧代码编辑器)</p> <pre><code>.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
</code></pre></li>
</ul>
<blockquote>
<p>上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。</p>
</blockquote>
<ul>
<li><p>下面的代码是不正确的(完整代码见右侧代码编辑器)</p> <pre><code>#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>
</code></pre></li>
</ul>
<blockquote>
<p>上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。</p>
</blockquote>
<h2 id="子选择器">子选择器</h2>
<blockquote>
<p>还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：</p>
</blockquote>
<pre><code> .food>li{border:1px solid red;}
</code></pre>
<blockquote>
<p>这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。</p>
</blockquote>
<h2 id="包含后代选择器">包含(后代)选择器</h2>
<ul>
<li><p>包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：</p> <pre><code>.first span{color:red;}
</code></pre></li>
</ul>
<blockquote>
<p>这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。</p>
<p>请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。</p>
</blockquote>
<p>总结：>作用于元素的第一代后代，空格作用于元素的所有后代。</p>
<h2 id="通用选择器">通用选择器</h2>
<blockquote>
<p>通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：</p>
</blockquote>
<pre><code> * {color:red;}
</code></pre>
<h2 id="伪类选择符">伪类选择符</h2>
<blockquote>
<p>更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：</p>
</blockquote>
<pre><code> a:hover{color:red;}
</code></pre>
<blockquote>
<p>上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。</p>
</blockquote>
<ul>
<li><p>关于伪选择符：</p> <p>关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。</p></li>
</ul>
<h2 id="分组选择符">分组选择符</h2>
<blockquote>
<p>当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：</p>
</blockquote>
<pre><code> h1,span{color:red;}
</code></pre>
<blockquote>
<p>它相当于下面两行代码：</p>
</blockquote>
<pre><code> h1{color:red;}
span{color:red;}
</code></pre>
<h2 id="继承">继承</h2>
<blockquote>
<p>CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。</p>
</blockquote>
<pre><code> p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
</code></pre>
<blockquote>
<p>可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;</p>
</blockquote>
<pre><code> p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
</code></pre>
<blockquote>
<p>在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。</p>
</blockquote>
<h2 id="特殊性">特殊性</h2>
<blockquote>
<p>有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：</p>
</blockquote>
<pre><code> p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
</code></pre>
<blockquote>
<p>p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。</p>
</blockquote>
<ul>
<li><p>下面是权值的规则：</p> <pre><code>标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
</code></pre></li>
<li><p>注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。</p></li>
</ul>
<h2 id="层叠">层叠</h2>
<blockquote>
<p>我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。</p>
<p>层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。</p>
</blockquote>
<ul>
<li><p>如下面代码:</p> <pre><code>p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
</code></pre></li>
</ul>
<blockquote>
<p>最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。</p>
<p>所以前面的css样式优先级就不难理解了：</p>
<p>内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。</p>
</blockquote>
<h2 id="重要性">重要性</h2>
<blockquote>
<p>我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。</p>
</blockquote>
<ul>
<li><p>如下代码：</p> <pre><code>p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
</code></pre></li>
</ul>
<blockquote>
<p>这时 p 段落中的文本会显示的red红色。</p>
</blockquote>
<ul>
<li>注意：!important要写在分号的前面</li>
</ul>
<blockquote>
<p>这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：<strong>浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式</strong>，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。</p>
</blockquote>
<h2 id="文字排版字体">文字排版–字体</h2>
<blockquote>
<p>我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。</p>
</blockquote>
<pre><code> body{font-family:"宋体";}
</code></pre>
<blockquote>
<p>这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）</p>
<p>现在一般网页喜欢设置“微软雅黑”，如下代码：</p>
</blockquote>
<pre><code> body{font-family:"Microsoft Yahei";}
</code></pre>
<ul>
<li><p>或</p> <pre><code>body{font-family:"微软雅黑";}
</code></pre></li>
<li><p>注意：第一种方法比第二种方法兼容性更好一些。</p></li>
</ul>
<blockquote>
<p>因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。</p>
</blockquote>
<h2 id="文字排版字号颜色">文字排版–字号、颜色</h2>
<blockquote>
<p>可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：</p>
</blockquote>
<pre><code> body{font-size:12px;color:#666}
</code></pre>
<h2 id="文字排版粗体">文字排版–粗体</h2>
<blockquote>
<p>我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。</p>
</blockquote>
<pre><code> p span{font-weight:bold;}
</code></pre>
<blockquote>
<p>在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。</p>
</blockquote>
<h2 id="文字排版斜体">文字排版–斜体</h2>
<blockquote>
<p>以下代码可以实现文字以斜体样式在浏览器中显示：</p>
</blockquote>
<pre><code> p a{font-style:italic;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
</code></pre>
<h2 id="文字排版下划线">文字排版–下划线</h2>
<blockquote>
<p>有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：</p>
</blockquote>
<pre><code> p a{text-decoration:underline;}
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
</code></pre>
<h2 id="文字排版删除线">文字排版–删除线</h2>
<blockquote>
<p>如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到</p>
<p>原价上的删除线使用下面代码就可以实现：</p>
</blockquote>
<pre><code> .oldPrice{text-decoration:line-through;}
</code></pre>
<h2 id="段落排版缩进">段落排版–缩进</h2>
<blockquote>
<p>中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：</p>
</blockquote>
<pre><code> p{text-indent:2em;}
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
</code></pre>
<ul>
<li>注意：2em的意思就是文字的2倍大小。</li>
</ul>
<h2 id="段落排版行间距行高">段落排版–行间距（行高）</h2>
<blockquote>
<p>这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。</p>
</blockquote>
<pre><code> p{line-height:1.5em;}
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</code></pre>
<h2 id="段落排版中文字间距字母间距">段落排版–中文字间距、字母间距</h2>
<p><strong>中文字间隔、字母间隔设置：</strong></p>
<blockquote>
<p>如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：</p>
</blockquote>
<pre><code> h1{
letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>
</code></pre>
<ul>
<li><p>注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。</p></li>
<li><p>单词间距设置：</p></li>
</ul>
<blockquote>
<p>如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：</p>
</blockquote>
<pre><code>h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
</code></pre>
<h2 id="段落排版对齐">段落排版–对齐</h2>
<blockquote>
<p>想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)</p>
</blockquote>
<pre><code> h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>
</code></pre>
<blockquote>
<p>同样可以设置居左：</p>
</blockquote>
<pre><code> h1{
text-align:left;
}
<h1>了不起的盖茨比</h1>
</code></pre>
<blockquote>
<p>还可以设置居右：</p>
</blockquote>
<pre><code> h1{
text-align:right;
}
<h1>了不起的盖茨比</h1>
</code></pre>
<h2 id="元素分类">元素分类</h2>
<blockquote>
<p>在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。</p>
</blockquote>
<ul>
<li><p>常用的块状元素有：</p> <pre><code><div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
</code></pre></li>
<li><p>常用的内联元素有：</p> <pre><code><a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
</code></pre></li>
<li><p>常用的内联块状元素有：</p> <pre><code><img>、<input>
</code></pre></li>
</ul>
<h2 id="元素分类块级元素">元素分类–块级元素</h2>
<pre><code> 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
</code></pre>
<h2 id="元素分类内联元素">元素分类–内联元素</h2>
<pre><code> 在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
<div>我要变成内联元素</div>
</code></pre>
<ul>
<li><p>内联元素特点：</p> <pre><code>1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
</code></pre></li>
</ul>
<h2 id="元素分类内联块状元素">元素分类–内联块状元素</h2>
<pre><code> 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
</code></pre>
<ul>
<li><p>inline-block 元素特点：</p> <p>1、和其他元素都在一行上；</p> <p>2、元素的高度、宽度、行高以及顶和底边距都可设置。</p></li>
</ul>
<h2 id="盒模型边框一">盒模型–边框（一）</h2>
<pre><code>盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
</code></pre>
<blockquote>
<p>如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：</p>
</blockquote>
<pre><code> div{
border:2px solid red;
}
</code></pre>
<blockquote>
<p>上面是 border 代码的缩写形式，可以分开写：</p>
</blockquote>
<pre><code> div{
border-width:2px;
border-style:solid;
border-color:red;
}
</code></pre>
<p><em>* 注意：*</em></p>
<ul>
<li><p>1、border-style（边框样式）常见样式有：</p> <pre><code>dashed（虚线）| dotted（点线）| solid（实线）。
</code></pre></li>
<li><p>2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:</p> <pre><code>border-color:#888;//前面的井号不要忘掉。
</code></pre></li>
<li><p>3、border-width（边框宽度）中的宽度也可以设置为：</p> <pre><code>sthin | medium | thick（但不是很常用），最常还是用象素（px）。
</code></pre></li>
</ul>
<h2 id="盒模型边框二">盒模型–边框（二）</h2>
<blockquote>
<p>现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：</p>
</blockquote>
<pre><code> div{border-bottom:1px solid red;}
</code></pre>
<blockquote>
<p>同样可以使用下面代码实现其它三边(上、右、左)边框的设置：</p>
</blockquote>
<pre><code> border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
</code></pre>
<h2 id="盒模型宽度和高度">盒模型–宽度和高度</h2>
<blockquote>
<p>盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。</p>
<p>因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。</p>
<p>元素的高度也是同理。</p>
</blockquote>
<ul>
<li><p>比如：</p></li>
<li><p>css代码：</p> <pre><code>div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
</code></pre></li>
<li><p>html代码：</p> <pre><code><body>
<div>文本内容</div>
</body>
</code></pre></li>
</ul>
<blockquote>
<p>元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型</p>
</blockquote>
<h2 id="盒模型填充">盒模型–填充</h2>
<blockquote>
<p>元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：</p>
</blockquote>
<pre><code> div{padding:20px 10px 15px 30px;}
</code></pre>
<blockquote>
<p>顺序一定不要搞混。可以分开写上面代码：</p>
</blockquote>
<pre><code> div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
</code></pre>
<blockquote>
<p>如果上、右、下、左的填充都为10px;可以这么写</p>
</blockquote>
<pre><code> div{padding:10px;}
</code></pre>
<blockquote>
<p>如果上下填充一样为10px，左右一样为20px，可以这么写：</p>
</blockquote>
<pre><code> div{padding:10px 20px;}
</code></pre>
<h2 id="盒模型边界">盒模型–边界</h2>
<blockquote>
<p>元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：</p>
</blockquote>
<pre><code>div{margin:20px 10px 15px 30px;}
</code></pre>
<blockquote>
<p>也可以分开写：</p>
</blockquote>
<pre><code> div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
</code></pre>
<blockquote>
<p>如果上右下左的边界都为10px;可以这么写：</p>
</blockquote>
<pre><code> div{ margin:10px;}
</code></pre>
<blockquote>
<p>如果上下边界一样为10px，左右一样为20px，可以这么写：</p>
</blockquote>
<pre><code> div{ margin:10px 20px;}
</code></pre>
<blockquote>
<p>总结一下：padding和margin的区别，padding在边框里，margin在边框外。</p>
</blockquote>
<h2 id="css布局模型">css布局模型</h2>
<pre><code> 清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
</code></pre>
<ul>
<li><p>在网页中，元素有三种布局模型：</p> <pre><code>1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
</code></pre></li>
</ul>
<h2 id="流动模型">流动模型</h2>
<blockquote>
<p>先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。</p>
</blockquote>
<ul>
<li><p>流动布局模型具有2个比较典型的特征：</p> <pre><code>第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
</code></pre></li>
</ul>
<h2 id="浮动模型">浮动模型</h2>
<blockquote>
<p>块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。</p>
<p>任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。</p>
</blockquote>
<pre><code> div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
</code></pre>
<blockquote>
<p>当然你也可以同时设置两个元素右浮动也可以实现一行显示。</p>
</blockquote>
<pre><code> div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
</code></pre>
<blockquote>
<p>又有小伙伴问了，设置两个元素一左一右可以实现一行显示吗？当然可以：</p>
</blockquote>
<pre><code> div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
</code></pre>
<h2 id="什么是层模型">什么是层模型？</h2>
<blockquote>
<p>什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。</p>
<p>如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。</p>
</blockquote>
<ul>
<li><p>层模型有三种形式：</p> <pre><code>1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
</code></pre></li>
</ul>
<h2 id="层模型绝对定位">层模型–绝对定位</h2>
<blockquote>
<p>如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。</p>
<p>如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。</p>
</blockquote>
<pre><code> div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
</code></pre>
<h2 id="层模型相对定位">层模型–相对定位</h2>
<blockquote>
<p>如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。</p>
</blockquote>
<ul>
<li><p>如下代码实现相对于以前位置向下移动50px，向右移动100px;</p> <pre><code>#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
</code></pre></li>
<li><p>什么叫做“偏移前的位置保留不动”呢？</p></li>
</ul>
<blockquote>
<p>大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：</p>
</blockquote>
<pre><code> <body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
</code></pre>
<blockquote>
<p>从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。</p>
</blockquote>
<h2 id="层模型固定定位">层模型–固定定位</h2>
<blockquote>
<p>fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。</p>
</blockquote>
<pre><code> #div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
....
</code></pre>
<h2 id="relative与absolute组合使用">Relative与Absolute组合使用</h2>
<blockquote>
<p>使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：</p>
<p>1、参照定位的元素必须是相对定位元素的前辈元素：</p>
</blockquote>
<pre><code><div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
</code></pre>
<blockquote>
<p>从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。</p>
<p>2、参照定位的元素必须加入position:relative;</p>
</blockquote>
<pre><code>#box1{
width:200px;
height:200px;
position:relative;
}
</code></pre>
<blockquote>
<p>3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。</p>
</blockquote>
<pre><code>#box2{
position:absolute;
top:20px;
left:30px;
}
</code></pre>
<blockquote>
<p>这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。</p>
</blockquote>
<h2 id="盒模型代码简写">盒模型代码简写</h2>
<blockquote>
<p>还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：</p>
</blockquote>
<pre><code>margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
</code></pre>
<blockquote>
<p>通常有下面三种缩写方法:</p>
<p>1、如果top、right、bottom、left的值相同，如下面代码：</p>
</blockquote>
<pre><code>margin:10px 10px 10px 10px;
</code></pre>
<blockquote>
<p>可缩写为：</p>
</blockquote>
<pre><code>margin:10px;
</code></pre>
<blockquote>
<p>2、如果top和bottom值相同、left和 right的值相同，如下面代码：</p>
</blockquote>
<pre><code>margin:10px 20px 10px 20px;
</code></pre>
<blockquote>
<p>可缩写为：</p>
</blockquote>
<pre><code>margin:10px 20px;
</code></pre>
<blockquote>
<p>3、如果left和right的值相同，如下面代码：</p>
</blockquote>
<pre><code>margin:10px 20px 30px 20px;
</code></pre>
<blockquote>
<p>可缩写为：</p>
</blockquote>
<pre><code>margin:10px 20px 30px;
</code></pre>
<blockquote>
<p>注意：padding、border的缩写方法和margin是一致的。</p>
</blockquote>
<h2 id="颜色值缩写">颜色值缩写</h2>
<blockquote>
<p>关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。</p>
<p>例子1：</p>
</blockquote>
<pre><code>p{color:#000000;}
</code></pre>
<blockquote>
<p>可以缩写为：</p>
</blockquote>
<pre><code>p{color: #000;}
</code></pre>
<blockquote>
<p>例子2：</p>
</blockquote>
<pre><code>p{color: #336699;}
</code></pre>
<blockquote>
<p>可以缩写为：</p>
</blockquote>
<pre><code>p{color: #369;}
</code></pre>
<h2 id="字体缩写">字体缩写</h2>
<blockquote>
<p>网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：</p>
</blockquote>
<pre><code>body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
</code></pre>
<blockquote>
<p>这么多行的代码其实可以缩写为一句：</p>
</blockquote>
<pre><code>body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
</code></pre>
<blockquote>
<p>注意：</p>
<p>1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。</p>
<p>2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。</p>
<p>一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：</p>
</blockquote>
<h2 id="颜色值">颜色值</h2>
<blockquote>
<p>在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：</p>
<p>1、英文命令颜色</p>
<p>前面几个小节中经常用到的就是这种设置方法：</p>
</blockquote>
<pre><code>p{color:red;}
</code></pre>
<blockquote>
<p>2、RGB颜色</p>
<p>这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。</p>
</blockquote>
<pre><code>p{color:rgb(133,45,200);}
</code></pre>
<blockquote>
<p>每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：</p>
</blockquote>
<pre><code>p{color:rgb(20%,33%,25%);}
</code></pre>
<blockquote>
<p>3、十六进制颜色</p>
<p>这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。</p>
</blockquote>
<pre><code>p{color:#00ffff;}
</code></pre>
<h2 id="长度值">长度值</h2>
<blockquote>
<p>长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位</p>
</blockquote>
<h3 id="1像素">1、像素</h3>
<blockquote>
<p>像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。</p>
</blockquote>
<h3 id="2em">2、em</h3>
<blockquote>
<p>就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：</p>
</blockquote>
<pre><code>p{font-size:12px;text-indent:2em;}
</code></pre>
<blockquote>
<p>上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。</p>
<p>下面注意一个特殊情况：</p>
<p>但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：</p>
</blockquote>
<pre><code>html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
</code></pre>
<blockquote>
<p>结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。</p>
</blockquote>
<h3 id="3百分比">3、百分比</h3>
<pre><code>p{font-size:12px;line-height:130%}
</code></pre>
<blockquote>
<p>设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。</p>
</blockquote>
<h2 id="水平居中设置-行内元素">水平居中设置-行内元素</h2>
<blockquote>
<p>我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。</p>
<p>这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？</p>
<p>如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：</p>
<p>html代码：</p>
</blockquote>
<pre><code><body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
.txtCenter{
text-align:center;
}
</style>
</code></pre>
<h2 id="水平居中设置-定宽块状元素">水平居中设置-定宽块状元素</h2>
<blockquote>
<p>当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。</p>
<p>这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)</p>
<p>满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：</p>
<p>html代码：</p>
</blockquote>
<pre><code><body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
</code></pre>
<blockquote>
<p>也可以写成：</p>
</blockquote>
<pre><code>margin-left:auto;
margin-right:auto;
</code></pre>
<blockquote>
<p>注意：元素的“上下 margin” 是可以随意设置的。</p>
</blockquote>
<h2 id="水平居中总结-不定宽块状元素方法一">水平居中总结-不定宽块状元素方法（一）</h2>
<blockquote>
<p>在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)</p>
<p>不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：</p>
</blockquote>
<pre><code>加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
</code></pre>
<blockquote>
<p>这一小节我们来讲一下第一种方法</p>
<p>为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。</p>
<p>第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。</p>
<p>第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。</p>
<p>举例如下：</p>
<p>html代码：</p>
</blockquote>
<pre><code><div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
table{
border:1px solid;
margin:0 auto;
}
</style>
</code></pre>
<h2 id="水平居中总结-不定宽块状元素方法二">水平居中总结-不定宽块状元素方法（二）</h2>
<blockquote>
<p>除了上一节讲到的插入table标签，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的display类型为行内元素，利用其属性直接设置。</p>
<p>第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：</p>
<p>html代码：</p>
</blockquote>
<pre><code><body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
</code></pre>
<blockquote>
<p>这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。</p>
</blockquote>
<h2 id="水平居中总结-不定宽块状元素方法三">水平居中总结-不定宽块状元素方法（三）</h2>
<blockquote>
<p>除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。</p>
<p>方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。</p>
<p>我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。</p>
<p>代码如下：</p>
</blockquote>
<pre><code><body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
</code></pre>
<blockquote>
<p>这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。</p>
</blockquote>
<h2 id="垂直居中-父元素高度确定的单行文本">垂直居中-父元素高度确定的单行文本</h2>
<blockquote>
<p>我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。</p>
<p>这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。</p>
<p>本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？</p>
<p>父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-。height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。</p>
<p>line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。</p>
<p>这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。</p>
<p>如下代码：</p>
</blockquote>
<pre><code><div class="container">
hi,imooc!
</div>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
</code></pre>
<h2 id="垂直居中-父元素高度确定的多行文本方法一">垂直居中-父元素高度确定的多行文本（方法一）</h2>
<blockquote>
<p>父元素高度确定的多行文本、图片等的竖直居中的方法有两种：</p>
<p>方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。</p>
<p>css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：</p>
<p>html代码：</p>
</blockquote>
<pre><code><body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code>table td{height:500px;background:#ccc}
</code></pre>
<blockquote>
<p>因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了</p>
</blockquote>
<h2 id="垂直居中-父元素高度确定的多行文本方法二">垂直居中-父元素高度确定的多行文本（方法二）</h2>
<blockquote>
<p>除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。</p>
<p>在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。</p>
<p>html代码：</p>
</blockquote>
<pre><code><div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
</code></pre>
<blockquote>
<p>css代码：</p>
</blockquote>
<pre><code><style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</code></pre>
<blockquote>
<p>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。</p>
</blockquote>
<h2 id="隐性改变display类型">隐性改变display类型</h2>
<blockquote>
<p>有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：</p>
<ol>
<li><p>position : absolute </p></li>
<li><p>float : left 或 float:right </p></li>
</ol>
<p>简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。</p>
<p>如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。</p>
</blockquote>
<pre><code><div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
</code></pre>
<blockquote>
<p>css代码</p>
</blockquote>
<pre><code><style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1304727318190657536"></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">你可能感兴趣的:(web前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1891780445150965760.htm"
title="HTML CSS整理笔记（建议收藏）" target="_blank">HTML CSS整理笔记（建议收藏）</a>
<span class="text-muted">程序员的生活1</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</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><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-</div>
</li>
<li><a href="/article/1891444013068775424.htm"
title="计算机学习建议" target="_blank">计算机学习建议</a>
<span class="text-muted">qincjun</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去</div>
</li>
<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/1891281664047378432.htm"
title="electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了" target="_blank">electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了</a>
<span class="text-muted">阿毛sky</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</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/1.htm">前端</a>
<div>由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文</div>
</li>
<li><a href="/article/1891276997259227136.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能播放声音" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能播放声音</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/web%E6%9C%8D%E5%8A%A1/1.htm">web服务</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.</div>
</li>
<li><a href="/article/1891273089291972608.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能显示图片" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能显示图片</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉</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/1890779817410883584.htm"
title="【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)" target="_blank">【HTML5网页设计成品】基于HTML+CSS+JavaScript网上订餐系统(23个页面)</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/HTML%E5%AD%A6%E7%94%9F%E4%B8%AA%E4%BA%BA%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">HTML学生个人网页设计</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%BD%9C%E4%B8%9A/1.htm">网页设计作业</a>
<div>文章目录二、✍️网站描述三、网站介绍四、网站演示五、⚙️网站代码HTML结构代码六、如何让学习不再盲目七、更多干货❤【作者主页——获取更多优质源码】❤【学习资料/简历模板/面试资料/网站设计与制作】❤【web前端期末大作业——毕设项目精品实战案例】#一、网站题目学生管理系统网页设计、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。二、✍️网站描述️HTML网页设计，采用DIV+C</div>
</li>
<li><a href="/article/1890621943606996992.htm"
title="javascript的成熟分类：“成熟分类”之路" target="_blank">javascript的成熟分类：“成熟分类”之路</a>
<span class="text-muted">lizi88888</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>JavaScript是一门广泛应用于Web前端开发的高级编程语言，具有交互性强、界面效果丰富等优点。其在Web开发中的广泛应用越来越受到业界的关注，从最初的“套壳”式编程到现在的成熟分类，JavaScript已经发生了巨大的变化。ES5ES5标准于2009年发布，是JavaScript发展的一个重要里程碑。这个版本添加了一些新的语言特性，例如：严格模式、Object.create()方法、Func</div>
</li>
<li><a href="/article/1890495203920375808.htm"
title="36.Web前端网页制作 NBA体育主题网页设计实例 大学生期末大作业 html+css+js" target="_blank">36.Web前端网页制作 NBA体育主题网页设计实例 大学生期末大作业 html+css+js</a>
<span class="text-muted">d321654987123</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%93%E8%82%B2/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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>目录一、前言二、网页文件三、网页效果四、代码展示1.HTML2.CSS3.JS五、更多推荐一、前言本实例以“体育”NBA为主题设计，应用html+css+js，包括图片轮翻效果、视频、表单等，12个子页面，代码简洁明了，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q</div>
</li>
<li><a href="/article/1890159659646513152.htm"
title="Web前端三大主流框架：Angular、React与Vue的对比与解析" target="_blank">Web前端三大主流框架：Angular、React与Vue的对比与解析</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/angular.js/1.htm">angular.js</a><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>
<div>在快速发展的Web前端领域，框架的选择对于项目的成功至关重要。Angular、React和Vue作为三大主流前端框架，各自拥有独特的特点和优势，为开发者提供了强大的工具集和灵活的解决方案。本文将对这三大框架进行详细的对比与解析，帮助读者更好地了解它们的特点和适用场景。一、AngularAngular是Google开发的一款开源JavaScript框架，它提供了一套完整的开发解决方案，包括数据绑定、</div>
</li>
<li><a href="/article/1890114703837949952.htm"
title="Web前端第一次作业" target="_blank">Web前端第一次作业</a>
<span class="text-muted">unfeeling_</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>作业代码：（1）登录页面：登录会员登录页面YQ会员登录账号：密码：（2）注册页面：DocumentYQ会员注册账号：密码：确认密码：昵称：(3)主页页面跳转：index主页登录页面注册页面效果展示：总结：主页点击登录或者注册能直接跳转到新页面，登录页面，输入账号密码，就可以跳转到对应主页，注册页面也是如此，该次作业运用了表格标签修饰页面，用表单标签做出要求，最后运用超链接实现页面跳转</div>
</li>
<li><a href="/article/1890053438876741632.htm"
title="手把手教你给 windows装个vmware虚拟机" target="_blank">手把手教你给 windows装个vmware虚拟机</a>
<span class="text-muted">python算法小白</span>
<div>附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：书单导航页（点击右侧极客侠栈即可打开个人博客）：极客侠栈①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)④【Web前端】从HTML到JS到AJ</div>
</li>
<li><a href="/article/1890051165182291968.htm"
title="Web前端第三次作业" target="_blank">Web前端第三次作业</a>
<span class="text-muted">shayell</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.学校官网（1）相关信息学校官网-相关信息body{font-family:Arial,sans-serif;}.header{background-color:#4CAF50;color:white;padding:10px;text-align:center;}.nav{overflow:hidden;background-color:#333;}.nava{float:left;displ</div>
</li>
<li><a href="/article/1889684126726942720.htm"
title="web前端Vue项目搭建流程" target="_blank">web前端Vue项目搭建流程</a>
<span class="text-muted">sulu_all is well</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E6%90%AD%E5%BB%BA/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>Node.js安装教程一、安装环境node.js下载官网:nodejs官网.二、安装步骤1、双击安装包，一直点击下一步。2、点击change按钮，更换到自己的指定安装位置，点击下一步（不修改默认位置也是可以的）。3、一直点击下一步，最后安装成功即可。三、验证安装在键盘按下【win+R】键，输入cmd，然后回车，打开命令行界面进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功node-v显</div>
</li>
<li><a href="/article/1889621218743611392.htm"
title="AI前端开发：拥抱未来，提升薪资！" target="_blank">AI前端开发：拥抱未来，提升薪资！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>在AI时代，数字化转型浪潮席卷全球，前端开发人才的需求量也随之水涨船高。而更进一步，掌握AI写代码工具等AI前端开发技能，则成为提升竞争力，获得高薪的关键。本文将深入探讨AI前端开发如何助力你提升薪资水平，开启职业发展新篇章。AI前端开发的市场价值：高薪的秘密传统的Web前端开发工作，常常面临着重复性工作繁多、开发周期长、人效低下的问题。而AI前端开发的出现，彻底改变了这一现状。熟练掌握AI前端开</div>
</li>
<li><a href="/article/1889213341218435072.htm"
title="【转】前端组件化框架之路" target="_blank">【转】前端组件化框架之路</a>
<span class="text-muted">weixin_33924220</span>
<div>1.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混乱而欣欣向荣的景象。这一方面说明前端领域的创造力很旺盛，另一方面却说明了基础设</div>
</li>
<li><a href="/article/1889200235373195264.htm"
title="2015前端组件化框架之路(转)" target="_blank">2015前端组件化框架之路(转)</a>
<span class="text-muted">aisheng3237</span>
<div>https://github.com/xufei/blog/issues/191.为什么组件化这么难做Web应用的组件化是一个很复杂的话题。在大型软件中，组件化是一种共识，它一方面提高了开发效率，另一方面降低了维护成本。但是在Web前端这个领域，并没有很通用的组件模式，因为缺少一个大家都能认同的实现方式，所以很多框架/库都实现了自己的组件化方式。前端圈最热衷于造轮子了，没有哪个别的领域能出现这么混</div>
</li>
<li><a href="/article/1888087919932010496.htm"
title="web前端学习7-css动画过渡" target="_blank">web前端学习7-css动画过渡</a>
<span class="text-muted">修罗_</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%96%B0%E6%89%8B%E5%BF%85%E7%9C%8B16%E7%AF%87/1.htm">web前端新手必看16篇</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>学习7-css动画过渡css使用过渡p{/*初始属性*/width:100px;height:100px;background-color:#00FFFF;}p:hover{/*间接过渡法-鼠标经过区域会显示为以下属性*/width:200px;height:200px;background-color:#FF0000;transition-delay:1s;/*1秒后执行过渡*/transiti</div>
</li>
<li><a href="/article/1887801120756133888.htm"
title="web前端必做笔试题-HTML/CSS篇" target="_blank">web前端必做笔试题-HTML/CSS篇</a>
<span class="text-muted">万息集训教育</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>HTML/CSS1、什么是盒子模型？请画出盒模型示意图2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？3、如何居中一个div？如何居中一个浮动元素?(多种方式)4、什么是cssHack？5、css选择器有哪些?优先级是怎样的？6、你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？7、什么是外边距重叠？重叠的结果是什么？8、Rgba()和opacity的透明效果有什么不同？9、</div>
</li>
<li><a href="/article/1887450787869683712.htm"
title="【axios】尚硅谷Web前端axios入门与源码解析" target="_blank">【axios】尚硅谷Web前端axios入门与源码解析</a>
<span class="text-muted">abigale03</span>
<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/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a>
<div>视频地址：【尚硅谷Web前端axios入门与源码解析】https://www.bilibili.com/video/BV1wr4y1K7tq/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155前置知识promise【Promise】阮一峰JavaScript教程-7-异步操作-CSDN博客ajax【千峰前端】day11</div>
</li>
<li><a href="/article/1886804614259470336.htm"
title="【web前端】单向数据绑定和双向数据绑定有什么区别？" target="_blank">【web前端】单向数据绑定和双向数据绑定有什么区别？</a>
<span class="text-muted">myt2000</span>
<a class="tag" taget="_blank" href="/search/arkTS/1.htm">arkTS</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>单向数据绑定和双向数据绑定有什么区别？单向数据绑定和双向数据绑定有什么区别？总结单向数据绑定和双向数据绑定有什么区别？绑定方向：单向数据绑定是只从数据到模板的绑定，即外部数据（如后台数据）的变化会导致页面更新，但页面上的修改不会反馈到数据。而双向数据绑定则是数据模型（Module）和视图（View）之间的双向绑定，即无论用户在视图上的修改还是数据模型中的值发生变化，都会立刻同步到对方的层面。数据更</div>
</li>
<li><a href="/article/1886344952858865664.htm"
title="大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐）" target="_blank">大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐）</a>
<span class="text-muted">无·糖</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">Web前端期末大作业</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%AD%A6%E7%94%9F/1.htm">大学生</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%BE%8E%E9%A3%9F/1.htm">美食</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">大作业</a>
<div>HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️如何学习进步七、☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单</div>
</li>
<li><a href="/article/1886308001552330752.htm"
title="【自学笔记】Web前端的重点知识点-持续更新" target="_blank">【自学笔记】Web前端的重点知识点-持续更新</a>
<span class="text-muted">Long_poem</span>
<a class="tag" taget="_blank" href="/search/%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>
<div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录Web前端知识点一、HTML基础二、CSS样式三、JavaScript基础四、前端框架与库五、前端工具与构建六、前端性能优化七、响应式设计与适配八、前端安全总结Web前端知识点一、HTML基础常用标签超链接(标签)图片(标签)表格(、、等标签)列表(无序列表、有序列表、定义列表)HTML5新特性语义化标签(、、等)音频视频(、</div>
</li>
<li><a href="/article/1885780530847346688.htm"
title="html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？" target="_blank">html自学学多久,HTML和CSS要学多久？ 入门需要多长时间？</a>
<span class="text-muted">安检</span>
<a class="tag" taget="_blank" href="/search/html%E8%87%AA%E5%AD%A6%E5%AD%A6%E5%A4%9A%E4%B9%85/1.htm">html自学学多久</a>
<div>HTML和CSS要学多久？相信很多想要学习网页前端开发的小伙伴都会有这个疑问，今天W3Cschool小编就来和大家探讨一下这个问题。作为Web前端开发的基础，HTML和CSS是都是非常基础的语言，但是想要以此为工作的话，只是掌握HTML和CSS还是不够的，JS也需要学习。这样还不够，最好还能花一些时间学习一下近几年非常火的HTML5和CSS3，这样才能算是完全掌握了Web前端相关技术。如果单说HT</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/1885217492838707200.htm"
title="web前端三大主流框架" target="_blank">web前端三大主流框架</a>
<span class="text-muted">109702008</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>Claude3OpusWeb前端开发中，目前有三个主流的框架：1.React：React是由Facebook开发的一款JavaScript库，用于构建用户界面。它采用组件化的开发模式，将界面拆分成多个独立且可复用的组件，使开发和维护更加高效。React的核心思想是虚拟DOM（VirtualDOM）和单向数据流，通过高效的DOMdiff算法进行页面更新，提供出色的性能和用户体验。2.Angular：</div>
</li>
<li><a href="/article/1884627161093042176.htm"
title="简述大前端技术栈的渲染原理" target="_blank">简述大前端技术栈的渲染原理</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>作者：京东物流卢旭大前端包括哪些技术栈大前端指的是涵盖所有与前端开发相关的技术和平台，应用于各类设备和操作系统上。大前端不仅包括Web开发，还包括移动端开发和跨平台应用开发，具体包括：•原生应用开发：Android、iOS、鸿蒙（HarmonyOS）等；•Web前端框架：Vue、React、Angular等；•小程序开发：微信小程序、京东小程序、支付宝小程序等；•跨平台解决方案：ReactNati</div>
</li>
<li><a href="/article/1884349095930294272.htm"
title="python web开发框架对比,python的web框架有哪些" target="_blank">python web开发框架对比,python的web框架有哪些</a>
<span class="text-muted">2401_84503581</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>大家好，小编为大家解答pythonweb框架主要的三大基本框架的问题。很多人还不知道pythonweb开发框架对比，现在让我们一起来看看吧！本篇文章给大家谈谈pythonweb开发框架有哪些，以及pythonweb前端开发框架，希望对各位有所帮助，不要忘了收藏本站喔。1.Django框架官网：https://github.com/django/django.git优点：是一个高层次PythonWe</div>
</li>
<li><a href="/article/1883449997194752000.htm"
title="python实战项目27：boss直聘招聘数据可视化分析" target="_blank">python实战项目27：boss直聘招聘数据可视化分析</a>
<span class="text-muted">wp_tao</span>
<a class="tag" taget="_blank" href="/search/Python%E5%89%AF%E4%B8%9A%E6%8E%A5%E5%8D%95%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">Python副业接单实战项目</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a>
<div>boss直聘招聘数据可视化分析一、数据预处理二、数据可视化三、完整代码一、数据预处理在上一篇博客中，笔者已经详细介绍了使用selenium爬取南昌市web前端工程师的招聘岗位数据，数据格式如下：这里主要对薪水列进行处理，为方便处理，将日薪和周薪的数据删除，将带有13薪和14薪的数据也删除，计算出最低薪资、最高薪资和平均薪资三列。数据预处理代码如下：importpandasaspddf=pd.rea</div>
</li>
<li><a href="/article/10.htm"
title="jsonp 常用util方法" target="_blank">jsonp 常用util方法</a>
<span class="text-muted">hw1287789687</span>
<a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jsonp%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95/1.htm">jsonp常用方法</a><a class="tag" taget="_blank" href="/search/jsonp+callback/1.htm">jsonp callback</a>
<div>jsonp 常用java方法
(1)以jsonp的形式返回:函数名(json字符串)
/***
* 用于jsonp调用
* @param map : 用于构造json数据
* @param callback : 回调的javascript方法名
* @param filters : <code>SimpleBeanPropertyFilter theFilt</div>
</li>
<li><a href="/article/137.htm"
title="多线程场景" target="_blank">多线程场景</a>
<span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a>
<div>0
能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0
对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？
Java多线程
2012年11月23日 15:41 Young9007 Young9007
4
0 0 4
Comment添加评论关注(2)
3个答案 按时间排序 按投票排序
0
0
最典型的如：
1、</div>
</li>
<li><a href="/article/264.htm"
title="Maven学习——修改Maven的本地仓库路径" target="_blank">Maven学习——修改Maven的本地仓库路径</a>
<span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div> 安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。
</div>
</li>
<li><a href="/article/391.htm"
title="placeholder的浏览器兼容" target="_blank">placeholder的浏览器兼容</a>
<span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/placeholder/1.htm">placeholder</a>
<div>【前言】
自从html5引入placeholder后，问题就来了，
不支持html5的浏览器也先有这样的效果，
各种兼容，之前考虑，今天测试人员逮住不放，
想了个解决办法，看样子还行，记录一下。
【原理】
不使用placeholder，而是模拟placeholder的效果，
大概就是用focus和focusout效果。
【代码】
<scrip</div>
</li>
<li><a href="/article/518.htm"
title="debian_用iso文件创建本地apt源" target="_blank">debian_用iso文件创建本地apt源</a>
<span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="/search/Debian/1.htm">Debian</a>
<div>1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下
2.创建N个挂载点目录
如下：
debian:~#mkdir –r /media/dvd1
debian:~#mkdir –r /media/dvd2
debian:~#mkdir –r /media/dvd3
….
debian:~#mkdir –r /media</div>
</li>
<li><a href="/article/645.htm"
title="SQLSERVER耗时最长的SQL" target="_blank">SQLSERVER耗时最长的SQL</a>
<span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a>
<div>对于DBA来说，经常要知道存储过程的某些信息：
1. 执行了多少次
2. 执行的执行计划如何
3. 执行的平均读写如何
4. 执行平均需要多少时间
列名 &</div>
</li>
<li><a href="/article/772.htm"
title="com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil" target="_blank">com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil</a>
<span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a>
<div>今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下：
错误提示信息：
An error has occurred.See error log for more details.
Reason:
com/genuitec/</div>
</li>
<li><a href="/article/899.htm"
title="用正则删除文本中的html标签" target="_blank">用正则删除文本中的html标签</a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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/%E5%8E%BB%E6%8E%89html%E6%A0%87%E7%AD%BE/1.htm">去掉html标签</a>
<div>使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。
如下：
public static String Html2Text(String inputString) {
String htmlStr = inputString; // 含html标签的字符串
String textSt</div>
</li>
<li><a href="/article/1026.htm"
title="嵌入式系统设计中常用总线和接口" target="_blank">嵌入式系统设计中常用总线和接口</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/linux+%E5%9F%BA%E7%A1%80/1.htm">linux 基础</a>
<div> 嵌入式系统设计中常用总线和接口
任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线</div>
</li>
<li><a href="/article/1153.htm"
title="Java函数调用方式——按值传递" target="_blank">Java函数调用方式——按值传递</a>
<span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8C%89%E5%80%BC%E4%BC%A0%E9%80%92/1.htm">按值传递</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1/1.htm">对象</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/1.htm">基础数据类型</a>
<div>Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。
首先，让我们看一看基础数据类型是如何按值传递的。
public static void main(String[] args) {
int a = 2;
</div>
</li>
<li><a href="/article/1280.htm"
title="ios音量线性下降" target="_blank">ios音量线性下降</a>
<span class="text-muted">bewithme</span>
<a class="tag" taget="_blank" href="/search/ios%E9%9F%B3%E9%87%8F/1.htm">ios音量</a>
<div>直接上代码吧
//second 几秒内下降为0
- (void)reduceVolume:(int)second {
KGVoicePlayer *player = [KGVoicePlayer defaultPlayer];
if (!_flag) {
_tempVolume = player.volume;
</div>
</li>
<li><a href="/article/1407.htm"
title="与其怨它不如爱它" target="_blank">与其怨它不如爱它</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E9%80%89%E6%8B%A9/1.htm">选择</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E6%83%B3/1.htm">理想</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E4%B8%9A/1.htm">职业</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E5%88%92/1.htm">规划</a>
<div> 抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。
一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。
</div>
</li>
<li><a href="/article/1534.htm"
title="一边时间不够用一边浪费时间" target="_blank">一边时间不够用一边浪费时间</a>
<span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4/1.htm">时间</a><a class="tag" taget="_blank" href="/search/%E6%B5%AA%E8%B4%B9/1.htm">浪费</a>
<div>一方面感觉时间严重不够用，另一方面又在不停的浪费时间。
每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。
精神还是很差，下午像一直野鬼在城市里晃荡。
为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。
控制让自己周末早睡早起，你就成功了一半。
有多少个工作</div>
</li>
<li><a href="/article/1661.htm"
title="【Scala八】Scala核心二：隐式转换" target="_blank">【Scala八】Scala核心二：隐式转换</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con</div>
</li>
<li><a href="/article/1788.htm"
title="sudoku slover in Haskell (2)" target="_blank">sudoku slover in Haskell (2)</a>
<span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a><a class="tag" taget="_blank" href="/search/sudoku/1.htm">sudoku</a>
<div>继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。
board = [0,3,4,1,7,0,5,0,0,
0,6,0,0,0,8,3,0,1,
7,0,0,3,0,0,0,0,6,
5,0,0,6,4,0,8,0,7,
</div>
</li>
<li><a href="/article/1915.htm"
title="Java-Collections Framework学习与总结-HashSet和LinkedHashSet" target="_blank">Java-Collections Framework学习与总结-HashSet和LinkedHashSet</a>
<span class="text-muted">BrokenDreams</span>
<a class="tag" taget="_blank" href="/search/linkedhashset/1.htm">linkedhashset</a>
<div> 本篇总结一下两个常用的集合类HashSet和LinkedHashSet。
它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序</div>
</li>
<li><a href="/article/2042.htm"
title="读《研磨设计模式》-代码笔记-备忘录模式-Memento" target="_blank">读《研磨设计模式》-代码笔记-备忘录模式-Memento</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
/*
* 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
</div>
</li>
<li><a href="/article/2169.htm"
title="《RAW格式照片处理专业技法》笔记" target="_blank">《RAW格式照片处理专业技法》笔记</a>
<span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/PS/1.htm">PS</a>
<div>注意，这不是教程！仅记录楼主之前不太了解的
一、色彩（空间）管理
作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼）
注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv</div>
</li>
<li><a href="/article/2296.htm"
title="使用 Git 下载 Spring 源码 编译 for Eclipse" target="_blank">使用 Git 下载 Spring 源码 编译 for Eclipse</a>
<span class="text-muted">crabdave</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a>
<div>使用 Git 下载 Spring 源码 编译 for Eclipse
1、安装gradle，下载 http://www.gradle.org/downloads
配置环境变量GRADLE_HOME，配置PATH %GRADLE_HOME%/bin，cmd，gradle -v
2、spring4 用jdk8 下载 https://jdk8.java.</div>
</li>
<li><a href="/article/2423.htm"
title="mysql连接拒绝问题" target="_blank">mysql连接拒绝问题</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E7%99%BB%E5%BD%95%E6%9D%83%E9%99%90/1.htm">登录权限</a>
<div>mysql中在其它机器连接mysql服务器时报错问题汇总
一、[running]root@192.168.9.136:~$mysql -uroot -h 192.168.9.108 -p //带-p参数，在下一步进行密码输入
Enter password: //无字符串输入
ERROR 1045 (28000): Access </div>
</li>
<li><a href="/article/2550.htm"
title="Google Chrome 为何打压 H.264" target="_blank">Google Chrome 为何打压 H.264</a>
<span class="text-muted">dsjt</span>
<a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a>
<div>Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。
Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome</div>
</li>
<li><a href="/article/2677.htm"
title="yii 获取控制器名 和方法名" target="_blank">yii 获取控制器名 和方法名</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a>
<div>1. 获取控制器名
在控制器中获取控制器名: $name = $this->getId();
在视图中获取控制器名: $name = Yii::app()->controller->id;
2. 获取动作名
在控制器beforeAction()回调函数中获取动作名: $name = </div>
</li>
<li><a href="/article/2804.htm"
title="Android知识总结（二）" target="_blank">Android知识总结（二）</a>
<span class="text-muted">come_for_dream</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>明天要考试了，速速总结如下
1、Activity的启动模式
standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。）
singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac</div>
</li>
<li><a href="/article/2931.htm"
title="高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元" target="_blank">高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元</a>
<span class="text-muted">gcq511120594</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a>
<div>高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！
首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕</div>
</li>
<li><a href="/article/3058.htm"
title="linux expect" target="_blank">linux expect</a>
<span class="text-muted">heipark</span>
<a class="tag" taget="_blank" href="/search/expect/1.htm">expect</a>
<div>1. 创建、编辑文件go.sh
#!/usr/bin/expect
spawn sudo su admin
expect "*password*" { send "13456\r\n" }
interact
2. 设置权限
chmod u+x go.sh 3.</div>
</li>
<li><a href="/article/3185.htm"
title="Spring4.1新特性——静态资源处理增强" target="_blank">Spring4.1新特性——静态资源处理增强</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
<div>目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
</li>
<li><a href="/article/3312.htm"
title="idea ubuntuxia 乱码" target="_blank">idea ubuntuxia 乱码</a>
<span class="text-muted">liyonghui160com</span>
<div>
1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。
2.在ubuntu 下可以执行下面操作安装该字体：
sudo mkdir /usr/share/fonts/truetype/simsun
sudo cp simsun.ttf /usr/share/fonts/truetype/simsun
fc-cache -f -v
</div>
</li>
<li><a href="/article/3439.htm"
title="改良程序的11技巧" target="_blank">改良程序的11技巧</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E5%B7%A7/1.htm">技巧</a>
<div>有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。
让我们看一些基本的编程技巧：
尽量保持方法简短
永远永远不要把同一个变量用于多个不同的</div>
</li>
<li><a href="/article/3566.htm"
title="300个涵盖IT各方面的免费资源（下）——工作与学习篇" target="_blank">300个涵盖IT各方面的免费资源（下）——工作与学习篇</a>
<span class="text-muted">shoothao</span>
<a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A/1.htm">创业</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E8%B5%84%E6%BA%90/1.htm">免费资源</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AF%BE%E7%A8%8B/1.htm">学习课程</a><a class="tag" taget="_blank" href="/search/%E8%BF%9C%E7%A8%8B%E5%B7%A5%E4%BD%9C/1.htm">远程工作</a>
<div>工作与生产效率:
A. 背景声音
Noisli:背景噪音与颜色生成器。
Noizio:环境声均衡器。
Defonic:世界上任何的声响都可混合成美丽的旋律。
Designers.mx:设计者为设计者所准备的播放列表。
Coffitivity:这里的声音就像咖啡馆里放的一样。
B. 避免注意力分散
Self Co</div>
</li>
<li><a href="/article/3693.htm"
title="深入浅出RPC" target="_blank">深入浅出RPC</a>
<span class="text-muted">uule</span>
<a class="tag" taget="_blank" href="/search/rpc/1.htm">rpc</a>
<div>深入浅出RPC-浅出篇
深入浅出RPC-深入篇
RPC
Remote Procedure Call Protocol
远程过程调用协议
它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发</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>