慕课学习史上最全零基础入门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/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/1883424771681611776.htm"
title="web前端10--变化" target="_blank">web前端10--变化</a>
<span class="text-muted">Lorcian</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/%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><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>-transform`transform`：允许你通过改变元素的位置、旋转、缩放或倾斜来操作元素。1、rotate()`rotate()`函数旋转元素。语法：`rotate(angle)`，其中`angle`表示旋转的角度。```css.element{transform:rotate(45deg);}```2、scale()`scale()`函数缩放元素的大小。语法：`scale(x,y)`，其</div>
</li>
<li><a href="/article/1882953652755296256.htm"
title="Rasa的工作流程" target="_blank">Rasa的工作流程</a>
<span class="text-muted">不会编程的程序猿ᅟ</span>
<a class="tag" taget="_blank" href="/search/rasa/1.htm">rasa</a>
<div>Rasa的工作流程分为两个主要部分：NLU（自然语言理解）和Core（对话管理）。整个流程包括从用户输入到最终响应的多个步骤，下面是详细的工作流程解析：1.用户输入用户通过聊天界面（如微信、Telegram、Slack或Web前端）发送自然语言消息，例如："我想预订一张明天去北京的火车票"2.自然语言理解（NLU）Rasa的NLU模块解析用户输入，提取意图和实体。2.1意图识别NLU模块会识别用户</div>
</li>
<li><a href="/article/1882236450871767040.htm"
title="【Web前端】JWT（JSON Web Tokens）概述" target="_blank">【Web前端】JWT（JSON Web Tokens）概述</a>
<span class="text-muted">泡芙冰淇淋ya</span>
<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/json/1.htm">json</a>
<div>1、简介JWT（JSONWebTokens）是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。它基于JSON对象，并通过数字签名确保其完整性和真实性。JWT因其小巧、自包含以及易于在客户端和服务器之间传输的特性而被广泛使用于身份验证和信息交换的场景中。2、组成部分JWT由三个部分组成，这三部分通过点（.）分隔：Header（头部）：头部通常包含了两部分信息：例如：typ：表示令牌的类型</div>
</li>
<li><a href="/article/1882212980645490688.htm"
title="小白WEB前端学习（七）" target="_blank">小白WEB前端学习（七）</a>
<span class="text-muted">Sun ᥫᩣ涵</span>
<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/%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>续：小白WEB前端学习（六）继续学习CSS（五）8.响应式布局：响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式1.响应式布局介绍：优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长手机:76899212482.media媒体查询HTML标签字号手机屏幕大小不同，分辨率不同如何设置不同的htm</div>
</li>
<li><a href="/article/1882134900451110912.htm"
title="2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)" target="_blank">2024最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)</a>
<span class="text-muted">2401_89693619</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
<div>3.阐述清楚浮动的几种方式（常见问题）1.父级div定义height原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题2.父级div定义overflow:hidden原理：必须定义width或zoom:1，同时不能定义height，使用overflow:</div>
</li>
<li><a href="/article/1882134521323778048.htm"
title="2024Web前端人事面试题总结精选_前端面试项目相关提问" target="_blank">2024Web前端人事面试题总结精选_前端面试项目相关提问</a>
<span class="text-muted">2401_86638424</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
<div>api然后我们前端直接调用，当然如果后台还没写好就先自己造假数据来完成。平常都是用webpack来构建项目等等。2、你觉得你个性上最大的优点是什么？回答提示：沉着冷静、条理清楚、立场坚定、顽强向上、乐于助人和关心他人、适应能力和幽默感、乐观和友爱。3、说你最大的缺点？回答提示：这个问题企业问的概率很大，通常不希望听到直接回答的缺点是什么等，如果求职者说自己小心眼、爱忌妒人、非常懒、脾气大、工作效率</div>
</li>
<li><a href="/article/1881771726816210944.htm"
title="web前端常见的面试题总结" target="_blank">web前端常见的面试题总结</a>
<span class="text-muted">2401_84436095</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>
<div>script.src=url+‘?’+data+‘callback=’+funcNamedocument.body.appendChild(script);//这里得到请求的数据，在回调函数中执行处理window[funcName]=function(data){callback(data)}}//使用jsonp(‘http:127.0.0.1:3000/api’,{},function(res)</div>
</li>
<li><a href="/article/1881770844724719616.htm"
title="小白WEB前端学习（五）" target="_blank">小白WEB前端学习（五）</a>
<span class="text-muted">Sun ᥫᩣ涵</span>
<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/%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>续：小白WEB前端学习（四）继续正式学习CSS（三）6.float布局！主要用于左右做图片，右文字的题目标准流标准流也叫文档流，指的是标签在页面中默认的排布规则，使⼀个元素脱离标准文档流有三种方式1.浮动2.绝对定位3.固定定位例如:块元素独占一行，行内元素可以一行显示多个。浮动作用：让块元素水平排列属性名：float属性值：left和right浮动后会脱离标准流，等于开了一个新的页面，内容在的话</div>
</li>
<li><a href="/article/1881682311737569280.htm"
title="Web前端学习重点笔记" target="_blank">Web前端学习重点笔记</a>
<span class="text-muted">HeHolly</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>第一章：Web前端开发技术综述第二章：HTML基础第三章：格式化文本与段落标记：标题字标记：大——小字体标记：水平线标记：段落缩进标记：默认5个字符位置拼音标记：何(he)原样显示标记：特殊符号：显示结果说明符号代码空格 >大于号>加粗倾斜删除线下划线上标下标加粗倾斜变小字号变大字号第四章：列表有序列表……type="1(默认)|A|a|i|I"无序列表……type="disc(默</div>
</li>
<li><a href="/article/1880514091768934400.htm"
title="JavaWeb 前端基础 html + CSS 快速入门 | 018" target="_blank">JavaWeb 前端基础 html + CSS 快速入门 | 018</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>今日推荐语指望别人的救赎，势必走向毁灭——波伏娃日期学习内容打卡编号2025年01月17日JavaWeb前端基础html+CSS018前言哈喽，我是菜鸟阿康。今天正式进入JavaWeb的学习，简单学习html+CSS这2各前端基础部分，以下是我的重点总结，希望对你有所帮助。（建议先看左侧目录，先了解文章结构）（请忽略错误的大纲编号，我直接从笔记中粘贴过来的，就没严格纠正了，重点在内容！）文末和主页</div>
</li>
<li><a href="/article/1880076078232432640.htm"
title="Web前端------HTML多媒体标签之图片标签" target="_blank">Web前端------HTML多媒体标签之图片标签</a>
<span class="text-muted">王da魔</span>
<a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</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>一.图片标签介绍1.路径问题>.绝对路径从盘符开始的路径问题：改变了工程目录的位置后，绝对路径从盘符开始则不能使用了，考虑相对路径>.相对路径从当前位置（指从代码书写.html文件）开始如何表示当前位置------使用./如何表示上一级--------使用../2.图片标签的导入方式3.常见图片属性src：图片地址：1.网络路径2.绝对路径3.相对路径alt：图片加载失败时，提示信息width/h</div>
</li>
<li><a href="/article/1879998014110625792.htm"
title="前端开发：Web前端和HTML" target="_blank">前端开发：Web前端和HTML</a>
<span class="text-muted">qincjun</span>
<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>一、解释1.Web前端开发？Web前端开发是指创建用户在浏览器中直接交互和体验的部分的过程。前端开发主要涉及HTML、CSS和JavaScript这三大核心技术。HTML用于构建网页内容的骨架，CSS用于设置和控制网页的外观和布局，而JavaScript则赋予网页动态交互能力。Web（全称WorldWideWeb）是一种基于超文本和HTTP协议的全球性的、动态交互的、跨平台的分布式图形信息系</div>
</li>
<li><a href="/article/1879996878825779200.htm"
title="11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作" target="_blank">11个精美网页——Web前端开发技术课程大作业，期末考试，Dreamweaver简单网页制作</a>
<span class="text-muted">web学生网页设计</span>
<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/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%88%B6%E4%BD%9C/1.htm">网页设计与制作</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">网页作业</a>
<div>HTML实例网页代码,本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。精彩专栏推荐❤【作者主页——获取更多优质源码】❤【web前端期末大作业——毕设项目精品实战案例(1000套)】文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代</div>
</li>
<li><a href="/article/1879982623502168064.htm"
title="Web前端------HTML块级和行内标签之行内标签" target="_blank">Web前端------HTML块级和行内标签之行内标签</a>
<span class="text-muted">王da魔</span>
<a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</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>一.行内标签介绍行内标签----span作用：1.作为文本字体的容器，用来结合CSS修饰文本样式2.根据行内标签的特性（不换行/部分块级样式不生效eg：宽高等等），做微小布局二.代码展示行内标签测试文字测试文字三.效果展示</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835496149843275776.htm"
title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)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/javascript/1.htm">javascript</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><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
<div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835005024372092928.htm"
title="【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”" target="_blank">【VSCode扩展】通义灵码运行提示“此应用无法在你的电脑上运行”</a>
<span class="text-muted">coderYYY</span>
<a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/bug%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">bug解决方案</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/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a>
<div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》自从半月前，通义灵码一运行就会报这个错尝试了以下方法，都无法解决：阿里云官方方法：删除c盘的.lingma卸载重新安装通义灵码以管理员身份运行VSCode防火墙设置准入安装之前的版本最后是在扩展设置里面解决的路径不填也可</div>
</li>
<li><a href="/article/1835004897926410240.htm"
title="微信小程序生成小程序转发链接，携带参数跳转到另外一个页面" target="_blank">微信小程序生成小程序转发链接，携带参数跳转到另外一个页面</a>
<span class="text-muted">coderYYY</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%95%99%E7%A8%8B%E4%BB%A5%E5%8F%8A%E4%BB%A3%E7%A0%81/1.htm">前端项目教程以及代码</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/%E5%BE%AE%E4%BF%A1/1.htm">微信</a>
<div>作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性</div>
</li>
<li><a href="/article/1834645992071327744.htm"
title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a>
<span class="text-muted">cj瑾瑜</span>
<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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div>
</li>
<li><a href="/article/1834624305535741952.htm"
title="JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册" target="_blank">JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册</a>
<span class="text-muted">2401_84094868</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div>创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum</div>
</li>
<li><a href="/article/1834155529212096512.htm"
title="【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！" target="_blank">【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！</a>
<span class="text-muted">wcyd</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">Web前端技术</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面</div>
</li>
<li><a href="/article/1833895593613815808.htm"
title="479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js" target="_blank">479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js</a>
<span class="text-muted">仙女网页制作</span>
<a class="tag" taget="_blank" href="/search/Web%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%AE%9E%E4%BE%8B/1.htm">Web网页设计实例</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%BC%AB/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>
<div>目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！说起Web前端</div>
</li>
<li><a href="/article/1833525688494288896.htm"
title="web前端基础——第八章" target="_blank">web前端基础——第八章</a>
<span class="text-muted">ZiminLi</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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/javascript/1.htm">javascript</a>
<div>目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一</div>
</li>
<li><a href="/article/1833472993293070336.htm"
title="HTML 文本标签" target="_blank">HTML 文本标签</a>
<span class="text-muted">一壶浊酒..</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于：是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光，疑是地上霜。举头望明月，低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价：6元现在：5</div>
</li>
<li><a href="/article/1833257537026224128.htm"
title="利用PHP和Selenium自动化采集数据、实现爬虫抓取" target="_blank">利用PHP和Selenium自动化采集数据、实现爬虫抓取</a>
<span class="text-muted">IT大数据小助手</span>
<a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a>
<div>随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S</div>
</li>
<li><a href="/article/1833132711049523200.htm"
title="web前端，JavaScript字符串和数组，练习题:邮箱格式是否正确，登录名和密码格式是否正确" target="_blank">web前端，JavaScript字符串和数组，练习题:邮箱格式是否正确，登录名和密码格式是否正确</a>
<span class="text-muted">奔向我</span>
<div>length属性，返回的是字符串的长度indexOf（）方法用于获取字符串中返回指定字符串第一次出现的位置（注意:索引从0开始，找不到返回-1）indexOf（）方法是从数组中检查指定数据的位置（从后往前找第一个），不存在返回-1includes（）方法，从数组中检查指定的数据是否存在，存在返回true,不存在返回falsepush（）方法，向数组的末尾添加一个或更多的元素，并返回新的长度spli</div>
</li>
<li><a href="/article/1833077712646926336.htm"
title="Web前端最全初识Sentry前端监控，浅谈前端消息机制原理" target="_blank">Web前端最全初识Sentry前端监控，浅谈前端消息机制原理</a>
<span class="text-muted">2401_84433924</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/sentry/1.htm">sentry</a>
<div>Vue编码基础2.1.1.组件规范2.1.2.模板中使用简单的表达式2.1.3指令都使用缩写形式2.1.4标签顺序保持一致2.1.5必须为v-for设置键值key2.1.6v-show与v-if选择2.1.7script标签内部结构顺序2.1.8VueRouter规范Vue项目目录规范2.2.1基础2.2.2使用Vue-cli脚手架2.2.3目录说明2.2.4注释说明2.2.5其他开源分享：【大厂</div>
</li>
<li><a href="/article/1833006486490542080.htm"
title="web前端 ios性能问题" target="_blank">web前端 ios性能问题</a>
<span class="text-muted">zhenryx</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.禁止用户拖拽标签-webkit-user-drag:none;2.禁止用户选择标签user-select:none;//-webkit-touch-callout:none;///*系统默认菜单被禁用*/-webkit-user-select:none;/*webkit浏览器*/-khtml-user-select:none;/*早期浏览器*/-moz-user-select:none;/*火</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>