Don’t be evil 一直是谷歌谷歌广为人知的口号,但是现在这个口号要换了,新的口号是“让世界变得更美好”。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/12095175_182568845466236_4713631722404006498_o.jpg?oh=4d051beef0e7464dd8531573811c6cd9&oe=5A276CB4&__gda__=1516185183_2101c9885899f02bea0904968568e118)
我们在学习标签和属性之前,首先要说一下Chrome浏览器,
在上一个博客中,我们就已经说过选择谷歌浏览器的原因有两个,第一是因为市场占有率,
第二就是因为有强大的开发者工具,那么今天我们首先来看一下,谷歌浏览器可以给我们带来的便捷!
怎样打开开发者工具,首先我们使用Chrome打开index.html文件
打开方式1:视图-开发者-开发者工具
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/10604077_182575952132192_1783078861596095085_o.jpg?oh=df41d20e462417b6b1446d5d382f284a&oe=5A223086)
打开方式2:在网页上点击右键-检查
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12671672_182581815464939_611571989995189546_o.jpg?oh=14db9b08a96c8eacf0cd5c077a61cfb9&oe=5A1B234B)
介绍面板
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p843x403/12525466_182590428797411_8822204633473597482_o.jpg?oh=afcbefc856bf13a96f157e0b261e8b4e&oe=5A182EF2&__gda__=1512540252_d46e02ab6d508652011ab57bb10ea863)
透过上图,我们隆重的介绍一下Chrome开发者工具,整图是调出面板的界面。
我们着重看一下使用红线框起来的部分。
看标记1,这一行是标签栏,我们这里就使用第一个标签Elements。
看标记2,也就是网页源代码。
标记3,实际上是跟当前选中的元素有关。
现在我们着重看一下标记2,也就是我们的源代码。
我们看着图片回顾我们sublime中写的代码,有没有感觉多了很多。
我们在sublime中只写了<div><h1>Hello World!</h1></div>, 但现在标记2的面板中,明显多了好多。
我们把多出来的挑选出来,然后分析一下。
一共有三个,第一个是<html></html>,第二个是<head></head>,第三个是<body></body>, 这三个不速之客到底是谁。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12671675_182662898790164_5804442641053229207_o.jpg?oh=0513f6689cbf3e52e8a34492d586faf2&oe=5A24538A)
这三个不速之客,即使我们在sublime中不写,但是浏览器也会帮助我们渲染出来。可见有多么的重要。那么我们首先来说一下html标签。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12322719_182667858789668_2018625012068788202_o.jpg?oh=8882e65f432903b1010df495a7012e3a&oe=5A2BD6BB&__gda__=1511833621_b57ba8bf24a4597557e48794951b8fed)
html其实很简单,就是告诉浏览器,这是html文档。html文档其实跟我们写的论文差不多,分为两个部分。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12045614_182673112122476_2175624124752811349_o.jpg?oh=556bcdd42e3e21bf2b6c9e42474a2dfe&oe=5A217011&__gda__=1512124095_9c2b769f1eb41516ad2819917d37a6cb)
有摘要部分和正文部分,我们先说一下正文部分。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12890963_182674862122301_5303301515629397162_o.jpg?oh=b1e1c6e34df0a96cc81bfef38f12b4a5&oe=5A29273A&__gda__=1511682964_0cbce1b695c402b8a522a7c007b353f2)
正文部分,其实就是body标签围起来的部分,也就是用户可以看到的部分。
比如说div、h1、Hello World! 这些都属于正文部分,就在body里面。
摘要部分
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12888496_182679918788462_2027167359349345409_o.jpg?oh=48701879b0d6e105f5cbd1351d87072d&oe=5A1CDA7C)
摘要部分就是head标签中的,用户可能看不到,但是非常重要。
大家是否还记得我们在第一天的时候埋下了一个伏笔,就是只能写英文,例如Hello World!
一定不能写中文,那么现在我们来解决一下这个问题。
如果有人测试写中文,应该就发现,当在sublime中输入中文的时候,
在浏览器中显示出来的并不是中文,也不是某国的语言,而是乱码。
这种乱码是需要我们为浏览器指定一本字典才可以解决的。
那么为浏览器指定一本字典这个事就需要在<head></head>标签之中去写。
那么如何去为浏览器指定字典,我们来分下一下。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12378066_182701512119636_2786039450467054585_o.jpg?oh=5e7b37d21872159a8a226bf18f5b735a&oe=5A55103A&__gda__=1511959188_4ccc462bcc41e62ce3c73fa5f90920bb)
我在这里呢,起来个名字叫做标签又见标签。其实在html里面很多很多东西,都需要从标签开始。
我们之前已经接触过好几种标签了,比如下面这几种:
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12322791_182704372119350_3534766008755745646_o.jpg?oh=8c8a60123e55cf5fc4ebc4dec4aff7cc&oe=5A2003EF&__gda__=1511349569_046bb6c4fc98474fd2857afdfd151493)
上面我们列举的这几种标签都是双标签,也就是有首标签,有尾标签。
首尾标签之间就是我们的内容区域。那么现在我们需要引入一个新的标签。
首先我们需要考虑的一个事是,给浏览器加字典这个事,好像不需要给围住。
给它指定字典就好了,也不需要用户看到,也不需要给与什么反馈。
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/886069_182735888782865_4867688186216103295_o.jpg?oh=1633cac61d3c0f4d764698bc1d1c43ee&oe=5A58D63F&__gda__=1516316007_a1a12c3758b283a623c8e419f92230e4)
那么我们现在就需要引入一个新的知识,那就是在html中,有成双成对出现的标签,叫做双标签,
还有一种标签,不需要成双成对的来,那就是单标签。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12525106_182740138782440_1128906567286269558_o.jpg?oh=065b87b3ce3f7492aefaafbf2538f6da&oe=5A2D53C6&__gda__=1515616872_d45f919151368c34599bd96ceab25f17)
单标签是不需要成对出现就可以表达含义的标签。
接下来就说说我们遇到的第一个单标签,meta!
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/11254701_182746592115128_424858573926685412_o.jpg?oh=d6572eea5443007fdee201057d4fe7bc&oe=5A569B5E)
meta标签是HTML语言head区的一个辅助性标签。
在html中指的是基础信息的意思,很泛指。
如果直接将meta写上去,实际上是不会产生任何效果的。
如果希望它有效果,就需要为这个标签添加一些新的东西。
并且无论在哪个html文件中都可以见到它,那单标签该怎么写呢?
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12513657_182745895448531_8928439388363464804_o.jpg?oh=6f21359867eded4001db87e906c1b6d6&oe=5A16A5C0)
单标签写法很简单,就是没有尾标签,和首标签的写法是一样的。
写法我们知道了,那么我们现在还有清楚一个东西,那就是在HTML中标签起到的作用是非常重要的。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12377813_182763068780147_2971362315411128519_o.jpg?oh=8cb9eeecf6a0dbce87fe1d505a68a5c4&oe=5A570790)
我们说HTML是超文本标签语言,标签是HTML世界里的一等公民,
那么现在我们需要引入一个新的东西,是配合标签使用的,那就是属性!
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12694481_182795568776897_1911265260556467859_o.jpg?oh=16b7e8e404418efbcc9f90b81c3fc695&oe=5A1B024B)
我们刚刚说过,meta单标签如果写出来是没有任何作用的,如果想要起到效果就需要属性的配合,
有了属性就可以为标签添加更多丰富的信息。
那么接下来,我们就要为meta标签添加属性。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/11696627_182744432115344_225977129430265408_o.jpg?oh=9f5a1a1aefca0fe3029adfc1b979d0d2&oe=5A1F7A94)
现在标签有了,属性也知道了。那么怎么写呢,现在我们来介绍一下。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12795026_182803485442772_7388382581722415800_o.jpg?oh=908b9e8356660ca3246775c37deb4e1b&oe=5A1A9DE5&__gda__=1511625035_e73379d2724fc7e66f705bc46385f6f4)
写法其实很简单,我们只需要把meta标签撑开一点,然后协上一个属性名称 = “属性值”,
那么如果我们想要给浏览器添加一本字典属性的话,该怎么弄呢。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12885806_182808882108899_2642621854520484156_o.jpg?oh=1c769dfe82c79489355265802d1f57e7&oe=5A5EE55C&__gda__=1511925746_0bcbd43dfbf01289ec24aec3970326bc)
其实就是<meta charset=“urt-8”>,这就是属性=“属性值”。
这里需要强调的一点是,属性值是用两个英文的双引号引起来的,这点非常重要,
如果没有,那就不对,非常敏感。那么我们来解释一下这行代码。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12888785_182810442108743_8299449383275637066_o.jpg?oh=ad3ca4d5e2256df50fef3f09600eb869&oe=5A289AC0&__gda__=1512236142_3147523ae36aa64168aaff2d87604343)
charset全拼就是character(字符) set(集)的缩写。
UTF-8的全拼是8-bit Unicode Transformation Format。
翻译过来就是万国字典,有了它浏览器就可以正确的显示中文了。
那么现在我们需要回到sublime将万国字典加上,同时我们还需要把浏览器给我们加上的那三个标签写上,
能不劳烦浏览器干的,就一定要自己干。
为了测试我们的万国字典可以正常的显示中文,这里我们将首标签写上中文“课后帮”。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12377994_182864755436645_7393685599868933003_o.jpg?oh=770bf8b3e19159c5d1ee00701f07c64c&oe=5A122B6A&__gda__=1512423108_3df1929cbed1865860a0195206af149a)
这样我们就把该写的代码写上了,并且可以正常的显示中文。
那么现在我们还需要做一件事,就是加一个p标签,其实之前我们就有提到,但是一直没有用。那么现在我们用一下。
在h1标签下面写一段p标签,里面内容写homework Helper。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12473694_182870142102773_2315957138604596589_o.jpg?oh=90dca4d08f2ddd19bc8c504213f2bc21&oe=5A1A5793)
现在我们已经为课后帮添加了一个h1标签,也添加了一个p标签,但是其实和我们最终的效果还相差甚远。我们来对比一下!
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12794852_182877655435355_252588828757673160_o.jpg?oh=60f0b93ed39943631f6fc6b6397a80a1&oe=5A5CDAD2)
左侧是我们现在完成的,右侧是我们最终的效果图。 我们发现内容现在是一样了,但是样式还是相差太多了。
最终效果中的课后帮的颜色是偏红色的,而且HomeWord Helper在课后帮的右上角,那么这种样式该如何实现呢。
首先我们还是利用谷歌的开发者工具,来看看到底如何才能够达到我们想要的效果。
当我们打开面板的时候,点击到课后帮这行代码,然后我们它进行调试。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12022432_182897632100024_3505038606299146162_o.jpg?oh=35696fb4cc8493df7630b07d27c33145&oe=5A2253A8)
要想内容有样式,我们通过面板来解释一下样式是什么东西。
看一下数字1,这个我们前面提到过,elements是元素的意思,也就是我们html源代码中所包含的元素。
数字2,就是我们写的具体元素内容。
数字3,styles是样式的意思。看到这个我们应该是找到关键的地方了,
然后继续看数字4,element.style:element(元素) .(的)style(样式),也就是元素的样式。
就它了!如果我们想要改变标签中内容的样式,就通过它。
找到它了我们就需要往里面填写具体内容了!
那么具体该如何添加样式,我们利用下一节的内容进行讲解。