任务五——HTML基础

问答:

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。


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,125评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,293评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,054评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,077评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,096评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,062评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,988评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,817评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,266评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,486评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,646评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,375评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,974评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,621评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,642评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,538评论 2 352

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,466评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,484评论 0 26
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • 1.样式有几种引入方式? link 和 @import 有什么区别? 样式的写法有五种,其中一种是浏览器的缺省设置...
    饥人谷_沈梦圆阅读 344评论 0 0
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,075评论 0 40