整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

网站制作,第二课,常用标签

网站制作,第二课,常用标签

节课,我们用到了以下四个标签:

<html></html> 创建一个HTML文档

<head></head> 设置文档标题和引入声明其他代码

<title></title> 设置文档的标题

<body> </body> 网页正文的代码都放在这里

下面,讲解一下其他常用的标签:

<h1></h1>(这里有六个等级,h1~h6)等级的区别就是字体的大小,h1字体最大,h6最小;这个标签的作用就是直接定义字体的大小,无需再另调字体大小。

<u></u> 下划线

<b></b> 加粗

<i></i> 斜体字

<em></em> 强调文本(通常是斜体加粗)

<strong></strong> 加重文本(通常是斜体加粗)

<STRIKE></STRIKE> 加删除线

<BLOCKQUOTE></BLOCKQUOTE> 向右缩排

<p></p> 创建一个段落

<p align=""> 将段落按左、中、右对齐

<br>换行 插入换行符

<dl></dl> 定义列表

<dt> 放在每个定义术语词前<dd> 放在每个定义之前

<ol></ol> 创建一个标有数字的列表

<ul></ul> 创建一个标有圆点的列表<li> 放在每个列表项之前,

<div align=""></div> 用来排版大块HTML段落

<img> 插入图片

<nobr></nobr> 强行不换行

<center></center> 水平居中链接标志表格标志

<a href="URL"></a> 创建超文本链接

<a href="mailtEMAIL"> ……< /a> 创建自动发送电子邮件的链接

<a name="name"></a> 创建位于文档内部的书签

<a href="#name"></a> 创建指向位于文档内部书签的链接

课堂总结:

标签千千万万,但常用的也没多少,只要做几个网页,基本都能掌握了。


期待下节课还能遇到你们

人在51RGB网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助

基础框架

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>标题标签</title>

</head>

<body>

<h1>了不起的盖茨比</h1>

<p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。

</p>

</body>

</html>

了解HTML的代码注释

什么是代码注释?代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

语法:

<!--注释文字 -->

认识标签<head>

文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>

<title>标签

在<title>和<title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

例如:

<head> <title>helloworld</title></head>

<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示

<body>标签,网页上显示的内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。

开始学习<p>标签,添加段落

如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

语法:<p>段落文本</p>

注意一段文字一个<p>标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个<p>标签中。如下图所示。

了解<hx(1-6)>标签,为你的网页添加标题

文章的段落用<p>标签,那么文章的标题用什么标签呢?在本节我们将使用<hx>标签来制作文章的标题。标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法:<hx>标题文本</hx> x:1-6

注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1>

h1-h6标签的默认样式:

标签代码:

在浏览器中显示的样式:

加入强调语气,使用<strong>和<em>标签

有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签但两者在强调的语气上有区别:

  • <em>表示强调,在浏览器中<em>默认用斜体表示

  • <strong>表示更强烈的强调,在浏览器中<strong>用粗体表示。

  • 两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

在浏览器中默认样式是有区别的:

浏览器中的样子,如下图。

语法:

<em>需要强调的文本</em>

<strong>需要强调的文本</strong>

栗子:

在网上商城中,某产品的打折后的价格是需要强调的。如下图。

代码实现:

使用<span>标签为文字设置单独样式

语法:<span>文本</span>

我们对<em>、<strong>、<span>这三个标签进行一下总结:

  1. <em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。

  2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的。

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到<span>标签了。如下面例子:

<p>1922年的春天,一个想要成名名叫<em>尼克?卡拉威</em>(托比?马奎尔TobeyMaguire饰)的作家, 离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,<strong>股票</strong>飞涨的时代。 为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>

我们如果想设置“美国梦”三个字设置成blue(蓝色),只需要在<style>标签中加入:

span{color:blue; }

css部分,以后会聊,你能大概明白span就是能干单独设置样式的活,就ok了

<q>标签,短文本引用

想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

语法:<q>引用文本</q>

<p>最初知道庄子,是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃

