文章目录

1、标题标签
2、段落标签
3、换行标签和空格标签
4、html字符实体
4、水平分割线
5、粗体和斜体标签
6、列表
- 无序列表
- 有序列表
- 自定义列表
7、HTML样式
8、挑战
9、实践

本节主要介绍 HTML 常用标签之标题标签、段落标签、换行标签、空格标签、水平分割线和HTML 列表。

1、标题标签

标题标签heading tag有六种h1，h2，h3，h4，h5，h6，代表着不同大小的标题。可以使用标题标签组织网页结构，<h1>到<h6>显示出来的文字大小依次从大到小。
示例一如下：

效果如下：

示例二：

6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

2、段落标签

段落标签paragrach tag：<p>
使用段落标签展示描述性内容。
示例一：

效果如下：

示例二：

效果如下：

从上述能看出，<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。

3、换行标签和空格标签

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：

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

效果如下：

4、html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。
如果想显示多个空格，可以使用空格的字符实体   ,代码如下：

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

另一个示例：

效果如下：

在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体<和>，比如：

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>3 &lt; 5 <br>10 &gt; 5
</p>

4、水平分割线

<hr/> 标签用于在 HTML 页面中创建一条水平线。

效果如下：

5、粗体和斜体标签

strong标签<strong></strong>显示为粗体
em标签<em></em>显示为斜体，strong标签和em标签都是表示强调。

效果如下：

6、列表

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

无序列表

无序列表是一个项目的列表，此列表项目可以使用实心圆、空心圆、方块进行标记，默认使用实心圆标记，无序列表使用 <ul> 标签。每个列表项始于 <li> 标签。

效果如下：

可以看到有多少个列表项就有多少个 <li> 标签。
type属性定义了列表项前项目符号的类型。
<ul> 标签的 type 属性：

值	备注
disc（默认）	实心圆
circle	空心圆
square	小方块

示例及效果如下：

效果如下：

对于无序列表，一般会使用样式去掉默认的小图标，实际开发中一般用这种列表。

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

效果如下：

<ol> 标签的 type 属性：

值	备注
1（默认）	数字表示（1，2，3…)
A	大写字母表示（A,B,C…)
a	小写字母表示（a,b,c…)
I	大写罗马数字表示(I,II,III…)
i	小写罗马数字表示(i,ii,iii…)

示例及效果如下：

效果如下：

有序列表在实际开发中较少使用。

自定义列表

自定义列表不是一列项目，而是项目及其注释的组合，通常用于术语的定义。
自定义列表以 <dl> 标签开始，<dl>标签表示列表的整体。
每个自定义列表项以 <dt> 开始，<dt>标签定义术语的题目。
每个自定义列表项的定义注释以 <dd> 开始，<dd>标签是术语的解释。。
自定义列表的列表项前没有任何项目符号。
语法格式：

<dl><dt>名词1</dt><dd>名词1解释1</dd>...<dt>名词2</dt><dd>名词2解释1</dd>...
</dl>

示例如下：

效果如下：

另一个示例：

<h3>前端三大块</h3>
<dl><dt>html</dt><dd>负责页面的结构</dd><dt>css</dt><dd>负责页面的表现</dd><dt>javascript</dt><dd>负责页面的行为</dd>
</dl>

7、HTML样式

学习了上面所介绍的标签以后，我们将学习为所有的 HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。

通过 "background-color" 属性值的设置来给背景设置颜色。
通过对 font-family 属性值的设置来设置字体
通过对 color 属性值的设置来设置颜色
通过对 font-size 属性值的设计来设计字体大小。
通过"text-align: center"设置内容相对页面居中对齐。
通过border:1px solid green;设置边框的宽度、样式、颜色。

<body><p style="background-color: red;text-align: center;border:1px solid blue;">LZY</p><p style="font-family: Arial;color:green;font-size: 50px;border:1px solid green;">泸职院</p><h1 style="text-align: center;border:1px solid red;">123</h1>
</body>

8、挑战

9、实践

新建一张egg.html页面，效果如下：

注意：

不要让你的HTML难以阅读，下面是正确的HTML代码，但是很难阅读。

HTML学习07（实践1）：HTML常用标签之标题、段落、换行、空格、列表相关推荐

【学习笔记】Unity3d C# 常用标签[xxx]
[学习笔记]Unity3d C# 常用标签[xxx] 介绍类字段方法介绍在使用Unity3d引擎去开发的时候,不可避免的要使用到专属的开发语言C#,而Unity3d开发引擎给我们提拱了很多的 ...
2019-7-22 [HTML] 基本结构 DOCTYPE声明标签:[title meta 标题段落换行加粗斜体下划线] 注释特殊字符 img标签 a标签
文章目录 0.HTML网页技术(基础) 1 HTML概述 1.1 什么是HTML? 1.2 Hello,HTML! 2 HBuilder的安装与使用 2.1 安装HBuilder 2.2 使创建项目 ...
前端学习——HTML初学__6 HTML常用标签（3）
继续进行标签学习: 一.表格标签表格主要用于显示,展示数据,它可以让数据显示的非常规整,可读性非常好,特别是后台展示数据的时候,一个表格可以将繁杂的数据表现得更加有条理. 表格基本语法如下: < ...
Aspcms标签大全及常用标签目录标题
相关解释: 1.首页指的是index.html文件.列表页一般指newslist.html,productlist.html等文件,该文件对应于后台栏目添加或修改时的列表模板.内页一般指news.ht ...
Web前端小白必看【网页开发工具/HTML常用标签】
网页开发工具和HTML常用标签一.网页开发工具vscode的使用 1.1常见的网页开发工具: 1.2vscode为例创建网页文件. 1.3vscode网页制作相关插件安装 1.4vscode出现的网 ...
第一次网页前端培训笔记（Html基础语法和常用标签）
一.什么是HTML HTML 是用来描述网页的一种语言.HTML 是一种在 Web 上使用的通用标记语言.HTML 允许你格式化文本,添加图片,创建链接.输入表单.框架和表格等等,并可将之存为文本文件 ...
HTML常见双标记图,HTML基础-常用标签及图片
标记/标签{元素} 双标签: 内容标签> 网页页面的根元素 .....h2-h6 标题表格.... 单标签: 内容例如:图片换行水平线.... 常用标签段落换行空格小 ...
php获取页面a标签内容_AKCMS常用标签代码整理
轻量级的CMS我觉得AKCMS算是小而强悍的,作者可以算是个极客,代码.功能精简,安全却挺到位,以至于让很多人无法很快使用他的网站程序.也有可能作者精力有限,没有更进一步完善这套系统,现在官网都仅仅是 ...
常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...

HTML学习07（实践1）：HTML常用标签之标题、段落、换行、空格、列表