美文网首页饥人谷技术博客
任务五——HTML基础

任务五——HTML基础

作者: 进击的阿群 | 来源:发表于2016-07-09 18:33 被阅读77次

问答:

1.样式有几种引入方式?

有5种引入方式:

  • 浏览器缺省设置
  • 外部样式表(有两种形式)
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

或者

<style type="text/css">
@import url(mystyle.css);
</style>
  • 内部样式表
<head>
<style type="text/css">
body {backgroundcolor:red}
p{text-align:center}
</style>
</head>
  • 内联样式
<body>
<p style="color red; margin-left: 20px">这是段落</p>
</body>]

2.link@import有什么区别?

  • link是XHTML标签,除了加载CSS外,还可以定义RSS等事务;而@miport属于CSS范畴,只能加载CSS;而@import是在CSS中引入外部样式表。
  • link在页面载入时同步加载CSS;而@omport需要页面加载完毕才能加载。
  • link是XHTML标签,无兼容性问题;而@import是CSS2.1发布,低版本浏览器不支持。
  • link支持Javascript控制DOM改样式,而@import不支持。

3.文件路径../main.css./main.cssmain.css有什么区别?

  • ../main.css是父级目录下的main.css文件
  • mian.css也是当前目录下的main.css文件,和./main.css一样

4.console.log是做什么的?

是Javascript的控制台展示信息命令,通常可以作为JS测试用,比alert方便些。

5.text-align有几个值?分别什么作用?

text-align的值有:

作用
left 左对齐
right 右对齐
center 居中对齐
justify 两侧调整对齐

值 justify
最后一个水平对齐属性是 justify,它会带来自己的一些问题。
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在 CSS 中,还需要多做些考虑。
要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过 CSS 规范特别指出,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS 也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于 CSS 没有定义连字符行为,用户代理不太可能自动加连字符。因此,在 CSS 中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS 中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。


justify问题

参考:
W3Cschool:css text-align属性
CSS实现两端对齐的方法


5.pxemrem分别是什么?有什么区别?如何使用?

单位 定义 作用
px 像素单位 用像素指定大小
em 相对度量单位 用比例表示相对于父元素的大小
rem 相对度量单位 用比例表示相对于根元素的大小

eg:

用法

任何浏览器的默认字体大小都是16px。 ——引用自饥人谷_郑哲明

6.对chrome 审查元素的功能做个简单的截图介绍

chrome审查元素简介

7.如下设置p为几个rem,让h1p的字体大小相等?

 <h1>饥人谷</h1>
 <p>饥人谷</p>
 <style> 
  html{
    font-size: 62.5%;
  }
  p{
    font-size: ?rem;
  }
  h1{
    font-size: 60px;
  } 
</style>

已知浏览器默认字体大小是16px,h1的字体大小是60px,则16×62.5×?=60px。?解出来为6,所以是6rem。


本教程版权归饥人谷_阿群和饥人谷所有,转载须说明来源

相关文章

  • 任务五——HTML基础

    问答: 1.样式有几种引入方式? 有5种引入方式: 浏览器缺省设置 外部样式表(有两种形式) 或者 内部样式表 内...

  • 任务五-HTML(2)

    课程任务 1.样式有几种引入方式? link 和 @import有什么区别? 答: 外部样式表:将css的样式代码...

  • 任务:HTML基础知识

    1.HTML,XML,XHTML都是超文本标记语言,用浏览器打开,只是不同时期不同的变化,HTML5跟友善,更兼容...

  • 任务4-HTML基础

    网页乱码的问题是如何产生的? 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。 乱码一般...

  • 任务4-html基础

    网页乱码的问题是如何产生的? 产生的原因一般是网页设计编程的时候能有进行很好的文档设置说明,导致一些浏览器辨识不了...

  • web前端笔记2:CSS入门

    学习和完成任务二的笔记任务二:零基础HTML及CSS编码(一) 学习的资料 MDN HTML入门 [MDN CSS...

  • 任务五-HTML2

    1.样式有几种引入方式? link 和 @import 有什么区别? 样式的写法有五种,其中一种是浏览器的缺省设置...

  • 任务五~HTML2

    一、样式有几种引入方式? link 和 @import有什么区别? css样式引入方式有三种方式,分别是: 外部样...

  • ife任务

    任务描述 基于第一个任务“零基础HTML编码”的代码,参考示例图,在步骤一的代码基础上增加CSS样式代码的编写 头...

  • 我完成的百度前端技术学院任务列表

    所有任务见这里。欢迎大家 review 我的代码,所有代码在这里。 小薇学院(HTML/CSS) 任务一:零基础H...

网友评论

    本文标题:任务五——HTML基础

    本文链接:https://www.haomeiwen.com/subject/rdzrjttx.html