JavaWeb学习之路(8)--HTML为内容添加标题

简介: 本文目录1. 标题的作用2. 如何编写HTML标题3. 标题大小对比4. 小结

1. 标题的作用

很多东西都得有标题、题目。


诗歌要有个题目,传达中心含义。书本要有个题目,揭示书籍内容。


网页也需要有标题,概括网页的内容。需要注意的是,本篇内容讲述的标题不是网页头部的<ttile>标题,而是网页<body>内容区域里面的标题。


从英文来讲,比较好区分,网页头部标题是title,而内容区域的标题是heading。


2. 如何编写HTML标题

HTML的标题有6个级别,对应标签分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。


注意h1最大,h6最小。


我们以一首诗为例,编写一个带标题的页面。


<html>

<head>

   <meta charset="utf-8">

<title>春晓</title>

</head>

<body>

   <h1>春晓</h1>

   春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。

</body>

</html>


效果如下,注意上面的红线部分是<title>标题,而下面的红线部分是<h1>标题。



3. 标题大小对比

我们通过一个网页来看下h1-h6的大小区别:


<html>

<head>

   <meta charset="utf-8">

   <title>标题大小对比</title>

</head>

<body>

   <h1>这是1级标题</h1>

   <h2>这是2级标题</h2>

   <h3>这是3级标题</h3>

   <h4>这是4级标题</h4>

   <h5>这是5级标题</h5>

   <h6>这是6级标题</h6>

</body>

</html>


效果如下:



4. 小结

实际网页开发中,标题的样式效果要比heading标签复杂一些,这个在以后的学习中我们会慢慢接触。


本章掌握h1-h6的用法就OK了。

相关文章
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
HTML 标题2
HTML标题通过&lt;h1&gt;到&lt;h6&gt;标签定义,其中&lt;h1&gt;为最大标题,&lt;h6&gt;为最小标题。&lt;hr&gt;标签用于创建水平线,分隔页面内容。注释通过&lt;!-- --&gt;添加,提高代码可读性,浏览器不显示。
|
2月前
|
搜索推荐 索引 SEO
HTML 标题1
HTML标题通过&lt;h1&gt;至&lt;h6&gt;标签定义,&lt;h1&gt;为最大,&lt;h6&gt;为最小。浏览器自动在标题前后添加空行。标题对网页结构和搜索引擎优化至关重要,应按重要性顺序使用,以帮助用户快速浏览页面内容。
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
51 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
45 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
38 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
48 1
|
2月前
html基础知识学习
html基础知识学习
39 0
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
207 0