【慕课网】HTML&CSS基础课程学习笔记

HTML部分：

一、HTML介绍

1-1.介绍html大体

1-2.介绍html是结构层、css是表现层、javascript行为层

1-3.介绍html标签

1-4.介绍html标签语法

1-5.介绍html文件基本结构 

html内包括head和body，head包括title、title、meta、link、style、script， body主要是网页内容的标签

1-6.介绍head内的标签

1-7.介绍html代码注释语法

二、认识标签（一）

2-1.语义化概念

2-2.body标签存放的是网页内容

2-3.p标签用于存放段落

2-4.hx标签用于存放标题

2-5.加强语气用strong粗体标签和em斜体标签

2-6.span标签用于为了设置单独的样式用的

2-7.q标签用于短文本引用并且会在两端加入双引号

2-8.blockquote标签用于长文本引用

2-9.br标签用于换行并且提到xhtml1.0写法<br/>

2-10. 用于在html上添加空格

2-11.hr标签用于加水平横线

2-12.address标签用于存放地址信息并且为斜体

2-13.code标签用于存放一行代码

2-14.pre标签用于存放多行代码

三、认识标签（二）

3-1.ul标签为无序列表里面嵌套li标签

3-2.ol标签为有序列表里面嵌套li标签

3-3.div标签是一个容器

3-4.div标签用id命名

3-5.table标签

h嵌套td、tr嵌套td。th内的内容为粗体居中thead、tbody、tfoot为table分了三部分，里面也可嵌套着th、tr、td但th只能嵌套在thead并且tbody可以优化显示，内容下载一行显示一行不用等到全部下载完再显示

3-6.用css样式可为table、th、tr、td添加边框样式

3-7.caption为表格添加标题显示在表格居中正上方，summary标签为表格添加摘要让搜索殷勤能更好读取信息

四、认识标签（三）

4-1.a标签用于连接到另一个页面，href用于连接目标网站，title用于显示鼠标滑过的文本

4-2.a标签中target="_blank"属性用于在新浏览器窗口中打开

4-3.a标签中href中填写mailto可以让访问者打开电子邮件应用并自动填写收件人等设置好的信息，mailto:邮箱地址(多个邮箱地址可用;隔开)&cc=邮箱地址&bcc=邮箱地址?subject=邮件主题&body=邮件内容

4-4.img标签中src用于连接图片地址，alt用于当图像看不见时显示的文本，title用于鼠标滑动时显示的文本，图像可以是gif,png,jpeg等

五、交互用表单标签

5-1.form标签，action用于数据交互地址，method用于数据交互的方式post/get

5-2.input标签type属性中text为文本输入框，password为密码输入框,name属性为文本框命名，value为文本框内的内容也为交互到服务器的内容，服务端是根据name来寻找value

5-3.textarea标签中属性cols为列数，rows为行数

5-4.input标签type属性中radio为单选框其中同一组raio的name要相同，checkbox属性为多选框，value为数据交互到服务器的内容，name为控件命名，checked="checked"为选中

5-5.select标签内嵌套option，option的value属性是向服务器提交的数值，标签内的值为显示的内容，select="selected"为默认选中

5-6.select标签添加multiple="multiple"后ctrl+单击可以选择多个选项

5-7.input标签中type属性为submit时点击该input就可以把form里面的数据提交到action的地址

5-8.input标签中type属性为reset时点击该input就可以把form里面的数据重置

5-9.label标签作用是当点击label后把焦点转到和标签相关的控件上，但label的for要和控件的id相同

CSS部分：

六、CSS介绍

6-1.介绍CSS，CSS全称为“层叠样式表”

6-2.CSS的优势是可以用最少的语句对多个标签进行样式设置

6-3.CSS代码的语法是由选择符和声明组成，声明又包括属性和值

6-4.CSS代码注释的方式

七、CSS导入方式

7-1.内联式，直接在开始标签写style=""并且多条css样式要用;隔开

7-2.嵌入式，在head标签里面的style里面写

7-3.外部式，在head标签用link标签导入

7-4.三种方式的优先级是用就近原则

八、CSS选择器

8-1.CSS选择器指明了样式的作用对象

8-2.标签选择器以html中的标签开头直接作用于html中的标签

8-3.类选择器以英文圆点开头加上标签中有class=""的名称

8-4.ID选择器以#开头加上标签中有id=""的名称

8-5.类和ID选择器的区别是可以应用于任何元素但id只可以用一次而类可以用多次

8-6.子选择符的符号>用于选择第一代子元素

8-7.后代选择符的符号是空格用于选择标签下的所有子元素

8-8.通用选择器的符号是*用于选择所有标签

8-9.伪类选择符用于给标签的某种状态加上样式，相当于当标签处于某种状态上在该标签加上类并且该类用的是为类选择器上的样式

