HTML初识

最新推荐文章于 2021-04-20 22:55:39 发布

朕葱哥

最新推荐文章于 2021-04-20 22:55:39 发布

阅读量712

点赞数

分类专栏：学习文章标签：学习

本文链接：https://blog.csdn.net/qq_43243728/article/details/102597077

版权

学习专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一、基本概念

HTML:( Hypertext Marked Language)超文本标记语言，是一种标识性的语言。包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

二、历史版本

HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义。HTML到现在总共经历了五版。

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

目前，我们使用最广的是H5，也就是HTML5，这是目前主流的一版，当然现在也还有使用之前一些旧版本的企业。

超级文本标记语言其实就是有一些标签组成，总体来说不是很复杂，不过功能强大。这也是现在盛行的原因。他有良好的简易性，因为他是一些标签的使用，所以用起来比较灵活。也有较好的通用性，因为HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

三、使用

前面说到HTML主要是一些标签的使用，但是具体如何实现？

以下代码就是一个简单的HTML文件。

<!DOCTYPE html>
<html>
	<!-- html是页面的根 -->
	<head>
		<!-- meta charset是页面的编码 以防止在不同的浏览器上出现乱码。 -->
		<meta charset="utf-8">
		<title>此处是页面的标题</title>
	</head>
	<body>
		<!-- 此处为页面的内容部分 -->
	</body>
</html>

上图代码就是HTML一个简单的框架，然后往其中加入各种标签，就可以构成一个简单的网页页面。

注意：标签必须成对出现，不可嵌套。这是最重要的，在写的时候应当注意，写标签时，就可以成对写完。以免出错！

下面就是常用的一些标签：

行内标签：只针对某行中的某些元素，不会构成换行。

块标签：不允许与其他元素同行，单独一行，或者单独一个块。

<!--...-->	定义注释。 在Hbuilder中有快捷键 ctrl + /（最为常用）再写代码是用的也比较多
<!DOCTYPE>	定义文档类型。
<aside>页面内容之外的内容。
<audio>	声音内容。
<b>	粗体字。
<big>	大号文本。
<body>	文档的主体。
<br>	简单的折行。
<center>	不赞成使用。定义居中文本。
<del>	被删除文本。 //注意：行内标签
<div>	文档中的节。
<em>	强调文本。
<footer>	定义 section 或 page 的页脚。
<h1> to <h6>	定义 HTML 标题。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<html>	定义 HTML 文档。
<i>	定义斜体字。
<img>	定义图像。
<label>	定义 input 元素的标注。
<legend>	定义 fieldset 元素的标题。
<li>	列表的项目。
<meta>	关于 HTML 文档的元信息。
<ol>	有序列表。
<p>	段落。
<small>	小号文本。//行内标签
<source>	媒介源。
<span>	文档中的节。
<strong>	强调文本。
<style>	文档的样式信息。

<table>	表格。
<tbody>	表格中的主体内容。
<td>	表格中的单元。

<title>	定义文档的标题。
<tr>	定义表格中的行。

<u>	定义下划线文本。
<ul>	定义无序列表。

<video>	定义视频。

以上就是HTML的简单说明。

简单页面

1.简单的页面

<!--简单页面-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
    <title>页面标题</title>
	</head>
	<body>
        李聪聪，javaweb
	</body>
</html>

2、常用标签

标题标签

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

hn:标题标签，典型的块标签，单独成为一行，不允许与其他内容同行

3、块标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>常见标签</title>
	</head>
	<body>
		<!-- 块标签-->
		<div>
			这是第一个div
		</div>
		<div>
			这是第二个div
		</div>
	</body>
</html>

div:块标签；所包含的内容单独一块。

4、段标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常见标签</title>
	</head>
	<body>
		<p>
			在人生中，<span>面对许多事</span>，<b>我们都有足够的能力与经验</b>，<strong>但却往往难以卸下心灵的负担</strong>，<i>不敢</i>冲破现有的条条框框，少了那份敢为天下先的勇气与决心，最终碌碌此生。<u>
			漫漫长路</u>，精彩就在于一次次敢于挑战的勇气，<del>贵不再能而在敢</del>。
		</p>
	</body>
</html>

p:段标签，被p所包含的内容是单独的一段，sapn行内标签，不会强制性换行。b/strong为加粗标签，将所包含内容加粗。i为加斜标签。u:下划线标签，del中划线标签，处p标签以外，都为行内标签。

