HTML标签

最新推荐文章于 2023-04-22 01:03:27 发布

zm13319249591

最新推荐文章于 2023-04-22 01:03:27 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/zm13319249591/article/details/79464330

版权

一.HTML简介

A:HTML是英文 HyperText Markup Language 的缩写，它的意思是"超文本标记语言"，用它编写出文档的文件的扩展名是“.html”或“.htm”（微软的操作系统），他是可供浏览器解释浏览的文件格式。你可以使用记事本，写字板或者是专业的IDE如：Dreamweaver等等编辑工具来编写HTML文件。

B：HTML标记两端有两个符号“<”和“>”,这两个符号称为角括号。html标签通常是成对出现的，比如“<html>”和“</html>”，前一个是开始标记，后面的是结束标记，在开始和结束标记之间的的文本是元素内容。html标记是与大小写无关的，“<html>”和“<HTML>”所表示的意思的一样的。标记可以拥有自己的属性。属性他能够为页面上的HTML元素提供附加信息。

C：html的文档结构主要是有3部分组成的：

1.<html></html>

<html>标记用于html文件的最前面，用来表示html文件的开始。而</html>的标记则是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用。

2.<head>和</head>

<head>和</head>构成html文件的头部部分，在此标记对之间可以使用<title> </title>和<script> </script>等等标记对，这些标记都是描述html文档相关信息的标记对，<head> </head>标记对之间的内容是不会在浏览器中的内容部分出现的。两个标记必须同时使用。

3.<body>和</body>

<body>和</body>是html文档的主体部分，在此标记可以包括“<p>”,“</p>”,“<h1>”,“<br>”等等众多的标记，他们所定义的文本，图片等等将会在浏览器的内容部分显示出来。两个标记必须一起使用。

D：TITLE标记

a:在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。

E:文字上的分隔标记

问：为什么在记事本里排版排的很漂亮。为何通过浏览器查看看是就变了样子，那是因为浏览器不像word，他不认识ENTER键或者空格键。所以当我们按多少次空格，浏览器都会当做没有看见。

常见的分隔标记：

强制断行标记 "<br>"

强制分段标记 "<p>"

空格 "$nbsp"

F:排版的标记

1.文字的置左，置右，置中。

2.置中标记

使用方法：

3.保持原始数

使用方法：<pre>内容<pre>据格式标记

G:字体标记

1.标题标记

使用方法：<h1>内容</h1>

2.设置字体标记

使用方法：<font size="2" color="red" face="黑体">内容</font>

3.字体变化标记

使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等

<b></b>加粗

<i></i>斜体

<u></u>底线

<kbd>用粗体等宽字体显示文字</kbd>

<var>用较小的固定宽度显示字体</var>

4.在使用文字标记过程中，对于文字的格式也有相当多的变化。

<sup></sup>上标 <smap>用于字母序列等宽</smap>

<sub></sub>下标 <blink></blink>闪烁

<em></em>强调<address>模拟信封上的字体</address>

<strong></strong>加强

<big>比默认的字体大一号</big>

<small>比默认字体小一号</small>

<code>以等宽字体显示计算机程序代码</code>

H：背景标记

使用：

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签使用</title>
	</head>
	<body>
	3<sup>2</sup>   CO<sub>2</sub>
	<s>要删除的内容</s>
	<strng>我们不一样</strong>
	<u>每个人有不同的境遇</u>
	<kbd>我们在这里</kbd>
	<var>在这里等你</var>
	<i>我们不一样</i>
	<b>我们在这里在这里在这里等你</b>
	</body>
</html>

结果：3² CO₂~~要删除的内容~~ 我们不一样每个人有不同的境遇 我们在这里 在这里等你 我们不一样 我们在这里在这里在这里等你

I.背景标记

设置背景颜色，设置背景图片

bgcolor background

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置背景图片</title>
	</head>
	<body background="img/a.jpg.jpg">
		<font size:"5" face="微软雅黑" color="aqua" ></font>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景设置颜色</title>
	</head>
	<body bgcolor="antiquewhite">
		<!--设置背景颜色-->
		<font size:"7" color="blue" face="微软雅黑">春天来了，我们一起去踏青吧</font>
	</body>
</html>

2.向网页中添加图片

案例：

<html>
	<head>
		<meta charset="UTF-8">
		<title>图片</title>
	</head>
	<body>
		<!--向网页中插入图片-->
		<img src="img/a.jpg.jpg" alt="图片未加载出来" align="left" title="图片描述" height="50px" width="50px">
	</body>
</html>

3.序列标签

a.无序标签

type="circle/空心圆 disc实心圆 square 实心正方形"

b.有序标签

type="1,a,A,l,i"

c.自定义标签

<dl>

<dt>

</dt>

</dl>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标记</title>
	</head>
	<body>
		<!--有序标签-- start是数字标号的起始标号-->
		<ol type="start">
			<li>你</li>
			<li>好</li>
			<li>世</li>
			<li>界</li>
		</ol>
		<!--无序标签--> 
		<ul type="square">
			<li>我</li>
			<li>们</li>
			<li>不</li>
			<li>一</li>
			<li>样</li>
		</ul>
		<!--自定义标签-->
		<dl>
			<dt>
				<dd>我听见雨滴落在青青草地，我听见远方下课钟声想响起</dd>
			</dt>
			<dt>
				<dd>也许我没有听见你的声音，认真呼唤我姓名</dd>
			</dt>
				
		</dl>		
	</body>
</html>

结果：

4.标题标记

a:有六级，从第一级开始每一级大小都会变小，第一级字体是最大的。

b:案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题标记</title>
	</head>
	<body>
		<!--标题，从第一级开始每一级的字体大小都会变小有6层-->
		<h1>分手应该体面，谁都不要说抱歉</h1>
		<h2>分手应该体面，谁都不要说抱歉</h2>
		<h3>分手应该体面，谁都不要说抱歉</h4>
		<h5>分手应该体面，谁都不要说抱歉</h5>
		<h6>分手应该体面，谁都不要说抱歉</h6>
	</body>
</html>

5.特殊字符

html有一些字符时特殊字符，是需要我们去处理的

< < > > & &

<html>
	<head>
		<meta charset="UTF-8">
		<title>特殊字符处理</title>
	</head>
	<body>
		<!--&   >    <-->  
	&><
	</body>
</html>

6.超链接

target 确定打开窗口是在当前窗口打开还是会打开在一个新窗口，属性为 _blank新打开一个窗口 _self

<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接标签</title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_self">点击进入百度</a>
		<a href="HTML.html" target="_blank">点击进入我的页面</a>
	</body>
</html>