在线演示一下HTML的各种实例，打发无聊的时间

这段时间入职了一家外包公司，比较闲，好像是去驻场开发做金融保险的项目，我应聘的是前端工程师的岗位，要准备刷题，听说考的范围比较广，我是电子商务专业的，本身学的就比较广，没事做做html的实例打发无聊的时间。有兴趣的可以关注我的公众号：电商程序员。各种资源都有，免费，免费，免费，重要的事情说三遍！！！

注意：我这是运行在在线编译器上的运行结果，只会显示body里面的内容，不会显示head里面的内容，有兴趣的可以在浏览器上进行运行。

HTML基础

HTML基础

1.非常简单的HTML文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<h1>孙叫兽的标题</h1>
<p>孙叫兽的段落。</p>

</body>
</html>

运行结果

2.html的标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>
<h1>孙叫兽的博客标题 1</h1>
<h2>孙叫兽的博客这是标题 2</h2>
<h3>孙叫兽的博客这是标题 3</h3>
<h4>孙叫兽的博客这是标题 4</h4>
<h5>孙叫兽的博客这是标题 5</h5>
<h6>孙叫兽的博客这是标题 6</h6>
</body>
</html>

运行结果

3.html段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<p>孙叫兽的博客 这是一个段落。</p>
<p>孙叫兽的博客 这是一个段落。</p>
<p>孙叫兽的博客 这是一个段落。</p>

</body>
</html>

4.html链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

	<a href="https://blog.csdn.net/weixin_41937552">这是孙叫兽的博客链接地址</a>

</body>
</html>

运行结果

5.html图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" width="300px" hight="100px;"/>

</body>
</html>

运行结果：

HTML标题

1.html标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<h1>孙叫兽的博客 这是标题 1</h1>
<h2>孙叫兽的博客 这是标题 2</h2>
<h3>孙叫兽的博客 这是标题 3</h3>
<h4>孙叫兽的博客 这是标题 4</h4>
<h5>孙叫兽的博客 这是标题 5</h5>
<h6>孙叫兽的博客 这是标题 6</h6>

</body>
</html>

运行结果

2.在html源码中插入注释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<!--这是一个注释，注释在浏览器中不会显示-->

<p>孙叫兽的博客 这是一个段落</p>

</body>
</html>

运行结果

3.html中插入水平线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>
	<h1>孙叫兽使用hr标签元素定义一下水平线</h1>
	<hr/>
	<p>这是一个段落</p>
	<hr/>
	<p>这是一个段落</p>
	<hr/>
	<p>这是一个段落</p>

</body>
</html>

运行结果

HTML段落

1.html段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

<p>孙叫兽的博客 这是一个段落。</p>
<p>孙叫兽的博客 这是一个段落。</p>
<p>孙叫兽的博客 这是一个段落。</p>

</body>
</html>

运行结果

2.html更多段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

	<p>
	孙叫兽的博客 这个段落
	在源代码中
	包含许多行
	但是浏览器
	忽略了它们。
	</p>

	<p>
	孙叫兽的博客  这个段落
	在源代码       中
	包含   许多行
	但是      浏览器
	忽略了  它们。
	</p>

	<p>
	孙叫兽的博客  段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
	</p>

</body>
</html>

运行结果

3.html段落中演示换行的效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>

	<p>孙叫兽使用br标签演示<br/>换行的效果</p>

</body>
</html>

运行结果

4.html格式化的某些问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>

<body>

<h1 style="text-align:center;">春晓</h1>

<p style="text-align:center;">
    春眠不觉晓，<br/>
      处处闻啼鸟。<br/>
        夜来风雨声，<br/>
          花落知多少。
</p>

<p style="font-size:12px;color:red;">注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。我这边使用了CSS及换行做了相应的处理</p>

</body>

</html>

运行结果：

HTML文本格式化

1.文本格式化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信公众号：电商程序员</title>
</head>
<body>
	<!--这里面做了换行处理，演示了文本格式化涉及的几个对文本字体作用的几个标签-->
	<b>孙叫兽的博客 这个文本是加粗的</b>  <br />
	<strong>孙叫兽的博客 这个文本也是加粗的</strong>  <br />
	<i>孙叫兽的博客 这个文本是倾斜的</i>  <br />
	<big>孙叫兽的博客 这个文本是放大的</big>  <br />
	<small>孙叫兽的博客 这个文本是放小的</small>  <br />
	这是一段文本
	<sub>孙叫兽的博客 这个文本是包含下标</sub>  <br />
	这是一段文本
	<sup>孙叫兽的博客 这个文本包含上标</sup>

</body>
</html>

运行效果