</q>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。

后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。

</p>

讲解:

  1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用实现引用。

  2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

下图是代码显示结果:

注意这里用标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。

<blockquote>标签,长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。

等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。

如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用

<blockquote>。

语法:<blockquote>引用文本</blockquote>

如下面例子:

<blockquote> 明月出天山,苍茫云海间。长风几万里,吹度玉门关。汉下白登道,胡窥青海湾。由来征战地,不见有人还。戍客望边色,思归多苦颜。高楼当此夜,叹息未应闲。 </blockquote>

浏览器对<blockquote>标签的解析是缩进样式。如下图所示:

使用<br>标签分行显示文本

例子,我们想让一首诗显示得更美观些,如显示下面效果:

怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。

代码改为:

<h2>《咏桂》</h2> <p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。

诗文在浏览器中显示为:

为你的网页中添加一些空格

在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入。不要忘了那个分号

在html代码中输入空格是不起作用的,如下代码。

在浏览中显示,还是没有空格效果。

输入空格的正确方法:

在浏览器中的显示出来的空格效果。如下图所示。

认识<hr>标签,添加水平横线

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:

语法:

  • html4.01版本<hr>

  • xhtml1.0版本<hr />注意:

  • <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

  • <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

  • 大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。

<address>标签,为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。栗子:

<address>本文的作者:<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

想加入一行代码吗?使用<code>标签

在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:

<code>var i=a + b;</code>

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。如果是多行代码,可以使用<pre>标签。

使用<pre>标签为你的网页加入大段代码

在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图:

怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使用<pre>标签。

语法:<pre>语言代码段</pre>

<pre>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如下代码:

<pre> varmessage="欢迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>

在浏览器中的显示结果为:

在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入<br>签,空格需要输入

注意:<pre>标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

使用<ul>,添加新闻信息列表

在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法:

<ul> <li>信息</li> <li>信息</li> ......</ul>

举例:

<ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li></ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示:

使用<ol>,添加顺序列表

如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。

语法:

<ol> <li>信息</li> <li>信息</li> ......</ol>

举例:

下面是一个热点课程下载排行榜:

<ol> <li>前端开发面试心法</li> <li>零基础学习html</li> <li>JavaScript全攻略</li></ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始,如下图所示:

初识div

认识div在排版中的作用

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:<div>…</div>

确定逻辑部分:

什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。

给div命名,使逻辑更加清晰

在上一小节中,我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为<div>提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。

语法:<div id="版块名称">…</div>

table标签,认识网页上的表格

table标签 = 我们平时看到到表格

有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

想在网页上展示上述表格效果可以使用以下代码:

创建表格的四个元素:table、tbody、tr、th、td

  1. <table>…</table>:整个表格以<table>标记开始、</table>标记结束。

  2. <tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。

  3. <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

  4. <td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

  5. <th>…</th>:表格的头部的一个单元格,表格表头。

  6. 表格中列的个数,取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为:

总结:

  1. table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

  2. 表头,也就是th标签中的文本默认为粗体并且居中显示

用css样式,为表格加入边框

Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。代码中加入:

<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>

上述代码是用 css 样式代码,为th,td单元格添加粗细为一个像素的黑色边框。

结果窗口显示出结果样式:

caption标签,为表格添加标题和摘要

表格还是需要添加一些标签进行优化,可以添加标题和摘要。代码如下

摘要摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

语法:<table summary="表格简介文本">

标题用以描述表格内容,标题的显示位置:表格上方。语法:

<table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>

初识<a>标签

使用<a>标签,链接到另一个页面

使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法 :<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

例如:<a href="http://www.zhaolion.com" title="点击进入我的博客">click here!</a>

上面例子作用是单击click here!文字,网页链接到http://www.zhaolion.com这个网页。

title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

提醒

还有一个有趣的现象不知道小伙伴们发现了没有,只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色),颜色很难看吧,不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),后面会详细讲解。

在新建浏览器窗口中打开链接