8-10.分组选择符的符号是,用于不同的选择器共同用一个样式

九、CSS的继承、特殊性、层叠和重要性

9-1.CSS的某些样式会被后代继承

 9-2.CSS的选择器中父元素的样式继承权值为0.1、标签权值为1、类选择器权值为10、ID选择器权值为100，当一个元素有多个样式时，选择选择器全部加起来权值最高的样式

9-3.CSS的层叠性是当相同权重值的时候，选择顺序在最后的

9-4.CSS的重要性为在值后加上!important时候权值就为最大

十、CSS排版

10-1.font-family字体类型

10-2.font-size字体大小，font-color字体颜色

10-3.font-weight字体粗细

10-4.font-style字体风格

10-5.text-decoration:underline字体下划线

10-6.text-decoration:line-through字体删除线

10-7.text-indent字体缩进

10-8.line-height行高

10-9.letter-spacing中文字、字母间距，word-spacing英文单词间距

10-10.text-aligh对齐

十一、CSS盒子模型

11-1.元素分为内联元素、块级元素、内敛块级元素

11-2.块级元素独占一行，可以设置宽度、高度、内边距和外边距，不设置的情况下宽度就是父元素宽度

11-3.内联元素不独占一行，不可以设置宽度、高度、内边距和外边距，里面包含的高度和宽度就是包含的内容的宽高度

11-4.内敛块级元素不独占一行，可以设置宽度、高度、内边距和外边距

11-5.盒子模型包括外边距、边框、内边距、内容

11-6.边框的属性有边框样式、边框颜色和边框宽度

11-7.边框的每个属性可以分为上下左右

11-8.盒子模型的总高宽度为左外边距+左边框宽度+左内边距+内容宽度+右内边距+右边框宽度+右外边距

11-9.内边距也叫填充，若同时有四个参数则顺时针顺序，三个参数为上、左右和下，两个参数为上下和左右，一个参数为四个方向一样

11-10.外边距也叫边界，参数规则和内边距相同

十二、CSS布局模型

12-1.CSS布局模型有流动模型（flow)、浮动模型（float）、层模型（layer)

12-2.块级元素的流动模型是宽度为100%独占一行然后垂直分布

12-3.内敛元素的流动模型是从左到右水平分布

12-4.浮动模型是把元素变成水平从左到右分布或者右到左分布

12-5.层模型有绝对定位（absolute)、相对定位（relative)、固定定位（fixed）

12-6.绝对定位是脱离文档流对最接近的一个具有定位属性的父元素进行定位，如果没有这相对于body即浏览器窗口

12-7.相对定位是没有脱离文档流，相对于初始的位置进行定位

12-8.固定定位是脱离文档流对浏览器视图进行定位

12-9.relative和absolute的使用，注意点是absolute的概念

十三、CSS代码缩写

13-1.外边距、内边距、边界代码缩写规则为顺时针

13-2.颜色值缩写，由于六位数字每两位是表示RGB，所以当全部的两位各自相同时候可以缩略其中一个变成三位

13-3.字体缩写可变成font: font-style font-variant font-weight font-size/line-height font-family

十四、颜色值和字体大小值

14-1.颜色表示形式有英文命令颜色、RGB颜色、十六进制颜色

14-2.文字大小值表示形式有px、em、%

十五、水平居中和垂直居中

15-1.内联元素水平居中使用text-align:center

15-2.定宽块状元素水平居中使用magin:X auto

15-3.不定宽块状元素水平居中有嵌入到table内利用table的自适应长度（根据文本内容）和块状元素再进行margin：X auto、转换成内联元素利用text-align:center、利用父元素左边缘left50%居中变成中轴线再把本身利用float:-50%移动中轴线正中间，第一种为把不定宽块状元素水平居中把该元素嵌入到table>tbody>tr>td内，然后table利用margin:X auto 水平居中

15-4.不定宽块状元素水平居转换成内联元素再利用text-align:center

15-5.不定宽块状元素水平居把父元素浮动float:left，再把父元素左边缘移动正中间left:50%以父元素的左边缘为中轴线，再把本身的元素left:-50%移到中轴线正中间

15-6.垂直居中分为父元素高度确定的单行文本和父元素高度不确定的多行文本， 父元素高度确定的单行文本利用font-size = line-height，不过当文字内容大于块宽度就会内容脱离块

15-7.父元素高度不确定的多行文本，嵌套在table>tbody>tr>td中，由于td自带vertical-align:middle（为垂直居中父元素）

15-8.父元素高度不确定的多行文本,display:table-cell为表格单元显示，再加上vertical-align:middle后可垂直居中父元素

15-9.使用了position:absolute 和 float:left/right后隐形转换为块状元素