HTML+CSS基础笔记第一篇

1.如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

2.h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。如<h1>腾讯网</h1>.

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

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

5. <blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。 等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。

6.html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

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

8.块级元素（block）与内联元素（inline）的区别：

     简单地说，块级元素用来搭建网站架构、布局、承载内容，负责整体的大的方面。块级元素总是会另起一行开始，其高度、行高和边距都是可控的。内联元素负责局部和细节，在同一行显示，其高度、行高和边距不可控。 通过display：block;或者display:inline两者可以相互转化。

9.内联不能嵌套块级，块级可以嵌套内联元素.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div。块级元素与块级元素并列、内联元素与内联元素并列。

10.在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如果是多行代码，可以使用<pre>标签。标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

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

12.target="_blank",跳转打开新的窗口

13.

14,下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击.

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

16.还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

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

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

17.有的时候我们为同一个元素设置了不同的CSS样式代码

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

.first  span{color:red;}

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

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

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

* {color:red;}

19.更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red}
20.当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
21.有的时候我们为同一个元素设置了不同的CSS样式代码。浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

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*/

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

p{color:red!important;}将p标签的这个样式优先级设置最高。

23.设置字体是否加粗

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

24.设置斜体字：font-style:italic。
设置下划线：

p a{text-decoration:underline;}
删除线：

text-decoration:line-through;

25. 段落首行缩进：text-indent:2em;(缩进2字符）,行间距：

line-height:1.5em;如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 

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

单词间距设置：

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