<a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。只需要添加一个属性target="_blank"

如下代码:

<a href="目标网址" target="_blank">click here!</a>

使用mailto在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

提醒:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

下面是一个完整的实例: 在浏览器中显示的一个发送按钮

点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:

认识<img>标签,为网页插入图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。语法:[站外图片上传中……(48)]

举例:<img src="myimage.gif" alt="My Image" title="My Image" />

讲解:

  1. src:标识图像的位置;

  2. alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

  3. title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

  4. 图像可以是GIF,PNG,JPEG格式的图像文件。

认识表单

使用表单标签,与用户交互

网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:<form method="传送方式" action="服务器文件">

讲解:

  1. <form>:<form>标签是成对出现的,以<form>开始,以</form>结束。

  2. action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

  3. method : 数据传送的方式(get/post)。

    <formmethod="post"action="save.php"> <labelfor="username">用户名:</label> <inputtype="text"name="username"/> <labelfor="pass">密码:</label> <inputtype="password"name="pass"/> </form>

注意

  1. 所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。

  2. method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以问谷哥

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

语法:

<form> <inputtype="text/password"name="名称"value="文本"/></form>
  1. type:

  • 当type="text"时,输入框为文本输入框;

  • 当type="password"时, 输入框为密码输入框。

name:为文本框命名,以备后台程序ASP 、PHP使用。

value:为文本输入框设置默认值。(一般起到提示作用)

举例:

<form> 姓名:<inputtype="text"name="myName"> <br/> 密码:<inputtype="password"name="pass"></form>

在浏览器中显示的结果:

文本域,支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法:<textarea rows="行数" cols="列数">文本</textarea>

  1. <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

  2. cols :多行输入域的列数。

  3. rows :多行输入域的行数。

  4. 在<textarea></textarea>标签之间可以输入默认值。

举例:

<formmethod="post"action="save.php"> <label>联系我们</label> <textareacols="50"rows="10">在这里输入内容...</textarea></form>

在浏览器中显示结果:

使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:语法:<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

  1. type:

  • 当 type="radio" 时,控件为单选框

  • 当 type="checkbox" 时,控件为复选框

value:提交数据到服务器的值(后台程序PHP使用)

name:为控件命名,以备后台程序 ASP、PHP 使用

checked:当设置 checked="checked" 时,该选项被默认选中

如下面代码:

在浏览器中显示的结果:

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

使用下拉列表框,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

讲解:

value:

selected="selected":设置selected="selected"属性,则该选项就被默认选中。

使用下拉列表框进行多选

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:

在浏览器中显示的结果:

使用提交按钮,提交数据

在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。语法:<input type="submit" value="提交">

  1. type:只有当type值设置为submit时,按钮才有提交作用

  2. value:按钮上显示的文字

举例:

在浏览器中显示的结果:

使用重置按钮,重置表单信息

当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。语法:<input type="reset" value="重置">

  1. type:只有当type值设置为reset时,按钮才有重置作用

  2. value:按钮上显示的文字

举例:

在浏览器中显示的结果:

输入账号

单击重置按钮

form表单中的label标签

小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

语法:<label for="控件id名称">

注意标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。这样你会在点慢跑标签,即使没有点checkbox 也能选中

例子:

<form> <a>你对什么运动感兴趣:</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">篮球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>

限时!!免费送Dreamweaver、js等前端教程

,html+css基础

1-1

Html和CSS的关系

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

1-2

1, HTML标签不区分大小写,<h1>和<H1>是一样的,但建议小写,因为大部分程序员都以小写为准。

1-3

一个HTML文件是有自己固定的结构的。

<html>

<head>...</head>

<body>...</body>

</html>

代码讲解:

1. <html></html>称为根标签,所有的网页标签都在<html></html>中。

2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。

3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

1-4

1,下面这些标签可用在 head 部分:

<head>

<title>...</title>

<meta>

<link>

<style>...</style>

<script>...</script>

</head>

2,代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。

语法:

<!--注释文字 -->

