HTML

由 hrs, 20 十二月, 2019

HTML实例-099 HTML常用的实例实体表

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
table,tr,td,th{
border-collapse:collapse;
  border:1px solid #000000;
   width:600px;
   height:40px;
  text-align:center;
}
th{
background-color:#000000;
color:#ffffff;

}

tr:nth-child(even){
background-color:#E8E8E8;

}
</style>


</head>
<html>
<body>
<table >
<tr>
   <th>显示结果</th>
  <th>描述</th>
   <th>实体名称</th>
  <th>实体编号</th>
</tr>

<tr>
   <td></td>
  <td>空格</td>
   <td>&amp;nbsp;</td>
  <td>&amp;#160;</td>
</tr>


<tr>
   <td><</td>
  <td>小于号</td>
   <td>&amp;lt;</td>
  <td>&amp;#60;</td>
</tr>

<tr>
   <td>></td>
  <td>大于号</td>
   <td>&amp;gt;</td>
  <td>&amp;#62;</td>
</tr>

<tr>
   <td>&</td>
  <td>和号</td>
   <td>&amp;amp;</td>
  <td>&amp;#38;</td>
</tr>

<tr>
   <td>"</td>
  <td>引号</td>
   <td>&amp;quot;</td>
  <td>&amp;#34;</td>
</tr>

<tr>
   <td>'</td>
  <td>撇号</td>
   <td>&amp;apos;(IE)</td>
  <td>&amp;#39;</td>
</tr>

<tr>
   <td>￠</td>
  <td>分（cent）</td>
   <td>&amp;cent;</td>
  <td>&amp;#162;</td>
</tr>

<tr>
   <td>£</td>
  <td>镑（pound）</td>
   <td>&amp;pound;</td>
  <td>&amp;#163;</td>
</tr>

<tr>
   <td>¥</td>
  <td>元（yen）</td>
   <td>&amp;yen;</td>
  <td>&amp;#165;</td>
</tr>

<tr>
   <td>€</td>
  <td>欧元（euro）</td>
   <td>&amp;euro;</td>
  <td>&amp;#8364;</td>
</tr>

<tr>
   <td>§</td>
  <td>小节</td>
   <td>&amp;sect;</td>
  <td>&amp;#167;</td>
</tr>

<tr>
   <td>©</td>
  <td>版权（copyright）</td>
   <td>&amp;copy;</td>
  <td>&amp;#169;</td>
</tr>

<tr>
   <td>®</td>
  <td>注册商标</td>
   <td>&amp;reg;</td>
  <td>&amp;#174;</td>
</tr>

<tr>
   <td>™</td>
  <td>商标</td>
   <td>&amp;trade;</td>
  <td>&amp;#8482;</td>
</tr>

<tr>
   <td>×</td>
  <td>乘号</td>
   <td>&amp;times;</td>
  <td>&amp;#215;</td>
</tr>

<tr>
   <td>÷</td>
  <td>除号</td>
   <td>&amp;divide;</td>
  <td>&amp;#247;</td>
</tr>

</table>
</body>
</html>

运行效果：

html_099.png

评论

由 hrs, 20 十二月, 2019

HTML实例-098 HTML的重定向用户

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Refresh" content="5;url=https://www.dwoke.com" />

</head>
<html>
<body>
<p>
对不起，我们已经搬家了，您的URL是 <a herf="https://www.dwoke.com">https://www.dwoke.com</a>
</p>
<p> 您 将在5 秒内被重定向到新的网址。</p>
<p>如果超过5秒后您仍然看到本消息，请点击上面的链接。</p>
</boyd>
</html>

运行效果：

html_098.png

运行5秒后将网页重新定向到新的地址。

 

评论

由 hrs, 20 十二月, 2019

HTML实例-097 HTML文档的关键词

标签
HTML

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="description" content="html examples">
<meta name="keywords" content="html ,dhtml,css,xml,xhtml,javascript,vbscript">
</head>
<html>
<body>
<p>本文档的meta 属性描述了该文档和它的关键词</p>
</body>
</html>

运行效果：

html_097.png

评论

由 hrs, 20 十二月, 2019

HTML实例-096 HTML的文档描述

标签
HTML

 实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dwoke.com">
