HTML案例.更新

最新推荐文章于 2021-08-27 14:05:06 发布
最新推荐文章于 2021-08-27 14:05:06 发布
阅读量485 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxr686/article/details/104561894
版权
这是一篇深入HTML的教程，涵盖了从基础的HTML文件创建、标签使用，到注释、超链接、表格、表单以及HTML5的新特性如多媒体标签的实践案例。通过29个案例，详细讲解了HTML的各个核心概念和技术。
摘要由CSDN通过智能技术生成
案例1 第一个HTML文件.html
<html >
<head>
       <title>第一个HTML文件</title>
       <meat charge="utf-8"
</head>
<body>
	欢迎学习HTML
</body>
</html>

网页效果：
在这里插入图片描述

案例2 标签的组成.html
<!DOCTYPE html>
<html>
<head>
	<title>论美食的碰撞</title>
	<meta charset="utf-8">
</head>
<body bgcolor="pink"  text="yellow">

<hr>
快乐肥宅水
<hr>
甜甜的松软的
<h2>颜值超高</h2>

<h1>云朵</h1>面包
<hr>

<span>火锅&amp;</span>寿喜锅


</body>
</html>

网页效果:
在这里插入图片描述

案例3 注释.html
<!DOCTYPE html>
<html long="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
      <!--这是我们的第一个HTML注释-->
      图书：&lt;&lt;云边有个小卖部&gt;&gt;
      <hr>

      景天&nbsp;&nbsp;&nbsp;&nbsp;龙葵&nbsp;&nbsp;&nbsp;&nbsp;重楼
      <hr>

      在HTML中用&amp;lt；表示小于号
      <hr>

      "html语言"或者  &quot;html语言&quot;
      <hr>

      版权所有  &copy;最右
      <hr>


      &reg;
      &times;关闭字符
      &aMp;实体字符名称严格区分大小写，即大小写敏感

</body>
</html>

网页效果：
在这里插入图片描述

案例4 hello.html
<html >
<head>
       <title>你好，htlm</title>
       <meat charge="GBK"
</head>
<body>
	welcome to html !
</body>
</html>

网页效果：

在这里插入图片描述

网页效果：

案例5 常用标签1.html
<!DOCTYPE html>
<html lang="en">
<head>
     <mata <meta charset="utf-8">
	<title>Document</title>
</head>
<body>
      hello world
      <br>
      welcome to html!
    <hr>
      <p>
      	HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
      </p>


      <p>
      	超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
      </p>

</body>
</html>

<hr>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

网页效果：

在这里插入图片描述

案例6 常用标签2.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
     <pre>
     	HTML从入门到精通
     	主讲：hector
     </pre>
	<hr>


	<div  style="width: 400px;height: 100px;background: pink">棉花糖</div>
	<div  style="width: 400px;height: 500px;background: yellow">肥宅快乐兽</div>
	<div  style="width: 400px;height: 100px;background: blue">hahaha</div>


	hahaha, 不要888，不要666，只要<span style="font-size: 55px;color: red">99元</span>

	
</body>
</html>

网页效果：

在这里插入图片描述
在这里插入图片描述

案例7 常用标签3.html
<body>
	<h3>2020年网络游戏排行榜</h3>
	<ol type="1" start=5>
		<li>吃鸡</li>
		<li>王者荣耀</li>
		<li>LOL</li>
		<li>WOW</li>
	</ol>

	<hr>


	<h3>肥宅快乐兽</h3>
	<ul type="disc">
		<li>猫</li>
		<li>狗</li>
		<li>仓鼠</li>
		<li>龙猫</li>
	</ul>
      <hr>

      <h3>术语的解释</h3>
      <dl>
      	<dt>LOL</dt>
      	<dd>他是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd>
      	<dd>他可以分为PC端和移动端</dd>
      	<dt>HTML</dt>
      	<dd>是一种用来制作网页的标记语言</dd>
      	<dt>JAVA</dt>
      	<dd>是一种跨平台编程语言</dd>
      </dl>
</body>
</html>

网页效果：

在这里插入图片描述

案例8 常用标签4.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="pink";size=8px>
	<hr color="gree" width="400px">
	<hr color="pink" width="50%" size=10>
	<div style="width:600px;height: 300px;background:#CCCCCC"> 
	<hr color="wathet red" width="50%" align="left" size="10px">
    </div>
</body>
</html>

网页效果:
在这里插入图片描述

案例9 常用标签5.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<base href="../img/">
<body>
	<img src="../img/qq.jpg" alt="图片加载失败..."  title="这是腾讯公司的吉祥物，它的名字叫企鹅" >
	<hr>

	<img src="mac.jpg" width="400px">
	<hr>

	<img src="mac.jpg" width="50%">
    <hr>


    <div style="width:800px;hight:800px;background: red;">
    	<img src="mac.jpg" width="50%">
    </div>
