HTML----基础案例（与笔记对应）

最新推荐文章于 2022-04-28 19:22:02 发布
最新推荐文章于 2022-04-28 19:22:02 发布
阅读量706 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumuqi/article/details/105035986
版权

案例1

!DOCTYPE html>
<html>
	<head>
		<title>第一个HTML文件</title>
		<meta charset="utf-8">
	</head>
	<body>
		欢迎学习HTML
	</body>
</html>

案例2

<html>
	<head>
		<title>标签的组成</title>
		<meta charset="utf-8">
	</head>
	<body bgcolor = "yellow" text="red">
		标签的组成
		<hr>
		HTML从入门到精通
		<hr>
		<h1>html,简介，观众：xxx</h1>
		<hr>

		<h2>二级标题</h2>

		<h1>哈哈</h1>呵呵
		<hr>

		<span>嘿嘿</span>吼吼

	</body>
</html>

案例3

<!DOCTYPE html>
<html lang="en">
<head>
	<mata charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!--这是我们第一个html注释-->
	图书:&lt;&lt;HTML从入门到精通&gt;&gt;
	<hr>

	北京&nbsp;&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;&nbsp;&nbsp;广州
	<hr>

	在html中用&amp;lt;表示<小于号
	<hr>
	"HTML语言" 或者 &quot;HTML语言&quop;
	<hr>

	版权所有 &copy;  2000-2020  高教培训
	<hr>

	&reg;
	<hr>

	&times;关闭符号
	<hr>

	&aMp;  实体字符名称是区分大小写，大小写就敏感
</body>
</html>

案例4

<!DOCTYPE html>
<html>
	<body>
		<title>html技术</title>
	</body>
	<body>
		大家好，欢迎学习html网页技术！
	</body>
</html>

案例5

<html>
	<head>
		<title>HTML，学习</title>
		<meta charset = "utf-8">
	</head>
	<body>
		welcome to  html ！
	</body>
</html>

案例6

<!DOCTYPE html>
<html>
<head>
	<title>学习HTML从入门到精通</title>
</head>
<body>
		welcome to hello word!
</body>
</html>

案例7

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Doctype</title>
</head>
<body>
	hello wolde
	<br>
	welcome to html!

	<p>
		超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。


	</p>

	<p>
		超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
	</p>
	<hr>


	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h6>六级标题</h6>
</body>
</html>

案例8

<!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:red">导航部分</div>
 <div style="width:400px;height:500px;background:yellow">正文部分</div>
 <div style="width:400px;height:100px;background:blue">版权部分</div>
 <hr>

 iphone XR,不要8888,不要1888，只要<span style="font-size:50px;color:red">98元</span>
</body>
</html>

案例9

<!DOCTYPE html>
<html>
<<head>
	<meta charset="utf-8">
	<title>Document</title>
</head>
<body>
	<h3>2020年网络游戏排行榜</h3>

	<li>吃鸡</li>
	<li>王者荣耀</li>
	<li>LOL</li>
	<li>WOW</li>

	<hr>
	<h3>可爱的同学</h3>
	<ul type="circle">
		<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>

案例10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<hr color="#ff0000">
	<hr size="8px" color="green">
	<hr color="red" width="400px">
	<hr color="yellow" width="50%">
	<div style="width: 600px;height: 300px;background: #cccccc">
		<hr color ="red" width="50%" align="right">
	</div>
</body>
</html>

案例11

<!DOCTYPE html>
<html lang="en">
<head>
		<mata  charset="UFT-8" >
		<title>docutype</title>
</head>
<body>
		<img src="../image/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
		<hr>

		<img src="../imagr/mac.jpg" width="400px" height="100px">
		<hr>


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

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

案例12

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	welcome <i>to</i> html!
	<hr>
	welcome <em>to</em> html!
	<hr>
 	welcome <address>to html!</address>
 	<hr>
	从<b>入门</b>到精通
	<br>
	从<strong>入门</strong>到精通
	<hr>
	原价188，优惠价<span style="font-size: 40px;color: red">98</span>
	<br>
	主讲：<ins>hector</ins>
	<hr>
	水的分子表达式：H<sub>2</sub>O<sup>3</sup>
	<hr>
	<bdo dir="ltr rtl">jdgjglkajgj</bdo>
	<bdo dir="ltr rtl">
