#HTML学习日记01

最新推荐文章于 2024-08-27 15:45:31 发布
最新推荐文章于 2024-08-27 15:45:31 发布
阅读量142 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47741303/article/details/114625006
版权

第一个HTML实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<h1>我的第一个标题</h1>
		<p>我的第一个段落</p>
	</body>
</html>

HTML水平线与标题（及注释格式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<h1>我的第一个标题</h1>
		<hr>
		<h2>我的第二个标题</h2>
		<hr>
		<h3>我的第三个标题</h3>
		<hr>
		<!--这是一个注释，注释在浏览器中不会显示-->

	</body>
</html>

HTML折行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<p>我的<br>第一个<br>段落</p>
		</body>
</html>

HTML文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体文字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML链接实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<a href="https://www.runoob.com/">访问菜鸟教程</a>
		</body>
</html>

HTML链接-target属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<a href="https://www.runoob.com/"target="_blank">访问菜鸟教程</a>
		<!--如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。-->
		</body>
</html>

HTML样式实例-背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body style="background-color: aquamarine;">
		<h2 style="background-color: antiquewhite;">这是一个标题</h2>
		<p style="background-color: antiquewhite;">这是一个段落</p>
		</body>
</html>

HTML样式实例-字体，字体颜色，字体大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body style="background-color: aquamarine;">
		<h2 style="font-family:verdana;">这是一个标题</h2>
		<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
				</body>
</html>

HTML样式实例-文本对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<h1 style="text-align:center;">居中对齐的标题</h1>
		<p>这是一个段落。</p>
	</body>
</html>

HTML图像-图像插入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<p>
		一个图像:
		<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>
		<!--注意插入动图的语法和静态图的语法是一样的。-->
	</body>
</html>

HTML元素-使用<div>元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML学习日记</title>
	</head>
	<body>
		<div id="container" style="width: 31.25rem;">
			<div id="header" style="background-color: azure;">
				<h1 style="margin-bottom:0;text-align: center;">主要的网页标题</h1></div>
		<div id="menu" style="background-color: aquamarine;height:200px;width:100px;float:left;">
		<b>菜单</b><br>
		HTML<br>
		CSS<br>
		JavaScript</div>
		​
		<div id="content" style="background-color: aqua;height:200px;width:400px;float:left;">
		内容在这里</div>
		​
		<div id="footer" style="background-color: azure;clear:both;text-align:center;">
		版权 © runoob.com</div>
		​
		</div>
	</body>
</html>

实践：个人介绍网页1.0
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人介绍网页</title>
	</head>
	<body>
		<div id="container" style="width: 62.5rem;">
			<div id="header" style="background-color: lavender;">
				<h1 style="margin-bottom:0;text-align:center;font-family: "楷体";"><img src="images/tupian2.png" width="30"height="40">个人介绍</h1></div>
		<div id="menu" style="background-color: aliceblue;height:20rem;width:20rem;float:left;">
			<p style="text-align: right;text-indent:3rem;">
		姓名<br><br></p>
			<p style="text-align: right;text-indent:3rem;">
			性别<br><br></p>
			<p style="text-align: right;text-indent:3rem;">
		班级<br><br></p>
			<p style="text-align: right;text-indent:3rem;">
			兴趣爱好<br><br></p>
			<p style="text-align: right;text-indent:3rem;">
			博客网址</p></div></div>
		​
		<div id="content" style="background-color: aliceblue;height:20rem;width:42.5rem;float:left;">
		<p style="text-align: left;text-indent:3rem;">
		XXX<br><br></p>
		<p style="text-align: left;text-indent:3rem;">
		X<br><br></p>
		<p style="text-align: left;text-indent:3rem;">
		XXXXX<br><br></p>
		<p style="text-align: left;text-indent:3rem;">
		此处省略一百字<br><br></p>
		<p style="text-align: left;text-indent:3rem;">
			https://blog.csdn.net/weixin_47741303?spm=1011.2124.3001.5343<br>
			<p style="text-align: left;text-indent:3rem;">
		<a href="https://blog.csdn.net/weixin_47741303?spm=1011.2124.3001.5343"target="_blank">戳这里</a>
			</p></p></div></div>
		​
		<div id="footer" style="background-color: azure;clear:both;text-align:center;width:62.5rem;">
		@容我想想ing</div>
		</div>
			</body>
		</html>

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

