专栏首页学习猿地Web前端学习 第2章 网页重构2 常用的html标签
原创

Web前端学习 第2章 网页重构2 常用的html标签

一、HTML语法

上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

 1 <!DOCTYPE html>              <!-- 文档声明 -->
 2 <html lang="en">             <!-- html开始标签 -->
 3 <head>                         <!-- head开始标签 -->
 4     <meta charset="UTF-8">       <!-- meta标签只有开始标签 -->
 5     <title>Document</title>      <!-- title标签的开始和结束标签写在了同一行 -->
 6     <style>                      
 7         p{                     /*style内部为样式,语法与html不同*/
 8             color:red;
 9         }
10     </style>
11 </head>                        <!-- head结束标签 -->
12 <body>                         <!-- body开始标签 -->
13     <p>我的第一个网页</p>
14 </body>                        <!-- body结束标签 -->
15 </html>                      <!-- html结束标签 -->

通过上面的案例,我们可以知道HTML语法的以下四个特征:

  • 大部分HTML标签都是成对出现的,【开始标签】是一对尖括号中间写入标签名,而【结束标签】相对于【开始标签】会在标签名之前添加一个斜杠。
  • 有些标签只有【开始标签】,没有【结束标签】。例如meta标签。
  • 开始标签中可以填写一些其他信息,例如meta中的charset=“UTF-8”,这叫做HTML标签的【属性】,用来进一步描述标签的信息。
  • HTML标签可以相互嵌套,例如body标签中嵌套了p标签,而body标签本身又在最外层的html标签中。

了解了上面四点,基本就掌握了HTML语法,但是还有两个地方我们并没有说,一个是第一行的【文档声明】和style标签中的语法。

关于【文档声明】这里不做详细讨论,有兴趣可以到百度查阅一下文档声明的历史演变过程,如果没有兴趣,也不影响咱们后续的学习。

关于style标签之内的内容,涉及到CSS的语法知识,我们会在本章第04节继续讨论。

二、常用的HTML标签

本节我们来了解常用的HTML标签,虽然HTML标签有上百个之多,但是我们只要掌握下面十几个,就可以完成丰富的网页。而且我们在后续的项目开发当中,也是仅仅只使用这十几个标签而已。

标题标签

在网页中我们经常会看到一篇文章的标题,或是文章中某一段落的标题。像这样的标题,我们使用标题标签h*(*代表着1-6六个数字)示例代码如下所示。

1 <h1>一级标题标签</h1>
2 <h2>二级标题标签</h2>
3 <h3>三级标题标签</h3>
4 <h4>四级标题标签</h4>
5 <h5>五级标题标签</h5>
6 <h6>六级标题标签</h6>

如果整个网页只有一篇文章,那么这篇文章的主标题我们可以使用h1标签。副标题可以使用h2标签。文章中的小标题,我们可以使用h3或h4标签。分别表示三级标题和四级标题。h5和h6这种更低级的标题,用到的情况不是特别多。

段落标签

在网页中,一篇文章会有很多段落型的文字,这些段落我们使用p标签表示,代码如下所示。

1 <h3>前端开发学习心得</h3>
2 
3 <p>本章通过实例向您演示最常用的 HTML 标签,学习 HTML 最好的方式就是边学边做实验。代码写得多永远比看得多更重要,不断地练习才能不断地成长!</p>
4 
5 <p>HTML和CSS只是前端学习的入门小菜,JavaScript才是前端工程师的试金石。打下良好的JavaScript基础,才能在后续的学习中得心应手。</p>

列表标签

网页中的列表是非常常见的,HTML中的列表包括有序列表,无序列表,描述列表,这里我们只例举无序列表,在后续的开发中,我们也几乎都是在使用无序列表。

1 <h1>你喜欢的水果是什么?</h1>
2 <ul>
3     <li>香蕉</li>
4     <li>苹果</li>
5     <li>鸭梨</li>
6 </ul>

ul标签可以表示无序列表,列表中的元素用li标签表示,这里需要注意的是:

  • li标签一定要写在列表之中,不能单独使用;
  • ul标签内只存放li标签,不要把其他标签也放入ul当中(如果需要在列表中添加图片或链接,可以写在li中,而不是ul中);

超链接标签(锚点标签)

网页中的超链接用a标签表示,代码如下所示:

1 <a href="http://baidu.com">跳转到百度</a>
2 <a href="demo01.html">跳转到demo01.html文件</a>
3 <a href="#footer">跳转到页尾</a>

