第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

(14)
江山如画的头像江山如画管理团队
上一篇 2018年1月20日 下午3:37
下一篇 2018年1月20日 下午3:51

99%的人还看了以下文章

  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    8.4K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    7.5K0
  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    7.7K0
  • 第9课:在网页中添加图像

    假如能把自己喜欢的的图像放到网页上,那就太好了。 这貌似有点难度。。。 也许是有点难度,但其实也不难,一个元素就可以搞定: 例1: <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下: 你要做的只是:告诉浏览器你要插入一张图…

    2018年1月20日
    8.7K0
  • div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

    div+css实现面包屑导航,主要用到了CSS3伪元素before,大家可以通过本利好好理解before的使用方法,下面125建站网给出实现代码。 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title></title> &…

    2023年1月5日
    2.0K0
  • CSS制作三角形原理—超简单

    网页制作中我们经常会需要三角形图标,例如内容展开收起、左右箭头点击切换轮播,点击某条列表数据查看详情等。 三角形图标应用范围广,我们有必要了解一下它的实现原理。 1) 一个最基础的边框效果 .content { width: 50px; height: 50px; border: 2px solid; border-color:#ff9600 #3366ff…

    2019年11月26日 网页制作
    7.1K0

发表回复

登录后才能评论