HTML基础知识2

作者: Sheldon_Yee | 来源:发表于2016-10-04 15:39 被阅读35次

前端基础总结：HTML基础知识
前端学习大纲
2019-06-17
HTML基础知识(2)
HTML基础知识2
Html初级知识总结
Cocos2d-JS基础知识
HTML基础知识
标签
前端知识点

keep going.jpg
<h3>1.样式有几种引入方式?</h3>
<ul>
<li>外部样式表
在head部分加入<link rel='stylesheet' type='text/css' href = '/css/base.css'>，引入外部的CSS文件.
此种方式的优点：一个页面可以引入多个外部CSS文件，方便CSS代码复用，方便维护；
目前应用较多。
缺点：代码量集中，容易混乱。
<li>内部样式表
在head部分加入<html><head><style> div { background: #fff; } </style></head></html>
此种方式的优点：单个页面内的CSS代码具有统一性和规划性，便于维护。
缺点：多个页面之间CSS复用仍然不够。
<li>行内样式表
<p style="font-size:12px; color: blue">
这种方式的优点：分散灵活方便；
缺点：缺乏整体性和规划性，不利于维护，维护成本高；
这种方式的CSS渲染的优先级要高于其它三种。
<li>导入
@import url("test.css")
特点：引入方便，但性能可能较差</br>

<h3>2.link和@import的区别？</h3>
1.范畴不同： link是HTML标签，除了加载CSS之外，还可以定义其他如RSS事务；@import属于CSS范畴，只能加载CSS；

2.加载顺序不同：link引入CSS时，在页面加载时同时加载，而@import需要页面完全载入以后加载；

3.兼容性差别： link是XHTML标签，因此无兼容问题，而@import是CSS2.1提出的（IE5以上才能识别），因此低版本的浏览器不兼容；

4.是否支持JS DOM改变： link支持使用JavaScript控制DOM改变CSS样式，@import不支持

5.权重不同： link方式样式的权重高于@import样式的权重。</br>

<h3>3.文件路径../main.css 、./main.css、main.css、/main.css有什么区别?</h3>

文件路径	区别
../mian.css	上级目录的main.css
./mian.css	当前目录的mian.css
mian.css	当前目录的mian.css
/mian.css	根目录的mian.css

<h3>4.console.log是做什么用的?</h3>
console.log()是向控制台输出一条消息，作用是让开发者调试代码。
</br>

<h3>5.text-align有几个值，分别有什么作用？写截图说明区别?</h3>

值	作用
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。######

H~70~3D0{2N6~%WOCK~CZ4C.png

<h3>6.px、em、rem分别是什么？有什么区别？如何使用</h3>
1.px：是Pixel的缩写，像素，是指基本原色素及其灰度的基本编码.
2.em：单位名称为相对长度单位，相对于当前对象内文本的字体尺寸.
3.rem：是相对单位，是相对HTML根元素.</br>
<h3>区别?</h3>

值	区别
px	px为相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的；
em	em为相对长度单位。相对于当前对象内文本的字体尺寸；
rem	rem可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。