乐趣区

关于前端:零基础教你学前端4标题和段落标签

这节课学习页面中的题目和段落标签。为了丰盛页面中的内容,须要用到各种各样不同的标签这外面呈现了 三个不同的题目类型,他们的大小和加粗状况都不一样,这些段落这时就须要用到不同的标签来示意了,在页面中 题目标签有 6 个,别离是 h1 到 h6 对应着不同的字号大小和加粗状况。

关上编辑器,新建一个文件 title.html,在 body 内写上一个 h1 标签,来到浏览器咱们看到一个一级题目呈现了。回到编辑器 咱们顺次写下 h2 到 h6 标签,浏览器刷新一下,不同的六个题目呈现了这就是页面中的题目标签。这些题目标签 h1 最大 h6 最小 而且加粗成果也是 h1 最粗 h6 最细。只有 h1 到 h6 这六个题目标签供咱们应用。

段落标签 p 标签 他是一个双标签,只有是文章正文内容区域都能够应用 p 标签关上编辑器 咱们再次新建一个文件 section.htm 生成初始构造在这里咱们应用一个 p 标签 <p></p> 把我提前准备好的课文 < 背影 > 复制过去,回到浏览器中 p 标签外面的文本默认是从左侧开始的,而后顺次向右排列,当达到屏幕的右侧 文本折行事实 用 P 标签,实现自然段的分段。

回到浏览器中,页面中呈现了一个个的自然段。然而每个自然段都要首行缩进 2 字符,如何实现这种成果?间接在编辑器外面应用空格键 关上浏览器发现 不论编辑器多少个空格,只能显示一个空格的地位。

为了实现该成果 咱们目前应用的办法是   一个 代表的是一个空格键的间隔,如果想要实现多个空格间隔的话 就多写几个  即可。咱们把方才写的空格批改成  来到浏览器刷新页面,成果实现了,最初咱们把写好的空格复制一份 给每一个段落都加一个 来到浏览器,一篇课文的网页就制作实现了。

接下来咱们来实现示例内容 先来新建一个文件 news.html

察看效果图 第一行是个一级题目 咱们就须要应用 H1 题目标签 关上浏览器 文字没有居中 咱们能够给这个 h1 标签增加一个 align 属性 示意的是文字水平方向上的对齐形式 属性值为 center 再次来到浏览器 刷新当前 咱们看到 文字居中的成果实现了

副标题应用 h4 标签,在这里也来一个 h4 标签,加个 align 属性居中显示。上面是一个小段落 p 标签把这一段 文字写好,加上 2 个空字符,来到浏览器。再接下来就是每一个小文章的题目,这里应用 h3 标签来实现。文章小标题完结后,接下来是热点新闻中的第一个段落,咱们应用 p 标签 把对应的文本放在标签外面,空开对应的间距,浏览器中运行 , 看到实现了对应的成果。第一个文章就实现,前面的格局和这个是一样!

退出移动版