HTML学习第二天!
HTML基础
HTML 标题
HTML 标题(Heading)是通过<h1> - <h6>
标签来定义的。
实例一👍
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
思考❓
那么我们怎么验证它只有<h1> - <h6>
六个六级标题呢?如果继续往下写那标题还是标题吗?
实例二
<h1>这是标题一</h1>
<h2>这是标题二</h2>
<h3>这是标题三</h3>
<h4>这是标题四</h4>
<h5>这是标题五</h5>
<h6>这是标题六</h6>
<h7>这是标题七</h7>
<h8>这是标题八</h8>
通过这段代码,我们可以发现从标题七
开始与标题八
合并为一行,显示为文本。
HTML 段落
HTML 段落是通过标签 <p>
来定义的。
实例一👍
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
思考❓
如果我们<p> </p>
中间不输入内容呢?他会显示什么?如果我们在其中加入换行呢?显示页面是否也会空出一个段落来呢?
实例二
<p>这是一个段落。</p>
<p>这是另外一个段落。</p><p> </p>
<p>段落3</p>
<p>段落4</p>
HTML 链接
HTML 链接是通过标签<a>
来定义的。
实例一👍
**提示:**在 href
属性中指定链接的地址。
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
思考❓
当我们换行再敲一遍这串代码的时候,他们会怎么显示?是换行还是显示在同一行?我们能不能根据上面学的两个标题
和段落
来对它进行区分
实列二
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
<p>
<a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
</p>
<h1><a href="https://blog.csdn.net/qq_47493625?type=blog">这是一个链接</a>
</h1>
HTML 图像
HTML 图像是通过标签<img>
来定义的.
实例一👍
注意: 图像的名称和尺寸是以属性的形式提供的。如果需要,我们可以修改width
和height
两个属性来修改图片的宽和高。
路径可以修改成自己本地图片路径。
<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
思考❓
如果将我们上面学的三个属性给到图片的话,那这个图片又会以什么样子的形式显示?
<img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
<p><img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
</p>
<a><img src="D:\learning info\Language learning\HTML5\tuxiang\ABC.jpeg" width="500" height="600" />
</a>
HTML 元素
HTML 文档由 HTML 元素定义。
HTML 元素
开始标签 * | 元素内容 | 结束标签 * |
---|---|---|
<p> | 这是一个段落 | </p> |
<a href="default.htm"> | 这是一个链接 | </a> |
<br> | 换行 |
开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)*。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。
HTML 文档由相互嵌套的 HTML 元素构成。
HTML 文档实例
<!DOCTYPE html>
<html><body>
<p>这是第一个段落。</p>
</body></html>
以上实例包含了三个 HTML 元素。
HTML 实例解析
<p>元素
<p>这是第一个段落。</p>
这个 <p>
元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签<p>
以及一个结束标签 </p>
.
元素内容是: 这是第一个段落。
<body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
<body>
元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>
以及一个结束标签 </body>。
元素内容是 另一个 HTML 元素(p 元素)。
<html> 元素:
<html><body>
<p>这是第一个段落。</p>
</body></html>
<html>
元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>
,以及一个结束标签 </html>
.
元素内容是 另一个 HTML 元素(body 元素)。
不要忘记结束标签
即使忘记了使用结束标签,大多数浏览器也会正确地显示 HTML:
<p>这是一个段落
<p>这是一个段落
以上实例在浏览器中也能正常显示,因为关闭标签是可选的。
但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。
在.md
文档中,会自动识别并使用<br>
换行,这就是我不得不将他加上代码块的原因(标红的部分)
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P>
等同于 <p>
。许多网站都使用大写的 HTML 标签。
教程使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
HTML 属性
属性是 HTML 元素提供的附加信息。
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
属性实例
HTML 链接由<a>
标签定义。链接的地址在 href 属性中指定:
实例一👍
<a href="https://blog.csdn.net/qq_47493625/article/details/135818729">许牛牛的笔记</a>
HTML 属性常用引用属性值
属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。
**💡提示:**在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='John "ShotGun" Nelson'
HTML 提示:使用小写属性
属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性:
属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
HTML 标题
在 HTML 文档中,标题很重要。
HTML 标题
标题(Heading)是通过 <h1> - <h6>
标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
实例一👍
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
注: 浏览器会自动地在标题的前后添加空行。
标题很重要
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例一👍
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。(我们在vscode中运行这串代码是看不见的)
注释写法如下:
<!-- 这是一个注释 -->
注释: 开始括号之后(左边的括号)需要紧跟一个叹号 ! (英文标点符号),结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 提示 - 如何查看源代码
你是否看过一些网页然后惊叹它是如何实现的。
如果您想找到其中的奥秘,只需要单击右键,然后选择"查看源文件"(IE)或"查看页面源代码"(Firefox),其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
HTML 标签参考手册
标签 | 描述 |
---|---|
<html> | 定义 HTML 文档 |
<body> | 定义文档的主体 |
<h1> - <h6> | 定义 HTML 标题 |
<hr> | 定义水平线 |
<!--...--> | 定义注释 |
HTML 段落
HTML 可以将文档分割为若干段落。
HTML 段落
段落是通过<p>
标签定义的。
实例一👍
<p>这是一个段落 </p>
<p>这是另一个段落</p>
**注意:**浏览器会自动地在段落的前后添加空行。(</p>
是块级元素)
不要忘记结束标签
即使忘了使用结束标签,大多数浏览器也会正确地将 HTML 显示出来:
实例二👍
<p>这是一个段落
<p>这是另一个段落
上面的例子在大多数浏览器中都没问题,但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释: 在未来的 HTML 版本中,不允许省略结束标签。
HTML 折行
如果希望在不产生一个新段落的情况下进行换行(新行),使用 <br>
标签:
<p>这个<br>段落<br>演示了分行的效果</p>
<br />
元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。
HTML 输出- 使用提醒
我无法确定 HTML 被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。
对于 HTML,无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。
实例三👍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跟着菜鸟学语言</title>
</head><body><h1>春晓</h1><p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。
</p><p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p></body></html>
(这个例子演示了一些 HTML 格式化方面的问题)
HTML 文本格式化
实例一👍
尝试一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一定要自己手敲哦</title>
</head>
<body><b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup></body>
</html>
HTML 格式化标签
HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如:粗体 or 斜体
这些HTML标签被称为格式化标签(请查看下面完整标签参考手册)。
💡
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。
实例集🎁(有条件一定要自己实验一下!!!)
文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>稍微偷下懒复制进去看看</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>
<head>
<meta charset="utf-8">
<title>不许偷懒一定要自己敲</title>
</head>
<body><pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre></body>
</html>
"计算机输出"标签
此例演示不同的"计算机输出"标签的显示效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不许偷懒!一定要自己敲</title>
</head>
<body><code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br /><p>
<b>注释:</b>这些标签常用于显示计算机/编程代码。
</p></body>
</html>
地址
此例演示如何在 HTML 文件中写地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不许偷懒!一定要自己敲</title>
</head>
<body><address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></body>
</html>
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不许偷懒!一定要自己敲</title>
</head>
<body><abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym><p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p><p>仅对于 IE 5 中的 acronym 元素有效。</p><p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p></body>
</html>
文字方向
此例演示如何改变文字的方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不许偷懒!一定要自己敲</title>
</head>
<body><p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> </body>
</html>
块引用
此例演示如何实现长短不一的引用语。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>悄咪咪复制一下应该没人知道吧</title>
</head>
<body><p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p></body>
</html>
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>悄咪咪复制一下吧</title>
</head>
<body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body>
</html>
HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<suq> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML “计算机输出” 标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码 |
<kbd> | 定义键盘码 |
<samp> | 定义计算机代码样本 |
<var> | 定义变量 |
<pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写 |
<address> | 定义地址 |
<bdo> | 定义文字方向 |
<blockquote> | 定义长的引用 |
<q> | 定义短的引用语 |
<cite> | 定义引用、引证 |
<dfn> | 定义一个定义项目。 |
PS:牛牛学习的语言没几个,语言领悟能力也不算强,所以大部分都是借鉴别人的。但是只要学过来的就是自己的。所以还请各位看官手下留情,多多包涵。牛牛也欢迎给位看官指正、讨论交流!