HTML基础（二）---文本标签与属性

1、文本修饰标签

1.1、<h1>到<h6>标签

<h1>到<h6>标签是指标题标签，<h1>是标题一标签，<h6>是标题六标签，<h1>的字体最大最粗，到<h6>的字体就是最小最细，其他的以此类推。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>h1标签</h1>
	<h2>h2标签</h2>
	<h3>h3标签</h3>
	<h4>h4标签</h4>
	<h5>h5标签</h5>
	<h6>h6标签</h6>
</body>
</html>

1.2、<b>与<strong>标签

<b>是定义显示的文字为粗体，<strong>是强调文本，虽然他们看上去都是显示字体变粗，但是如果你想强调某个文本的话，建议使用<strong>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<b>在这里使用的是加粗标签</b>
	<strong>在这里使用的是强调标签</strong>
</body>
</html>

1.3、 <i>与<em>标签

<i>是定义显示的文字为斜体，<em>是强调文本，虽然他们看上去都是显示字体斜体，但是如果你想强调某个文本的话，建议使用<strong>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<i>在这里使用的是斜体标签</i>
	<br>
	<em>在这里使用的是斜体强调标签</em>
</body>
</html>

1.4、<s>与<del>标签

<s>标签是定义加删除线的文本，<del>标签是定义被删除的文本，其实都是起到了删除线的作用，用哪个都可以，但是W3C不建议是用<s>,所以需要删除线的话就使用<del>吧

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<s>这是被定义为加删除线的文本标签</s>
	<br>
	<del>这是被定义为被删除的文本标签</del>
</body>
</html>

2、标签的属性与嵌套

2.1、标签属性的书写

以下是标签属性的书写格式，每种标签都有不同的属性，具体标签对应什么属性需要自己去查询了

下面是html中标签属性的编写

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>万维网</h1>
	<h6><font color="blue" size="6">w3c</font>就是指的万维网</h6>
</body>
</html>

2.2、标签属性的嵌套

正如刚才所说，不是所有的标签都具有相同的属性，所以有时候需要进行属性的嵌套使用，已达到我们预期的效果，下面是嵌套属性的写法，在标签属性当中再嵌套标签属性，需要像下面这样编写，提现层级关系

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h2 align="center">
		<font color="red" size="6">
			<em>
				在这里使用了标签属性的嵌套方法，这样写能够理清层级关系
			</em>
		</font>
	</h2>
</body>
</html>

2.3、标题的修改

需要设置标题的话，只需要修改标签<title>即可

<!DOCTYPE html>
<html>
<head>
	<title>HTML练习</title>
</head>
<body>
	<h2 align="center">
		<font color="red" size="6">
			<em>
				修改标题，直接修改title标签即可
			</em>
		</font>
	</h2>
</body>
</html>

3、其他属性标签

3.1、区块标签

以下是常用的区块标签

<p>...</p>：段落标签，p标签属性段落文本标签，文章的分段都是用p标签，段落之间会有间隔

<div>...</div>：区块布局标签，div就是一个布局的容器

<span>...</span>：区块布局标签，是无样式的区块标签

3.2、单标签及其属性

以下是常用的单标签

<hr/>：水平线标签

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>这是水平线标签</p>
	<hr/>
</body>
</html>

以下配置了水平线的属性

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<p>这是水平线标签</p>
	<hr width="500" align="left" color="red" />
</body>
</html>

<br/>：换行符标签

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<span>使用换行符</span><br/>
	<span>使用换行符</span><br/>
	<span>使用换行符</span><br/>
	<span>使用换行符</span><br/>
</body>
</html>

<pre>...</pre>：格式化标签，将源码中的样式展示出来

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<pre>
		你
		好
		        啊
		             !
	</pre>
</body>
</html>

3.3、HTML字符实体

在HTML当中如果我们想展示空格等字符实体时，在html文件中输入空格等字符实体，html是不能识别的，所以需要输入相应的字符来对应字符实体，下面就是HTML代码对应的字符实体

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
''	引号	"
§	小节	§
©	版权	©
®	注册商标	®
x	乘号	×
÷	除号	÷