首页 > 代码库 > HTML+CSS基础知识笔记

HTML+CSS基础知识笔记

一、Html和CSS的关系

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

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

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

二、常见、常用标签

认识html文件基本结构

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

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

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

  (1) <p></p>   p标签、段落标签

  (2) <div></div>  把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器  <div  id="版块名称">…</div>给div命名

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

  (4)<h></h>   h标签、标题标签,标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。

  (5)<strong>和<em>标签,在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。

  (6)<q>引用文本</q>  q标签,短文引用

  (7)<blockquote>引用文本</blockquote>   blockquote标签,长文本引用

  (8)<br />标签  <br>标签 分行显示文本

  (9)&nbsp;   &nbsp;  空格

  (10)<hr>   <hr>标签  添加水平横线

  (11)<address>联系地址信息</address>  <address>标签,为网页加入地址信息

  (12)<code>代码语言</code>  code标签  在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签

  (13)<pre>语言代码段</pre>   pre标签  在网页中加入大段代码

  (14)ul标签,添加新闻信息列表

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

  (15)ol标签,添加图书销售排行榜

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

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

技术分享     

运行结果

技术分享

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

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

  (18) <a href="http://www.mamicode.com/目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>  <a>标签  链接到另一个页面  

例如:

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

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

<a href="http://www.mamicode.com/目标网址" target="_blank">click here!</a>

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

<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好,对此评论有些想法">对此影评有何感想,发送邮件给我</a>

   

  (19)<img src="http://www.mamicode.com/图片地址" alt="下载失败时的替换文本" title = "提示文本">   <img>标签  为网页插入图片

举例:

<img src = "http://www.mamicode.com/myimage.gif" alt = "My Image" title = "My Image" />

  (20)<form></form> 标签   form标签  表单标签,与用户交互; 表单控件(文本框 input、文本域 textarea、按钮 button、单选框、复选框等)

语法:

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

文本输入框、密码输入框

举例

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

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

举例

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

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

语法:

<input   type="radio/checkbox"   value="http://www.mamicode.com/值"    name="名称"   checked="checked"/>

1、type:

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

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

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

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

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

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

举例:

<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="http://www.mamicode.com/看书">看书</option>
<option value="http://www.mamicode.com/旅游" selected="selected">旅游</option>
<option value="http://www.mamicode.com/运动">运动</option>
<option value="http://www.mamicode.com/购物">购物</option>
</select>
</form>

使用下拉列表框进行多选

在<select>标签中设置multiple="multiple"属性,就可以实现多选功能

举例:

<form action="save.php" method="post" >
<label>爱好:</label>
<select multiple="multiple">
<option value="http://www.mamicode.com/看书">看书</option>
<option value="http://www.mamicode.com/旅游">旅游</option>
<option value="http://www.mamicode.com/运动">运动</option>
<option value="http://www.mamicode.com/购物">购物</option>
</select>
</form>

使用提交按钮,提交数据

语法:

<input   type="submit"   value="http://www.mamicode.com/提交">

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

语法:

<input type="reset" value="http://www.mamicode.com/重置">

form表单中的label标签  

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

语法:

<label for="控件id名称">


三、CSS样式和语法

认识CSS样式  

<style type="text/css">    嵌入式

p{
font-size:20px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}

</style>

内联式css样式,直接写在现有的HTML标签中

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

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

外部式css样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href="http://www.mamicode.com/base.css" rel="stylesheet" type="text/css" />

注意:

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

三种方法的优先级

优先级:内联式 > 嵌入式 > 外部式 (但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="http://www.mamicode.com/style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。)  总结来说,就是--就近原则(离被设置元素越近优先级别越高)

CSS选择器

 

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

 

选择器{
    样式;
}

标签选择器

 

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

 

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

 

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

 

类选择器

 

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

 

语法:

 

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

 

注意:

 

1、英文圆点开头

 

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

 

使用方法:

 

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

 

<span>胆小如鼠</span>

 

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

 

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

 

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

 

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

 

ID选择器

 

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

 

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

 

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

 

右侧代码编辑器中就是一个ID选择符的完整实例:

<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时,我们班上了一节<span id="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

</body>

 

类和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的作用。

 

子选择器

 

子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码:

 

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

 

这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

包含(后代)选择器

 

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

 

.first  span{color:red;}

 

这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

 

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

 

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

通用选择器

 

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

 

* {color:red;}

 

伪类选择符

 

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

 

a:hover{color:red;}

 

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

 

关于伪选择符:

 

    关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

 

分组选择符

 

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

 

h1,span{color:red;}

 

它相当于下面两行代码:

 

h1{color:red;}
span{color:red;}

 

继承

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

<title>继承</title>
<style type="text/css">
p{color:red;}
p{border:1px solid red;}
</style>

可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;

特殊性

标签的权值为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,所以可以理解为继承的权值最低。

重要性

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

如下代码:

p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

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

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

这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

文字排版--字体

为网页中的文字设置字体为宋体。

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

代码:

body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}

注意:第一种方法比第二种方法兼容性更好一些。

文字排版--字号、颜色

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

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

文字排版--粗体

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

p span{font-weight:bold;}

文字排版--斜体

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

p a{font-style:italic;}

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

文字排版--下划线

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

p a{text-decoration:underline;}

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

文字排版--删除线

原价上的删除线使用下面代码就可以实现:

 .oldPrice{text-decoration:line-through;}

段落排版--缩进

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

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


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

段落排版--行间距(行高)

在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

段落排版--中文字间距、字母间距

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

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

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

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

单词间距设置:

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

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

段落排版--对齐

为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。(那么什么是块状元素呢?在后面的11-1、11-2小节中会讲到。)

h1{
    text-align:center;
}
<h1>了不起的盖茨比</h1>

同样可以设置居左:

h1{
    text-align:left;
}
<h1>了不起的盖茨比</h1>

还可以设置居右:

h1{
    text-align:right;
}
<h1>了不起的盖茨比</h1>
 

HTML+CSS基础知识笔记