web前端学习(二)——HTML5的标题、段落、链接、注释、换行、插入水平线及对齐与缩进相关设置

news/2024/7/4 7:46:31

1.HTML5标题

HTML 标题(Heading)是通过<h1> ~ <h6> 标签来定义的。 

2.HTML5段落 

HTML 段落是通过标签 <p> 来定义的。 

3.HTML5链接

HTML 链接是通过标签 <a> 来定义的。 

4.HTML5注释 

HTML 注释是通过标签 <!-- --> 来定义的。

5.HTML5换行 

HTML 换行是通过标签 <br> 来定义的。

6.HTML5水平线 

HTML 水平线是通过标签 <hr> 来定义的。 hr 元素可用于分隔内容。

7.HTML5对齐与缩进 

① <pre>...</pre> :可以让文字按照原始代码的排列方式进行显示。

② <blockquote>...</blockquote> :用来表示引用文字,会将标记内的文字换行并缩进。 

开始标签结束标签描述
<h1> ~ <h6></h1> ~ </h6>定义1级到6级标题
<p></p>定义一个段落
<a href="..."></a>定义一个链接
<!-- -->定义一段注释
<br>定义换行
<hr>定义水平线,用于分隔内容

7.实例一: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个网页</title>
	</head>
	<body>
		<h1>Hello,欢迎来到我的网页!!!</h1>
		<p>一级标题下的一个段落</p>
		<h2>Hello,欢迎来到我的网页!!!</h2>
		<p>二级标题下的一个段落</p>
		<h3>Hello,欢迎来到我的网页!!!</h3>
		<p>三级标题下的一个段落</p>
		<!--这是一行注释,在浏览器将不会显示!!!-->
		<a href="https://www.baidu.com">这是百度的链接网址</a>
	</body>
</html>

运行结果如下:

8.实例二:

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="gb2312">
		<title>HTML5学习</title>
	</head>
	<body>
		<h1>春晓</h1>
		<p>春眠不觉晓<br/>处处闻啼鸟</p>
		<hr/>
		<p>
			夜来风雨声
				花落知多少
		</p>
		<hr/>
		<p>注意,浏览器忽略了源代码中的排版(省略了第二个段落中多余的空格和换行)</p>
        <h1>锦瑟</h1>
		<h4>李商隐</h4>
		锦瑟无端五十弦,<br/>
		一弦一柱思华年。<br/>
		<blockquote>
		庄生晓梦迷蝴蝶,<br/>
		望帝春心托杜鹃。<br/>
		</blockquote>
		沧海月明珠有泪,<br/>
		蓝田日暖玉生烟。<br/>
		<pre>
		此情可待成追忆,<br/>
		只是当时已惘然。<br/>
		</pre>
	</body>
</html>

运行结果如下:

 


http://www.niftyadmin.cn/n/712407.html

相关文章

《高性能Linux服务器构建实战:系统安全、故障排查、自动化运维与集群架构》——1.3 文件系统安全...

本节书摘来自华章计算机《高性能Linux服务器构建实战&#xff1a;系统安全、故障排查、自动化运维与集群架构》一书中的第1章&#xff0c;第1.3节,作者&#xff1a;高俊峰著&#xff0c; 更多章节内容可以访问云栖社区“华章计算机”公众号查看。 1.3 文件系统安全 1.3.1 锁定…

全屏幕图片 背景图

背景图 <div class"xxx" style"background-image:url(xxx.jpg) ;background-repeat:no-repeat; background-size:100%;"></div> 通过Img标签设置 html: <body ><img class"img" src"img/backg.jpg" alt"背景…

mysql抢购表设计_小程序商城-商品秒杀产品表 - 数据库设计 - 数据库表结构 - 果创云...

-- 数据库大全&#xff1a;小程序商城-商品秒杀产品表-- 来源&#xff1a;YesApi.cnCREATE TABLE yesapi_eb_store_seckill (id bigint(20) unsigned NOT NULL AUTO_INCREMENT,product_id int(10) NOT NULL COMMENT 商品id,image varchar(255) NOT NULL COMMENT 推荐图,images …

Jetcache

转存 Jetcache https://github.com/alibaba/jetcache/wiki/GettingStarted_CN转载于:https://www.cnblogs.com/amberbar/p/10909322.html

【cocos2d-x 3.7 飞机大战】 决战南海I (八) 背景移动

採用双层背景。这样效果更好 .h class BackgroundMove : public Layer { public:BackgroundMove();~BackgroundMove();virtual bool init();virtual void onEnterTransitionDidFinish(); //等进入场景之后在进行背景的移动CREATE_FUNC(BackgroundMove);public:void move(float …

学习进度十三

所花时间&#xff1a;1.5小时 代码量&#xff1a;大约200行 博客量&#xff1a;2篇 了解到的知识点&#xff1a;javascript的验证功能&#xff0c;正则表达式的应用等转载于:https://www.cnblogs.com/jbwen/p/11071574.html

php 学习路线 赵兴壮2014年4月28 日 加油

第一阶段 第一讲&#xff0c;WEB基础 1.1 网站基本知识&#xff1b; 1.2 网络协议介绍&#xff1b; 1.3 B/S与C/S结构的区别&#xff1b; 1.4 WEB编程、网站开发技术介绍。 第二讲&#xff0c;网页设计 2.1 Dreamweaver介绍及使用&#xff1b; 2.2 静态网页HTML语…