第3课:HTML的元素与标签

本节课我们学习HTML的重要成分——元素(element)。
元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。

“标签”是什么?

标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。
一般标签成对出现,首标签(start tag)(如<html>)和尾标签(end tag)(如</html>)。它们唯一的区别在于,尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之间来对内容进行标记。
HTML主要就是各种各样的元素,所以,学习HTML,就是学习使用各种元素。
可以举些例子么? 没问题。比如,b元素的作用是告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。(这里的“b”是“粗体(bold)”的意思。)
例1:

<b>这句话应显示为粗体。</b>

该例在浏览器中将显示如下: 这句话应显示为粗体。 h1、h2、h3、h4、h5及h6元素的作用是显示标题(这里的h是“标题(heading)”的意思)。其中h1是一级标题,字体最大;h2是二级标题,字体比一级标题略小;而h6是六级标题,它是最后一级标题,字体也最小。
例2:

<h1>这是标题</h1>
<h2>这是子标题</h2>

该例在浏览器中将显示如下:

这是标题

这是子标题

首标签和尾标签总是必须的吗? 常言道,凡事均有例外。在HTML中,也有些元素没有尾标签,比如像下面这个换行标签:

<br />

html标签中的字母应该大写还是小写?

浏览器不介意标签是大写还是小写,或者混合大小写。无论大写还是小写在浏览器上的显示效果都一样。
但是,正确的写法是采用小写字母来书写标签。所以,要养成用小写字母书写标签的习惯。
这一课就到这里,如果花10分钟时间继续学习下一课的话,你将能够制作自己的第一个网站。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/500.html

(18)
江山如画的头像江山如画管理团队
第4课:制作自己的第一个网站
上一篇 2018年1月20日 下午3:37
第2课:HTML是什么?
下一篇 2018年1月20日 下午3:51

99%的人还看了以下文章

  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    10.9K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    5.1K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    11.3K0
  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    10.0K0
  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    11.1K0
  • CSS Sprites:图片整合技术详细案例

    CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    10.3K0

发表回复

登录后才能评论