2.使用pr标签对空格和空行进行控制

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>
	<pre>
	此例子孙叫兽演示如何用 pre 标签进行
	换行 及  空格进行处理控制
	</pre>


</body>
</html>

运行结果

3.不同的“计算机输出”显示的效果

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

运行结果

4.如何在文件中写入地址？

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

<address>
Written by <a href="sunmenglei@erawork.cn">孙叫兽的企业微信邮箱</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

运行结果

5.如何实现缩写或者首字母缩写？

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

运行结果

6.如何改变文字的方向

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head> 
<body>
<!--只有bdo标签加上dir="rtl"这个属性的时候，才会有效果-->
<p>孙叫兽 该段落文字从左到右显示。</p>  
	<p><bdo dir="rtl">孙叫兽 该段落文字从右到左显示</bdo></p> 

</body>
</html>

运行结果

7.如何实现长短不一的引用语？

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

运行结果：

8.如何实现文本下划线与删除线？

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

	<p>我最喜欢的游戏？<del>英雄联盟</del> <ins>吃鸡</ins>哈哈</p>
</body>
</html>

运行结果

HTML样式

1.html style元素在标签中的使用

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>

<h3>欢迎来到孙叫兽的博客</h3>

<div style="letter-spacing:12px;">感受一下孙叫兽的魅力</div>

<div style="color:#40B3DF;">这个应该设置一个什么颜色？
<span style="background-color:#B4009E;color:#ffffff;">我是一个超级大的盒子</span>
</div>

<div style="color:#000000;">嗯，应该还有很多。。。</div>

</div>

</body>
</html>

运行结果：

2.背景色样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body style="background-color:yellow;">
	<h2 style="background-color:red;">欢迎大家来到孙叫兽的博客</h2>
	<p style="background-color:green;">这个是一个段落作为内容</p>
</body>
</html>

运行效果

3.字体样式，颜色及大小

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
</body>
</html>

运行效果

4.文本对齐样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>
<h1 style="text-align:center;">欢迎来到孙叫兽的博客</h1>
	<p style="font-size:16px;color:red;">一个提升你<b>认知</b>及<strong>技术能力</strong>的博主</p>

</body>
</html>

运行结果

5.设置文本字体。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>微信公众号：电商程序员</title>
	</head>
<body>

<h1 style="font-family:verdana;text-align:center;">孙叫兽的博客</h1>
	<p style="font-family:courier;color:red;">这是<b>孙叫兽</b>演示这个段落</p>

</body>
</html>

运行结果

6.设置文本字体大小


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>微信公众号：电商程序员</title>
	</head>
<body>

<h1 style="font-size:30px;text-align:center;">孙叫兽的博客</h1>
	<p style="font-size:16px;">这是<b>孙叫兽</b>演示这个段落</p>

</body>
</html>

运行结果

7.设置字体颜色

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue">微信公众号：电商程序员</h1>
<p style="color:red">孙叫兽的博客</p>

</body>
</html>

运行结果

8.设置字体大小，字体颜色，文本字体

<!DOCTYPE html>
<html>
<body>

<p style="font-family:verdana;font-size:110%;color:green">
这是孙叫兽的博客，微信公众号：电商程序员，带你提升技术认知及开发技巧，开发APP小程序，网站及系统
</p>

</body>
</html>

运行结果

9.html使用不同的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title>
</head>
	<style>
		h1{
			font-size:30px;
			color:red;
		}
		p{
			font-size:16px;
			font-size;green;
		}
	</style>

<body>
	<h1>欢迎来到孙叫兽的博客</h1>
	<p>在这里，你将发现全新的大陆,提升你的认知与能力</p>
</body>

</html>

运行结果：

10.没有下划线的文本链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
</head>
<body>
	<a href="https://blog.csdn.net/weixin_41937552" style="text-decoration:none;">欢迎来到孙叫兽的博客</a>
</body>
</html>

运行结果

11.链接到一个外部样式表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>微信公众号：电商程序员</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>孙叫兽使用了外部样式文件来格式化文本 </h1>
<p>粉丝们也是也是!</p>
</body>

</html>

运行结果

HTML链接

1.创建超级链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
<a href="https://blog.csdn.net/weixin_41937552">孙叫兽的博客</a> 是一个指向孙叫兽CSDN主页的一个页面的链接。</p>

<p><a href="https://blog.csdn.net/weixin_41937552/article/details/107878194">苹果开发者开发APP部分总结</a> 是一个指向孙叫兽一篇文章的页面的链接。</p>

</body>
</html>

运行结果

2.将图片作为链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>孙叫兽创建图片链接:
<a href="https://blog.csdn.net/weixin_41937552/article/list/1">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>孙叫兽创建无边框的图片链接:
<a href="https://blog.csdn.net/weixin_41937552">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

