Python笔记:HTML和CSS 7.1——html文档结构和常用标签02

一、html标题标签

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。
具体表现形式直观来讲就是字体加粗加大

6种级别的标题表示文档的6级目录层级关系,比如说: <h1>用作主标题,其后是 <h2>,再其次是 <h3>,以此类推。(和MarkDown的“#”一个样)
搜索引擎会使用标题将网页的结构和内容编制索引,所以网页上使用标题是很重要的。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
</body>
</html>
html标签.png

二、段落标签

<p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

效果:


html段落标签.png

可以看到虽然我们在代码中给两段文字加了一个空行,但是在浏览器中两段文字还是接在一起的。
要想解决这个问题,就要介绍下面的换行标签

三、换行标签

在想换行的地方插入<br />

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
    一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
    </p>
</body>
</html>

效果:


html换行标签.png

四、html字符实体

关于空格

在代码中成段的文字中打多个空格,在渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体&nbsp

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
    </p>
</body>
</html>

效果:


html字符标签—空格.png

可以看到第一行之前有两个空格

关于“<”和“>”

因为html的标签中含有"<"和">",而想在网页中正确显示"<"和">"的话,要使用字符实体&lt 和 &gt

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
    <p>
        3 &lt; 5 <br>
        10 &gt; 5
    </p>
</body>
</html>

效果:


html字符实体.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容

  • 总体内容1、前端概述2、html 文档结构3、html 标题标签、段落标签、换行标签 与 字符实体4、html 块...
    IIronMan阅读 724评论 0 9
  • 目录 理解:相对路径三种形式 应用排版标签文本格式化标签图像标签链接相对路径 / 绝对路径的使用 1. HTML ...
    jovelin阅读 763评论 3 5
  • HTML 是一种超文本标记语言@“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记...
    咻咻咻滴赵大妞阅读 557评论 0 1
  • HTML 是一种超文本标记语言@“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记...
    雷神的铁粉阅读 546评论 0 0
  • HTML 指超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言...
    神齐阅读 1,943评论 0 3