在这里我就假定大家已经根据第一天的内容,安装好了Chrome和Sublime3这两个必备的工具。
首先我们先打开sublime3并且输入一点内容,这里需要注意的是,暂且不要输入汉语,我们可以先输入自己的英文名字,然后来看一下效果。
至于为什么不能输入汉语,如果大家有兴趣可以自己试试(会有意想不到的效果!)。
我在sublime3中输入Hello World!,然后Command + s保存(我的是苹果系统,如果是windows系统使用Control + s),
文件名可以自由起,但是一定要注意后缀是.html。 举例:我的文件名是index,后缀名是.html。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/12000824_182031385519982_4301034024600457508_o.jpg?oh=3e758ac207f7c7ed46d3a7da3819c372&oe=5A29B0E3)
那么我们现在可以右键index.html文件,选择使用Chrome浏览器打开。然后出现的效果就如下图:
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/11143199_182031782186609_6872031529637261084_o.jpg?oh=5bc8b2d604f41a8fafef3452ea15c760&oe=5A1AFCF9&__gda__=1512002903_e01fd617cf950dc612582084f0ecc82d)
这是我在sublime中输入的Hello World!,右边是谷歌浏览器给我的反馈结果。但是这个太小儿科了,网页中的内容是非常丰富的,不光有文字,还有图片、按钮甚至视频。然后还有不同的大小、位置、以及样式。我们也希望我们的网页丰富多彩,但是如果只是在文档中写入简单的文字,显然是无法拥有丰富多彩的效果,我们需要通过某种方式去告诉浏览器我们的要求。我们之前已经介绍,html是超文本标签语言,如果我们想要特殊的样式,那我们告诉浏览器的方式,就是给不同类型的内容打上“标签”。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12719191_182231538833300_1491788822077873474_o.jpg?oh=957792a2cd59a91d8d96eea90296d647&oe=5A5B8D2A&__gda__=1515949188_7a48b5ac13cff14cdd52cdea12470cc1)
HTML实际上是有着不同类型的标签,其实也是针对不同的内容。
比如说我们刚刚写的Hello World! 这几个字在我的网页设计中,我期望它是整个页面的标题,那么我们就需要使用标题标签,“h1标签”。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12672087_182232005499920_5334103515938445183_o.jpg?oh=8336c61936535317410d1d4e867408fc&oe=5A28AFA4)
通过上图我们不难理解,h1的全拼是Headline No.1的缩写,相当于是word中的一号标题,也可以理解为全文标题。
h1标签常见的应用地方是内容页的正文标题一般都会用h1标签,有的首页的logo和网站名称也用h1标签,
h1通俗点说就是告诉搜索引擎重要的地方,h1标签一般在一个页面出现1到2次不会太多。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/10873356_182245875498533_3816571390046516240_o.jpg?oh=ab114ce3aeef9cb25489992769c3464f&oe=5A2775D3&__gda__=1512253053_1f64e2736c3ed3b2c40910ce16a0f7d7)
我们来分析一下标签到底该怎么写。举例例子:
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12440397_182246468831807_1616746794702700707_o.jpg?oh=6cf26c0ebcb74e14d298bc334057bbe7&oe=5A612EC6)
今天天气不错,这明显是某人说的一句话,在文章中如果某人引用了某句话,格式应该用双引号围起来,如下图:
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12140957_182246628831791_5003671118097787133_o.jpg?oh=8e6d7d6bdb61c1ee3a5df822e29966c0&oe=5A1EBF95)
通过上图我们不难发现,引号是成对出现的,并且前后不同。在两个引号之间的就是我们具体的内容。
这个特点其实跟我们HTML标签可以说是如出一辙,HTML标签“一般”也是成对出现(当然还有不一般的,我们后面会接触到)。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12440578_182249975498123_7338251549960267574_o.jpg?oh=e52d5a5a47853a515711ab021163bcce&oe=5A5A4CE1)
我们来看一下网页中的标签是怎样的!
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12419218_182249792164808_2925407611660558959_o.jpg?oh=1456b0329c0abe55c25250da9bf869e3&oe=5A20CFFF&__gda__=1512708945_60e37300ed67a93d3ee1f90641fd6434)
如果我们只写h1,这是不符合规则的。因为如果光写h1很容易就跟内容重合了。
所以我们需要在h1的左右两边加上<>,也就是大于号和小于号,这样就浏览器就可以识别到,这是一个h1标签。
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12719132_182252348831219_5130037942821683020_o.jpg?oh=57644ae4c23ed68d12c6c56eed333842&oe=5A23BE80)
另外就是我们发现尾标签比首标签多了一个反斜杠/,我给大家通过红颜色标记出来了!在首标签和尾标签之间就是我们具体的内容了。
下面我们回到sublime中,将刚刚写的Hello World! 使用h1标签围起来,看看是什么样的效果。
![](https://fb-s-a-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12819365_182283835494737_3842772717331962783_o.jpg?oh=33eb50a2db8c7fa40f160838d558f13f&oe=5A59A68F&__gda__=1511221793_e2570fe763e982bdac58131890d82b6d)
我们在sublime中,将内容透过h1标签围起来,保存(Command + s),然后刷新我们的谷歌浏览器(Command + r)。
如果你够细心,那么会发现,现在的效果已经发生了改变,那就是文字变大了,如果不加标签的话,文字就是正文的大小,加上h1标签之后,文字就变为全文标题的大小了。
如果你在细心点,还会发现一个非常实用的细节,那就是当我的光标点在某个标签上的时候,标签的下方就会出现一排小......,可能现在我们的代码写的比较少,还体会不到这个sublime为我们提供的便捷。
但是当我们写了很多很多标签的时候,这个细节将会帮助我们快速的定位到标签的对应者。
除了h1标签还有很多其他的标签,在这里我们列举一些常用的,大家一一测试一下。
看看每个标签所发生的效果!
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12513931_182257678830686_1496942523024794143_o.jpg?oh=87e1ab8c43d6adccb405e12393aac4c5&oe=5A55BD39)
h2~h6标签和h1是一样的(同属于标题标签),其中的不同之处透过测试,大家也不难发现,那就是字体的大小会一次递减,当然其他的不同之处在这里我们也不做过多介绍。
这里需要强调的是与标题标签对应的正文标签,例如:p标签,p标签的全拼是paragraph(段落),在文字段落中我们会经常使用到。
a标签的全拼是anchor(锚点、超链接),后面我们会通过实际案例来进行介绍。
![](https://fb-s-c-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12322708_182255808830873_6315874655998206685_o.jpg?oh=c6bc5e0d5abd5a65b8b50320f3da9f21&oe=5A136F43&__gda__=1515991277_7df1f3223601c2f5735d4fa42f0fb170)
刚刚我们说的标签都是有实际内容的,无论是针对标题的h1~h6标签,还是针对段落的p标签,以及使用超链接的a标签。
那么除了有实际内容的标签之外,还有一种标签是没有实际内容的,是什么我们先不介绍.
我们先说一个例子:其实我们的网页设计跟城市规划有很多似是而非的东西。
在规划一个城市的时候,很多时候都会先设定框架,比如说北京,有朝阳区、海淀区、昌平区等等。
这些在规划的时候并没有实际的东西,但是要先把这篇区域站好位置。有了这个位置之后,以后再针对这个位置进行详细的建设。
那么我们的网页设计也一样,例如下图:
![](https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-8/p720x720/12819357_182252845497836_928800973158913065_o.jpg?oh=5a1a8d30efec8f6fd83a2d8bee4fff12&oe=5A5CAE60)
这是一个简单的网页设计框架,最上方就是标签栏,下面就是内容,当然下面可能还有很多,但是这些都是区域的划分。
也就是说我先把标题的区域定好,至于标题是什么,以后再说。内容的区域我也先设定好,具体的内容以后再填充。
那么先划分区域,没有实际内容,我们就会使用到一个标签,就叫做div标签。
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12378097_182270998829354_3733848740798920836_o.jpg?oh=89f72fb3736a30c6625b9cd4999eb245&oe=5A5BEA87&__gda__=1512719913_e16b158504bd0fdb1644804287e0f04c)
div标签是HTML中非常重要的一个标签,也就是division的一个缩写,表示的就是一个区域。
div既然表示的是区域划分,其实就相当于是一个容器,既然是容器,那么容器中就需要装东西.
也就是在div这个容器中可以放载有内容的标签。也就是标签嵌套,如下图
![](https://fb-s-b-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/886071_182272342162553_8105180197657945176_o.jpg?oh=a2def90770ded352bc65594b53e68e30&oe=5A56C059&__gda__=1512828417_1d77677ae646c8a295d784683992ffd7)
上图其实我们就已经使用div标签把h1标签包裹起来了,但是如果我们这么写,看着就会觉得很不舒服.
一层套一层,现在是两层都会觉得不舒服,如果在套两层就更不可观了。
我们可以在sublime中重新规划这行代码。保存并且舒心浏览器,我们会发现确实没有什么变化。
注意: 没有任何变化,div的作用仍然是不可少的。 就好比我们上面举得例子,区域划分往往是建设前的设计。
这个设计可以协助我们更好的填充内容!
![](https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t31.0-8/p720x720/12377793_182282965494824_754987563760365306_o.jpg?oh=38592c557e6c0b2e5986fc23287d91fd&oe=5A2BCE68&__gda__=1516000248_d1db05eb95051c662ed2f25efa5cbfee)
以上是标签的简介,下面我们来看一下标签和属性。