HTML 标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
注释: 浏览器会自动地在标题的前后添加空行。
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>这是一段</p>
<hr>
<p>这是一段</p>
<hr>
<p>这是一段</p>
<hr>
</body>
</html>
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
注释写法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>这是一段</p>
<hr> <!--这是水平线-->
<p>这是一段</p>
<hr> <!--这是水平线-->
<p>这是一段</p>
<hr> <!--这是水平线-->
</body>
</html>
小结1:
①学会使用<h1>-<h6>来显示标题以及标题等级
②学会如何在代码中加入注释
③学会如何插入水平线
对比标题和字体大小的关系:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
</body>
</html>
HTML 段落
段落是通过 <p> 标签定义的。
注意:浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br> 标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>这个
<br>段落
<br>演示了分行的效果
</p>
</body>
</html>
HTML 输出- 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
小结:
①如何在浏览器中显示HTML段落(<h1>-<h6>)
②在HTML文档中如何换行(<br>)
③浏览器在显示 HTML 时,会省略源代码中多余的空白字符(空格或回车等),即使有n个空格最后也只会显示一个
④段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。
HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如:粗体 or 斜体
这些HTML标签被称为格式化标签
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而,这些标签的含义是不同的:
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>
pre标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<h1>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
</h1>>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<address>
ADDRESS <a href="https://www.csdn.net/">CSDN</a>.<br>
</address>
</body>
</html>
<abbr>标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<abbr title="World Wide Web">WWW</abbr>
</body>
</html>
把鼠标放在缩略词上面,会显示完整的
<del>(删除)<ins>(插入)标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接(链接)
HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
- 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示,即在 HTML 页面中是不显示的,所以对于读者来说是隐藏的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<a id="tips">有用的提示部分</a>
</body>
</html>
<img>的疑惑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>
</body>
</html>
其中alt属性是元素的必选属性,它给出了图像的备选文本,供图像无法显示时采用。 当用户因为某种原因(比如:打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时,alt属性提供了替代信息。
img图片标签alt和title属性的区别alt 用于图片没显示时在图片显示区域显示一个说明文字。 title 表示鼠标在图片上停留时,显示一个悬浮框,其中显示的文字。
<a>标签的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<a href="https://www.csdn.net/" target="_top">跳转至CSDN</a>
</body>
</html>
- _blank :在新窗口中打开被链接文档。
- _self :在被点击时的同一框架中打开被链接文档(默认)。
- _parent : 在父框架中打开被链接文档。
- _top :在窗口主体中打开被链接文档。
邮件链接的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title Test</title>
</head>
<body>
<p>
这是另一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
<p>
<b>注意:</b> 单词之间的空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>
</body>
</html>
参数列表
cc(carbon copy副本) bcc(blind carbon copy盲抄送)
<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。
nofollow 是 HTML 页面中 a 标签的属性值。它的出现为网站管理员提供了一种方式,即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接"。这个标签的意义是告诉搜索引擎这个链接不是经过作者信任的,所以这个链接不是一个信任票。
<base>标签的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png">
<br><br>
<a href="https://www.csdn.net/">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
其实会跳转到csdn去,因为base设置了默认url去访问csdn
注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"。
注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。