Html学习总结－2

Sublime的常用插件及功能

  • AutoFileName：自动补全文件路径及名称的插件。如插入图片。
  • Bracket Highlighter：高亮效果。如定位括号，当选中开始括号，高亮标出结束括号。
  • Browser Refresh：修改代码页后保存，浏览器的最后一个tab页面会自动刷新。
  • Css Format：自动规整css格式，包括自动压缩css使其变得不可读，或解压缩css使其变得可读。
  • DocBlockr：自动生成注释。
  • Html Beautify:让html变得美观。
  • Js Format:格式化js代码。
  • jshintify:js校验，如分号写成了中文符号。
  • Emmet:使用仿CSS选择器的语法来生成代码，大大提高HTML/CSS代码编写的速度。
  • Git:代码管理，创建和连接GitHub上的项目。
  • Pretty JSON:漂亮格式化json。
  • Sublime Tmpl：创建模版，包括html,css等。

小贴士：安装插件的方法

  1. command+shift+p(启动命令模式的快捷键)
  2. 搜索命令 Package Control:Install Package并启动
  3. 在搜索相关插件关键词，安装

Html的基础要素即说明

<!DOCTYPE html>   <!--文档声明，告知浏览器以html5的标准渲染页面-->
 <html>
     <head>       <!--内放和页面内容相关的信息、js或样式表的文件地址等-->
         <meta charset="utf-8"/>       <!--告知浏览器解码方式是utf-8-->
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <!--告知浏览器以最新内核渲染页面，因最新内核肯定兼容最好-->
         <title>blog test</title>
         <style>
            
         </style>
     </head>
     <body>        <!--内放html代码和script-->
         <h1>标题</h1>
         <p>段落</p>
         <script>
            alert(1);
         </script>
     </body>
 </html>

严格模式vs怪异模式

出现严格模式和怪异模式的起因，源于当年Netscape 4和IE4实现css机制时，未完全遵守W3C提出的标准，其缺陷主要来自于盒模型。当时的网页开发者为了保证自己的页面可以在不同的浏览器正确显示，不得不按照各浏览器自身的规范来使用css。但越来越符合W3C标准是发展趋势，各浏览器如果直接更改其渲染模式，必然使得一些遵从原规则的老网站不能正确显示，于是就出现了按照混杂模式渲染和按照严格模式渲染的问题。
怪异模式又称混杂模式，即文档开头不加文档声明<!DOCTYPE html>，在不加入文档声明时，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。此时，各浏览器会按照自己的标准对页面进行渲染，不同浏览器就会出现不同的渲染结果，因此称为怪异模式或混杂模式。
严格模式又称标准模式，是指在文档开头对文档进行了声明，<!DOCTYPE html>告知浏览器要以html5的标准渲染页面，此时浏览器会严格按照该标准对页面进行渲染。

utf-8和gbk

  • gbk的文字编码都是双字节的，即不论中英文均使用双字节表示。gbk包含全部汉字字符，由于使用gbk编码的网页在国外没有gbk解码方式的电脑上无法正常显示，因此其主要用于国内网站的开发。
  • utf-8是一种国际通用的字符编码方式，包含全世界多个国家的语言文字。它对英文使用1个字节编码，中文使用2个字节编码。因此对于英文字符较多的网站，应采用utf-8进行编码，可比gbk编码方式节省50%的存储空间。同时，中文但用于国际使用的网站，也应采用utf-8对网站进行编码。

注意：
文件保存时用什么标准方式给文件进行编码，在浏览器解码时就要用什么标准解码，即meta设置的解析方式要与保存时的编码方式相同，否则页面乱码。
那么如何选择保存时的编码方式呢？Sublime编辑器File>Save with Encoding