5、pre标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>pre标签</title>
</head>
<body>
	<pre>
锄禾日当午，
汗滴禾下土。
谁之盘中餐，
粒粒皆辛苦。
	</pre>
</body>
</html>

pre标签，会用所包含内容的原本格式显示出来，不会修改格式。

6、多媒体标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		img用来承载图片
		 -->
		<img src="./file/a.jpg" width="500" title="壁纸" alt="这是我的壁纸!">
		<video src="./file/b.mp4" height="500" controls autoplay></video>
		<br></br>
		<audio src="./file/周华健%20-%20刀剑如梦.mp3" autoplay controls>
			当前浏览器不支持audio
		</audio>
	</body>
</html>

img 用来承载图片，<img src="./file/a.jpg" width="500" title="壁纸" alt="这是我的壁纸!">其中的路径最好不要使用绝对路径，使用相对路径，因为不能保证，在不同设备上可以找到该路径。 width用来修改图片大小。

video用来承载视频，将本地视频显示到网页页面上，<video src="./file/b.mp4" height="500" controls autoplay></video>，autoplay是让视频打开页面的情况下自动播放，注意：在谷歌浏览器上不可以自动播放（我试过）。

audio用来承载MP3文件，<audio src="./file/周华健%20-%20刀剑如梦.mp3" autoplay controls>
当前浏览器不支持audio
</audio> auto play是自动播放的意思，注意：在谷歌浏览器上不可以自动播放（我试过）。

7、列表标签

列表：可分为有序列表和无序列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>

		</title>
		<style type="text/css">
			* {
				margin: 0;
			}

			/*css*/
			#shool {}

			#shppe>li {
				list-style: none;
				list-style-image: url(img);
				width: 400px;
				height: 30px;
				color: ;
			}
		</style>

	</head>
	<body>
		<!-- HTML提供了三种常用的列表标签
		1、有序标签 -->
		<div id="news">
			<h4>实时热点</h4>
			<h1>有序列表</h1>
			<!-- ol有序列表 -->
			<ol>
				<li>金秀贤新剧</li>
				<li>金秀贤新剧</li>
				<li>金秀贤新剧</li>
				<li>金秀贤新剧</li>
				<li>金秀贤新剧</li>

				<ol>
					<li>金秀贤新剧</li>
					<li>金秀贤新剧</li>
					<li>金秀贤新剧</li>
					<li>金秀贤新剧</li>
					<li>金秀贤新剧</li>
					<li>金秀贤新剧</li>
				</ol>
			</ol>
			<hr />
			<h1>无序列表</h1>

		</div>
		<hr />
		<ul>
			<li>金秀贤新剧</li>
			<li>金秀贤新剧</li>
			<li>金秀贤新剧</li>
			<li>金秀贤新剧</li>
			<li>金秀贤新剧</li>

		</ul>
		<h2>数据列表</h2>
		<dl>
			<dt>
				热点信息
			</dt>
		</dl>
	</body>
</html>

无序列表：有序列表 ol，无线列表 ul，数据列表 dl 这里的有序列表中也可以嵌套有序列表。

表格链表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">用户信息</h1>
		<table align="center" border="1" width="1000" cellspacing="0" cellpadding="0">
			<!-- 
			tr代表一行
			td代表列
			 -->
			<tr align="center">
				<td>用户名称</td>
				<td>用户年龄</td>
				<td>用户性别</td>
				<td>用户地址</td>
				<td>用户邮箱</td>
			</tr>
			</thead>
			<tr align="center">
				<td>李四</td>
				<td>女</td>
				<td>江西</td>
				<td>123</td>
			</tr>
		</table>
	</body>
</html>

注意：tr表示行，td表示列，align="center"表示改内容在表格中居中，比较常用。

还有常用的标签colspan="2"，表示合并行单元格。类似与word中的合并

rowspan="2"，表示合并列单元格。类似与word中的合并

超链接标签；

比如在word中可以穿插一些超链接，点击可以跳转到该网页中，这里也类似。主要用到的标签就是<a href=""></a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>超链接标签</h1>
		<a href="http://www.baidu.com" target="_self">百度</a>
		<a href="#">不知道跳转到何处？</a>
	</body>
</html>