HTML实例
0.欢迎进入HTML
<html>
<head>
<title>HTML学习</title>
</head>
<body>
welcome to html!
</body>
</html>
1.你好，HTML
<html>
<head>
<title>你好，HTML</title>
<meta charset ="utf-8">
</head>
<body>
welcome to html!
</body>
</html>
2.标签的组成
<html>
<head>
<title>标签的组成</title>
<meta charset ="UTF-8">
</head>
<<body bgcolor ="red" text="blue">
标签的组成
<hr>
html从入门到精通
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标签</h2>
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
3.注释
<html lang ="en">
<head>
<meta charset ="UTF-8">
<title>Document</title>
</head>
<body>
<!--第一个注释-->
</body>
</html>
4.实体标签的符号
<html lang ="en">
<head>
<meta charset ="UTF-8">
<title>Document</title>
</head>
<body>
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&<表示<小于号
<hr>
"html语言"或者 "html语言"
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&实体字符名称是区分大小写,大小写敏感
</body>
</html>
5.常用标签（1）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello html
hello world
<br>
welcome to html
<p>
在HTML文档的第一行，使用 声明html文档的类型用来告诉浏览器页面的HTML文档类型，简单来说，用来指定使用的html版本规范
</p>
<hr>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
</body>
</html>
6.常用标签（2）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
HTML从入门到精通
观众：张三
</pre>
<hr>
<div style ="width:400px;height:100px;background:red">导航部分</div>
<div style ="width:400px;height:300px;background:yellow">正文部分</div>
<div style ="width:400px;height:100px;background:gray">版权部分</div>
<hr>
手机不要8888,不要7777，只要<span style ="font-size:50px;color:red">6666</span>
</body>
</html>
7.常用标签（3）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type ="①" start=5>
<li>王者荣耀</li>
<li>吃鸡</li>
<li>LOL</li>
<li>wow</li>
</ol>
<hr>
<h3>可爱的同学们</h3>
<ul type ="circle">
<li>马六</li>
<li>王五</li>
<li>张三</li>
<li>李四</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>他是腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd>
<dd>可以分为移动端和PC端</dd>
<dt>HTML</dt>
<dd>用来制作网页的标记语言</dd>
<dt>JAVA</dt>
<dd>一种跨平台编程语言</dd>
</dl>
</body>
</html>
8.常用标签（4）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="gray">
<hr size ="8px" color="red">
<hr color ="yellow" width="400px">
<hr color ="black" width ="50%" size="10">
<div style ="width:500px;height:300px;background:#cccccc">
<hr color ="red" width="50%" align="center">
</div>
</body>
</html>
9.常用标签（5）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="../image/web前端/12.jpg" alt="图片加载失败.." title="这是腾讯集团的吉祥物--企鹅">
<hr>
<img src="../image/web前端/2.gif" alt="图片加载失败" width="500px" heighth="400px">
<hr>
<img src="../image/web前端/11.jpg" width="50%">
<hr>
<div style=width:800px;height:700px;background:red;>
<img src="../image/web前端/9.png" width="50%">
</div>
</body>
</html>
10.其他标签（1）
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome<i> to </i> html!
<hr>
welcome<em> to </em>html!
<hr>
welcome to <address>上海市</address>
<hr>
html从<b>入门</b>到<b>精通</b>
<hr>
html从<strong>入门</strong>到<strong>精通</strong>
<hr>
原价<del>188元</del>，优惠价<span style="font-size:50px;color:red">98</span>元
<hr>
观众：<ins>范文鑫</ins>
<hr>
水的化学式为：H<sub>2</sub>O
<br>
2<sup>4</sup>=16
<hr>
<bdo dir="rtl">北京欢迎你！</bdo>
<br>
<bdo dir="rtl">上海自来水来自上海</bdo>
<hr>
<abbr title="happy new year">新年快乐</abbr>
<br>
<span title="happy new year">新年快乐</span>
<hr>
HTML从<small>入门</small>到<small>精通</small>
HTML从<big>入门</big>到<big>精通</big>
</body>
</html>
11.头部标签
<!DOCTYPE html>
<html lang ="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 SEO网络优化-->
<meta name="keywords" content="IT教育,Java开发,web前端,Python,安卓开发……">
<!-- 设置网页的描述 -->
<meta name="description" content="专业教师在线答疑">
<!-- 设置网站的作者 -->
<meta name="author" content="刘老师">
<!-- 设置网站跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->
<title>Document</title>
<!-- 定义内部CSS样式 -->
<style>
body{
color:gray;
}
</style>
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本 -->
<script>
alert="嘿嘿"
</script>
<!-- 定义基础路径 -->
<base herf="../image/web前端/">
</head>
<body>
IT教育，全国计算机考试等级考试--刘老师
<img src="../image/web前端/3.gif" alt="">
<br>
<img src="../image/web前端/2.gif" alt="">
</body>
</html>
12.标签嵌套
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("嘿嘿！")
</script>
</head>
<body>
<div style="width:200px;heighe:200px;background:gray">
<p>
hello
</p>
</div>
<p style="width:100px;height:200px;background:green">
<div style="width:200px;heighe:200px;background:red">
hello
</div>
</p>
</body>
</html>
13.超链接
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target="_blank">百度</a>
<hr>
<a href="d:/software/b.html" target="_blank">b.html</a>
<hr>
<a href="./c.html">c.html</a>
<!-- ./当前路径 -->
<br>
<a href="../d.html">d</a>
</body>
</html>
14.锚链接
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">简介</a></li>
<li><a href="#second">HTML版本</a></li>
<li><a href="#third">特点</a></li>
<li><a href="#forth">编辑方式</a></li>
<li><a href="#fifth">整体结构</a></li>
<li><a href="#sixth">相关要求</a></li>
</ol>
<p>
<a href="first">简介</a>
</p>
<P>
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</p>
<p>
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
</P>
<p>
<a href="second">HTML版本</a>
</p>
<p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
</p>
<p>HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br>
③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
④HTML 4.0：1997年12月18日，W3C推荐标准。<br>
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br>
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
</p>
<p>
<a href="third">特点</a>
</p>
<p>
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p>
<a href="forth">编辑方式</a>
</p>
<p>
HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7]
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7]
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
</p>
<p>
<a href="fifth">整体结构</a>
</p>
<p>
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10]
标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
</p>
<p>
<a href="sixth">相关要求</a>
</p>
<p>
在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9]
文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9]
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9]
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9]
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9]
HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
</p>
</body>
</html>
15.页面内的锚链接
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">简介</a></li>
<li><a href="#second">HTML版本</a></li>
<li><a href="#third">特点</a></li>
<li><a href="#forth">编辑方式</a></li>
<li><a href="#fifth">整体结构</a></li>
<li><a href="#sixth">相关要求</a></li>
</ol>
</body>
</html>
16.页面间的锚链接
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="14.锚链接.html#first">简介</a></li>
<li><a href="14.锚链接.html#second">HTML版本</a></li>
<li><a href="14.锚链接.html#third">特点</a></li>
<li><a href="14.锚链接.html#forth">编辑方式</a></li>
<li><a href="14.锚链接.html#fifth">整体结构</a></li>
<li><a href="14.锚链接.html#sixth">相关要求</a></li>
</ol>
</body>
</html>
17.功能标签
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../image/web前端/3.gif">点击此处下载图片</a>
<br>
<a href="mailto:1921117402@qq.com">联系我们</a>
</body>
</html>
第二部分：表格
1.表格
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="5" width="400px" height="300px" align="center" bordercolor="green" bgcolor="#cccccc" background="../../image/web前端/2.gif" cellspacing="5" cellpadding="2px">
<tr align="left" valign="top">
<td>张三</td>
<td>李四</td>
<td>王五</td>
<td>马六</td>
</tr>
<tr align="center" valign="middle" bgcolor="orange">
<td>李四</td>
<td bgcolor="yellow" valign="bottom">张三</td>
<td>王五</td>
<td>马六</td>
</tr>
<tr align="right" valign="bottom" background="../../image/web前端/3.gif">
<td>张三</td>
<td>张三</td>
<td>张三</td>
<td>张三</td>
</tr>
</table>
</body>
</html>
2.合并单元格
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td{hello$}*4)*4 -->
<table border="2" width="500px" height="400px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>
3.表格的高级标签
<body>
<table border="1" height="300px" width="400px" align="center" bordercolor="yellow" bgcolor="pink">
<caption><h2>基本信息表</h2></caption>
<thead>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody bgcolor="cyan" align="left">
<tr>
<td>1101</td>
<td>王五</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1102</td>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1103</td>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>1104</td>
<td>马六</td>
<td>20</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td width="40%">总计人数</td>
<td colspan="3">4</td>
</tr>
</tfoot>
</table>
</body>
</html>
扫一扫
7503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
