这次继续学习《第四章 文本》的内容,包括div元素的作用、自闭合标签、块元素和行内元素的区别与联系、网页中特殊符号的输入方法。
学无止境,乐在其中。关注我,一起进步!
1、div分区标签
div是division的缩写,分区的意思。如果把html文件比喻成一座小城,那么div就是小区,p元素等就是楼房。用div标签把p元素等分类,有两个好处:一、提高代码可读性,二、便于用CSS控制元素外观。div元素的使用示例如下:
2、自闭合标签
html中的一般标签都有开始和结束两个部分(如<p> </p>),可以在其中插入其它标签。自闭合标签只有一个部分,它的内部不能再插入其它标签和文字。常见的自闭合标签如下:
<meta/>定义网页信息
<link/>引入外部CSS文件
<br/>换行标签
<hr/>水平线标签
<img/>图片标签
<input/>表单标签
小发现:自闭合标签中的斜线不写也能正常显示,如<br>也能正常换行。
3、块元素(block)和行内元素(inline)
(1)块元素在浏览器显示时独占一行,其内部可以容纳其它块元素和行内元素。常见的块元素有:
h1~h6标题元素
p段落元素
div分区元素
hr水平线
ol有序列表
ul无序列表
(2)行内元素在浏览器显示时可以与其它行内元素处于同一行,其内部可以容纳其它行内元素,不能容纳块元素。常见的行内元素有:
strong粗体元素
em斜体元素
sup上标元素
a超链接元素
(3)块元素与行内元素的本质区别是:块元素定义的是显示的实体(文字、图片等),行内元素定义的是实体的外观和性质(文字的粗细、位置、下划线等)。块元素和行内元素的代码示例和显示效果如下:
4、网页中的特殊符号怎么输入
网页中的特殊符号有对应的代码表示法,开头都是“&”,结尾都是“;”注意这是英语格式下的分号。
(1)易输入的符号
(2)难输入的符号,代码和显示效果如下图:
5、编程作业——实现本章开头的网页效果
代码如下:
<!DOCTYPE html>
<html>
<head>
<!--定义页面编码方式-->
<meta charset="utf-8"/>
<title>第四章编程作业</title>
</head>
<body>
<div>
<h1>各科小常识</h1>
</div>
<div>
<h3>语文</h3>
<p> 三国演义是中国四大古典名著之一,元末明初小说家罗贯中所著,是中国第一部章回体历史演义小说,描写了从东汉末年到西晋初年近100年的历史风云。</p>
</div>
<hr>
<div>
<h3>数学</h3>
<p> 勾股定理,对于直角三角形有:a<sup>2</sup> b<sup>2</sup>=c<sup>2</sup>。</p>
</div>
<hr>
<div>
<h3>英语</h3>
<p> No pain, no gain.</p>
</div>
<hr>
<div>
<h3>化学</h3>
<p> H<sub>2</sub>SO<sub>4</sub>是一种重要的化工原料,可用于制作化肥、洗涤剂等。</p>
</div>
<hr>
<div>
<h3>经济</h3>
<p> 版权符号©<br> 注册商标®</p>
</div>
</body>
</html>
显示效果如下:
这一章要记忆的内容比较多,需要多花不少时间去熟练。另外增加了一些概念理解,例如div分区标签的作用,自闭合标签的概念,块元素与行内元素的区别和联系,而且强化了HTML语义化的实践。对这些内容的理解都比标签本身重要。
,