第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)
江山如画的头像江山如画管理团队
上一篇 2018年1月20日 下午3:37
下一篇 2018年1月20日 下午3:51

99%的人还看了以下文章

  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    9.7K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    5.0K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    10.8K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    17.8K1
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    6.9K0
  • HTML5- Canvas入门(二)画线并设置颜色

    HTML5- Canvas入门(一)画线 上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢? 答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧: <canvas id=”myCanvas” width=”200″ height=”200″ s…

    2022年7月10日 网页制作
    10.3K0

发表回复

登录后才能评论