pacerscyc / blog Goto Github PK
View Code? Open in Web Editor NEW水水水
水水水
CSS样式在HTML中的head标签中以link标签形式导入;
JS应在body尾部以script标签形式引入,外部文件链接写入script标签的src属性中,内部则写在script标签内容中,一个script标签不能同时引入JS代码和外部JS文件。
**白屏:**如果把样式放在底部,对于IE浏览器,chrome等(css全部加载后再呈现,有可能等待长),在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏现象。
**FOUC:**Flash of Unstyled Content即无样式内容闪烁,指部分浏览器是边渲染边呈现,CSS放置body标签底部,会出现加载html结束后才一次性加载css样式,从而导致页面闪烁。
当浏览器碰到script脚本时
<script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。
详细渲染机制参考:文章
Html中的form表单常用于用户信息的填写和提交,在前端开发中使用较为广泛。
建立一个form表单,提交方式method设置为邮件发送,自动填写autocomplete打开,填写验证novalidate打开
<form action="" method="post" autocomplete="on" novalidate="novalidate"></form>
属性:
<label for="username">姓名:</label>
<input id="username" type="text" name="username" placeholder="用户名">
注意一旦 disabled=true
, POST后就没有值,对于别的空间也是
<input id="username" type="text" name="username" placeholder="用户名">
属性和方法:
<textarea name="comments" placeholder="ddd" cols="80" rows="20"></textarea>
<input id="password" type="password" name="password">
属性:
<label><input name="Fruit" type="radio" value="" checked/>苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
属性:
<label><input name="Fruit1" type="checkbox" value="" checked/>苹果 </label>
<label><input name="Fruit2" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit3" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit4" type="checkbox" value="" />梨 </label>
常用属性事件:
<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
一般用于储存一些不显示的信息,又可以通过JS进行操作修改,保存内容,被进一步调用等
<input type="hidden" name="country" value="Norway" />
text-align: center
一般使元素内的文本或内容水平居中,作用于块级元素,能够使文本、图片、行内元素以及input标签等实现水平居中,如下图
HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box1">
前端开发
<span>HTMML</span>
<p>CSS</p>
<input type="text">
<img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="">
</div>
<span class="box2">前端开发</span>
<p class="box3">
前端开发
</p>
</body>
</html>
样式
p,span,img{
border:1px solid;
}
.box1{
width:400px;
border:1px solid red;
text-align:center;
}
.box2{
border:1px solid red;
text-align:center;
}
.box3{
width:200px;
border:1px solid red;
text-align:center;
}
IE盒模型:width=content+padding+border (height计算方式相同)
W3C盒模型:width=content(height计算方式相同)
为一个元素设置box-sizing: border-box;
样式时,宽高计算采用IE盒模型,其宽度即为元素内容宽度,不包括padding和border。
line-height:2
指行高自身为文字大小的2倍
line-height: 200%
指行高为父元素文字大小的2倍
如下例所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="box box1">HTML</div>
<div class="box box2">CSS</div>
<div class="box box3">JavaScript</div>
</div>
</body>
</html>
给父元素设置line-height:2
和line-height:200%
效果分别如下
line-height:2
line-height:200%
特性:既呈现 inline 特性(不占据一整行,宽度由内容宽度决定),又呈现 block 特性 (可设置宽高,内外边距)
去除缝隙:利用父容器font-size为0,然后重新设置元素中font-size来去除设置inline-block样式带来的缝隙,代码和效果如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
</body>
</html>
样式
.wrap{
font-size:0;
}
.box{
width:100px;
border:1px solid red;
display:inline-block;
font-size:16px;
}
顶端对齐:为元素添加样式 vertical-align: top;
将不同的图标或图片合并到一张图片中,从而很好地减少网页的http请求,从而大大的提高页面的性能。
1.display:none
元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有
2.visibility: hidden
元素消失后,在浏览器位置依然保留
3.opacity: 0
元素透明度设置为0
4.background-color: rgba(0,0,0,0.2)
设置背景色透明
5.设置宽高等盒模型属性为0将元素隐藏
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有CSS样式情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
一个网页可以简单的分为三个部分:HTML——结构,CSS——表现,JavaScrip——行为。内容和样式的分离,就是指在网页编码的过程中,要将HTML和CSS两大部分分开。写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能体现页面结构和内容;然后进行 CSS 样式的编写,减少 HTML 与 CSS 契合度(即内容与样式分离) ;写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
样式与结构分离的优点:
<meta charset="utf-8">
编码方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
双核浏览器
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移动端的展示合理
<meta name="keywords" content="前端 饥人谷">
网页关键字,利于搜索
<meta name="description" content="最有爱的前端学习社区">
搜索引擎优化
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
指定字符集
<meta http-equiv="refresh" content="n;url=">
定时让网页在指定的时间n内跳转
<meta http-equiv="pragma" content="no-cache">
禁用缓存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
cookie设定,如果网页过期,存盘的cookie将被删除
通用的编码方式:
乱码原因:使用编辑器编写 HTML 文件,保存编写的HTML文件,会按照使用的编辑器默认的编码方式进行保存,使用浏览器打开HTML文件。在没有声明的情况下,浏览器并不知道你的这个文件是使用什么编码方式,于是会使用了默认解码方式。例如文件保存为GBK格式,在Chrome打开时默认使用 ISO -8859的解码方式,就会导致编码和解码不匹配,产生乱码。
解决方法:在文件保存的时候,自己要清楚是用哪种编码方式保存的(sublime默认保存方式是utf-8,安装了GBK Encoding support插件也可另存为gbk)。如果你的文件是保存为utf-8格式,在html 的 里添加;如果你的文件保存为gbk格式,一定在文件里添加,对浏览器进行说明,直接按照声明的编码方式进行解析读取,就不会有乱码问题。
浏览器内核可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
标签 | 场景 |
---|---|
<head> |
用于定义文档头部 |
<body> |
文档显示内容 |
<div> |
用于页面布局,展示大块内容 |
<h> |
h1~h6设置标题 |
<p> |
设置段落文本 |
<ul> |
无序列表 |
<ol> |
有序列表 |
<img> |
显示图片 |
<a href="#"></a> |
设置链接 |
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack有三种常见形式:
1.属性级Hack:例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识
2.选择符级Hack:比如IE6能识别*html .class{}
,IE7能识别*+html .class{}
或者*:first-child+html .class{}
3.IE条件注释Hack:针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本:。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效
1.是否要做
- 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
- 成本的角度 (有无必要做某件事)
2.做到什么程度
让哪些浏览器支持哪些效果
3.如何做
- 根据兼容需求选择技术框架/库(如jquery 1.x.x)
- 根据兼容需求选择兼容工具:html5shiv、Respond.js、CSS Reset、normalize.css、Modernizr.js、 postcss
- 条件注释、CSS Hack、js 能力检测做一些修补
仅在ie7下加载css
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
ie6、7下采用zoom属性
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效,zoom:1触发hasLayout,起到类似BFC的效果 */
}
inline-block在ie6、7下兼容
.target{
display: inline-block;
*display: inline; /*仅对ie67生效*/
*zoom: 1; /*仅对ie67生效*/
}
利用条件注释给ie9以下浏览器加载js库
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
判断浏览器版本为html添加相应的类
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js"><!--<![endif]-->
条件注释: 是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。
IE Hack: 针对不同版本的IE浏览器编写不同的CSS代码使其正常渲染。
js 能力检测: 能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何,只需确定浏览器是否支持特定的能力,就可以给出相关的方案。
html5shiv.js: HTML5 Shiv可以在旧版Internet Explorer中使用HTML5部分元素,并为Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5样式。
respond.js: 该脚本的目标是提供一个快速和轻便(3kb的/ 1kb gzip压缩)脚本,以便在不支持CSS3媒体查询的浏览器中启用响应式网页设计,特别是Internet Explorer 8及以下版本。
css reset: 对浏览器的默认样式进行重置以规范编码
normalize.css: 更高效规范的CSS重置方式,它具有以下作用
Modernizr: Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
postCSS: PostCSS是一种使用基于JavaScript的插件来自动执行常规CSS操作的软件开发工具。
特征:
对父元素影响:
若父容器中均为浮动元素,且父元素未设置高度时,父元素高度会塌陷变为0;
由于浮动块脱离了文档流中,所以文档流中的块表现得就像浮动块不存在一样,它不占据空间,父容器的高度不会被撑开,导致父容器高度塌陷。
对其他浮动元素影响:
浮动元素会依次排在其之前浮动元素左边或右边,父元素如果放不下了会被挤到下面一行。
对普通元素影响:
普通元素将会占据其原来的位置,后面的浮动元素会浮在普通元素之上。
对文字影响:
文字会环绕浮动元素显示。
清除浮动是指清除浮动元素给父元素造成的高度塌陷和给其他元素产生的影响。
方法一:
给父元素设置after伪元素
.clearfix::after{
content: "";
display: block;
clear: both;
}
方法二:
为父元素创建BFC,将浮动元素限定在BFC区域,避免影响其他元素。
如
overflow: hidden/auto/scroll
float: left/right
position: absolute/fixed
display: inline-block/table-cell/table-caption
定位方式 | 实现方式 | 使用场景 |
---|---|---|
static | 默认布局,按照文档流定位 | 默认布局 |
relative | 相对于元素自身正常位置进行定位,元素在文档流中仍占据原来空间,只是表现出来的位置会相对原来的位置偏移 | 适用于层叠效果 |
absolute | 绝对定位,相对于有除static外定位属性的第一个父元素偏移,absolute定位元素会脱离文档流 | 适用于小区块的布局使用频繁 |
fixed | 相对浏览器窗口定位,设置的偏移属性,是相对于浏览器窗口的位置 | 适用于广告等意图一直出现在用户眼前的信息 |
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
z-index值
值 | 描述 |
---|---|
auto | 默认,堆叠顺序与父元素相等 |
number | 设置元素的堆叠顺序 |
inherit | 规定应该从父元素继承 z-index 属性的值 |
position: relative:可以使元素相对于元素自身正常位置发生偏移,有relative定位属性的元素仍然在文档流中,它仍然占据着原来的位置,所以其他元素的位置不会发生变化。
负margin:通过负margin进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间,所以其他元素的位置发生了变化。
BFC(Block formatting context)指块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
可对元素设置如下属性触发BFC:
BFC作用:
1.解决margin重叠问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
css样式
.box{
width:100px;
height:100px;
margin:50px;
}
.box1{
background:red;
}
.box2{
background:blue;
}
效果
给box2添加父元素并设置overflow:hidden得到效果
2.两栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="side"></div>
<div class="ct"></div>
</body>
</html>
CSS样式
.side{
float:left;
width:80px;
height:150px;
background:red;
}
.ct{
width:300px;
height:300px;
background:yellow;
}
3.清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
CSS样式
.wrap{
width:400px;
border:3px solid blue;
}
.box{
width:100px;
height:100px;
float:left;
background:yellow;
margin-right:30px;
}
外边距合并: 两个块级元素位于普通流中,垂直方向上的margin发生叠加,取最大值进行合并。
不让相邻元素外边距合并: 将其中一个元素用父元素包裹,并建立BFC。
父子外边距合并:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
CSS样式
.wrap{
width:400px;
height:200px;
background:pink;
margin:20px;
}
.box{
width:100px;
height:100px;
background:blue;
margin:50px;
}
超文本标记语言,是语法较为松散的、不严格的web语言。HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
可扩展标记语言,主要用于存储数据和结构参考。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。
可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。
XHTML中元素必须有结束标签,元素必须嵌套;
XHTML不支持属性最小化,如下
正确:非最小化属性
<input checked="checked">
不正确:最小化属性
<input checked>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.