• 静态页面制作:2HTML的标签简介


    在这里我就假定大家已经根据第一天的内容,安装好了Chrome和Sublime3这两个必备的工具。
     
    首先我们先打开sublime3并且输入一点内容,这里需要注意的是,暂且不要输入汉语,我们可以先输入自己的英文名字,然后来看一下效果。
     
    至于为什么不能输入汉语,如果大家有兴趣可以自己试试(会有意想不到的效果!)。
     
    我在sublime3中输入Hello World!,然后Command + s保存(我的是苹果系统,如果是windows系统使用Control + s),
     
    文件名可以自由起,但是一定要注意后缀是.html。 举例:我的文件名是index,后缀名是.html。
    那么我们现在可以右键index.html文件,选择使用Chrome浏览器打开。然后出现的效果就如下图:
     
     
    这是我在sublime中输入的Hello World!,右边是谷歌浏览器给我的反馈结果。但是这个太小儿科了,网页中的内容是非常丰富的,不光有文字,还有图片、按钮甚至视频。然后还有不同的大小、位置、以及样式。我们也希望我们的网页丰富多彩,但是如果只是在文档中写入简单的文字,显然是无法拥有丰富多彩的效果,我们需要通过某种方式去告诉浏览器我们的要求。我们之前已经介绍,html是超文本标签语言,如果我们想要特殊的样式,那我们告诉浏览器的方式,就是给不同类型的内容打上“标签”。
     
     
    HTML实际上是有着不同类型的标签,其实也是针对不同的内容。
     
    比如说我们刚刚写的Hello World! 这几个字在我的网页设计中,我期望它是整个页面的标题,那么我们就需要使用标题标签,“h1标签”。
     
    通过上图我们不难理解,h1的全拼是Headline No.1的缩写,相当于是word中的一号标题,也可以理解为全文标题。
     
    h1标签常见的应用地方是内容页的正文标题一般都会用h1标签,有的首页的logo和网站名称也用h1标签,
     
    h1通俗点说就是告诉搜索引擎重要的地方,h1标签一般在一个页面出现1到2次不会太多。
    我们来分析一下标签到底该怎么写。举例例子:
    今天天气不错,这明显是某人说的一句话,在文章中如果某人引用了某句话,格式应该用双引号围起来,如下图:
     
    通过上图我们不难发现,引号是成对出现的,并且前后不同。在两个引号之间的就是我们具体的内容。
     
    这个特点其实跟我们HTML标签可以说是如出一辙,HTML标签“一般”也是成对出现(当然还有不一般的,我们后面会接触到)。
    我们来看一下网页中的标签是怎样的!
     
    如果我们只写h1,这是不符合规则的。因为如果光写h1很容易就跟内容重合了。
     
    所以我们需要在h1的左右两边加上<>,也就是大于号和小于号,这样就浏览器就可以识别到,这是一个h1标签。
     
    另外就是我们发现尾标签比首标签多了一个反斜杠/,我给大家通过红颜色标记出来了!在首标签和尾标签之间就是我们具体的内容了。
     
    下面我们回到sublime中,将刚刚写的Hello World! 使用h1标签围起来,看看是什么样的效果。
     
     
     
    我们在sublime中,将内容透过h1标签围起来,保存(Command + s),然后刷新我们的谷歌浏览器(Command + r)。
     
    如果你够细心,那么会发现,现在的效果已经发生了改变,那就是文字变大了,如果不加标签的话,文字就是正文的大小,加上h1标签之后,文字就变为全文标题的大小了。
     
    如果你在细心点,还会发现一个非常实用的细节,那就是当我的光标点在某个标签上的时候,标签的下方就会出现一排小......,可能现在我们的代码写的比较少,还体会不到这个sublime为我们提供的便捷。
     
    但是当我们写了很多很多标签的时候,这个细节将会帮助我们快速的定位到标签的对应者。
    除了h1标签还有很多其他的标签,在这里我们列举一些常用的,大家一一测试一下。
     
    看看每个标签所发生的效果!
     
    h2~h6标签和h1是一样的(同属于标题标签),其中的不同之处透过测试,大家也不难发现,那就是字体的大小会一次递减,当然其他的不同之处在这里我们也不做过多介绍。
     
    这里需要强调的是与标题标签对应的正文标签,例如:p标签,p标签的全拼是paragraph(段落),在文字段落中我们会经常使用到。
     
    a标签的全拼是anchor(锚点、超链接),后面我们会通过实际案例来进行介绍。
     
    刚刚我们说的标签都是有实际内容的,无论是针对标题的h1~h6标签,还是针对段落的p标签,以及使用超链接的a标签。
     
    那么除了有实际内容的标签之外,还有一种标签是没有实际内容的,是什么我们先不介绍.
     
    我们先说一个例子:其实我们的网页设计跟城市规划有很多似是而非的东西。
     
    在规划一个城市的时候,很多时候都会先设定框架,比如说北京,有朝阳区、海淀区、昌平区等等。
     
    这些在规划的时候并没有实际的东西,但是要先把这篇区域站好位置。有了这个位置之后,以后再针对这个位置进行详细的建设。
     
    那么我们的网页设计也一样,例如下图:
     
     
    这是一个简单的网页设计框架,最上方就是标签栏,下面就是内容,当然下面可能还有很多,但是这些都是区域的划分。
     
    也就是说我先把标题的区域定好,至于标题是什么,以后再说。内容的区域我也先设定好,具体的内容以后再填充。
     
    那么先划分区域,没有实际内容,我们就会使用到一个标签,就叫做div标签。
     
     
    div标签是HTML中非常重要的一个标签,也就是division的一个缩写,表示的就是一个区域。
     
    div既然表示的是区域划分,其实就相当于是一个容器,既然是容器,那么容器中就需要装东西.
     
    也就是在div这个容器中可以放载有内容的标签。也就是标签嵌套,如下图
    上图其实我们就已经使用div标签把h1标签包裹起来了,但是如果我们这么写,看着就会觉得很不舒服.
     
    一层套一层,现在是两层都会觉得不舒服,如果在套两层就更不可观了。
     
    我们可以在sublime中重新规划这行代码。保存并且舒心浏览器,我们会发现确实没有什么变化。
     
    注意: 没有任何变化,div的作用仍然是不可少的。 就好比我们上面举得例子,区域划分往往是建设前的设计。
     
    这个设计可以协助我们更好的填充内容!
     
     
    以上是标签的简介,下面我们来看一下标签和属性。
  • 相关阅读:
    2019春总结作业
    2019春第十二周作业
    2019春第十一周作业
    第10周作业---读后感?或许吧。
    第九周作业
    2019春第八周作业
    2019春第七周作业
    第六周作业
    2——目标与榜样
    1——自我介绍
  • 原文地址:https://www.cnblogs.com/hemiah/p/7301778.html
Copyright © 2020-2023  润新知