HTML基础（一）

最新推荐文章于 2024-08-20 10:31:33 发布

原创最新推荐文章于 2024-08-20 10:31:33 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

本文详细介绍了HTML的基础知识，包括其定义、基本标签及其用途，如段落、标题、布局等，并深入探讨了图片、视频和音频等多媒体标签的使用方法。

1、什么是HTML?
HTML(超文本标记语言)，因为文本中包含了所谓"超级链接"点。
2、第一个页面标签

<!doctype html>
<!-- 
   doctype是页面的头信息，用来描述该页面遵循HTML标准，如下面所示，表示该页面遵循H5标准
-->
<html>
<!-- html标签是我们页面的根标签，表示页面的根
      html有两个子标签
         head部分，主要用来包裹页面的不可见部分，主要做页面的属性设置
         body部分，表示页面的内容部分
 -->
<head>
    <title>第一个标签</title>
    <meta charset="utf-8">
     <!-- meta标签是用来设置页面属性的标签 -->
</head>
<body>
	Hellow woeld
</body>
</html>

3、常见标签
p # 段落标签
hn(1~6) # 段落标签
div # 标准块标签，主要用于网页布局
span # 标准行内标签
b/strong # 加粗
i/em # 加斜
u # 下划线
del # 删除线
br # 换行
hr # 分割线
HTML5提供的语义化标签
article # 文章标签
header # 头部标签
section # 正文标签
footer # 尾部标签
aside # 侧列内容
nav # 导航标签
…
范例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常见标签</title>
</head>
<body>
	<!-- 标题标签 -->
	<h1>这是一个一级标题</h1>
	<h2>这是一个二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>

	<div>
	这个是div
    </div>
    <div>
    这个也是一个div
    </div>

    <p>
    第三次握手：<span>客户端</span>收到<b>服务器</b>的SYN＋ACK包,向服务器发送确认包ACK(ack=y+1)此包发送完毕,<br/>客户端和服务器进入ESTABLISHED状态,完成三次握手.
    A与B建立TCP连接时：<i>首先A向B发SYN</i>（同步请求），然后B回复SYN+ACK（同步请求应答），最后A回复ACK确认，这样TCP的一次连接<strong>（三次握手）</strong>
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局页面</title>
</head>
<body>
	<div id="top" style="height: 200px;border :1px solid red">顶部内容</div>
	<div id="zhong">中间部分</div>
	<div id="tail">尾部部分</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pre标签</title>
</head>
<body>
	<pre>
    床前明月光
	疑是地上霜
	举头望明月
	低头思故乡
   </pre>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>语义化标签</title>
</head>
<body>
	<header>

	</header>
    <section>

    </section>
    <footer>

    </footer>
</body>
</html>

4、多媒体标签
图片

<!doctype html>
<!DOCTYPE html>
<html>
<head>
	<title>图片标签</title>
	<meta charset="utf-8">
	 <!-- 图片标签
			img 用来承载和展示图片所用
			src属性用来指定要展示的图片
			src的值可以是url，网络图片路径
			也可以值本地图片，如是本地图片，一定注意：
			建议使用相对路径
			
			title表示图片的标题
			alt表示当图片不可见的时候，会出现的文字描述 -->
</head>
<body style="background-color: black ">
   <!-- <img src="https://hao1.qhimg.com/t0151320b1d0fc50be8.png"  /> -->
   <img src="./微信图片_20190703132016.jpg" title="李雷" alt="这是证件照" height="500">

</body>
</html>

视频

<!DOCTYPE HTML>
<html>
  <head>
    <title>视频播放</title>
    <meta charset="utf-8">
  </head>
  <body>
  	<!--
		video 用来承载视频标签
		controls属性用来表示视频的控制组件
		controls="controls"以后遇到类似于键等于值的属性，
		在h5的标准下，都可以写成controls
		
		autoplay属性表示自动播放
		-->
   <video src="./c.mp4" height="500" controls autoplay />
  <!--  <video height="500">
   <source src="./a.mp4" >
   <source src="./a.avi" >
   </video> -->
  </body>

</html>

音频

<!doctype html>
<!DOCTYPE html>
<html>
<head>
	<title>音乐标签</title>
	<meta charset="utf-8">
</head>
<body>
 <audio src="./b.mp3" controls autoplay></audio>
</body>
</html>