<meta name="revised" content="risheng , 2019/12-18">
<meta name="generator" content="gedit 2.0">
</head>
<html>
<body>
<p>本文档的meta 属性标识了创作者和编辑软件</p>
</boyd>
</html>

运行效果：

html_096_0.png

评论

由 hrs, 18 十二月, 2019

HTML实例-095 HTML的 base 标签

标签
HTML

base 标签 ：定义一个默认打开的新页面。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<base target="_blank" />
</head>
<html>
<body>
<p><a href="https://dwoke.com" target="_blank">这个连接</a>将在新窗口中加载，因为target 属性被设置为“_blank”</p>
<p><a href="https://dwoke.com">这个连接</a>也将在新窗口中加载，即使没有target 属性。</p>
</body>
</html>

运行效果：

html_095.png

从这个实例中看出，我们点击这两个链接都在新窗口中打开，因为在头部定义了base 标签。

base 标签：定义链接的打开方式。

 

评论

由 hrs, 17 十二月, 2019

HTML实例-094 html的头部元素

标签
HTML

这一节，我们来学习一下html的文档标题

实例代码：

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>这是一个文档标题</title>
</head>
<html>
<body>
<p>这个文本段落会显示</p>
</body>
</html>

运行效果：

html_094.png

title:定义一个html网页的标题。

http-equiv 属性提供了 content属性的信息/值的 HTTP 头。

http-equiv 属性可用于模拟一个 HTTP 响应头。

评论

由 hrs, 17 十二月, 2019

HTML实例-093 HTML的文件路径

标签
HTML

我们在编辑html 网页的时候，会用到很多文件路径，这一节我们就来学习一下html的文件路径。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
table{
border-collapse: collapse;
border:1px solid #3F3F3F;

}
th{
padding:10px;
background-color:#aaa;
border:1px solid #3F3F3F;
}
td{
padding:10px;
border:1px solid #3F3F3F;
}

</style>
</head>
<html>
<body>
<table >
<tr>
<th>路径</th>
<th>描述</th>
</tr>

<tr>
<td>&lt;img src="picture.jpg"&gt;</td>
<td>picture.jpg 位于与当前网页相同的文件夹</td>
</tr>

<tr>
<td>&lt;img src="images/picture.jpg"&gt;</td>
<td>picture.jpg 位于与当前文件夹的images文件夹中</td>
</tr>

<tr>
<td>&lt;img src="/imagespicture.jpg"&gt;</td>
<td>picture.jpg 当前站点根目录的images文件夹中</td>
</tr>

<tr>
<td>&lt;img src="../picture.jpg"&gt;</td>
<td>picture.jpg 位于当前文件夹的上一级文件夹中</td>
</tr>



</table>
</body>
</html>

运行效果：

html_093_0.png

 

评论

由 hrs, 16 十二月, 2019

HTML实例-092 html 如何应对不支持脚本的浏览器

标签
HTML

我们在编辑html网页的时候，有些浏览器不支持脚本代码，那么我们如何来应对这种问题呢？这个实例我们就来解决这个问题。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
document.write("<h3>hello world!</h3>");

</script>
<noscript>Sorry, your browser does not support Javascript! </noscript>
<p>不支持，JavaScript 的浏览器将显示noscript 元素中的文本</p>
</body>
</html>

运行效果：

html_092.png

<noscript>: 为不支持客户端脚本的浏览器定义替代内容。

 

评论

由 hrs, 16 十二月, 2019

HTML实例-091 html 插入一个脚本

标签
HTML

我在编辑网页的时候，如何给网页添加一个脚本代码，现在 我们就来学习html的脚本。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h3>这是一段脚本的实例</h3>
<script type="text/javascript">
document.write("<h1>Hollo World!</h1>");
</script>
</body>
</html>

运行效果：

html_091.png

 

<script>：定义一个脚本标签，type：定义脚本的属性，值为：text/javascript

document.write():脚本输出语句。括号内添加输出的内容。

 

评论

由 hrs, 12 十二月, 2019

HTML实例-090 HTML添加背景图像

标签
HTML

这个实例我们来为网页添加一个背景图像。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body background="img/background.jpg">
<p>这是一个加载背景图像的实例</p>
<p>gif 和 jpg 文件均可以作为背景图像</p>
<p>背景图像最好不要超过10K</p>
</body>
</html>

运行效果：

html_090.png

background: 设置背景图像。

评论

HTML