HTML练习实例

最新推荐文章于 2023-04-29 14:50:27 发布
最新推荐文章于 2023-04-29 14:50:27 发布
阅读量2.8k 收藏 11
点赞数 2
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44774255/article/details/109298900
版权

1.这是英雄联盟在百度百科里面的一段描述，使用的就是html的方式编写的。当然，你如果以前没有接触过html，是不会编写出这样的效果的。 接下来就会以这个效果为目标，缺什么学什么。本效果需要用到 标题 段落 粗体 斜体 删除效果 下划线 等等知识点，每学习一个知识点，就能完善一部页面效果。 最后做出一模一样的效果来。
在这里插入图片描述

<html>
<p>
<h1 align='left'> 英雄联盟 （电子竞技类游戏）</h1>
</p>
<p><b>《英雄联盟》</b> (简称lol) 是由<i>Riot Games</i>开发，&nbsp&nbsp中国大陆地区由腾讯游戏运营的网络游戏</p>
<p><b>《英雄联盟》</b> 除了即时战略,团队作战外，还拥有100多位特色各异的英雄，丰富的地图及玩法，自动匹配的战网平台，包括天赋树，召唤师系统，符文等元素。[<ins>1</ins>]</p>
<p>2016.1,由官方数据统计，lol全球最高同时在线人数已突破<del>750</del> 900万，全球日活跃高达2700万，全球月活跃已达6700万，注册用户亿计，lol已经成为当今世界最具人气和影响力的网络游戏之一。[<ins>2</ins>]</p>
</html>

2.实现如下效果图：
在这里插入图片描述

<h2>
英雄技能
</h2>
<table border="1">
<tr bgcolor="grey">
	<td width="115">
	  <b>技能名</b>	
	</td>
	<td width="48">
	  <b>触发</b>	
	</td>
	<td width="98">
	  <b>技能属性</b>	
	</td>
	<td width="445">
	  <b>技能效果</b>	
	</td>
	<td width="65">
	  <b>图标</b>	
	</td>
</tr>
<tr>
	<td><b>坚韧</b></td>
	<td><b>被动</b></td>
	<td colspan="2" >如果盖伦在9/6/4秒内没有受到伤害或者被敌方技能命中，就会每5秒回复1.5-10.1%(于1-18级)最大生命值。小兵的伤害不会中断坚韧的效果。在11级前，在被史诗野怪，防御塔或英雄命中后中断8秒。在11级时，来自非史诗野怪的伤害不再中断坚韧效果并且它的强度会显著提升。</td>
	<td><img src="file://D:/software/Front_end/images/skill1.png" width="64" height="64" /></td>
</tr>
<tr>
	<td><b>致命打击</b></td>
	<td><b>Q</b></td>
	<td>冷却时间：8秒。</td>
	<td><pre>盖伦移除身上的所有减速效果，并获得30%移动速度加成，持续1/1.65/2.3/2.95/3.6秒。
在接下来的4.5秒内，他的下次普通攻击会造成30/60/90/120/150(+1.5AD)物理伤害，并沉默目标1.5秒。
施法时间盖伦的攻速影响。<pre></td>
	<td><img src="file://D:/software/Front_end/images/skill2.png" width="64" height="64" /></td>
</tr>
<tr>
	<td><b>勇气</b></td>
	<td><b>W</b></td>
	<td><pre>冷却时间：23/21/19/17/15秒
总持续时长：2/2.75/3.5/4.25/5秒<pre></td>
	<td><pre><b>被动</b>：击杀一个单位会永久提供0.25护甲和魔法抗性加成，最大值：30。当击杀数叠满时，盖伦使他额外护甲值和额外魔法抗性提升10%。
<b>主动</b>：盖伦加固他的勇气2/2.75/3.5/4.25/5秒。在最初的0.75秒里，他获得一个70/95/120/145/170（+0.2额外生命值）的护盾并获得60%韧性。在剩余的持续时期里，他少承受30%伤害。<pre></td>
	<td><img src="file://D:/software/Front_end/images/skill3.png" width="64" height="64" /></td>
</tr>
<tr>
	<td><b>审判</b></td>
	<td><b>E</b></td>
	<td><pre>冷却时间：9秒
距离:325<pre></td>
	<td><pre>盖伦快速地旋舞大剑，持续3秒，每转一圈造成4/8/12/16/20（+0-8.2 基于等级）（+0.32/0.34/0.36/0.38/0.4AD）物理伤害，共转7（每从装备和等级中获得25%攻速+1）圈，对距离最近的敌人造成的伤害提升至25%(来自物品和等级的攻击速度可提升旋转的圈数)。
被6圈旋转命中的敌方英雄会损失25%的护甲，持续6秒。
取消【审判】会返还相当于剩余持续时长的冷却时间。
审判可以暴击，并造成33%额外伤害。
对所有野怪造成150%伤害。</pre></td>
	<td><img src="file://D:/software/Front_end/images/skill4.png" width="64" height="64" /></td>
