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了。

相关文章
|
2天前
|
存储 数据安全/隐私保护
走进HTML学习二
走进HTML学习二
|
2天前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
51 0
|
2天前
|
前端开发 搜索推荐
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)
19 0
|
2天前
学习HTML表单最关键要掌握的三个要点
学习HTML表单最关键要掌握的三个要点。
9 1
|
2天前
编程笔记 html5&css&js 006 HTML文本:标题
编程笔记 html5&css&js 006 HTML文本:标题
|
2天前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
72 1
|
2天前
|
XML JavaScript 前端开发
走进HTML学习一
走进HTML学习一
|
2天前
|
移动开发 Python HTML5
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
Python办公自动化【发送普通邮件、发送HTML邮件、发送附件邮件-smtplib、批量发送邮件-smtplib、发送邮件-zmail】(八)-全面详解(学习总结---从入门到深化)
55 0
|
2天前
|
JSON 定位技术 API
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
34 0