HTML实例

最新推荐文章于 2022-03-21 17:29:23 发布

jiayuScholar

最新推荐文章于 2022-03-21 17:29:23 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/jiayuScholar/article/details/104636216

版权

这篇博客详细介绍了HTML的基础，包括欢迎介绍、标签的组成、注释的使用、实体标签符号，以及一系列常用的HTML标签，如头部标签、标签嵌套、超链接、锚链接等，并通过丰富的实例展示了各种标签的用法。

摘要由CSDN通过智能技术生成

HTML实例

0.欢迎进入HTML

<html>
	<head>
	         <title>HTML学习</title>
	</head>
	<body>
	       welcome to html!
	</body>
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VYC55THP-1583225894544)(C:\Users\DELL\Desktop\project\image\0.png)]

1.你好，HTML

<html>
	<head>
	         <title>你好，HTML</title>
	         <meta charset ="utf-8">
	</head>
	<body>
	       welcome to html!
	</body>
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0A4hnF81-1583225894544)(C:\Users\DELL\Desktop\project\image\1.png)]

2.标签的组成

<html>
	<head>
		<title>标签的组成</title>
	<meta charset ="UTF-8">
    </head>
    <<body bgcolor ="red" text="blue">
    	标签的组成
    	<hr>

    	 html从入门到精通
    	 <hr>

    	 <h1>一级标题</h1>
    	 <hr>

    	 <h2>二级标签</h2>
    	 
    	 
    	 <h1>哈哈</h1>呵呵
    	 <hr>

    	 <span>嘿嘿</span>吼吼
    </body>
</html>

实例应用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-andlbUhu-1583225894545)(C:\Users\DELL\Desktop\project\image\4.png)]

3.注释

<html lang ="en">
	<head>
		<meta charset ="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!--第一个注释-->
	</body>
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xuxdy4GX-1583225894545)(C:\Users\DELL\Desktop\project\image\5.png)]

4.实体标签的符号

<html lang ="en">
	<head>
		<meta charset ="UTF-8">
		<title>Document</title>
	</head>
	<body>
		图书:&lt;&lt;HTML从入门到精通&gt;&gt;
		<hr>

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

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

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

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

         &reg;
         <hr>

         &times;关闭符号
         <hr>

         &amp;实体字符名称是区分大小写,大小写敏感

	</body>
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMrwLp0s-1583225894546)(C:\Users\DELL\Desktop\project\image\6.png)]

5.常用标签（1）

<!DOCTYPE html>
<html lang ="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
	   hello html
	   hello world
	   <br>
	   welcome to html
	   <p>
	   	在HTML文档的第一行，使用  声明html文档的类型用来告诉浏览器页面的HTML文档类型，简单来说，用来指定使用的html版本规范
	   </p>
	<hr>
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	</body>
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-on8Syydc-1583225894546)(C:\Users\DELL\Desktop\project\image\7.png)]

6.常用标签（2）

<!DOCTYPE html>
<html lang ="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<pre>
			HTML从入门到精通
			观众：张三
		</pre>
		<hr>
		<div style ="width:400px;height:100px;background:red">导航部分</div>
		<div style ="width:400px;height:300px;background:yellow">正文部分</div>
		<div style ="width:400px;height:100px;background:gray">版权部分</div>
	     <hr>

	     手机不要8888,不要7777，只要<span style ="font-size:50px;color:red">6666</span>
	</body>
	
</html>

实例展示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nWd7R19n-1583225894547)(C:\Users\DELL\Desktop\project\image\8.png)]

7.常用标签（3）

<!DOCTYPE html>
<html lang ="e

最低0.47元/天解锁文章

jiayuScholar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML实例

HTML实例0.欢迎进入HTML<html> <head> <title>HTML学习</title> </head> <body> welcome to html! </body></html>实例展示：[外链图片转存失败,源站可能有防盗链机制,...
复制链接

扫一扫