网页设计中的HTML标签(一)

  • 2019-07-11 15:13:14
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

HTML定义的标签很多,下面对常用标签进行说明,随着学习不断深入,相信会逐步掌握在网页设计时HTML所有标签的用法和使用技巧。

1、文档基本标签在网站建设时主要用来标识文档的基本结构,也是网页设计中一个网页文档应该使用的基本标签。 

•<!DOCTYPE>:定义文档类型。

•<html>:定义HTML文档。   

•<head>:定义关于文档的信息。   

•<meta>:定义关于HTML文档的元信息。   

•<title>:定义文档的标题。   

•<body>:定义文档的主体。   

•<h1>…<h6>:定义HTML标题。   

•<p>:定义段落。   

•<br>:定义简单的折行。   

•<hr>:定义水平线。   

•<!--...-->:定义注释。


2. 格式标签格式标签主要用来标识文本区块,并附带一定的显示格式。   

•<acronym>:定义首字母缩写。   

•<abbr>:定义缩写。

•<address>:定义文档作者或拥有者的联系信息。   

•<b>:定义粗体文本。   

•<bdi>:定义文本的文本方向,使其脱离其周围文本的方向设置。  

•<bdo>:定义文字方向。   

•<big>:定义大号文本。  

•<blockquote>:定义块引用。   

•<cite>:定义引用(citation)的源URL。   

•<code>:定义计算机代码文本。   

•<del>:定义被删除文本。   

•<dfn>:定义定义项目。   

•<em>:定义强调文本。   

•<i>:定义斜体文本。   

•<ins>:定义被插入文本。   

•<kbd>:定义键盘文本。   

•<mark>:定义有记号的文本。

•<meter>:定义预定义范围内的度量。   

•<pre>:定义预格式文本。   

•<progress>:定义任何类型的任务的进度。   

•<q>:定义短的引用。   

•<rp>:定义若浏览器不支持ruby元素显示的内容。   

•<rt>:定义ruby注释的解释。   

•<ruby>:定义ruby注释。   

•<samp>:定义计算机代码样本。   

•<small>:定义小号文本。   

•<strong>:定义语气更为强烈的强调文本。   

•<sup>:定义上标文本。  

•<sub>:定义下标文本。   

•<time>:定义日期/时间。   

•<tt>:定义打字机文本。   

•<var>:定义文本的变量部分。   

•<wbr>:定义视频。

【示例1】启动Dreamweaver,新建文档,保存为test.html。在代码视图下输入下面代码,分别使用<h1>和<p>标签标识网页标题和段落文本。

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>示例代码</title>

</head>

<body>

<h1>文本格式标签</h1><p>& lt;p& gt;标签标识段落文本</p>

</body>

</html>

【示例2】使用Dreamweaver新建文档,保存为test1.html。输入下面代码,分别使用各种字符格式标签显示一个数学方程式的解法。

<html>

<head>

<meta http-equiv="Content-Type" 

content="text/html; charset=utf-8" />

<title>示例代码</title>

</head><body>

<p>例如,针对下面这个一元二次方程:</p><p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>

<p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下:</p>

<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>

<p><small>得:</small><br /><i>x</i><sub>1</sub>=1<br />   <i>x</i><sub>2</sub>=4</p>

</body>

</html>

3. 列表标签

在HTML文档中,列表结构可以分为两种类型:有序列表和无序列表。无序列表使用项目符号来标识列表,而有序列表则使用编号来标识列表的项目顺序。具体使用标签说明如下。   

•<ul>:定义无序列表。   

•<ol>:定义有序列表。   

•<li>:定义列表的项目。   

•<dl>:定义定义列表。   

•<dt>:定义定义列表中的项目。   

•<dd>:定义定义列表中项目的描述。   

•<menu>:定义命令的菜单/列表。   

•<menuitem>:定义用户可以从弹出菜单调用的命令/菜单项目。   

•<command>:定义命令按钮。

【示例3】使用Dreamweaver新建文档,保存为test2.html。输入下面代码,使用无序列表分别显示了一元二次方程求解有4种方法。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>示例代码</title></head><body><h1>解一元二次方程</h1>

<p>一元二次方程求解有4种方法:</p>

<ul>

    <li>直接开平方法 </li>

    <li>配方法 </li>

    <li>公式法 </li>

    <li>分解因式法</li>

</ul>

</body>

</html>

按F12键,在浏览器中预览。


4. 链接标签

链接标签可以实现把多个网页联系在一起。   

•<a>:定义锚。   

•<link>:定义文档与外部资源的关系。   

•<nav>:定义导航链接。

【示例5】新建文档,保存为test4.html。输入下面代码,使用<a>标签定义一个超链接,单击该超链接可以跳转到百度首页。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>示例代码</title>

</head>

<body><a href="http://www.baidu.com/">去百度搜索</a>

</body>

</html>

当前文章标题:网页设计中的HTML标签(一)

当前URL:http://www.lyjtt.cn/news/wzzz/3050.html

上一篇:网页设计中的HTML基本语法

下一篇:网页设计中的HTML标签(二)

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)