详解<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页。在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。如<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />规定IE以IE7的方式渲染。
但现在，<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">对文档兼容模式的定义是：Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。或者换句话说，就是什么版本 IE 就用什么版本的标准模式渲染。
而chrome=1用于激活Chrome Frame，Chrome Frame是谷歌出版的一个浏览器内嵌框架，内嵌于IE浏览器，简称GCF。用户进行浏览时，表面是用IE 浏览器进行浏览，但实际却是用的GCF内核。由于很多用户并没有安装GCF,所以<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">的具体含义是：如果安装了GCF，则使用GCF来渲染页面「"chrome=1"」，如果没有安装GCF，则使用最高版本的IE内核进行渲染「"IE=edge"」。
不设置X-UA-Compatible是不是一样？不是的。有些因素会自动触发兼容性文档视图，这个时候设置X-UA-Compatible就可以防止这个自动触发的行为。 比较有意思的是，在设定X-UA-Compatible后，即使不声明DOCTYPE，在IE7和IE8下也不会出现怪异模式。

常见的浏览器&这些浏览器的内核

浏览器：
IE,Safari,Chrome,Firefox,Opera, 以及其他各种如360浏览器、QQ浏览器、猎豹浏览器、搜狗浏览器等。
浏览器内核：
在详述各浏览器的内核前，首先先了解下浏览器内核到底是个什么东西？“内核”只是一个通俗的说法，实际指的是“排版引擎”或“页面渲染引擎”。它决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染效果也可能不同，这也就使得网页编写者需要在不同内核的浏览器中测试网页显示效果。
Trident内核：IE
Trident是一个软件模块，具有相当成熟的接口内核设计，因此涌现出许多采用IE内核而非IE的浏览器。
因早起IE市场份额较大，所以该内核一度非常流行。但其实它有两个缺点，一是对W3C制定的标准支持不是很好，二是存在许多bug。这使得很多用户转向其他浏览器，Opera和Firefox就是这时兴起的。同时，Trident只能用于Windows平台。
Gecko内核：Firefox,Flock
该内核是套开放原始码的、以C++编写的网页排版引擎。该内核的优点是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但其缺点是比较消耗内存，在发展过程中变得异常庞大，结构十分复杂。不过，Gecko可以在Windows、BSD、Linux和Mac OS X多个平台中使用。
Presto内核：Opera7.0及以上
Presto是一个动态内核，其特点是渲染速度的优化达到了极致。它是目前公认的网页浏览速度最快的浏览器内核，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。不过渲染速度极致优化的代价是牺牲了网页的兼容性。
Webkit内核：Safari,Chrome
WebKit 是一个开放源代码的浏览器引擎，其优点是源码结构清晰、渲染速度快，该渲染速度虽不及 Presto ，但也快于 Gecko 和 Trident。WebKit 的缺点是对于网页代码的容错性不高，对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

什么是双核浏览器？
双核浏览器，就是有两个内核的浏览器。但并不是每个网页都采用两个内核进行渲染，而是不同网页用不同内核渲染。
由于IE浏览器在国内的普及率非常高，很多网站只考虑了对IE的兼容，并不符合W3C的标准。这种情况在网银、在线支付系统等网站尤为明显，甚至出现在非IE浏览器下无法交易的情况。而WebKit等其他内核的非IE浏览器以更高的性能和更好的用户体验在国际上拥有了越来越多的用户。于是为了让用户能够享受到新技术带来的浏览体验，浏览器厂商发明了“双核”这一浏览器模式。
代表：搜狗浏览器、猎豹浏览器、QQ浏览器等。

为什么style放在html头，script放在html尾？

js放后原因一：浏览器的渲染顺序是html文件从上到下依次渲染，js一般用于处理页面上dom元素，假如将script放在头部，则先渲染出js效果，然而其作用元素dom还未渲染出来，所以可能会报错。
js放后原因二：js文件通常较大，会有几百k。同时，浏览器在下载脚本文件时，不会启动其他任何下载进程。因此，将js放在前面会阻滞渲染进程。
js特殊情况：引入别人的js库或js代码量少时，script可放在文件头部。
css放前原因：让页面可以根据CSS样式逐步渲染。如果放在底部，要全部加载完成，才能渲染页面，最终会出现闪屏效果。

