Html + CSS 基础课程

一、Html 和 CSS的关系

1. HTML 是网页内容的载体。

2. CSS 样式是表现。

3. JavaScript是用来实现网页上的特效效果。有动画的，有交互的，一般都用JavaScript来实现。

二、Html 标签(标签的用途和标签在浏览器中的默认样式)

1. HTML标签不区分大小写，但建议小写。
2. 标签的语义化：明白每个标签的用途（在什么情况下使用此标签合理）
好处：更容易被搜索引擎收录；更容易让屏幕阅读器读出网页内容。
3. 常见标签

• 标题标签hx一共有6个，分别为h1、h2、h3、h4、h5、h6 
• <strong> 和 <em>表示强调，em 斜体，strong 加粗
• <span> 无语义，用来设置单独样式。
• <q>引用简短文本，<blockquote>长文本引用
• 空标签：没有html内容的标签。<br/> 分行显示文本 <hr/> 添加水平横线 <img/>
• 空格 &nbsp
• <address> 为网页加入地址信息
• <code></code>插入单行代码，<pre></pre>插入多行代码
• 创建表格 <table> <tbody> <tr>表的一行 <th>表头 <td>单元格 
  <tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
• 表格可以添加标题和摘要
  <caption> 内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
  <table summary="表格简介文本"> 用以描述表格内容，标题的显示位置：表格上方。
• <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
  <a href="目标网址" target="_blank">click here!</a>  在新建浏览器窗口打开链接
  
• <a href="mailto:yy@imooc.com ?subject=观了不起的盖茨比有感。 &body=你好，对此品论哟UI选哪个发" >对此影评有何感想，发送邮件给我</a>  如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
  
• <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 
  

  src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；图像可以是GIF，PNG，JPEG格式的图像文件。 title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

• 网站怎样与用户进行交互？<form method="传送方式" action="服务器文件"></form>action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)method ：数据传送的方式（get/post）

• 表单中多行文本输入 <textarea rows="行数" cols=“列数”>文本</textarea>

• <input type="radio/checkbox" value="值" name="名称" checked="checked"/>同一组的单选按钮，name 取值一定要一致

• 下拉列表框 <select><option value=' '> </option></select>value 向服务器提交的值selected="selected"属性，则该选项就被默认选中。在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

• <input type="submit" value="提交"><input type="reset" value="重置">

• <label for="控件id名称">注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

三、CSS选择器

1. 代码插入形式：内联式、嵌入式和外部式三种

   优先级：内联式 > 嵌入式 > 外部式

2. 类和ID选择器的区别
ID选择器只能在文档中使用一次

可以使用类选择器词列表方法为一个元素同时设置多个样式

3. 子选择器

大于符号(>), 用于选择指定标签元素的第一代子元素

4. 后代选择器

空格作用于元素的所有后代

5. 通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素

6. 伪类选择器
a:hover{color:red;}现在常用的就是a:hover，能与所有浏览器兼容。

7. 分组选择符
为html中多个标签元素设置同一样式
h1,span{color:red;}

四、CSS继承、层叠和特殊性

1. 继承

2. 特殊性
浏览器是根据权值来判断使用哪种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，所以可以理解为继承的权值最低。

3. 层叠

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

4. 重要性
注意：!important要写在分号的前面
样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
5. 段落排版
字母间隔 letter-spacing
单词间隔 word-spacing

对齐 text-align
6. 元素分类：块级元素，内联元素，内联块级元素
 块级元素特点：

    每个块级元素都从新的一行开始，并且其后的元素也另起一行；

    元素的高度、宽度、行高以及顶和底边距都可设置；
    元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：
    和其他元素都在一行上；
    元素的高度、宽度及顶部和底部边距不可设置；
    元素的宽度就是它包含的文字或图片的宽度，不可改变。
注意：<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。块状元素也可以通过代码display:inline将元素设置为内联元素。

内联块级元素特点：

    和其他元素都在一行上；
    元素的高度、宽度、行高以及顶和底边距都可设置。
注意：内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。有<img><input>

五、CSS盒模型

1. css内定义的宽（width）和高（height），指的是填充以里的内容范围。

    元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

六、CSS布局模型

1. 类型
在网页中，元素有三种布局模型：流动模型（Flow），浮动模型 (Float)，层模型（Layer）
2. 流动模型（Flow）
流动（Flow）是默认的网页布局模式。
两个典型特征：

• 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
  
• 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

3. 浮动模型（Float）

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。比如实现两个 div 元素一行显示。

4. 层模型（Float）

三种形式：绝对定位(position: absolute)，相对定位(position: relative)，固定定位(position: fixed)
绝对定位：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位：通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
固定定位：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。它不会随浏览器窗口的滚动条滚动而变化。

relative和absolute组合使用（相对于其它元素进行定位）：

• 参照定位的元素必须是相对定位元素的前辈元素
• 参照定位的元素必须加入position:relative;
• 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

5. 样式设置小技巧

• 水平居中
  行内元素：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
  块状元素：text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
  定宽元素：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
  不定宽元素三种方法居中（这三种方法目前使用的都很多）：
  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
• 垂直居中
  父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。
  

  父元素高度确定的多行文本、图片等的竖直居中的方法有两种：

  方法一：使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

  方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性
• 隐性改变display类型
  1. position : absolute 
  2. float : left 或 float:right 
  只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
  

【参考】
    慕课网 https://www.imooc.com/learn/9