本节开头我们已经提到了HTML标签的【属性】,【属性】用来进一步描述标签。例如上面的三个例子,我们可以使用href属性设置不同的a标签链接到不同的位置。

关于href属性的值有示例代码中的三种设置方式,使用方法如下所述:

  1. 跳转到其他网站,网址前要写http://或https://
  2. 跳转到当前网站(或本机文件),可以直接填写相对路径或绝对路径。
  3. 可以通过设置锚点的方式,让网页跳转到当前页面的指定位置。

在实际开发中,我们经常会将超链接放在列表中,代码如下:

1 <ul>
2     <li><a href="http://baidu.com">百度</a></li>
3     <li><a href="http://163.com">网易</a></li>
4     <li><a href="http://qq.com">腾讯</a></li>
5 </ul>

图片标签

网页中的图片可以使用img标签表示,代码如下所示:

1 <img src="images/logo.png" alt="文件无法显示">

img标签涉及到两个重要的属性:

  • src属性可以指定要显示的图片源文件的路径;路径分为绝对路径和相对路径。

相对路径就是:指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法,其表示的意义不尽相同。

绝对路径:是指完整的网址

  • alt属性中可以设置文本,当图片无法正常显示的时候,图片位置会显示alt属性中的文本信息。

div标签

div标签在网页中没有明确的语义,可以说它是一个【无语义标签】,div标签常常用来作为一个容器存放其他标签,是一个很重要的布局工具,在后续的章节中,我们会经常使用它,本节大家只做了解即可。

1 <div>这是一个容器</div>

span标签

span标签与div标签类似,同样是一个【无语义标签】,通常用来存放文本内容。示例代码如下:

1 <h1>我最新欢的颜色是蓝色</h1>
2 <h1>我最新欢的颜色是<span>蓝色</span></h1>

在上面的第一行代码中,所有的文本都存放在h1标签当中,我们只能给这些文字统一设置样式。如果我们希望只给蓝色设置样式,那么就需要用到第二行的写法。这样我们就可以单独给蓝色两个字设置样式了。

如果需要单独设置文字的样式,又没有什么特别的语义,那么就需要用到span标签。

三、常用的html属性

在上面的内容中,我们已经说过a标签的href属性和img标签的src属性和alt属性,接下来我们再说两个常用的属性。

1 <div id="top">id属性就是标签的身份证</div>
2 <div class="box">class属性可以给标签分类</div>
3 <div class="box">class属性可以给标签分类</div>
4 <div class="box">class属性可以给标签分类</div>

id属性就像标签的身份证一样,不能重复,例如我们已经编写了一个id为top的属性,那么后续的标签中就不能再有id为top的标签。我们可以通过id找到HTML文档中的唯一元素,并设置其样式(第04节我们讲解如何使用css选择器找到指定元素)。

class属性可以将HTML标签分类,我们可以通过box属性找到所有class值为box的HTML标签。

四、课后练习

  1. 将本节学习到的所有标签在一张网页中展示出来。
  2. (思考题)span标签与div标签有何区别。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • Web前端学习 第2章 网页重构11 HTML5新增标签

    html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5,css3的新特...

    学习猿地
  • 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签

    html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5,css3的新特...

    学习猿地
  • 如何有效推进百万标签库的治理?

    在大多数公司,成千上万的标签虽然在某种程度上是数据服务能力的象征,但到最后往往成为了一种负担,只管杀不管埋的现象太普遍了!

    木东居士
  • 学术资讯 | 优Tech分享-To B业务中的图像多标签识别

    现实生活中,人们通常会使用手机记录生活,拍摄并保存自己的所见所闻。因此,对相册中的照片场景及相关进行识别分类,帮助人们更快速整理照片成了一种不可或缺的需求。

    优图实验室
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • HTML中的容器标签

    什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

    一墨编程学习
  • vim-tabe多标签切换

    原文链接:https://www.cnblogs.com/liqiu/archive/2013/03/26/29819...

    ccf19881030
  • 用HTML写一篇简单的日记

    在这篇文章之前,已经初步的了解了HTML是怎么创建了,接下来,我们要用创建的文件去写我们进入前端的第一个demo,当然了,如果你忘记了,我之前的文章里也有详细的...

    守护最温柔的金木
  • 001.html常用的基础知识点

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    qubianzhong

扫码关注云+社区

领取腾讯云代金券