HTML入门学习的案例
2024-04-17 13:15:17
案例1：hello.html
<html><body><title>html技术</title></body><body>hello</body>
</html>
案例2：第一个html.html
<html><head><meta charset="utf-8"><title>HTML技术</title></head><body>welcome to html！</body>
</html>
案例3：标签.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"> <title>标签</title></head><body text="blue">标签的组成<br>html从入门到精通<hr><h1>标签的分类</h1>标签的分类<hr><h2>标签的分类</h2><hr><h3>标签的分类</h3><hr><h4>标签的分类</h4><hr><h5>标签的分类</h5><hr><h6>标签的分类</h6><hr><span>哈哈</span>嘿嘿</body>
</html>
案例4：注释.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注释</title>
</head>
<body><!--这是一个二级标题--><h2>welcome to html!</h2>
</body>
</html>
案例5：实体字符.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Document</title>
</head>
<body>图书：<<HTML从入门到精通>><hr>北京 上海 广州<hr>在HTML用&lt;表示<小于号<hr>"HTML语言"或"HTML语言"<hr>版权所有©2000-2020 高教培训<hr>®注册符号<hr>×关闭按钮<hr>
</body>
</html>
案例6：常用标签br.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签br</title>
</head>
<body>HTML从入门到精通<br> <!--换行-->欢迎学习HTML技术<br>
</body>
</html>
案例7：常用标签p.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签p</title>
</head>
<body><p>HTML称力超文本标记语言。是一种标识性的语言，它包括一系列标签通过这些标签可以将网路上的文档格式统一，使分散的Iternet资源连接为 一个逻餐整体用代文本是的分理成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p><br><p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机它的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
</body>
</html>
案例8：常用标签h1、h2…h6.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签h1-h6</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h4>四级标题</h4><h6>六级标题</h6><hr>
</body>
</html>
案例9：常用标签pre.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签pre</title>
</head>
<body><pre><<HTML从入门到精通>>欢迎学习html技术</pre>
</body>
</html>
案例10：常用标签div.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签div</title>
</head>
<body><div style="width:400px;height:100px;background:red">导航部分</div><div style="width:500px;height:100px;background:yellow">正文部分</div><div style="width:600px;height:100px;background:blue">版权部分</div>
</body>
</html>
案例11：常用标签span.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签span</title>
</head>
<body>iphone XR 不要8888，也不要1888，只要<span style="font-size: 50px;color: red;">98元</span>
</body>
</html>
案例12：常用标签ol、li.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h3>2020年网络游戏排行榜</h3><ol type="a" start="3"><li>吃鸡</li><li>王者荣耀</li><li>LOL</li><li>WOL</li></ol>
</body>
</html>
案例13：常用标签ul、li.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h3>亲爱的同学们</h3><ul type="circle"><li>弓金正</li><li>张晋超</li><li>张跃德</li><li>123456</li></ul><hr>
</body>
</html>
案例14：常用标签dl、dt、dd.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签dl、dt、dd</title>
</head>
<body><h3>术语的解释</h3><dl><dt>LOL</dt><dd>它是由腾讯公司代理的一款网络游戏，中文名叫英雄联盟</dd><dd>他分为PC端和移动端</dd><dt>HTML</dt><dd>是一种制作网页的标签=记语言</dd><dt>JAVA</dt><dd>是一种跨平台的编程语言</dd></dl>
</body>
</html>
案例15：常用标签hr.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用标签hr</title>
</head>
<body><hr color="#FF7300" size="10px"><hr color="red"><hr color="blue" width="400"><hr color="#00FF00" width="50%"><div style="width:600px;height:300px;background:#FF7300"><hr color="red" width="50%" size="9px" align="right"></div>
</body>
</html>
案例16：常用标签img.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="..\img\qq.jpg" alt="" title="图片加载失败。。。。"><hr><div style="width: 800px;height: 800px;background:red"><img src="..\img\mac.jpg" alt="" width="50%"><div style="width: 500px;height:500px;background:#cccccc"><img src="..\img\mac.jpg" alt="" width="50%"></div> </div><img src="..\img\mac.jpg" alt="" width="50%" >
</body>
</html>
HTML入门学习的案例相关推荐
- CSS入门学习笔记+案例(1)
CSS入门学习 一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
- React入门学习小案例之番茄计时器与温度控制 App
番茄计时器 首先搭建工程 npx create-react-app demoname 在 src 目录下新建 components ,新建一个 Timer.js,Timer.css Timer.js ...
- HTML入门学习笔记+案例(1)
一.HTML简介 1.HTML是什么? HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作用 制作网页, ...
- HTML入门学习笔记+案例
一.HTML简介 1.HTML是什么? HTML:hyper text markup language超文本标记(标签)语言由各种标签组成,用来制作网页,告诉浏览器该如何显示页面 2.作用 制作网页, ...
- HTML入门学习笔记+详细案例
✨HTML入门学习笔记+详细案例 作者介绍:
- ajax入门学习（二）小案例Demo1
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客) ajax入门学习(一) ajax入门 ...
- CSS入门学习笔记（案例+详解）
CSS入门学习笔记 一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用 二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法 三.CSS选择器 1.元素 ...
- 人工智能新手入门学习路线！附学习资源合集
有段时间没跟大家分享编程资源福利了!今天为大家整理了人工智能新手入门学习路线,同时附700分钟的学习资源合集,相信这套福利可以帮你顺利入行AI!文末领取全部资料. 一.AI基础好课学习资料整理(约31 ...
- 零基础入门学习Python(33)-图形用户界面编程（GUI编程）EasyGui
用户界面编程,即平时说的GUI(Graphical User Interface)编程,那些带有按钮.文本.输入框的窗口的编程 EasyGui是一个非常简单的GUI模块,一旦导入EasyGui模块,P ...
最新文章
- 笔记本电脑处理器_苹果高管：我们都没有想到M1的性能有那么强|英特尔|处理器|iphone|ipad|笔记本电脑...
- 安全性神话已不再，首个MacOS勒索病毒现身
- _INTSIZEOF(n)解析
- AWS vs K8s 是新的 Windows vs Linux
- JS面向对象编程之封装
- 阿里“AI搭配师”一秒给你100种穿搭建议，程序员进军女性时尚靠什么？
- 第二次冲刺站立会议10
- 皮皮虾小视频怎么去水印
- 团队管理那点破事，OKR绩效、核心人才、面试、技术分享、研发流程
- 博图在线升级 gsd_美生在线消费全返张鹏海外大举收割国内韭菜。
- Splatter Painting题目代码
- npm系列：package.json
- 好书整理(to be continued)
- 全网最全find()函数用法
- 程序员如何用技术变现?（取其精华去其糟粕）
- 彻底解决快播不可点播方法
- Enhancing Quality for HEVC Compressed Videos
- python true和false是什么_Python解惑之True和False详解
- 解密混沌工程——混沌工程价值
- docker构建tomcat镜像
热门文章
- Vscode有什么好用的插件？
- Linux中几个常用的重启命令 shutdown poweroff init reboot halt 的区别
- 《Motion Design for iOS》（一）
- python 博客程序_项目1——博客系统 - Python测试和开发 - OSCHINA - 中文开源技术交流社区...
- 飞科剃须刀FS871供电正负极、及简易USB通用充电器制作
- 使用java实现手机短信验证码
- iphone11屏比例_iPhone11屏幕多大尺寸？分辨率和PPI是多少？
- 宏油庄冒菜加盟优势,该如何控制成本
- 唐朝边戍 NFT 作品集 2.0 上线市场平台，体验中国古代文化的魅力
- 数据压缩实验七——MEPG音频编码