Style的三种设置方法

首先，在设置样式以前，我们要清楚每个标签都有浏览器的缺省样式，即浏览器默认样式。我们在给标签设置css样式前，各标签按浏览器缺省样式进行渲染。
1.外部样式表
<link rel="stylesheet" type="test/css" href="./index.css">
rel="stylesheet"意思：描述该link和当前文件的关系，它是当前文件的一个样式表。

路径设置规则
href="./index.css",即调用当前html文件所在文件夹下，名为index的css文件（index.css和html文件在同一文件夹内）,该路径可省略为href="index.css"。
href="../index.css",即调用与当前html文件所在文件夹的同级路径下，名为index的css文件（index.css和“html文件所在的文件夹”在同一文件夹内）。
href="../../index.css", 即调用与当前html文件所在文件夹的上一级路径下，名为index的css文件（html文件上两级文件目录下的index.css文件）。

@import url和link的区别
1.link是XHTML标签，除了加载CSS外，还可以定义RSS(一种站点用来和其他站点之间共享内容的简易方式，通常用于新闻和其他按顺序排列的网站，例如Blog。 )等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；而@import不支持。
结论：推荐使用link引入外部样式表

2.内部样式表

<style>
     .p{
       color:white;
     }
     #h1{
       font-size:2em;
     }
