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>