</tr>
<tr>
	<td><b>德玛西亚正义</b></td>
	<td><b>R</b></td>
	<td>冷却时间：120/100/80秒</td>
	<td>盖伦召唤德玛西亚之力，试图处决一名敌方英雄，造成真实伤害，伤害额相当于150/300/450加上目标的20/25/30%已损失生命值，并获得目标1秒的视野。</td>
	<td><img src="file://D:/software/Front_end/images/skill5.png" width="64" height="64" /></td>
</tr>

3.实现如下注册页面：
在这里插入图片描述


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
	</head> 
	<body>
		
		
		<table width="100%" >
  <tr>
    <td align="right"><font color="#FF0000">*</font>用户名:</td>
    <td><input type="text" size="30"/> <font color="red">用户名不得小于3个字符</font></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>密码:</td>
    <td><input name="text" type="text" size="30"/></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>确认密码:</td>
    <td><input name="text2" type="text" size="30"/></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>Email:</td>
    <td><input name="text3" type="text" size="30"/></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>真实姓名:</td>
    <td><input name="text4" type="text" size="30"/></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>性别:</td>
    <td>
		<select>
			<option>男</option>
			<option>女</option>			
		</select>
	</td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>生日:</td>
    <td><select name="select">
      <option>1980</option>
      <option>1981</option>
      <option>1982</option>
      <option>1983</option>
      <option>1984</option>
      <option>1985</option>
      <option>1986</option>
      <option>1987</option>
      <option>1988</option>
      <option>1989</option>
      <option>1990</option>
      <option>1991</option>	  	  	  	  	  	  	  	  
    </select>
      <select name="select2">
        <option>1</option>
        <option>2</option>
        <option>...</option>
        <option>12</option>				
      </select>
      <select name="select3">
        <option>1</option>
        <option>2</option>
        <option>...</option>
        <option>31</option>						
      </select></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>手机:</td>
    <td><input name="text7" type="text" size="30"/></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>居住地:</td>
    <td><select name="select4">
      <option>四川省</option>
      <option>河南省</option>
      <option>广东省</option>
      <option>河北省</option>
      <option>黑龙江省</option>
      <option>海南省</option>
      <option>安徽省</option>
      <option>内蒙古省</option>
      <option>广西省</option>
      <option>湖南省</option>
      <option>湖北省</option>
      <option>浙江省</option>
    </select>
      <select name="select5">
        <option>成都市</option>
        <option>重庆市</option>
        <option>...</option>
        <option>北京市</option>
      </select> <select name="select6">
        <option>成华区</option>
        <option>龙泉驿区</option>
        <option>...</option>
        <option>金牛区</option>
      </select> <select name="select7">
        <option>三圣乡</option>
        <option>星辉路</option>
        <option>...</option>
        <option>蜀都大道</option>
      </select></td>
  </tr>
  <tr>
    <td align="right"><font color="#FF0000">*</font>QQ:</td>
    <td><input name="text9" type="text" size="30"/>
	<br />
		<font size="-1" color="#0099FF">设置我的QQ在线状态</font>
	</td>
  </tr>
</table>

		
	</body>
