Html和css笔记

Html和css的学习笔记：
http://www.imooc.com/learn/9

鉴于时间一长就忘得差不多了，做一些笔记以供参考，有些杂乱琐碎……

1.
1、css是用来修饰html样式的

2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css

3、html+css构成了我们网页的基本页面结构和样式

2.

1. :文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前

2. 标签对：标签位于HTML文档的最前面，用来标识HTML文档的开始；标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。

3.标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如，，，等，但是浏览器除了会在标题栏显示

4.标签对：它是HTML文档的主体部分，在此标签中可以包含

等众多标签，标签出现在标签之后，且必须在闭标签之前闭合。

3.
1、head标签为双标签，有尾标签，。

2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。

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

4、设置当前文件字符编码

5、style标签：双标签中设置当前文件样式

4.
在这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

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

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

5.
标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把下面的第一段话“美国梦”三个字设置成blue（蓝色），所以这样情况下就可以用到标签了。

6.
文章的段落用

标签，那么文章的标题用什么标签呢？在本节我们将使用标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。
语法：
标题文本 (x为1-6)
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站

7.
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个

标签中，这个

标签的作用就相当于一个容器。

语法：

…

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用

标签作为容器。

8.
各位慕课网的小伙伴，大家好，我们继续我们的快乐代码之旅。从这一章节开始,我们来学习html5新增的语义化标签,首先我们来学习header标签，用来定义头部区域。

标签定义底部区域

9.

定义区段

10.

定义侧边栏区

11.
在需要加回车换行的地方加入
，
标签作用相当于word文档中的回车。
xhtml1.0写法：

html4.01写法：

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

  与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。

  讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。

总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入
。

12.
使用

---

标签实现水平线标签
 

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

语法：

• 信息
• 信息
......

举例：

• 精彩少年
• 美丽突然出现
• 触动心灵的旋律

14.
使用

标签来制作有序列表来展示。
语法：

1. 信息
2. 信息
......

举例：

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

1. 前端开发面试心法
2. 零基础学习html
3. JavaScript全攻略

在网页中显示的默认样式一般为：每项
1. 前都自带一个序号，序号默认从1开始 15. 在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。

   语法：

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

   举例：

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

   讲解：

   1、src：标识图像的位置；

   2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

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

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

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

   语法：

   <a href=”目标网址” title=”鼠标滑过显示的文本”>链接显示的文本
   例如：

   <a href=”http://www.imooc.com" title=”点击进入慕课网”>click here!
   上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

   title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。

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

   17.
   创建表格的四个元素：table、tr、th、td

   1、

   …：整个表格以标记开始、标记结束。

   2、…：表格的一行，所以有几对tr 表格就有几行。

   3、…：表格的一个单元格，一行中包含几对…，说明一行中就有几列。

   4、…：表格的头部的一个单元格，表格表头。

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

   6、border属性可以为表格添加边框，属性值为数字。

   注意：

   1、table标签用来定义整个表格，为双标签，必须有结束标签。

   2、table标签里面可以放caption标签和tr标签。

   3、caption标签用来定义表格的标题。

   4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

   5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

   6、td同来设置表格的列，一组td标签代表一列。

   7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。