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>`），用于显示具体的数据内容。
你可以根据需要修改表格的样式和内容，例如添加更多的行和列，更改单元格的样式等。
- 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>