第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布局基础:浮动和清除浮动练习1

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <!DOCTYPE html> &…

    2020年4月4日
    7.9K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    4.3K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    9.0K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    7.0K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    3.4K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    10.5K0

发表回复

登录后才能评论