</body>
</html>

网页效果：
在这里插入图片描述
在这里插入图片描述

案例10 其他标签.html
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	hahaha<i>kkk</i>i>lll!
	<br>
	hahaha<em>kkk</em>em>lll!
	<hr>
	welcome to<address>上海南京东路</address>
	<hr>
	HTML从<b>入门</b>到精通！
	<hr>
	HTML从 <strong>入门</strong>到精通！
最低0.47元/天 解锁文章
yxr686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html自动随机跳转网址,网页随机跳转代码
weixin_29577845的博客
06-02 6844
网页随机跳转代码zkx•2021 年 05 月 31 日Loading...```shell网页随机跳转var theAds = new Array("http://a.com","http://a.com","http://a.com","http://a.com","http://a.com");shu = theAds.length ;sx = parseInt(Math.random(...
实现HTML地址的随机调用
不二的博客
08-22 1457
提一个问题动态控制js的引用地址&lt;script src="a.html" language="JavaScript"&gt;&lt;/script&gt;,我想要实现 每次加载页面的时候src="a.html"的值是 Jquery实现方式： var arr = [a....z], random = Math.floor(Math.random() * 26) + 1;; $('&lt...
在日常生活中会使用到的管理系统
I'm LINKSINKE
03-25 4690
自动售票检票系统（AFC） 中文名：自动售票检票系统 外文名：Auto Fare Collection 简写：AFC 功能： 电子公告牌系统（BBS） 中文名：电子公告牌系统 外文名：Bulletin Board System 简写：BBS 功能：下载、上传数据、阅读新闻等 内容管理系统（CMS） 中文名：内容管理系统 外文名：Content Managerment System 简写：CMS 功能： 客户管理系统（CRM） 中文名：客户管理系统 外文名：Customer Relationsh
html案例：模拟一个很简单的聊天框
I'm LINKSINKE
11-30 1641
html案例：模拟一个很简单的聊天框 实现的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="t...
分享一个在线占位图制作工具
I'm LINKSINKE
10-22 1586
给大家分享一个在线占位置，生成图片的一个工具 先说一下为什么需要这个？ 我们在制作一个网站，或者交付前端项目时，难免会使用到图片素材，有的喜欢使用在线地址来引用图片路径，还有的比较喜欢搜图片保存之后再进行更改。 但是我觉引用图片路径的时候，比较占用页面打开的时间，反正就是很慢，文字出来了，图片还没有出来，网络不佳就是看不到图片，场面显得有些尴尬，虽说客户要这样的效果，但是你这个图片没出来，说不定...
HTML网页制作案例.zip
06-15
在这个"HTML网页制作案例.zip"压缩包中，我们有两个文件：文档资料.docx和资料说明.zip，它们很可能是为了帮助学习者理解HTML网页制作的基本步骤和技巧。 文档资料.docx可能包含了一系列关于HTML的基本概念、语法...
HTML页面网页设计案例.zip
06-09
在这个"HTML页面网页设计案例.zip"压缩包中，我们很可能会找到一系列HTML代码示例，这些示例展示了如何使用HTML来构建各种类型的网页。 HTML由一系列元素组成，每个元素都用标签来定义。这些标签告诉浏览器如何显示...
vue作业html+vue，案例.校园二手交易平台 wed移动大作业
01-03
Vue.js与HTML的结合使得动态数据渲染变得简单，通过Vue指令（如v-for和v-bind）可以直接将JavaScript对象的数据绑定到HTML元素上，实现了数据驱动的视图更新。 在Vue.js应用中，组件是可重用的代码块，可以封装HTML...
uipath的项目案例.txtuipath的项目案例.txt
最新发布
07-13
- **购物车管理**：自动化添加商品至购物车、更新购物车内容等操作。 - **订单管理自动化**：包括自动下单、支付流程等。 - **评论与评分自动化**：自动化提交产品评论与评分，以收集用户反馈。 ### 技术架构与开发...
html.rar_html放大镜案例
09-21
这个"html.rar_html放大镜案例"是一个实现此类功能的实例。下面将详细解释这个案例中涉及的核心HTML、CSS和JavaScript知识点。 1. HTML基础结构： HTML文件通常包含`<head>`和`<body>`两个主要部分。在这个案例中...
Eclipse中配置tomcat的过程
08-29
Eclipse中配置tomcat的过程
mysql5安装教程视频+文档.rar
09-06
这个是关于mysql的安装：含压缩版、和exe程序执行版 可以参考我的CSDN上面的一篇博客地址： https://blog.csdn.net/qq_29001539/article/details/86513147
手把手教你学习51单片机（04）——位移运算
I'm LINKSINKE
08-17 5852
各个进制的范围和前后缀 进制 英文 范围 前缀 后缀 二进制 Binary 0-1 0b B 八进制 Octal 0-7 ...
计量单位
I'm LINKSINKE
03-04 372
把：一把刀 本：一本书 杯：一杯红酒 串：一串牛肉 袋：一袋米、一袋黄豆 叠：一叠花生米 打：一打火柴 个：一个人 根：一根冰棒 罐：一罐腐乳 盒：一盒袜子、一盒巧克力 卷：一卷胶带 件：一件衣服 块：一块蛋糕、一块冰、一块石头、一块橡皮擦 粒：一粒鱼丸、一粒米 辆：一辆车 瓶：一瓶矿泉水、一瓶啤酒 盘：一盘磁带 片：一片肉 束：一束花 条：一条鱼 听：一听可乐（一易拉罐）、一听雪碧 台：一台电脑 套：一套西装、一套工装 桶：一桶油漆 箱：一箱娃哈哈、一箱玉米棒 支：一支自动铅笔 只：一只鸭子、一只兔子 .
中国地理记录
I'm LINKSINKE
06-08 278
参考链接：百度百科-中国地理区划 七大行政地理分区 华北：北京市、天津市、河北省、山西省、内蒙古自治区 东北：黑龙江省、吉林省、辽宁省 华东：上海市、江苏省、浙江省、安徽省、江西省、山东省、福建省，以及台湾省 华中：河南省、湖北省、湖南省 华南：广东省、广西壮族自治区、海南省，以及香港特别行政区、澳门特别行政区 西南：重庆市、四川省、贵州省、云南省、西藏自治区 西北：陕西省、甘肃省、青海省、宁夏回族自治区、新疆维吾尔自治区、内蒙古自治区西部（阿拉善盟、巴彦淖尔市、乌海市、鄂尔多斯市） 三大经济分
通讯方式
I'm LINKSINKE
03-04 262
C1A: LTE FDD: B1, B3, B8 LTE TDD: B38, B39, B40, B41 UMTS: B1 TD-SCDMA: B34, B39 CDMA EVDO: BC0 CDMA 1x: BC0 GSM: B3, B8 E1A: LTE FDD: B1, B3,B7,B8,B20 UMTS: B1,B8 GSM: B3, B8 U1A: LTE FDD:B2,B4,B5,B12,B17 UMTS:B2,B5 2G EDGE、GRPS、CDMA 3G TD-SCDMA、UMTS、EVDO
html案例
ho622的博客
03-20 739
DAY1的案例 案例1 01.第一个HTML文件.html <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> 案例2...
web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-27 2430
web前端期末大作业 html+css+javascript网页设计实例 企业网站制作(新能源汽车资讯门户网站静态模板) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：简洁大气的新能源情报分析
一篇文章学习html【经典案例】
Chaqian的博客
05-28 610
html叫做超本文标记语言，注意它只是标记语言，不是编程语言。 编写规范： 由标记（html, div, p, h1等）组成 标记成对出现（…），也有例外，比如、 标记有层级关系 <html>    <head>    </head>    <body>    </body><html> 标记有内容文本或属性 <title
html中淘宝购物车案例
08-01
淘宝购物车是一个典型的使用HTML和JavaScript的网页应用程序。购物车是在线购物平台中必不可少的功能之一，它允许用户将感兴趣的商品添加到购物车中，并在结算时进行统一处理。 在淘宝购物车案例中，HTML被用于构建网页结构和内容的展示。通过HTML的标签和属性，可以创建购物车的整体布局，并展示商品的图片、名称、价格等基本信息。购物车界面通常以表格形式展示，每行代表一个商品，并且提供了增加数量、删除商品等交互功能。此外，购物车还可以显示总计金额、运费、优惠券等信息，帮助用户了解购物车的详细情况。 JavaScript在淘宝购物车案例中扮演了重要的角色。它为购物车提供了丰富的交互功能，使用户能够方便地操作购物车。例如，用户可以通过点击“+”和“-”按钮来增加或减少商品数量，JavaScript会实时更新商品的小计金额，并计算总计金额。此外，用户还可以通过勾选复选框来选择需要购买的商品，并进行批量删除。JavaScript还可以实现一些特殊功能，比如展示库存不足的提示、自动计算优惠金额等。 淘宝购物车案例的实现过程中，还需要涉及到服务器端的处理，比如将商品添加到购物车的操作需要记录到数据库中，结算时的订单信息也需要通过服务器端的API来处理。这部分不在HTML和JavaScript的讨论范围内，但是与购物车的完整功能密切相关。 综上所述，淘宝购物车案例展示了HTML和JavaScript的强大功能，在网页应用程序中实现了用户友好的购物车交互和数据处理，为用户提供了便利和快捷的购物体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值