这段时间入职了一家外包公司，比较闲，好像是去驻场开发做金融保险的项目，我应聘的是前端工程师的岗位，要准备刷题，听说考的范围比较广，我是电子商务专业的，本身学的就比较广，没事做做html的实例打发无聊的时间。有兴趣的可以关注我的公众号：电商程序员。各种资源都有，免费，免费，免费，重要的事情说三遍！！！ 注意：我这是运行在在线编译器上的运行结果，只会显示body里面的内容，不会显示head里面的内容，有兴趣的可以在浏览器上进行运行。 目录 1.非常简单的HTML文档。 运行结果 2.html的标题 运行结果 3.html段落 4.html链接 运行结果 5.html图片 运行结果： 1.html标题 运行结果 2.在html源码中插入注释 运行结果 3.html中插入水平线 运行结果 1.html段落 运行结果 2.html更多段落 运行结果 3.html段落中演示换行的效果 运行结果 4.html格式化的某些问题 运行结果： 1.文本格式化 运行效果 2.使用pr标签对空格和空行进行控制 运行结果 3.不同的“计算机输出”显示的效果 运行结果 4.如何在文件中写入地址？ 运行结果 5.如何实现缩写或者首字母缩写？ 运行结果 6.如何改变文字的方向 运行结果 7.如何实现长短不一的引用语？ 运行结果： 8.如何实现文本下划线与删除线？ 运行结果 1.html style元素在标签中的使用 运行结果： 2.背景色样式 运行效果 3.字体样式，颜色及大小 运行效果 4.文本对齐样式 运行结果 5.设置文本字体。 运行结果 6.设置文本字体大小 运行结果 7.设置字体颜色 运行结果 8.设置字体大小，字体颜色，文本字体 运行结果 9.html使用不同的样式 运行结果： 10.没有下划线的文本链接 运行结果 11.链接到一个外部样式表 运行结果 1.创建超级链接 运行结果 2.将图片作为链接 运行结果 3.在新的浏览器打开链接 运行结果 4.链接到同一个页面的不同位置 运行结果 5.跳出框架 运行结果 6.创建电子邮件链接 运行结果： 7.创建另一个电子邮件 运行结果 1.插入头像 运行结果 2.从不同的位置插入头像 运行结果 3.对图片进行排列 运行结果 4.如何使图片浮动至段落的左边或者右边 运行结果 5.创建图像映射 运行结果 1.简单的表格 运行结果 2.没有边框的表格 运行结果 3.表格中的表头 运行结果 4.带有标题的表格 运行结果 5.跨行或者跨列的表格单元格 运行结果 6.表格内的标签 运行结果 7单元格边距 运行结果： 8.单元格间距 运行结果： 1.无序列表 运行结果 2.有序列表 运行结果 3.不同类型的有序列表 运行结果 4.不同类型的无序列表 运行结果 5.嵌套列表 运行结果 6.嵌套列表二 运行结果 7.自定义列表 运行结果 1.创建文本域 运行结果 2.创建密码域 运行结果 3.复选框 运行结果 4.单选按钮 运行结果 5.下拉列表 运行结果 6.预选下拉列表 运行结果 7.创建一个文本域（多行输入控件） 运行结果 8.创建一个按钮 运行结果 9.在数据周围绘制一个带标题的框 运行结果 10.带有文本域和输入域的表单 运行结果 11.带有复选框和提交按钮的表单 运行结果 12.带有单选框和提交按钮的表单 运行结果 13.发送邮件表单 运行结果 1.html中插入框架（内联框架） 运行结果截图 1.描述了文档标题 运行结果 2.html中默认的URL地址 运行结果 3.提供文档元数据 运行结果 1.插入一个脚本 运行结果 2.使用<noscript>标签 运行结果 好啦今天的HTMl相关的实例就到这里，更多信息请关注我的公众号 技术提升节节高，目前博主专注于大前端，有问题可以和博主进行交流
HTML基础
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <h1>孙叫兽的标题</h1> <p>孙叫兽的段落。</p> </body> </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> 
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <p>孙叫兽的博客 这是一个段落。</p> <p>孙叫兽的博客 这是一个段落。</p> <p>孙叫兽的博客 这是一个段落。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <a href="https://blog.csdn.net/weixin_41937552">这是孙叫兽的博客链接地址</a> </body> </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标题
<!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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <!--这是一个注释，注释在浏览器中不会显示--> <p>孙叫兽的博客 这是一个段落</p> </body> </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段落
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <p>孙叫兽的博客 这是一个段落。</p> <p>孙叫兽的博客 这是一个段落。</p> <p>孙叫兽的博客 这是一个段落。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <p> 孙叫兽的博客 这个段落 在源代码中 包含许多行 但是浏览器 忽略了它们。 </p> <p> 孙叫兽的博客 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 </p> <p> 孙叫兽的博客 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。 </p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <p>孙叫兽使用br标签演示<br/>换行的效果</p> </body> </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文本格式化
<!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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <pre> 此例子孙叫兽演示如何用 pre 标签进行 换行 及 空格进行处理控制 </pre> </body> </html>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信公众号：电商程序员</title> </head> <body> <p>我最喜欢的游戏？<del>英雄联盟</del> <ins>吃鸡</ins>哈哈</p> </body> </html>
HTML样式
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html> <html> <body> <h1 style="color:blue">微信公众号：电商程序员</h1> <p style="color:red">孙叫兽的博客</p> </body> </html>
<!DOCTYPE html> <html> <body> <p style="font-family:verdana;font-size:110%;color:green"> 这是孙叫兽的博客，微信公众号：电商程序员，带你提升技术认知及开发技巧，开发APP小程序，网站及系统 </p> </body> </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>
<!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>
<!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链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <p> <a href="https://blog.csdn.net/weixin_41937552">孙叫兽的博客</a> 是一个指向孙叫兽ImapBox主页的一个页面的链接。</p> <p><a href="https://blog.csdn.net/weixin_41937552/article/details/107878194">苹果开发者开发APP部分总结</a> 是一个指向孙叫兽一篇文章的页面的链接。</p> </body> </html>
<!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>
<!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 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html>
<!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>
<!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>
<!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>
<!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图像
<!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>
<!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>
<!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>
<!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>
<!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表格
<!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>
<!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> 
<!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>
<!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>
<!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>
<!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>
<!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>
<!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列表
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html>
<!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>
<!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>
<!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>
<!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>
<!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
<!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头部元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <p>浏览器中包含body元素的内容。</p> <p>浏览器的标题包含title元素的内容</p> </body> </html>
<!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>
<!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 脚本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <script> document.write("Hello World!") </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孙叫兽的博客</title> </head> <body> <script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> <p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
3900