3,CSS注释代码

就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)

1-5

1,语义化:说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,网页上的文章的标题就得用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。

2,语义化的作用

1). 更容易被搜索引擎收录。

2). 更容易让屏幕阅读器读出网页内容。

二,认识标签(第一部分)

2-1

如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。

语法:

<p>段落文本</p>

2-2

<hx>标签来制作文章的标题。

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法:

<hx>标题文本</hx> (x为1-6)

文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们

2-3

有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。

但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调

2-4

<em>、<strong>、<span>的区别:

1. <em>和<strong>标签是为了强调一段话中的关键字时使用,它们的语义是强调。

2. <span>标签是没有语义的,它的作用就是为了设置单独的样式用的,把一段话圈起来,然后用css设置样式。

2-5

q标签,短文本引用

比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。

语法:

<q>引用文本</q>

1,注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

2,注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

blockquote标签,长文本引用

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用

<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。

语法:

<blockquote>引用文本</blockquote>

浏览器对<blockquote>标签的解析是缩进样式

2-6

换行标签<br/>

<br/>标签作用相当于word文档中的回车。

分割线标签<hr/>

<hr/>标签和<br/>标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。

<hr/>标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。

2-7

html特殊字符

空格: (;分号必不可少)

2-8

address标签,为网页加入地址信息

语法:

<address>地址信息</address>

如:

<address>北京市西城区德外大街10号</address>

在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式

2-9

在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:

<code>var i=i+300;</code>

语法:

<code>代码语言</code>

注意:在文章中一般如果要插入多行代码时不能使用<code>标签,如果是多行代码,可以使用<pre>标签。

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法,回车需要输入<br>签,空格需要输入 。

注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

三,认识标签(第二部分)

3-1

1,无序列表

ul-li是没有前后顺序的信息列表。

语法:

<ul>

<li>信息</li>

<li>信息</li>

......

</ul>

举例:

<ul>

<li>精彩少年</li>

<li>美丽突然出现</li>

<li>触动心灵的旋律</li>

</ul>

ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点

2,有序列表

语法:

<ol>

<li>信息</li>

<li>信息</li>

......

</ol>

举例:

下面是一个热点课程下载排行榜:

<ol>

<li>前端开发面试心法 </li>

<li>零基础学习html</li>

<li>JavaScript全攻略</li>

</ol>

<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开

3-2

<div>容器标签

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:

<div>…</div>

确定逻辑部分:

什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器

注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

3-3

创建表格的五个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。(这个标签基本上不怎么用了)

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...<td/>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

表格还是需要添加一些标签进行优化,可以添加标题和摘要

<table summary="本表格记录2012年到2013年库存记录,记录包括U盘和耳机库存量">

<caption>2012年到2013年库存记录</caption>

3-4

1,使用<a>标签,链接到别一个页面

使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:

<a href=”目标网址”>链接显示的文本</a>

例如:

<a href="http://www.imooc.com">click here!</a>

上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。

3-5

认识<img>标签,为网页插入图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。

语法:

<img src="图片地址" alt="下载失败时的替换文本" title="提示文本">

举例:

<img src="myimage.gif" alt="My Image" title="My Image" />

讲解:

1、src:标识图像的位置;

2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF,PNG,JPEG格式的图像文件。

四,表单标签(与用户进行交互)

4-1

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:

<form method="传送方式" action="服务器文件">

讲解:

1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method : 数据传送的方式(get/post)。

4-2

<input>输入框

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

语法:

<form>

<input type="text/password" name="名称" value="文本" />

</form>

1、type:

当type="text"时,输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

4-3

文本域,支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法:

<textarea rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2、cols :多行输入域的列数。

3、rows :多行输入域的行数。

4-4

单选框,复选框

语法:

<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"时,该选项被默认选中

注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。

4-5

下拉列表框,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。

语法:<option value="提交值">选项</option>

提交值是向服务器提交的值,选项是显示的值。

<form action="save.php" method="post" >

<label>爱好:</label>

