我们在网页编辑中有经常 要遇到用图像来作链接，在html 中这样的链接是由<a>标签包含<img>图像标签进行定义的。下面我们就来举个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个图像链接</p>
<a href="https://dwoke.com">
<img src="dwoke_logo.png">
</a>
<body>
</html>
运行效果：
我们点击图像会链接到你行网的主页。
互网联就是由很多链接组成的，你可以从一个页面跳到另一个页面或者跳到另一个网站，这些跳转都是链接来实现的，下面我们来举个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个指向本网站中的一个页面的链接。
<a href="index.html">样式</a>
</p>
<p>这是一个指向万维网的超级链接。
<a href="https://dwoke.com">你行网</a>
</p>
</body>
</html>
运行效果：
从这个实例中看到，单击样式，会把你带一到一个本地页面，单击你行网会把你带一个万维网的一个网站。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
现在大部分网页都使用外部css样式，那我们怎么来进行定义呢？下面我们就来做个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="textcss1.css" >
</head>
<html>
<body>
<h1>这是一个外部css样式的实例</h1>
<p>css样式对p段落进行红色定义</p>
</body>
</html>
外部的css样式表：textcss1.css
h1
{
color:green;
border:1px solid #ccc;
}
p
{
color:red;
border:1px solid #ccc;
background:Beige;
}
运行效果：
从这个样式表可以看到，我们对h1标签进行绿色定义，p标签进行红色定义。
对文本进行html边框设置
border: 1px solid #ccc; /*设置边框样式跟颜色*/
margin: 0 auto; /*设置div居中*/
width: 200px; /*设置div宽度*/
height: 200px; /*设置div高度*/
border-width: 5px; /*设置边框宽度*/
background: #ff0; /*设置背景色*/
在我们编辑网页的时候会对网页进行背景、字体、颜色等等风格进行设置，在这里我们可以用css样式进行定义。
实例代码：
<!doctype html>
<head>
<meta http-equiv="content-Type" content="text/html" charset="gb2312" />
<meta http-equiv="content-Language" content="zh-cn" />
<style type="text/css">
h2{color:red}
p{color:blue}
</style>
</head>
<html>
<body>
<h1>例1 ：在<head>部分添加样式对html进行格式化。<h1>
<h2>这是一个红色的标题</h2>
<p>这是一段蓝色的文本</p>
<h1>例2 ：没有下划线的css样式链接。</h1>
<a href="https://dwoke.com" style="text-decoration:none">你行网</a>
</body>
</html>
运行效果：
从这例1可以看出，我们使用了内部css样式对<h2>和<p>标签进行字体的颜色定义。h2标签显示为红色，p标签显示为蓝色。例2：我们对a标签的text-decoration属性设置none ,意思是不使用下划线。所以这里显示的链接是没有下划线的。
我们在编辑网页代码的同时，有时候要对代码进行注释，以增加代码的可读性，这时我们就可以用<!-- 与 -->标签来定义了。
实例代码如下：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<!-- 这是一个注释标签 -->
<p>这个实例演示的是一个注释标签</p>
<p>注释标签也可以用于查错</p>
<!--
<img borde="0" src="sites/default/files/logo1.png"atl="logo">
-->
</body>
</html>
运行效果：
从这个实例中可以 看出，在代码上添加注释可以增加代码的可读性，还可以注释掉代码以用于查找错误。
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
在html 网页编辑中我们需要用到各种各样的计算机代码格式，那我们怎么定义它呢？下面我们就来学习一下。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body style="font-size:16px">
<p>1. 用于html的键盘格式<kbd>元素，定义键盘输入。</p>
<p><kbd>file | open ……</kbd></p>
<p>2. 用于html的样本格式<samp> 元素，定义计算机输出。</p>
<samp>
hrs@hrs-desktop:~$ uname -a
Linux hrs-desktop 5.0.0-32-generic #34~18.04.2-Ubuntu
SMP Thu Oct 10 10:36:02 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux
</samp>
<p>3. 用于HTML的代码格式<code>元素，定义编程代码。</p>
<code>
i=for 1 to 9
a=2*i
next
b=a
</code>
<p>4. <code>元素不保留多余的空格和折行,如需解决该问题，您必须在<pre> 元素中包围代码。</p>
<code>
<pre>
i=for 1 to 9
a=2*i
next
b=a
<pre>
</code>
<p>5. HTML的变量格式化<var>元素，定义数学变量。</p>
<p>爱因斯坦的公式：</p>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup></p>
</body>
</html>
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码文本 |
| <kbd> | 定义键盘文本 |
| <samp> | 定义计算机代码示例 |
| <var> | 定义变量 |
| <pre> | 定义预格式化文本 |
这是一个能改变文本方向的html标签，它能把文本从右边到左边输出。让我们来学习一下吧。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个能改变文本方向的html标签<bdo></p>
<bdo dir="rtl">这是一段从右到左输出的文本</bdo>
<body>
</html>
运行效果：
从这个实例中可以看到，<bdo>标签改变了文本的方向。
HTML <bdo> 元素定义双流向覆盖（bi-directional override）。
<bdo> 元素用于覆盖当前文本方向：
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <cite> | 定义著作的标题。 |
在编辑网页中，我们如何对著作标题进行定义呢？这时我们就要用到<cite>标签，下面们来举个实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
<head>
<html>
<body>
<p>这是一个著作标题的实例</p>
<img src="timg.jpeg"
width="200" height="200" alt="西游记">
<p><cite>西游记</cite>是我国的国四大名著之一。
</body>
</html>
运行效果：
在html的网页中我们经常要用到地址信息，在html中地址是以<address>标签来定义的。下面我就来学习它的实例。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个地址标签，经常用于显示地址信息。</p>
<address>
广东省汕尾市海丰县<br />
公平镇平新村委<br />
新桔仔园村123号<br />
</address>
</body>
</html>
运行效果：
从这个实例看出，<address>元素通常以斜体显示，大多数浏览器会在此元素前后添加折行。
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。
HTML <dfn> 元素定义项目或缩写的定义。
实例代码：
<!doctype html>
<head>
<meta charset="utf-8" />
<title>dfn 标签定义 </title>
</head>
<html>
<body style="background-color:yellow">
<p>例1： 如果设置了<dfn> 元素的 title 属性，则定义项目：</p>
<p><dfn title="https://dwoke.com">你行网</dfn>--成立于2019年</p>
<p>例2： 如果<dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目：</p>
<p><dfn><abbr title="https://dwoke.com">你行网</abbr></dfn>--成立于2019年</p>
<p>例3： 否则，<dfn> 文本内容即是项目，并且父元素包含定义。</p>
<p><dfn>你行网</dfn>--成立于2019年</p>
<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>
<body>
</html>
运行效果：
从这个实例中看出， <dfn> 元素在不同应用中，呈现出不同的结果。
评论