HTML 学习笔记3

1 . line-height 的作用

• 在没有设置标签的高度height时，line-height控制其表现高度；
• 把标签的line-height设置为所需要的box的大小，可以令标签内单行文字垂直居中,无需设置高度height；

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

• 利用www.caniuse.com来查询CSS属性的兼容性。

• inline-block的兼容性为
  

  

  css inline-block兼容性.png

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

• a标签
  href属性表示a标签的链接地址
  title属性表示在点击目标元素的时候出现的提示内容
  target属性表示用什么样的方式打开链接。
• title alt属性的区别
  title属性表示当鼠标放在标签内容的时候显示的提示文字。title属性不像alt属性，它不是某一个标签的专属属性，所以可以用在很多的标签上，包括img .a. p等标签。
  alt属性表示图片无法显示的时候，出现的代替文字。所以alt是img标签的专属属性，所以a标签是不允许出现alt属性的。alt属性防止img无法显示或网络环境不佳的情况下，帮助用户理解图片内容，帮助搜索引擎理解图片信息。
• 新窗口打开链接：

4 . display: none , visibility: hidden,opacity:0 的作用，及区别

• display: none；此元素不会被显示；元素从页面上消失了，不保存物理空间，是彻底从文档流里消失了；
• visibility: hidden；元素是不可见的；但是为它保留了物理空间，只是隐藏起来了；
• opacity:0；设置透明度为0；当透明度为0 的时候元素就消失了，空间还是会被自己占有。0为完全透明，1为不透明。

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

• 去除a链接的默认样式
  去除下划线：a{text-decoration:none;}
  改变点击前颜色：a:link{color:#xxx;}
  改变鼠标划过颜色：a:hover{color:#xxx;}
  改变点击后颜色：a:visited{color:#xxx;}
• a链接不继承父容器颜色，需要单独设置。

代码题

1 . 写个div，边框为1px, #ccc, 宽度为200px, 高度为80px, 内有一行文字这里是饥人谷，文字字体大小14px, 颜色#f0f, 文字在div里垂直水平居中

- div代码

div.png

2 . 对于如下html代码

• 给.dialog加个边框 1px, #ccc
• 给header设置高度40px, 左对齐，左内边距10px, 文字16px, 颜色#f00,下边框#ccc 1px。
• 给content 设置高度100px,内部 a链接去掉下划线，颜色 blue, 鼠标放置上去后颜色变为 red
• 给footer设置高度50px，内部 btn设置 边框1px #ccc, 圆角3px, 上下内边距4px,左右内边距3px，显示为inline-block, footer内居中显示;

我是标题

X

欢迎来到 饥人谷

在这个大家庭你能快乐的学到更多前端技能

取消 确认

- 补充代码html

3 . 写一个如下表格表头是蓝色，表行是白色。 当鼠标放置到表行时背景色变为淡灰色

- 表格代码

4 . 下面代码有什么作用？手抄一遍如下代码，改变浏览器宽度看看效果

`

这里是标题

这里是内容

这里是 footer

`

- 修改代码

• margin:0 auto属性功能是设置一个元素的外边距，后跟两个参数，第一个参数代表上下外边距是0，第二个参数代码左右外边距根据浏览器自动调整。
• 代码题四中用了属性margin:0 auto。我们可以看到现象，当浏览器宽度大于908px (div的宽度900加body的默认宽度8) 时，div元素居中显示；当浏览器宽度小于908px，下方出现滚动条，页面固定在908px宽度。

- 参考资料

• line-height

• display:none、visibility:hidden、opacity:0的区别【代码】