<select>

<option value="看书">看书</option>

<option value="旅游" selected="selected">旅游</option>

<option value="运动">运动</option>

<option value="购物">购物</option>

</select>

</form>

4-6

使用下拉列表框进行多选

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,

就可以实现多选功能,进行多选时按下Ctrl键同时进行单击,可以选择多个选项。

如下代码:

<form action="save.php" method="post" >

<label>爱好:</label>

<select multiple="multiple">

<option value="看书">看书</option>

<option value="旅游">旅游</option>

<option value="运动">运动</option>

<option value="购物">购物</option>

</select>

</form>

4-7

在表单中有两种按钮可以使用,分别为:提交按钮、重置。

1,提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。

语法:

<input type="submit" value="提交">

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

2,重置按钮,重置表单信息

当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法:

<input type="reset" value="重置">

type:只有当type值设置为reset时,按钮才有重置作用

value:按钮上显示的文字

五,css样式

5-1

认识css样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

如下列代码:

p{

font-size:12px;

color:red;

font-weight:bold;

}

使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

5-2

CSS代码语法

css 样式由选择符和声明组成,而声明又由属性和值组成

选择符{属性:值}

p{color:red;}

选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。

声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:

p{font-size:12px;color:red;}

5-3

从CSS 样式代码插入的形式来看基本可以分为以下3种:

内联式、嵌入式和外部式三种

1,内联式css样式

就是把css代码直接写在现有的HTML标签中,如下面代码:

<p style="color:red">这里文字是红色。</p>

css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:

<p style="color:red;font-size:12px">这里文字是红色。</p>

2,嵌入式css样式,

就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。

3,外部式css样式

写在单独的一个文件中

外部式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>标签之内。

六,CSS选择器

每一条css样式定义由两部分组成,形式如下:

选择器{

样式;

}

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

6-1,标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

6-2,类选择器

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

语法:

.类选器名称{css样式代码;}

注意:

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>胆小如鼠</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="stress">胆小如鼠</span>

第三步:设置类选器css样式,如下:

.stress{color:red;}/*类前面要加入一个英文圆点*/

6-3,ID选择器

在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

6-4,类和ID选择器的区别

相同点:可以应用于任何元素

不同点:

1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

下面代码是正确的:

<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

而下面代码是错误的:

<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{

color:red;

}

.bigsize{

font-size:25px;

}

<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{

color:red;

}

#bigsizeid{

font-size:25px;

}

<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

6-5,子选择器

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的子元素。如下面的代码:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li加入红色实线边框。

6-6,包含(后代)选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:

.first span{color:red;}

请注意这个选择器与子选择器的区别

1,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代

2,后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

6-7,通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中任意标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

* {color:red;}

6-8,伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。

6-9,分组选择符

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

h1,span{color:red;}

它相当于下面两行代码:

h1{color:red;}

span{color:red;}

七,CSS的继承、层叠和特殊性。

7-1

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

但注意有一些css样式是不具有继承性的。如border:1px solid red;

7-2

根据权值来判断使用哪个css样式

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

下面是权值的规则:

标签的权值为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*/

注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低

7-3,层叠

我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

如下面代码:

p{color:red;}

p{color:green;}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了:

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

7-4,重要性

重要性

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

p{color:red!important;}

p{color:green;}

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意:!important要写在分号的前面

八,CSS格式化排版

8-1

文字排版

1,文字排版--字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)

2,文字排版--字号、颜色

可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

body{font-size:12px;color:#666}

3,文字排版--粗体

我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}

4,文字排版--斜体

以下代码可以实现文字以斜体样式在浏览器中显示:

p a{font-style:italic;}

<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

5,文字排版--下划线

有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:

p a{text-decoration:underline;}

<p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

删除线,在电商网站上经常见。

p a{text-decoration:line-through;}

8-2

段落排版

1,段落排版--缩进

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}

注意:2em的意思就是文字的2倍大小。

2,段落排版--行间距

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

3,段落排版--字间距、字母间距

