← 返回首页
HTML5基础教程(四)
发表时间:2020-03-05 13:02:58
讲解html5的文本标签

HTML5与文本相关的标签如下:

标签 含义
h1-h6 页面正文标题,数字越大字越小
b 粗体字
strong 粗体字(强调)
i 斜体字
em 斜体字(强调)
center 居中文本,在HTML5中,不支持该标签。请使用 CSS 代替
ul 无序列表
ol 有序列表
li 列表项
dl dt dd 组合型标签,分别表示列表、标题和描述
a href=”…” 超链接
font 字体,在 HTML 5 中,不支持该元素,但是允许由所见即所得的编辑器来插入该元素
p 段落
div 块级元素
span 行级元素
br 换行
sub 下标
sup 上标
nav 导航栏

其中的块级元素和行级元素在后面的章节还有详细讲解,我只需要简单理解为div会单独的占领一行,而span不会单独占领一行。

通过一个实例,理解以上所有标签:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <style>
       #myheader{
           text-align: center;
       }
    </style>
</head>
<body>
<h1>欢迎大家访问我的个人主页</h1>
<h2>欢迎大家访问我的个人主页</h2>
<h3>欢迎大家访问我的个人主页</h3>
<h4>欢迎大家访问我的个人主页</h4>
<h5>欢迎大家访问我的个人主页</h5>
<h6>欢迎大家访问我的个人主页</h6>
<hr>

HTML5<br>
<!--加粗效果-->
<b>HTML5</b><br>
<strong>HTML5</strong><br>
<!--斜体效果-->
<i>HTML5</i>
<em>HTML5</em>
<center>文字水平居中</center>
<!--推荐使用css实现居中-->
<h2 id="myheader">文字水平居中</h2>
<!--无序列表-->
<ul>
    <li>红楼梦</li>
    <li>水浒</li>
    <li>西游记</li>
    <li>三国</li>
</ul>
<!--有序列表-->
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ol>
<!--有序列表使用字母表顺序-->
<ol type="A">
    <li>Java</li>
    <li>HTML</li>
    <li>Python</li>
    <li>C++</li>
</ol>
<br>
<dl> 
    <dt>css网站</dt> 
    <dd>网址为www.divcss5.com</dd> 
    <dt>html5网站</dt> 
    <dd>网址为www.w3schoool.com</dd> 
    <dt>牛牛编程网站</dt> 
    <dd>网址为www.simoniu.com</dd> 
</dl> 
<br>
<!--超链接-->
<a href="http://www.simoniu.com" target="_blank">牛牛编程</a><br>
<!--改变字体-->
<a href="http://www.simoniu.com" target="_blank"><font style="font-family: 仿宋;">牛牛编程</font></a><br>

<!--段落-->
<p>
    HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。HTML是基于SGML语言演变而来的,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。
</p>
<p>
    HTML的英文全称是 Hypertext Marked Language,即超文本标记语言。HTML是基于SGML语言演变而来的,并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据,使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。
</p>

<div>块级元素1</div>
<div>块级元素2</div>
<span>行级元素1</span>
<span>行级元素2</span>

<!--上标与下标-->
<div>
    z = x<sup>2</sup>+y<sup>2</sup>
</div>

<nav>
<a href="http://www.tmall.com">天猫</a> |
<a href="http://www.taobao.com">淘宝</a> |
<a href="http://www.jd.com">京东</a> |
<a href="http://www.suning.com">苏宁易购</a>
</nav>

</body>
</html>