zoukankan      html  css  js  c++  java
  • 静态页面制作: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的作用仍然是不可少的。 就好比我们上面举得例子,区域划分往往是建设前的设计。
     
    这个设计可以协助我们更好的填充内容!
     
     
    以上是标签的简介,下面我们来看一下标签和属性。
  • 相关阅读:
    关于JSON可能出现的错误,待更/todo
    mongoose的安装与使用(书签记录) 2017
    HTTP的学习记录3--HTTPS和HTTP
    HTTP的学习记录(二)头部
    HTTP(一)概述
    LeetCode 455. Assign Cookies
    LeetCode 453. Minimum Moves to Equal Array Elements
    LeetCode 448. Find All Numbers Disappeared in an Array
    LeetCode 447. Number of Boomerangs
    LeetCode 416. Partition Equal Subset Sum
  • 原文地址:https://www.cnblogs.com/hemiah/p/7301778.html
Copyright © 2011-2022 走看看