标题| 学习笔记

简介: 快速学习标题。

开发者学堂课程【零基础学前端 HTML+CSS 标题】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5109


标题

 

内容介绍:

一、标题 ( h ) 标签

二、示例

 

一、标题 ( h ) 标签

标题是通过 <h1> - <h6> 等标签进行定义的

<h1> 定义最大的标题,<h6> 定义最小的标题。它是成对出现。

请确保将标题标签只用于标题,不要为了产生粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页结构和内容编制索引。

 

二、示例

现在我们使用一些工具来写代码,

输入

<h1>新闻</h1>

<h2>北京新闻</h2>

<h3>详细标题</h3>

点击运行会自动调用默认浏览器运行,很明显看到文字是由大到小排列

image.png

总结:

HTML 标签由 H1-H6 组成,文字从大到小,但是不要用它当作大小字的控制使用,而是要针对一个网站的结构来指定标题。比如一个页面,有一个总标题,我们设计 H1,辅助标题设置 H2.

为什么只能标题使用 <h1>,搜索引擎会抓标题当关键字。

为了让网页有结构,所以像 H1 在网页上都不会乱用,不是为了它大就用 H1,为了小就用 H2,而是真正想要把哪部分当作关键字,哪部分是网页的重点,是真正的标题,我们在设计的时候该部分就要设计成为 H1的关键字。

举例

一个新闻网站,本身有一个新闻标题,一般可以设计 <H2>。一般不用 <H1>,因为 <H1> 是最重要的标题,所以一般使用 <H2>,新闻标题下面正文不能用 <H6>,因为它不是标题。

在这里我们再来修改代码

<h1>新闻</h1>

<h2>新闻</h2>

<h3>新闻</h3>

<h4>新闻</h4>

<h5>新闻</h5>

<h6>新闻</h6>

运行结果就有六种样式

image.png

相关文章
|
2月前
有标题的表格
有标题的表格。
19 3
|
3月前
标题和段落标记
【8月更文挑战第22天】
40 3
|
6月前
|
弹性计算 运维 Shell
每个网页标题的摘要
【4月更文挑战第30天】
51 0
|
前端开发 开发者 容器
新闻-布局 &amp;标题 |学习笔记
快速学习 新闻-布局 &amp;标题
新闻-布局  &amp;标题 |学习笔记
html+css实战192-标题
html+css实战192-标题
178 0
html+css实战192-标题
html+css实战108-新闻列表-标题
html+css实战108-新闻列表-标题
241 0
html+css实战108-新闻列表-标题
html+css实战10-标题和段落
html+css实战10-标题和段落
108 0
html+css实战10-标题和段落
【Discuz】实现主题标题和正文同时显示(2)
【Discuz】实现主题标题和正文同时显示
95 0
【Discuz】实现主题标题和正文同时显示(2)
|
PHP
【Discuz】实现主题标题和正文同时显示(1)
【Discuz】实现主题标题和正文同时显示
127 0
【Discuz】实现主题标题和正文同时显示(1)