最低0.47元/天 解锁文章
sumuqi
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 注册案例 学习 制作
CodeDoraemon的博客
01-25 230
案例目标 2. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
Web前端——HTML中的超链接
巧克力布丁的博客
07-03 3万+
1.超链接 格式的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- 超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他位置 使用a标签来定义超链接
HTML5笔记案例结合
wangqazwsxedc的博客
06-29 1389
预备内容： 软件安装 1.安装笔记工具————typroa 文件名：基本文件名。扩展名 2，截图工具安装 3，sublimes————无需安 装 解压 将解压后的文件剪切到C盘 创建桌面快捷方式# HTML HTML 一、HTML简介 1.HTML是什么？ HTML：Hyper Text Markup Language超文本标记（标签）语言各种标签组成，用来制作网页，告知浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接检索信息 ..
网络安全——HTML基础
W981113的博客
12-04 3158
1.漏洞 通用型：第三方软件、应用、系统对应的漏洞，每个使用这个软件或者应用系统的用户都存在这个漏洞，发现一个 漏洞可以封杀n多个网站 事件型：非通用型漏洞，主要指互联网上一个应用的具体漏洞，如具体到某个站点 2.同源 协议 主机 端口都相同 3.提交方式method 两种方法 Get ：url中直接显示，可直接看到 Post ：表单方式提交，嵌套在页面内，起到保密作用 4.windows系统日志中 4624 登陆成功 4625 审核失败 5.Linux日志 最后一次登录的日志 ┌──
前端面试题（带文字＋代码解析），我不相信你看不懂（2022.11.04）
随便写写
04-06 6662
前端面试题，我发现很多小伙伴都是死背面试八股，原理并不懂，遇到需要思考的题就懵了，所以，我会一道道从文字和代码解析前端的面试题，让大家理解，并且加强自己的水平，天天都会更新
微信小程序开发-写笔记带后端案例源码.zip
12-12
1. **微信小程序框架**：微信小程序使用的是微信自己的开发框架WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets），它们分别对应HTML和CSS，用于构建用户界面。同时，JavaScript是处理逻辑和数据绑定的...
Swift-Markoff轻量级OSXMarkdown(CommonMark)预览工具
08-14
在编程领域，Markdown因其简洁和高效，被广泛用于编写README文件、笔记、博客文章等。Swift-Markoff是一款基于Swift开发的Markdown预览工具，专为OS X操作系统设计，它提供了实时预览功能，方便用户在编写Markdown...
pagina-smx:电脑网站工作
04-20
当开发者构建网站时，他们通常会将主要的HTML代码保存在一个名为"index.html"或类似的文件中，但在这个案例中，它被命名为"pagina-smx-main.html"，可能是为了强调它是"pagina-smx"项目的主体部分。 在创建电脑网站...
School-Archive
05-31
这些语言在计算机科学教育中非常常见，分别对应着不同的应用领域。 1. **C++**: 是一种面向对象的编程语言，常用于系统软件、应用程序、游戏开发等。它的特点是高效、灵活，允许程序员进行低级别的内存管理和细节...
Beego学习笔记对应案例代码
12-03
总的来说，"Beego学习笔记对应案例代码"是一个很好的学习资源，它涵盖了Go语言和Beego框架的基础知识，包括路由、控制器、模板、数据库操作、错误处理等关键点。对于Go语言的初学者，通过这个项目可以逐步了解和掌握...
HTML 基本开发方式，学会常用的 HTML 标签
1226
04-28 1万+
一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单，语法风格和 Java 之类的差别很大，(并不能表达一些逻辑，而只是能表达 “有哪些东西" 一种信息)， 使用记事本创建一个文件，后缀名改成 .html 即可，运行 html 也不需要额外的编译器，直接有浏览器就行 hello world! 虽然这个代码能运行，但是其实并不算是一个合法的 HTML 语法，那为什么浏览器还能正常运行呢?? 鲁棒性：“容错能力” 强 <html> <head> &
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 56万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
React脚手架public文件介绍
Mr-yang的随笔
07-25 667
public文件夹下index.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <!-- 开启理想视口，用于做移动端网页的适配 --> &l
Web学习（一） html基础标签
May the Force be with you
03-05 3206
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
HTML5 入门：一个最简单的HTML页面（doctype、meta、Head、标签的使用)
weixin_34402408的博客
01-23 600
HTML5的&lt;!doctype&gt;声明怎么写 这是HTML 4.01的doctype： &lt;!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; XHTML 1.0的doctype。它的长度跟HTML 4.01的差不太多： &lt;!...
html学习笔记：meta标签
weixin_51235620的博客
05-11 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><!--meta标签用于设置网页源数据 属性： name：指定数据名称 charset：设置网页字符集 conten：指定数据内容 --> <meta name="Keywords" content="html5,前端开发"><!--key
【罗盘时钟---使用html,js,css编写。附源代码及效果】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-20 6万+
代码 罗盘效果.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js罗盘时钟
html基础常用必学
m0_53313913的博客
05-03 87
常用基础标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签练习网页一界面</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <!--标题标签--> <h1>吴戬</
华为HCIP-Datacom笔记：OSPF基础与路由优先级解析
本资源是一份针对华为HCIP-Datacom方向的认证笔记，重点讨论了OSPF（Open Shortest Path First）的基础概念及其在网络路由中的应用。OSPF是一种内部网关协议，它在路由器的控制平面（RIB，Routing Information Base...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值