HTML实例

最新推荐文章于 2022-10-03 23:03:18 发布

xiaoxinscholar

最新推荐文章于 2022-10-03 23:03:18 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/xiaoxinscholar/article/details/104551307

版权

HTML实例

0.欢迎进入HTML

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

实例展示：

在这里插入图片描述

1.你好，HTML

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

实例展示：

在这里插入图片描述

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-wWv9WliT-1582856882830)(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-gOOd04DF-1582856882831)(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>

实例展示：
在这里插入图片描述

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>

实例展示：

在这里插入图片描述

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>

实例展示：
在这里插入图片描述

7.常用标签（3）

<!DOCTYPE html>
<html lang ="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <h3>2020年网络游戏排行榜</h3>
 <ol type ="①" start=5>
 	<li>王者荣耀</li>
 	<li>吃鸡</li>
 	<li>LOL</li>
 	<li>wow</li>
 </ol>
 <hr>

     <h3>可爱的同学们</h3>

     <ul type ="circle">
 	     <li>马六</li>
 	     <li>王五</li>
 	     <li>张三</li>
 	     <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>

实例展示：
在这里插入图片描述

8.常用标签（4）

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

实例展示：

在这里插入图片描述

9.常用标签（5）

<!DOCTYPE html>
<html lang ="en">
      <head>
         <meta charset="UTF-8">
         <title>Document</title>
      </head>
    <body>
         <img src="../image/web前端/12.jpg" alt="图片加载失败.." title="这是腾讯集团的吉祥物--企鹅">
         <hr>
         <img src="../image/web前端/2.gif" alt="图片加载失败" width="500px" heighth="400px">
            <hr>
         <img  src="../image/web前端/11.jpg" width="50%">
         <hr>
         <div style=width:800px;height:700px;background:red;>
         	<img src="../image/web前端/9.png" width="50%">
         </div>


    </body>
 
</html>

实例展示：

在这里插入图片描述

10.其他标签（1）

<!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 to <address>上海市</address>
         <hr>
         html从<b>入门</b>到<b>精通</b>
         <hr>
         html从<strong>入门</strong>到<strong>精通</strong>
         <hr>
         原价<del>188元</del>，优惠价<span style="font-size:50px;color:red">98</span>元
         <hr>
         观众：<ins>范文鑫</ins>
         <hr>
         水的化学式为：H<sub>2</sub>O
         <br>
         2<sup>4</sup>=16
         <hr>  
         <bdo dir="rtl">北京欢迎你！</bdo>
         <br>
         <bdo dir="rtl">上海自来水来自上海</bdo>
         <hr>
         <abbr title="happy new year">新年快乐</abbr>
         <br>
         <span title="happy new year">新年快乐</span>
         <hr>

         HTML从<small>入门</small>到<small>精通</small>
         HTML从<big>入门</big>到<big>精通</big>
    </body>
</html>

实例展示：

在这里插入图片描述

11.头部标签

<!DOCTYPE html>
<html lang ="en">
    <head>
       <!-- 设置字符编码 -->
       <meta charset="UTF-8">
       <!-- 设置网页关键字 SEO网络优化-->
       <meta name="keywords" content="IT教育,Java开发,web前端,Python,安卓开发……">
       <!-- 设置网页的描述 -->
       <meta name="description" content="专业教师在线答疑">
       <!-- 设置网站的作者 -->
       <meta name="author" content="刘老师">
       <!-- 设置网站跳转 -->
       <!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com">  -->

       <title>Document</title>
       <!-- 定义内部CSS样式 -->
       <style>
           body{
           	color:gray;
           }
       </style>
       <link rel="stylesheet" href="CSS文件的路径">
       <!-- 定义或引用脚本 -->
       <script>
       	   alert="嘿嘿"
      </script>
      <!-- 定义基础路径 -->
      <base herf="../image/web前端/">
    </head>
    <body>
         	IT教育，全国计算机考试等级考试--刘老师
         	<img src="../image/web前端/3.gif" alt="">
         	<br>
         	<img src="../image/web前端/2.gif" alt="">
    </body>
</html>

实例展示：

在这里插入图片描述