HTML实验案例
HTML前端--各种小案例
HTML前端--各种⼩案例;;案例⼀：隐藏扩展域，并去掉after，并去掉⾼度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.clearfix:after{ /*善⽤after和defore*/content: "111"; /*注意加引号*/clear: both;display: block;visibility: hidden; /*隐藏并有⾼度*/height: 0; /*去掉⾼度*/}.c{width: 100px;/*height: 100px;*/background-color:red;}.c .item{float:left;width:30px;background-color: green ;}</style></head><body><div class='c clearfix'><div class='item'>123</div><div class='item'>456</div></div><div class="test">内容</div></body></html>更新后的代码案例⼆：当⿏标放在⼀个图⽚上显⽰这个商品的信息，或者⼀些别的东西，⽐如.touch:hover .content{}<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.touch{width: 200px;height: 200px;overflow: hidden;position: relative;}.touch .content{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0,.6);color: white;text-align: center;visibility: hidden;}.touch:hover .content{visibility: inherit;}</style></head><body><div class="touch"><div><img src="2.jpg"></div><div class="content"><div class="c1">ALEX</div><div class="c1">500-1000(⽇)</div></div></div></body></html>案例及代码案例三：要求在当前页⾯不超出多余内容，超出了变成滚动条显⽰<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.pg_top{height: 48px;background-color: #dddddd;}.pg_body_menu{position: absolute;width: 180px;background-color: blueviolet;left: 0;}.pg_body_content{position: absolute;top: 48px;left: 190px;right: 0;bottom: 0;background-color: blueviolet;overflow: auto; /*可以利⽤overflow变导航条*/}</style></head><body><div class="pg_top"></div><div class="pg_body"><div class="pg_body_menu"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div><div class="pg_body_content"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div></div></body></html>代码尖⾓图标，尖⾓符号是向上，当⿏标点的时候尖⾓符号向下.c1{ /*这个是⿇烦写法*/border-top: 30px solid yellow ;border-left: 30px solid green;border-bottom: 30px solid blue;border-right: 30px solid black;display: inline-block;}.c1{ /*半个*/border-top: 30px solid yellow ;border-left: 30px solid green;border-bottom: 0px solid blue;border-right: 30px solid black;display: inline-block;}部分代码-学习的第⼀阶段<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>/*.c1{ 这个是⿇烦写法border-top: 30px solid yellow ;border-left: 30px solid green;border-bottom: 0px solid blue;border-right: 30px solid black;display: inline-block;}*/.c1{border: 30px solid transparent ;border-top: 30px solid yellow ;display: inline-block;margin-top: 40px;}.c1:hover{border: 30px solid transparent;border-bottom: 30px solid yellow ;margin-top:10px ;}</style></head><body><div style="height: 150px; background-color: red;"><div class="c1"></div></div></body></html>代码案例五：就是弹出⼀个框，然后显⽰⼀些内容（其实是分为三层）<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.model{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 2;}.content{height: 300px;width: 400px;background-color: white;color: #000000;position: fixed;top: 50%;left: 50%;z-index: 3;margin-left: -200px;margin-top: -200px;font-size:32px ;line-height: 300px;text-align: center;}</style></head><body><div style="height: 2000px; background-color: red;"><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1> <h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1><h1>ads</h1> </div><div class="model"></div><div class="content">悲伤那么⼤</div></body></html>View Code案例六：输⼊框⾥⾯有图⽚<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.user{position: relative;width: 250px;}.user input{height: 30px;width: 150px;padding-right: 20px;}.user .ren{position: absolute;top: 8px;left: 160px;}</style></head><body><div class="user"><input type="text"/><span class="ren">R<!--这⾥可以放图⽚--></span> </div></body></html>代码案例七：商品加减框<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.left{float: left;}.wrap{width: 150px;height: 22px;border: 1px solid #ddd;/*background-color: red;*/position: relative;left: 100px;top: 100px;}.wrap .minus{height: 22px;width: 22px;line-height: 22px;text-align: center;}.wrap .plus{height: 22px;width: 22px;line-height: 22px;text-align: center;}.wrap .count input{padding: 0; /*input是有padding的*/ border: 0;width: 104px;height: 22px;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;}</style></head><body><div class="wrap"><div class="minus left">-</div><div class="count left"><input type="text"/></div><div class="plus left">+</div></div></body></html>代码案例⼋：商品加减框加减，⿏标并变化样式<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.left{float: left;}.wrap{width: 150px;height: 22px;border: 1px solid #ddd;/*background-color: red;*/position: relative;left: 100px;top: 100px;}.wrap .minus{height: 22px;width: 22px;line-height: 22px;text-align: center;cursor: pointer;}.wrap .plus{height: 22px;width: 22px;line-height: 22px;text-align: center;cursor: pointer; /*当⿏标指的时候变样式*/}.wrap .count input{padding: 0; /*input是有padding的*/border: 0;width: 104px;height: 22px;border-left: 1px solid #dddddd;border-right: 1px solid #dddddd;}</style></head><body><div class="wrap"><div class="minus left" onclick='Minus();'>-</div><div class="count left"><input id='count' type="text"/></div><div class="plus left" onclick='Plus();'>+</div></div><script type="text/javascript">function Plus(){var old_str = document.getElementById('count').valuevar old_int = parseInt(old_str);var new_int = old_int + 1document.getElementById('count').value = new_int }function Minus(){var old_str = document.getElementById('count').valuevar old_int = parseInt(old_str);var new_int = old_int - 1document.getElementById('count').value = new_int }</script></body></html>代码案例九：当⿏标指到图⽚，会变成字体和边框颜⾊会变<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.ele{width: 300px;height: 300px;background-color: yellow;}.ccc{width: 300px;height: 200px;background-color: green;}.ddd{width: 300px;height: 100px;background-color: red;}.ele:hover .ddd{background-color: blueviolet; font-size: 38px;}</style></head><body><div class="ele"><div class="ccc">图⽚1</div><div class="ddd">ddd</div></div></body></html>代码。
html项目案例实战
html项目案例实战HTML项目案例实战。
在实际的网页开发中，HTML是必不可少的一部分。
通过实际的项目案例，我们可以更好地掌握HTML的运用技巧和实战经验。
本文将通过一个具体的HTML 项目案例来进行讲解，希望能够帮助大家更好地理解和运用HTML。
首先，我们来看一个简单的HTML项目案例，制作一个个人简历网页。
在这个项目中，我们需要包括个人基本信息、教育背景、工作经历、技能专长等内容。
接下来，我们将按照这些内容逐步进行讲解。
首先是个人基本信息部分。
在HTML中，我们可以使用<div>、<p>、<h1>等标签来构建页面的基本结构。
通过合理地使用这些标签，我们可以将个人基本信息部分进行布局和排版，使其呈现出清晰、美观的效果。
接下来是教育背景部分。
在这一部分，我们可以利用<ul>、<li>等标签来展示教育经历的列表形式。
同时，我们也可以使用<strong>、<em>等标签来突出学校名称、专业名称等关键信息，使其更加突出。
然后是工作经历部分。
在这一部分，我们可以使用<table>、<tr>、<td>等标签来创建表格，清晰地展示工作经历的时间、公司、职位等信息。
通过合理地设置表格的样式和布局，我们可以使工作经历部分呈现出整齐、有序的效果。
最后是技能专长部分。
在这一部分，我们可以利用<ol>、<li>等标签来展示技能专长的列表形式。
同时，我们也可以使用<dl>、<dt>、<dd>等标签来展示技能名称和技能描述，使其更加清晰明了。
通过以上的项目案例，我们可以看到HTML在实际项目中的运用。
通过合理地使用HTML标签和结构，我们可以构建出清晰、美观的网页内容，使其更加符合用户的阅读习惯和审美需求。
总的来说，HTML项目案例实战对于我们更好地掌握和运用HTML具有重要的意义。
html5学习精选5篇案例
html5学习精选5篇案例HTML5是构建Web内容的⼀种语⾔描述⽅式。
HTML5是互联⽹的下⼀代标准，是构建以及呈现互联⽹内容的⼀种语⾔⽅式.被认为是互联⽹的核⼼技术之⼀。
下⾯给⼤家带来⼀些关于html5的学习⼼得，希望对⼤家有所帮助。
html5学习⼼得1⼀：了解HTML5前端开发技术HTML 指的是超⽂本标记语⾔ (Hyper Text Markup Language)，标记语⾔是⼀套标记标签 (markup tag)，HTML 使⽤标记标签来描述⽹页。
HTML5区别于HTML的标准，基于全新的规则⼿册，提供了⼀些新的元素和属性，在web技术发展的过程中成为新的⾥程碑。
HTML5被推⼴⽤于Web平台游戏开发，及⼿机移动领域，从市场来看，⽆论是桌⾯应⽤还是移动应⽤，HTML5都是当下Web技术中最炙⼿可热的新宠，是创新的主旋律，在不久的时间⾥⼀定会⼤有作为。
⼆：课程能让你学到什么从前端开发的基础出发，学习使⽤HTML，CSS，JavaScript等⼀系列前端技术，实现动画特效。
以开发实例展⽰为主导，循序渐进让学员掌握HTML5技术的应⽤。
强化学员基础，尤其是要针对JavaScpript基础的强化从⽽掌握HTML5新功能API。
HTML5培训内容⾸先是学习HTML5⽂档结构和基础语法，了解HTML5新特性，CSS3基础语法和布局样式，图形图像软件使⽤等。
移动前端的交互JavaScript编程基础、JavaScript交互编程实战、JavaScript异步操作基础、Ajax、JQuery、AngularJS使⽤⽅法。
移动前段综合开发;主要集中在H5+C3+jQ Mobile，基于HTML5的移动⽹页布局、移动⽹页界⾯样式(CSS3)、HTML5本地存储API、Geolocation地理定位、智能表单、Video、Audio应⽤、canvas和SVG的应⽤、桌⾯通知、离线应⽤、webGL基础及应⽤(3D⽹页游戏)、WEB前端框架(JQuery mobile、Sencha Touch、PhoneGap)、Cocos2d-HTML游戏引擎等。
html5代码案例
html5代码案例<h1>html5代码案例</h1>1. 绘制矩形：<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas><script>var canvas = document.getElementById('canvas');//获取画布var context = canvas.getContext('2d');//获取2d绘图环境context.fillStyle="#FF0000";context.fillRect(10,10,100,100);//把(10,10)位置大小为100X100的矩形涂色</script>2. 绘制圆形：<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas><script>var canvas = document.getElementById('canvas');//获取画布var context = canvas.getContext('2d');//获取2d绘图环境context.fillStyle="#FF0000";context.beginPath();context.arc(50,50,50,0,Math.PI*2,true);//把(50,50)位置半径为50的圆涂色context.closePath();context.fill();</script>3.绘制图像：<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas><script>function drawImg(){var canvas = document.getElementById('canvas');//获取画布var context = canvas.getContext('2d');//获取2d绘图环境var img=new Image();img.src="image.jpg";img.onload=function(){context.drawImage(img,10,10);//在(10,10)位置绘制图像}}</script>4.绘制文字：<canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas><script>var canvas = document.getElementById('canvas');//获取画布var context = canvas.getContext('2d');//获取2d绘图环境context.fillStyle = "#FF0000";context.font="20px sans-serif";context.fillText("Hello World", 10 , 30);//在(10,30)位置绘制文本</script>。
html测试正则表达式案例
在HTML中，正则表达式主要用于匹配特定的字符串模式。
以下是一个简单的HTML测试正则表达式的案例：<!DOCTYPE html><html><head><title>正则表达式测试</title><script>function testRegExp() {var input = document.getElementById("input").value;var pattern = /^[a-zA-Z0-9]+$/; // 匹配只包含字母和数字的字符串var result = pattern.test(input);document.getElementById("result").innerHTML = result ? "匹配成功" : "匹配失败";}</script></head><body><h1>正则表达式测试</h1><input type="text" id="input" placeholder="请输入字符串"><button onclick="testRegExp()">测试</button><p id="result"></p></body></html>在这个案例中，我们创建了一个简单的HTML页面，包含一个输入框、一个按钮和一个显示结果的段落。
当用户点击按钮时，会触发testRegExp函数，该函数使用正则表达式/^[a-zA-Z0-9]+$/来匹配输入框中的字符串。
如果字符串只包含字母和数字，那么匹配成功，否则匹配失败。
HTML5的应用案例
电子商务网页设计与制作
Design and Creation of E-commerce Web Pages
HTML5的应用案例
1
Content
2
导入：为何HTML5胜出 HTML5的新作用
HTML5的应用案例
导 入-为何HTML5胜出
HTML4.01后的两派: XHTML和HTML5
页面的定义： <!doctype html>
HTML5 新的 Input 类型：number、Date pickers 、tel、 email、color等。 <input type="number" name="age" min="1" max="120" /> <input type="date" name="birth" size="20"/> <input type="tel" name="tel" size="20"/> <input type="email" name="email" size="20"/> <input type="color" name="color" />
<div> <a href="">苹果</a>的 <span>创始人</span> <span>享年56岁</span>， <div>1976年乔布斯和朋友成立苹果电脑
Html设计实验报告
山东信息职业技术学院《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
html简单表格代码案例
html简单表格代码案例以下是一个简单的HTML表格代码案例：
```html
<!DOCTYPE html>
<html>
<head>
<title>简单的HTML表格</title>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>教师</td>
</tr>
</table>
</body>
</html>
```
这个HTML表格包含了一个表头行（`<tr>`）和三行数据（`<tr>`）。
表头行包含三个表头单元格（`<th>`），用于显示列标题。
数据行包含三个数据单元格（`<td>`），用于显示具体的数据内容。
你可以根据需要修改表格的样式和内容，例如添加更多的行和列，更改单元格的样式等。
html5导航栏案例
HTML5导航栏案例一、定义HTML5导航栏是使用HTML5标记语言创建的导航菜单，它可以帮助用户快速访问网站的不同页面或功能。
导航栏通常位于网站的顶部或侧边，是网站的基本组成部分之一。
二、用法1.使用HTML5元素创建导航栏。
2.通过CSS样式美化导航栏。
三、重点和难点1.重点：创建基本的HTML结构和CSS样式，确保导航栏易于使用和美观。
2.难点：如何根据网站的设计和需求自定义导航栏的样式，以及如何使用JavaScript增强导航栏的功能。
四、注意事项1.可访问性：确保导航栏易于理解和使用，尤其是对于视障用户。
2.响应式设计：考虑在不同设备和屏幕尺寸上导航栏的显示效果。
3.可维护性：确保代码清晰、简洁并易于维护。
五、应用案例例1：简单的HTML5导航栏这个案例将展示一个基本的HTML5导航栏，它包含几个页面链接，并使用CSS进行样式美化。
代码示例：CSS样式：解释：这个案例创建了一个简单的垂直导航栏，使用CSS实现了简单的样式美化。
当鼠标悬停在链接上时，背景颜色会发生变化。
例2：使用嵌套列表创建二级导航栏有时候，我们需要创建二级导航栏，即一个包含子菜单的菜单项。
这可以通过使用嵌套列表来实现。
代码示例：CSS样式：解释：这个案例展示了如何使用嵌套列表创建一个二级导航栏。
当鼠标悬停在“产品”菜单项上时，子菜单将显示出来。
通过使用CSS我们可以控制子菜单的显示和隐藏。
例3：使用JavaScript增强导航栏功能有时候，我们可能需要使用JavaScript来增强导航栏的功能，例如添加动画效果或响应式设计。
代码示例：解释：这个案例使用JavaScript为导航栏添加了单击事件。
当用户单击导航栏中的任何一个菜单项时，浏览器将跳转到相应的页面。
通过使用。
html5案例大全
html5案例大全HTML5是一种用于构建网页和应用程序的标准技术。
它提供了许多功能和特性，可以用于创建各种类型的网页和应用。
以下是一些HTML5的案例，展示了其丰富的应用领域和功能：1. 视频和音频播放器，HTML5提供了<video>和<audio>标签，可以在网页上直接嵌入视频和音频文件，而不需要依赖第三方插件。
这使得在网页上播放视频和音频变得更加简单和便捷。
2. 游戏开发，HTML5提供了<canvas>标签，可以通过JavaScript在网页上绘制图形和动画。
这使得开发简单的网页游戏变得更加容易，并且可以在不同的设备上运行。
3. 地理位置定位，HTML5的地理位置API可以获取用户的地理位置信息。
这可以用于创建基于地理位置的应用，如地图导航、附近商家搜索等。
4. 表单验证，HTML5引入了一些新的表单输入类型和属性，如email、tel、date等，以及一些新的表单验证API。
这使得在网页上进行表单验证变得更加方便和灵活。
5. 响应式网页设计，HTML5提供了一些新的标签和属性，如<header>、<nav>、<section>、<article>等，以及一些新的CSS样式和媒体查询，使得创建响应式网页变得更加容易。
响应式网页可以根据不同设备的屏幕大小和分辨率进行自适应布局，提供更好的用户体验。
6. 离线应用，HTML5的离线应用缓存（Application Cache）可以使网页在离线状态下继续访问，提供了更好的离线体验。
这对于需要在没有网络连接的情况下使用的应用程序非常有用，如新闻阅读、笔记应用等。
7. Web存储，HTML5提供了本地存储API，包括localStorage 和sessionStorage，可以在浏览器端存储数据。
这可以用于创建离线数据存储、缓存数据等功能。
8. 实时通信，HTML5的WebSockets技术可以在浏览器和服务器之间建立持久的双向通信通道，实现实时通信。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<th&h>
<th>年龄</th>
</tr>
<tr>
<td>王林</td>
<td>男</td>
<td>25</td>
</tr>
</table>
12、设置表格的标题
<table border=“1”>
<caption align=“top”>旅游日程</caption>
HTML实验案例
1、编写标题
如下面实例，理解HTML中的标题标签<hn>,其中n为标题的等级，HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题（其中n的取值为1到6）。
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>一号标题</h1>
</body>
</html>
小问题：当Size的设置超出范围的时候，例如设置成Size = 10的情况下会出现什么问题？
6、文字的字体与样式
<html>
<head>
<title>字体</title>
</head>
<body>
<center>
<p><font face="楷体_gb2312">欢迎光临</font></p>
<p><font face="宋体">欢迎光临</font></p>
<p><font face="仿宋_gb2312">欢迎光临</font></p>
<p><font face="黑体">欢迎光临</font></p>
<p><font face="arial">welcome my homepage.</font></p>
<body
<p>这是第一条线段，无width设定，取width默认值100%来显示</p>
<br/>
<hr size=“3”/>
<p>这是第二条线段，width=50(点数方式)</p>
<br>
<hr width=“50”size=“5”/>
<p>这是第三条线段，width=50%(百分比方式)</p>
<td>100公斤</td>
</tr>
</table>
<br>
<table border=“0”width="250">
<caption>定货单</caption>
<tr>
<th>苹果</th>
<th>香蕉</th>
<th>葡萄</th>
</tr>
<tr>
<td>200公斤</td>
<td>200公斤</td>
<center>
<font color=“white”>色彩斑斓的世界</font>
<br/>
<font color=“red”>色彩斑斓的世界</font>
<br/>
<font color=“#00ffff”>色彩斑斓的世界</font>
<br/>
<font color=“#ffff00”>色彩斑斓的世界</font>
<hr/>
<p>这是第二条线段，size=5</p>
<br/>
<hr size=“5”/>
<p>这是第三条线段，size=10</p>
<br/>
<hr size=“10”/>
</body>
</html>
（2）线段长度的设定
<html>
<head>
<title>线段长度的设定</title>
</head>
<tr>
<th>日期</th>
<td>9-11</td>
<td>11-13</td>
<td>13-14</td>
</tr>
<tr>
<th>旅游地点</th>
<td>青岛</td>
<td>黄山</td>
<td>杭州</td>
</tr>
</table>
<br/><br/>
<table border=“1”>
8、编写无序号列表
<html>
<head>
<title>无序列表</title>
</head>
<body>
<p>这是一个无序列表：</p>
<ul>
国际互联网提供的服务有：
<li>WWW服务</li>
<li>文件传输服务</li>
<li>电子邮件服务</li>
<li>远程登录服务</li>
<li>其它服务</li>
</body>
</html>
5、文字的大小设置
<html>
<head>
<title>字号大小</title>
</head>
<body>
<font size=“7”>这是size=7的字体</font><p>
<font size=“6”>这是size=6的字体</font><p>
<font size=“5”>这是size=5的字体</font><p>
</html>
3、使用段落标签<p>
<html>
<head>
<title>段落标签</title>
</head>
<body>
<p align=“center”>登鹳雀楼</p>
<p align=“center”>白日依山尽，</p>
<p align=“left”>黄河入海流。</p>
<p align=“center”>欲穷千里目，</p>
<li>其它服务</li>
</ol>
</body>
</html>
10、编写定义性列表
<html>
<head>
<title>自定义序号项目列表</title>
</head>
<body>
<hr width="100%" height="10" noshade/>
<dl>
<dt>学院介绍</dt>
<dd>河南中医学院信息技术学院，是一个...</dd>
<head>
<title>无阴影的设定</title>
</head>
<body>
<p>这是第一条线段，无noshade设定，取默认值阴影效果来显示</p>
<br/>
<hr width=“80%”size=“5”/>
<p>这是第二条线段，有noshade设定</p>
<br>
<hr width=“80%”size=“7”noshade/>
<td>100公斤</td>
</tr>
</table>
（2）设置格间线宽度
<table border=“3”cellspacing=“5”>
<caption>定货单</caption>