课程目标

掌握基本标签和基本样式的用法

学习建议

阅读资料都是老师的原创文章、示例代码、或者是精心挑选的文章。是除视频外很好的学习资源

课程视频

课程视频-HTML-常见标签
 课程视频-HTML-a链接|锚点
 课程视频-HTML- 表格样式|隐藏和透明

课程任务

问答

一、line-height有什么作用?

line-height的定义和用法
line-height 属性设置行间的距离（行高）。
注释：不允许使用负值。
说明：
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
OK，那么问题来了，针对于说明1...
啥叫基线
翻阅博客认识如下：

基线的识别
涉及基线的几个概念：
行高：是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
行距：是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行距：是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

行高行距示意图

内容区：底线和顶线包裹的区域
行内框：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
行框(line box)：行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
参考下图：

内容区、行内框及行框

而针对于说明3，可以理解为，行高虽然是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。
例如代码：

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                </p>
            </div>

渲染结果如下：

行高的继承说明

非但没有变成150%，反而连100%都没有，重叠了！这就是继承计算的结果，如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值；上例p得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。
而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。所以在使用line-height时，除非你刻意否则尽量使用倍数设值。

参考文章：
CSS line-height 属性

 CSS行高——line-height

二、如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？

利用网站：http://caniuse.com/
例如inline-block会得到以下浏览器及其版本的支持（图例在右下角）

can i use

三、a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?

a 标签的href, title, target 是什么？

a标签的定义与用法
<a>标签定义超链接，用于从一张页面链接到另一张页面。
<a>元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：

链接的默认外观
提示与注释
如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
请使用 CSS 来设置链接的样式。
关于href
href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 <a>标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
语法：
<a href="*value*">
以下是href属性值：

href属性值

以下是利用图片作为链接的实例：

<a href="http://www.w3school.com.cn/index.html">
<img src="/i/w3school_logo_white.gif" />
</a>

关于title
title的属性：
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
以下是实例：
<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>
如果希望注释多行显示，可以使用
作为换行符。

中文站点">百度网站</a>```

- 关于target
**定义和用法：**
```<a> ```标签的 target 属性规定在何处打开链接文档。
如果在一个``` <a> ```标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
**属性值：**
![a标签中的target属性值](http://upload-images.jianshu.io/upload_images/2331515-805a729da1c3b08c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####  title 和 alt有什么区别？
- 关于alt属性
**定义和用法：**它规定在图像无法显示时的替代文本。
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
*如果你想使用额外的说明信息或者非本质的信息请使用title属性。*
- 关于```<a>标签中```title属性
**定义与用法：**
title属性为设置该属性的元素提供建议性的信息。
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
- 关于alt属性和title属性的应用范围
 - alt属性旨在描述图片等
 - title属性旨在为图片等提供额外的说明信息

#### 如何新窗口打开链接?
利用属性值"_blank"即可实现
以下为实例：

<a href="http://hunger-train.com" target="_blank">hunger</a>


**以下为练习：**
![about title and alt](http://upload-images.jianshu.io/upload_images/2331515-991cc1535d3c2ec3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**参考文章：**
[HTML``` <a> ```标签](http://www.w3school.com.cn/tags/tag_a.asp)
[a标签的title属性](http://blog.csdn.net/tudas/article/details/6504494)
[HTML <a> 标签的 target 属性](http://www.w3school.com.cn/tags/att_a_target.asp)
[alt和title属性的区别及应用](http://www.yzznl.cn/archives/alt-and-title.html)

>四、display: none , visibility: hidden, opacity:0有什么作用？有什么区别？

- opacity=0
该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility=hidden
该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display=none
把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

>五、如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？

#### 如何去除 a 链接的默认样式？
可利用以下的代码去掉下划线及颜色
```a{
text-decoration: none;
color: red
}

以下为练习：

a链接练习

直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？

根据上述练习得出，对a链接颜色的样式设定必须单独强调a，否则不会起作用

代码

本教程版权归本人和饥人谷所有，转载须说明来源

任务6_HTML3