HTML：标签基础_1

HTML标题

1、在HTML文档中，标题很重要。HTML 标题可以用来呈现文档结构，设置得当的标题有利于用户浏览您的网页

2、标题（Heading）是通过 <h1>-<h6> 标签进行定义的：<h1>定义最大的标题。<h6> 定义最小的标题

例1：

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

<h1>这是一个标题。</h1> 
<h2>这是一个标题。</h2> 
<h3>这是一个标题。</h3> 

</body>
</html>

注：

1、浏览器会自动地在标题的前后添加空行

2、默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后

3、标题很重要：请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的

HTML水平线

<hr>标签在HTML页面中创建水平线。hr元素可用于分隔内容，使用该元素产生的水平线可以在视觉上将文档分隔成各个部分

例2：

<h2>这是一个标题。</h2> 
<hr>
<p>这是一个段落。</p>
<hr>

HTML段落

1、HTML可以将文档分割为若干段落

2、段落是通过<p>标签定义的

例3：

<p>这是一个段落</p> 
<p>这是另一个段落</p>

注：浏览器会自动地在段落的前后添加空行：<p>是块级元素

HTML折行

1、如果希望在不产生一个新段落的情况下进行换行（新行），请使用<br>标签

2、在HTML语言中，<br>标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段

3、<br> 元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签

例4：

<p>这个<br> 段落<br>演示了分行的效果</p>

<p>这个
段落
演示了分行的效果
</p>

注：
对于HTML，不能通过在HTML代码中添加额外的空格或换行来改变输出的效果，当显示页面时浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格

例4_1：

<p align="center">
   春眠不觉晓，<br>
   处处闻啼鸟。<br>
   夜来风雨声，<br>
   花落知多少。<br>
</p>

属性

值

描述

align

left

right

center

justify

HTML5不支持。HTML4.01已废弃。不赞成使用，请使用样式取代它，规定段落中文本的对齐方式

HTML图像

1、使用<img>标签定义HTML页面中的图像。<img>标签有两个必需的属性：src和alt

2、在HTML中，图像由<img>标签定义。<img>是空标签，意思是说它只包含属性，并且没有闭合标签

3、要在页面上显示图像，你需要使用源属性（src）。src指"source"，源属性的值是图像的URL地址(存储图像的位置)

4、浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段

5、在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本(alt参数的值)而不是图像

定义图像的语法是：

<img src="url" alt="some_text">

属性：

1、src：其值为存储图像的位置

2、alt：用来为图像定义一串预备的可替换的文本

3、height、width：height（高度）与width（宽度）属性用于设置图像的高度与宽度

4、border：可以使用border属性以像素为单位指定边框粗细。厚度为0表示图片周围没有边框

5、align：默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)(已废弃)
注：
1、为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息

2、指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局

例5：插入图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>

<body>
<p>一个图像:
    <img src="image/drogen.jpg" alt="龙" width="80" height="80" border="5" align="center">
</p>
<p>一个动图:
    <img src="image/eg_compman.gif" alt="Computer man" width="80" height="80">
</p>
</body>
</html>

例5_1:排列图片

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 
    <img src="/statics/images/course/smiley.gif" alt="Smiley face" width="32" height="32"> 
    这是一些文本。
</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 
    <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">
    这是一些文本。
</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 
    <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="top" width="32" height="32">
    这是一些文本。
</p>

<p>
    <b>注意:</b>
    在HTML 4中 align 属性已废弃，HTML5已不支持该属性，可以使用CSS代替。
</p>

注：在写含有内嵌标签对时，感觉最好先把外部标签对写好后再写内部标签对
如：我们在写

<p>这是一些文本。
    <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">
    这是一些文本。
</p>

步骤1：先写外部整个标签对

<p>这是一些文本。这是一些文本。</p>

步骤2：明确我们需要在哪里内嵌(插入)：在中间句号后

步骤3：在需要插入的位置处写内嵌标签对：在第一个句号后插入图像标签对

<img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">

例5_2:浮动图像

<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 
在这里我们使用了 CSS "float" 属性，在HTML 4中align属性已废弃，HTML5 已不支持该属性，可以使用CSS 代替。
</p>

例5_3:设置图像链接

<p>创建图片链接:
    <a href="https://www.baidu.com">
        <img src="/statics/images/w3c/eg_compman.gif" alt="百度" width="32" height="32">
    </a>
</p>

<a href="https://www.baidu.com">客户端中的用于链接的按钮等</a>

注：
1、首先创建连接标签对：明确链接<a>标签对之间为客户端显示的"文本"

<a href="https://www.baidu.com">客户端中的用于链接的按钮等</a>

2、再将步骤1中的"客户端中的用于链接的按钮等"替换成图片(插入img标签对)

例5_4:创建图像映射

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>
<!--usemap=#mapname属性将图像定义为客户器端图像映射-->
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

注：

1、<img>标签中的usemap属性与<map> 元素中的name 相关联，以创建图像与映射之间的关系

2、<map>标签可以和<area>元素一起使用，以此来达到定义图像映射（可点击的链接区域）的目标

4、<map>标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像， <area> 标签没有结束标签

5、area元素永远嵌套在map元素内部。area元素可定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）

6、要完成图像映射要用到三种标签：<img> 标签、<map>标签、<area>标签

7、<area>标签对中的shape规定区域的形状；coords规定区域的坐标

HTML格式化标签

1、HTML使用标签 <b>与<i>对输出的文本进行格式。如：粗体or斜体，这些HTML标签被称为格式化标签

2、通常标签<strong>替换加粗标签<b>来使用，<em>替换<i>标签使用

3、预格式文本：使用pre标签对来保证输出的格式与写入时的格式一致，主要用于空格和换行

例6：

<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>

例6_1:

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

例6_2:

<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<br />
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>