运行结果

3.在新的浏览器打开链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<a href="https://blog.csdn.net/weixin_41937552/article/list/1" target="_blank">访问孙叫兽的博客!</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

</body>
</html>

运行结果

4.链接到同一个页面的不同位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</head>
<body>

<p>
<a href="#C4">查看孙叫兽的所有文章</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 6</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 7</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 8</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 9</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 10</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 11</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 12</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 13</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 14</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 15</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 16</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 17</h2>
<p>这边显示该章节的内容……</p>

</body>
</html>

运行结果

5.跳出框架

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>跳出框架?</p> 
<a href="https://blog.csdn.net/weixin_41937552/article/list/1" target="_top">点击这里!</a> 

</body>
</html>

运行结果

6.创建电子邮件链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
这是一个电子邮件链接：
<a href="mailto:sunmenglei@erawork.cn?Subject=Hello%20again" target="_top">
给孙叫兽发个邮件</a>
</p>

<p>
<b>注意:</b> 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

运行结果：

7.创建另一个电子邮件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
这是另一个电子邮件链接：
<a href="mailto:sunmenglei@erawork.cn?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">给孙叫兽发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。
</p>

</body>
</html>

运行结果

HTML图像

1.插入头像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

运行结果

2.从不同的位置插入头像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>一个来自菜鸟教程的图像:</p>
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg" alt="微信公众号：电商程序员" width="336" height="336">

</body>
</html>

运行结果

3.对图片进行排列

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

运行结果

4.如何使图片浮动至段落的左边或者右边

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

运行结果

5.创建图像映射

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

运行结果

HTML表格

1.简单的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

运行结果

2.没有边框的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

运行结果

3.表格中的表头

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

运行结果

4.带有标题的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

运行结果

5.跨行或者跨列的表格单元格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

运行结果

6.表格内的标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

运行结果

7单元格边距

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

运行结果：

8.单元格间距

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

运行结果：

HTML列表

1.无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

运行结果

2.有序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

运行结果

3.不同类型的有序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

运行结果

4.不同类型的无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

运行结果

5.嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

运行结果

6.嵌套列表二

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

运行结果

7.自定义列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

运行结果

HTML forms和input

1.创建文本域

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

运行结果

2.创建密码域

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

运行结果

3.复选框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

运行结果

4.单选按钮

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

运行结果

5.下拉列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

运行结果

6.预选下拉列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

运行结果

7.创建一个文本域（多行输入控件）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

运行结果

8.创建一个按钮

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

运行结果

9.在数据周围绘制一个带标题的框

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

运行结果

10.带有文本域和输入域的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“https://blog.csdn.net/weixin_41937552/article/list/1”。</p>

</body>
</html>

运行结果

11.带有复选框和提交按钮的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行结果

12.带有单选框和提交按钮的表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<form action="https://blog.csdn.net/weixin_41937552/article/list/1" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行结果

13.发送邮件表单

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<h3>发送邮件到 sunmenglei@erawork.cn:</h3>

<form action="MAILTO:sunmenglei@erawork.cn" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

运行结果

HTML iframe

1.html中插入框架（内联框架）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head> 
<body>

<iframe src="https://blog.csdn.net/weixin_41937552/article/list/1">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

</body>
</html>

运行结果截图

HTML头部元素

1.描述了文档标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>孙叫兽的博客</title>
</head>

<body>
<p>浏览器中包含body元素的内容。</p>
<p>浏览器的标题包含title元素的内容</p>
</body>

</html>

运行结果

2.html中默认的URL地址

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
<base href="https://img-blog.csdnimg.cn/2020073120293658.jpg" target="_blank">
</head>

<body>
<img src="https://img-blog.csdnimg.cn/2020073120293658.jpg"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "https://img-blog.csdnimg.cn/2020073120293658.jpg"
<br><br>
<a href="https://img-blog.csdnimg.cn/2020073120293658.jpg">电商程序员</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

运行结果

3.提供文档元数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="孙叫兽">
</head>
<body>

<p>所有 meta 标签显示在 head 部分...</p>

</body>
</html>

运行结果

HTML 脚本

1.插入一个脚本

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>

运行结果

2.使用<noscript>标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>孙叫兽的博客</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 &lt;noscript&gt; 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>

运行结果

好啦今天的HTMl相关的实例就分享到这里，更多信息请关注我的公众号

技术提升节节高，目前博主专注于大前端，有问题可以和博主进行交流

来源：oschina

链接：https://my.oschina.net/u/4349518/blog/4494574

标签

noscript