文字间隔、字母间隔设置:

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现,如下面代码:

h1{

letter-spacing:50px;

}

...

<h1>了不起的盖茨比</h1>

注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置:

如果我想设置英文单词之间的间距呢?可以使用word-spacing来实现。如下代码:

h1{

word-spacing:50px;

}

...

<h1>welcome to imooc!</h1>

九,CSS盒模型

9-1

元素分类

在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素和内联块状元素。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

9-2

元素分类--块级元素

什么是块级元素?在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素,从页使用a元素具有块状元素特点。

a{display:block;}

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

9-3

元素分类--行内元素

在html中,<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素(inline)元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。

行内元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

9-4

元素分类--内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。

inline-block元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

9-5

盒模型--边框(一)

盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框:

div{

border:2px solid red;

}

上面是border代码的缩写形式,可以分开写:

div{

border-width:2px;

border-style:solid;

border-color:red;

}

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

border-color:#888;//前面的井号不要忘掉。

9-6

盒模型--边框(二)

现在有一个问题,如果有想为p标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css样式中允许只为一个方向的边框设置样式:

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边上、右、左边框的设置:

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

9-7

盒模型--边界

元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。如下代码:

div{margin:20px 10px 15px 30px;}

也可以分开写:

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

}

如果上下左右的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

总结一下:padding和margin的区别,padding在边框里,margin在边框外。

9-8

盒模型--填充

元素内容与边框之间是可以设置距离的,称之为填充。填充也可分为上、右、下、左。如下代码:

div{padding:20px 10px15px 30px;}

顺序一定不要搞混。可以分开写上面代码:

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px,左右一样为20px,可以这么写:

div{padding:10px 20px;}

9-9

盒模型代码简写

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:

margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同,如下面代码:

margin:10px 10px 10px 10px;

可缩写为:

margin:10px;

2、如果top和bottom值相同、left和 right的值相同,如下面代码:

margin:10px 20px 10px 20px;

可缩写为:

margin:10px 20px;

3、如果left和right的值相同,如下面代码:

margin:10px 20px 30px 20px;

可缩写为:

margin:10px 20px 30px;

注意:padding、border的缩写方法和margin是一致的。

9-10

颜色值缩写

关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

例子1:

p{color:#000000;}

可以缩写为:

p{color: #000;}

例子2:

p{color: #336699;}

可以缩写为:

p{color: #369;}

十,CSS布局模型

10-1

css布局模型

清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。

CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。

在网页中,元素有三种布局模型:

1、流动模型(Flow)

2、浮动模型 (Float)

3、层模型(Layer)

10-2

流动模型(一)

流动(Flow):自上而下。

先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征:

第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。

第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。

10-3浮动模型

块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。

div{

width:200px;

height:200px;

border:2px red solid;

float:left;

}

<div id="div1"></div>

<div id="div2"></div>

注意:设置浮动的同时一定要先设置块状元素的宽度,且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

10-4什么是层模型?

什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。

如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。

层模型有三种形式:

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

1,层模型--绝对定位(相对于父类)

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

<div id="div1"></div>

2,层模型--相对定位(相对于以前)

如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

如下代码实现相对于以前位置向下移动50px,向右移动100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

<div id="div1"></div>

3,层模型--固定定位(相对于网页窗口)

固定住某一坐标。

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

}

10-5Relative与Absolute组合使用

小伙伴们学习了12-6小节的相对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:

1、参照定位的元素必须是相对定位元素的前辈元素:

<div id="box1"><!--参照定位的元素-->

<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->

</div>

从上面代码可以看出box1是box2的父元素(父元素当然也是前辈元素了)。

2、参照定位的元素必须加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

这样box2就可以相对于父元素box1定位了(这里注意参照物就可以不是浏览器了,而可以自由设置了)。

有任何关于编程的问题都可以私信我,我看到后会及时解答。

编程小石头,为分享干货而生!据说,每个年轻上进,颜值又高的互联网人都关注了编程小石头。