</html>
Roxannekkk
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端提高篇(六十四)：HTML5练习1：个性音乐播放器
2401_84091663的博客
04-22 729
设置播放图标垂直居中：top: 50%;(高度一半的负数)，因为top50%代表往下挪了容器高度的一半，此时图标与容器1/2高处平齐，这不是视觉上的居中，因此我们要再往上挪图标高度的1/2，才是垂直居中。一开始小圆点在黑色条的下边，设置绝对定位，right为0，黑色条高度2px，小圆点高度8px，(8-2)/2 = 3，所以小圆点的top设置成-3px。的垂直居中了，这个选择器筛选了.tool下一级的所有div，包括btn，process，volume，所以设置宽高30px之后，垂直居中就已经搞定了。
HTML 基础学习- 小实例练习
hewenqing
02-05 720
这里学习用的IDE工具：HBuilder 什么是HBuilder？ HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码...
HTML四个实例
m0_70933211的博客
08-16 1477
HTML四个实例1.HTML 标题（Heading）是通过 二、HTML 段落 1.HTML 段落是通过 标签进行定义的 以下实例 三 、HTML 链接 HTML 链接是通过 标签进行定义的 以下实例 注释：在 href 属性中指定链接的地址HTML 图像是通过 标签进行定义的 以下实例 注释：图像的名称和尺寸是以属性的形式提供的.........
简单HTML网页制作 实例
xiaoxiaoxiexies的博客
04-25 2万+
HTML网页制作 1.新建文本文档，以“html”结尾。 2.用html网页逻辑器打开，这里我们用Sublime Text打开。 在标签<body></body>里写文本,<h1></h1>意思是把文本设置为标题， align里设置文本居中属性。 html基本结构 <html></html> 段落标签 <p></p> 用来分段用的 空格标签 &nbsp 有几个空格就写几个 &nbsp 标题标签
一个简单的HTML5小例子
07-25
对于一个初学者来说，最消耗时间的地方就是基础，因此希望通过此例子的一些注释讲解能让初学者更快的了解html5
30个超简单html实例带你入门
09-04
总结了哔哩哔哩黑马程序员的html教程，只要掌握了这几个实例，基本上就可以开发出一个超简单的网页了，如果想要进一步美化页面，请移步下载我的另一个css实例。
【前端html页面练习】还原英雄联盟客户端
一个努力学习的程序猿
09-14 1951
由于该练习文章其实是笔者刚学习完 Vue 就来写的小项目，所以该文章的实现方式在现在看来，是十分复杂且繁琐的，而且代码写的也十分混乱，页面无法实现兼容性，所以仅供大家参考
html的简单例子练习（6个）
小黄呀呀呀的博客
04-19 6311
1、楚乔传 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>楚乔传</h1> <p>中国大陆 67集（TV版）/58集（DVD版）&l...
【HTML教程（一）】HTML标签、模板和实例
qq_45659165的博客
02-18 2925
使用Node.js，您可以使用流行的Web框架（例如Express、Koa和Hapi）构建服务器端Web应用程序，并且还可以使用库（例如Mongoose、Sequelize和pg）与数据库（如MongoDB、MySQL和PostgreSQL）进行交互。通过为元素指定 id，您可以轻松地选择、控制和操作特定的元素，而不受其他元素的影响。id 是一种属性，用于为元素指定一个唯一的标识符。与类名不同，id 是唯一的，每个元素只能具有一个 id，因此您可以使用 id 来选择特定的元素，而不受其他元素的影响。
HTML 实例
一个臭小孩的修炼之路
12-14 324
HTML教程-------HTML简介
HTML练习
无冇的博客
06-16 178
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>东风破</title> </head> <body> <center> <a name="qq"></a> &...
练习实例
02-18
本练习实例旨在通过实践帮助你深入理解和掌握HTML的基本概念和用法，从而提升你在网页设计和开发中的技能。 HTML由一系列元素组成，这些元素以标签的形式呈现，如`<html>`、`<head>`和`<body>`等。每个标签都有其...
bootstrap入门练习实例
03-09
这个"bootstrap入门练习实例"提供了一套教程，旨在帮助初学者掌握Bootstrap的基础知识，并通过实际操作来提升技能。以下是对这些知识点的详细解释： 1. **响应式设计**: Bootstrap的核心特性是响应式布局，意味着...
前端练习01-前端-HTML实例练习
03-24
本练习主要是针对HTML的实例操作，旨在帮助学习者掌握HTML的基本用法和常见元素，从而能够创建出功能完备、结构清晰的网页。 在"前端练习01-前端-HTML实例练习"中，你将有机会实践以下关键知识点： 1. **HTML基本...
JavaScript练习实例
11-19
本篇文章将深入探讨JavaScript练习实例中的关键知识点，帮助读者提升JavaScript编程技能。 1. **基础语法**：JavaScript的基础包括变量声明（`var`, `let`, `const`），数据类型（如`string`, `number`, `boolean`,...
html 练习素材
01-02
这个"HTML练习素材"压缩包提供了一系列实例，旨在帮助学习者深入理解和掌握HTML5的相关技术。 在HTML5中，我们看到了一些重要的改进和新特性。首先，语义化标签的引入使得代码更具有可读性，例如`<header>`, `<nav>...
HTML基础 + 实例解析(速速来看!!!)
niceffking的博客
04-29 4468
HTML常见标签使用 1.注释标签 2.标题标签 3.段落标签 4.换行标签 5.格式化标签 6.图片标签 7.超链接标签 8.表格标签 9.表格标签-单元格合并 10.列表标签 无序列表标签 有序标签 11.表单标签
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2514
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
简单的Html实例
热门推荐
cgl_dong的博客
04-23 4万+
HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例</title> <link rel="stylesheet" type="text/css" href="style002.css"&gt...
html开发列表搜索,前端实例练习 - 可搜索列表
最新发布
05-29
您好！感谢您的提问。下面是一个简单的 HTML 列表搜索的前端实例练习： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>可搜索列表</title> <style> /* 样式可以根据自己的喜好进行调整 */ ul { list-style-type: none; padding: 0; margin: 0; } li { padding: 10px; border-bottom: 1px solid #ccc; } input { padding: 10px; width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; } </style> </head> <body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <ul id="myUL"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>梨子</li> <li>西瓜</li> </ul> <script> function myFunction() { // 获取输入框的值 var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); // 遍历所有列表项，如果文本中包含输入框的值，则显示，否则隐藏 for (i = 0; i < li.length; i++) { a = li[i]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html> ``` 这个例子中，我们创建了一个 `<ul>` 列表，包含了一些水果名称。同时，我们创建了一个文本输入框，用于搜索列表中的内容。当用户输入文本时，我们使用 JavaScript 的 `myFunction()` 函数来检查输入框的值是否在列表项中出现过。如果出现过，我们将其显示出来，否则隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值