</style>```
在设置内部样式表时，“.”和“＃”的区别是“.”为class设置样式，“＃”为id设置样式。
**3.内联样式**
`<p style="border:1px solid #fff;border-radius:4px;">示意段落</p>`
该样式意为为p标签设置一个1像素粗，线型，颜色为＃fff的边框，同时该边框圆角为4px。若想设置点状边框，可将solid改为dotted。
>**各种样式的使用情况及好处**
通常，为了样式可以被更好的重复利用，使用外部样式表对css进行设置，即整个网站的通用样式使用外部样式表。内部样式表通常用于只该页面特有的样式，而内联样式用于单一标签的样式设置。当一个标签同时拥有外部样式表、内部样式表和内联样式时，各样式设置方法的最终显示优先级为“内联样式>内部样式表>外部样式表”。
不过，当设置样式时未采用外部样式表时，页面将减少网络请求次数，加载速度增快。

###色彩的三种表示方法

**1.色彩英文单词**
color: white
仅支持16种颜色的英文单词。

![单词色彩.png](http://upload-images.jianshu.io/upload_images/1221026-b754ff98ba2bc099.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**2.16进制色号**
color:#ffffff
共6位，两位为一单元，从前到后共三个单元，分别代表rgb的三个数值。每种颜色的最小数值为#00，最大数值为#ff。
**3.rgb数值**
color:rgb(255,255,255)
每种颜色的最小数值为0，最大数值为255。

>**如何使用chrome浏览器的拾色器？**
1. 任意选取一个element；
2. 给该element随意设置一个color值，如color:red；
3. 点击color和色号间的色彩示意小方块；
4. 吸管吸取页面上的颜色即可。


#问题延展和补充
***

#####href,src和url的异同和使用场景
url是统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。
href 属性规定被链接文档的位置(url)。href 是指向网络资源所在位置，建立和当前元素或当前文档之间的链接，用于超链接。
src属性规定在框架中显示的文档的url。src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，代替自己本身的内容。
总结来说，url代表的是地址，而href是转向地址，src是引入地址的资源并替换自身。
> 使用场景： 
url: @import ，background-image , behavior
href: a , link ,
src：script , img , iframe


#####设置页面字体

<style>
body{
font-family:"Microsoft YaHei","Arial","字体三","字体四","字体…","字体n";
}
</style>

该样式用于设置网页内的所有文字字体。首先，字体库分为浏览器里的字体库和电脑本机里的字体库，当浏览器加载网页字体时，它从font-family属性值从前到后依次寻找字体库，当字体一的库可被找到时，网页字体呈现字体一，若不能则顺延寻找字体二，若字体二还不能找到就依顺序寻找字体三、字体四，并依次类推。若所有设置字体均未找到库，字体最终就按浏览器缺省样式显示。

#####px,pt,em,rem对比
**px：**相对单位，表示pixel，像素，是屏幕上显示数据的最基本的点。“点”可大可小，当“点”很小时，屏幕显示清晰，即屏幕分辨率高；当“点”很大时，屏幕显示模糊，即屏幕分辨率低。因此，px是一个相对屏幕分辨率而言的相对单位大小。
>chrome浏览器内最小字体为12px，当设置的文字大小<12px时，浏览器默认显示12px大小。

**pt：**绝对单位，全称point，不过其中文翻译名词是“磅”，是一个专用的印刷名词，大小为1/72英寸。它是一个自然界标准的长度单位，是一个绝对单位大小。
**em：**相对单位，其值并不是默认不变的，会继承父级元素的字体大小。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
>若想简化font-size的换算，可在css的body选择器中声明font-size=62.5%；这样1em=10px，方便换算。

**rem:**相对单位，其值会继承html根节点的字体大小。比较好控制，所以用途比em更加广泛。



#####什么是SEO
SEO意为搜索引擎优化，是指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中关键词排名提高，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。
如何做到SEO? SEO的优化有很多方面，不过对meta标签进行优化显得简单而重要，如对keywords,discription等进行优化。
`<meta name="keywords" content="关键字" />`
`<meta name="description" content="网页描述" />`
#####alert()和console.log()的区别和优点
首先先了解下alert()和console.log()分别是干什么用的。
alert()用于弹出消息对话框，并且alert消息对话框通常用于一些对用户的提示信息。消息对话框是排它的，也就是在用户点击对话框的按钮前，不能进行任何其它操作，通常可用于调试程序。
console.log()用于在浏览器调试工具的控制台中打印信息，多用于对JavaScript程序进行调试。

相比于alert()，console.log()的优点是：
* alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，不会阻断js程序执行。
* console.log()可以看到结构化的信息，如淡化一个对象，alert()仅能显示它是一个对象，而console.log()却能看到它的具体信息。

#课堂小案例
***
题：在设计图上有一确定按钮，要求高60px，同时“确定”两字垂直水平居中
答：文字行高与按钮高度相等即可。具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
p{
text-align: center;
line-height: 60px;
border:1px solid black;
width:100px;
}
</style>
</head>
<body>
<p>确定</p>
</body>
</html>

#心得
***
在终于重新扒完上次的上课视频，恶补了若干个自己不清楚的知识点后，我可终于把这篇持续了好几天的超长博文总结完了！感觉脑袋已臃肿了好几个维度…也总算赶在晚上上课前把上节课的东西搞定了～表示上课的内容扒一扒可真是不少！继续加油！Fighting！
#参考
***
http://www.jirengu.com/app/video/619
http://www.jirengu.com/app/video/620
http://www.jirengu.com/app/video/621
http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html
http://zccst.iteye.com/blog/2162187
http://www.jb51.net/css/138683.html
http://www.zhihu.com/question/20193935
http://tools.yesky.com/19/34456519.shtml
http://baike.baidu.com/link?url=U_6xi8Sjqxc9lzc6Nt57t5P89f9lJzxNRhpHSniJRPTmRIw6udBlaIOFkFfO9k9sOnKEAJnqlwoVUvHMF5hBKq
http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
http://www.cnblogs.com/leejersey/p/3662612.html
http://www.douban.com/note/155032221/
http://www.jikexueyuan.com/blog/236.html
http://bbs.jirengu.com/?qa=25/src和href区别
http://www.jb51.net/css/37554.html
http://www.w3school.com.cn/html/html_colors.asp
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容