容我想想ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用html做简单的日记,学习HTML日记
weixin_32123259的博客
06-07 1039
1。html>是什么意思?[1]DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义(DTD)来解析文档。html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html52. 开始标签结束标签3. 这是最外的一层中文编码目前在大部分浏览器中，...
html课题研究学习日记#25
weixin_47410720的博客
08-07 164
学习日记
html课题研究学习日记#21
weixin_47410720的博客
08-03 84
学习日记
html课题研究学习日记#9
weixin_47410720的博客
07-17 497
学习日记
html课题研究学习日记#15
weixin_47410720的博客
07-24 94
学习日记
html课题研究学习日记#4
weixin_47410720的博客
07-09 179
学习日记
html课题研究学习日记#2
weixin_47410720的博客
07-06 157
学习日记
html课题研究学习日记#1
weixin_47410720的博客
07-05 75
学习记录
HTML的学习日记
weixin_49410853的博客
09-03 341
学习HTML的第一天 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html> 这是HTML的开头公式我尽量记下来
HTML编写个人日记,HTML学习日记（1-基础）
weixin_31302909的博客
06-25 846
简介HellowWorld!我的第一个标题Hellow World声明文档类型之间内容用于描述文档声明字符为utf-8，防止中文出现乱码＜h1>为内容标题，h1即1级标题，h234以此类推 Html元素语法HTML元素以开始标签起始，以结束标签中止元素的内容是开始标签与结束标签之间的内容大多数HTML元素可拥有属性某些元素具有空内容，空元素在开始标签中进行关闭定义换行HTML属性HTML元素...
我的HTML学习日记.zip
03-14
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html学习日记6_网站.rar
01-05
这个压缩包"html学习日记6_网站.rar"很可能是某位学习者在第六阶段关于构建网站的学习记录，其中可能包含了HTML代码示例、笔记或者小项目。"pre_html_04"这个文件名可能是指预HTML的第四个部分，暗示了这是一个关于...
Html学习日记
wang_zi_kang_UI的博客
12-28 201
html框架 html网页只有在这个框架内才会生效 一个简单的页面 <head></head>页面标题 <title></title>标题内容 <body></body>页面主体 <h1></h1>标题，有h1-h6，内容默认黑体，依次缩小 <hr/>横线，默认占一排，可编辑样式 <br/>重新开头，等于回车 <strong...
HTML中渲染空格和换行符样式的实现方式
程序人生
08-27 636
在HTML中，连续的空格和换行符会被合并为一个空格，所以无法直接通过添加换行符来实现缩进效果。如果您希望在HTML中显示缩进的效果，可以使用CSS样式中的。样式会保留文本中的所有空格和换行符，可能会导致额外的空白间距。如果您需要控制缩进的具体样式，可以使用CSS中的。样式，这样文本中的空格和换行符就会得到保留，从而实现了缩进的效果。上述代码中，我们将要显示的文本放置在。
30分钟从零开始入门拿下 HTML
最新发布
Y_1215的博客
08-27 1194
HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包 含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.类似⻜书⽂档,Word⽂档如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"我是⼀级标题我是⼆级标题
CRUD的最佳实践，联动前后端，包含微信小程序，API，HTML等(二)
08-26 1210
CRUD中，如何做到全端通吃，基于ABP的Dto模块，通过对Dto的编辑，从而控制全部的前端内容，让数据的表格和数据的表单做到动态创建，动态验证等！
html文本文字中保留空格和换行
qq_41985405的博客
08-26 460
空格和换行的样式：虽然HTML本身并不直接支持对空格和换行的样式设置，但是我们可以通过CSS来实现这个效果，我们可以使用whitespace属性来控制如何处理元素中的空白。会使元素中的所有空白都被保留，而whitespace: nowrap;则会阻止元素中的文本换行。
【HTML】模拟消息折叠效果【附源代码】
Young_Pro的博客
08-26 1176
通过 Html 搭配 CSS 和 JavaScript 模拟消息折叠效果，点击展开消息，再次点击即可收起消息
你没有使用过（但应该使用）的前 5 个 HTML 功能
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
08-26 759
TML 已经有了很大的发展，这些特性展示了它已经变得多么强大和灵活。通过将这些鲜为人知的元素合并到你的项目中，你可以创建响应速度更快、动态更动态且用户友好的网页，同时减少对外部库和框架的依赖。因此，请尝试这些 HTML 功能 — 你可能会惊讶于它们可以在多大程度上增强你的开发过程。
大数据开发shell学习日记
09-02
大数据开发中的shell学习日记可以包括以下内容： 1. 学习Linux命令和shell脚本：作为大数据开发者，在Linux下进行开发是常见的，因此了解一些基本的Linux命令和编写shell脚本的技能是必备的。 2. 学习Django：Django...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值