HTML笔记
今天开始HTML学习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> </body> </html>
<!DOCTYPE>声明
<!DOCTYPE>声明有助于游览器正确显示网页，声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本
不分大小写<!DOCTYPE html>
中文编码
<head>
<meta charset="UTF-8"> </head>
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK
HTML基础
HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p> <p>这是另外一个段落。</p>
HTML 链接
HTML 链接是通过标签 <a> 来定义的。
<a href="https://www.runoob.com">这是一个链接</a>
提示:在 href 属性中指定链接的地址。
HTML 图像
HTML 图像是通过标签 <img> 来定义的
<img decoding="async" src="/images/logo.png" width="258" height="39" />
注意： 图像的名称和尺寸是以属性的形式提供的。
HTML 元素
HTML 文档由 HTML 元素定义。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 属性
HTML 属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.runoob.com">这是一个链接</a>
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性
HTML 属性参考手册
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性：
HTML 标题
在 HTML 文档中，标题很重要。标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。
请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>hr 标签定义水平线：</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> <hr /> <p>这是段落。</p> </body> </html>
hr 元素可用于分隔内容。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释写法如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <!--这是一个注释，注释在浏览器中不会显示-->
<!--这样滴-->
<p>这是一个段落</p> </body> </html>
标题大小与字体大小的关系
<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>
HTML 段落
HTML 可以将文档分割为若干段落。
HTML 段落
段落是通过 <p> 标签定义的。
<p>这是一个段落 </p> <p>这是另一个段落</p>
注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
不要忘记结束标签
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>这个<br>段落<br>演示了分行的效果</p> </body> </html>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
注意： pre 标签可以对空行和空格进行控制达到类似效果
HTML 文本格式化
HTML 文本格式化
HTML 格式化标签
HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <b>这个文本是加粗的</b> <br /> <strong>这个文本是加粗的</strong> <br /> <big>这个文本字体放大</big> <br /> <em>这个文本是斜体的</em> <br /> <i>这个文本是斜体的</i> <br /> <small>这个文本是缩小的</small> <br /> <abbr title="这是标签">标签/解释.</abbr> <br /> 这是显示删除文字的效果 <del>类似于删除</del>和 <ins>下划线重点</ins>！ <br /> 这个文本包含 <sub>下标</sub> <br /> 这个文本包含 <sup>上标</sup> </body> </html>
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML使用标签 <a>来设置超文本链接。在标签<a> 中使用了href属性来描述链接的地址
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">链接文本</a>
href 属性描述了链接的目标。
示例：
<a href="https://www.baidu.com/">百度网站</a>
提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接
HTML 链接 - target 属性
使用 target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="https://www.baidu.com/" target="_blank">百度网站!</a>
HTML 链接- id 属性
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
<!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1>id 属性</h1> <p>使用 CSS 来设置 id 为 "myHeader" 的元素的样式：</p> <h1 id="myHeader">My Header</h1> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p> <a href="#C16"> 使用这个ID </a> </p> <p> <a id="C16">创建个ID</a> </p> </body> </html>
HTML 头部<head>
使用 <title> 标签定义HTML文档的标题
<base> - 定义了所有链接的URL
使用 <base> 定义页面中所有链接默认的链接目标地址。
<meta> - 提供了HTML文档的meta标记
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
