【前端:Html】--1.1.基础语法
目录
1.HTML--简介
2.HTML--编译器
步骤一:启动记事本
步骤二:用记事本来编辑 HTML
步骤三:保存 HTML
步骤四:在浏览器中运行 HTML
3.HTML--基础
3.1.HTML声明--!DOCTYPE
3.2.HTML 标题--h1
3.3.HTML 段落--p
3.3.1. 水平线--hr
3.3.2.换行符--br
3.3.3.固定格式--pre
3.4.HTML 链接--a
3.5.HTML 图像--img
3.6.如何查看 HTML 源代码?
4.HTML元素
5.HTML 属性
5.1.链接--href
5.2.src 属性
5.3.width和height属性
5.4.alt 属性
5.4.样式--style
5.4.1.背景色
5.4.2.文本颜色
5.4.3.字体尺寸
5.5.lang 属性
5.6.title 属性
5.7.文本格式
建议: 属性要常用属性值
6.HTML 引文、引用和定义元素
7.HTML注释
1.HTML--简介
HTML 是创建网页的标准标记语言。
什么是 HTML?
- HTML 代表超文本标记语言
- HTML 是创建网页的标准标记语言
- HTML 描述网页的结构
- HTML 由一系列元素组成
- HTML 元素告诉浏览器如何显示内容
- HTML 元素标记内容片段，如 "这是一个标题", "this is a paragraph", "this is a link"等。
HTML 实例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p>
</body>
</html>
注释:在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
HTML 标记标签通常被称为 HTML 标签 (HTML tag)，由开始标记、内容和结束标记组成。
<tagname>内容...</tagname>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <h1> | 我的第一个标题 | </h1> |
| <p> | 我的第一个段落。 | </p> |
| <br> | none | none |
注释: 有些HTML元素没有内容（比如元素）。这些元素称为空元素。空元素没有结束标记！!
注释: 只有 <body> 区域 (白色部分) 才会在浏览器中显示。
2.HTML--编译器
使用 Notepad（记事本） 或 TextEdit 来编写 HTML
可以使用专业的 HTML 编辑器来编辑 HTML:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本，依照以下四步来创建您的第一张网页。
步骤一:启动记事本
如何启动记事本:
开始
所有程序
附件
记事本
步骤二:用记事本来编辑 HTML
在记事本中键入 HTML 代码:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
步骤三:保存 HTML
在记事本的文件菜单选择"另存为"。
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好。
比如:文件名为 "index.htm" 并将编码设置为 UTF-8（这是 HTML 文件的首选编码）。
步骤四:在浏览器中运行 HTML
3.HTML--基础
- 所有 HTML 文档都必须以文档类型声明开头:
<!DOCTYPE html>。 - HTML 文档以
<html>开始，以</html>结束。 - HTML 文档的可见部分位于
<body>和</body>之间。
3.1.HTML声明--!DOCTYPE
<!DOCTYPE> 声明表示文档类型，并帮助浏览器正确显示网页。
它只出现一次，在页面顶部（在任何HTML标记之前）。
<!DOCTYPE> 声明不区分大小写。
<!DOCTYPE> 声明是 HTML5 网页
3.2.HTML 标题--h1
HTML 标题（Heading）是通过 <h1> 到 <h6> 等标签进行定义的。
<h1> 定义最重要的标题。 <h6> 定义不重要的标题:
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>注释: 浏览器会自动地在标题的前后添加空行。
注释: 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
每个HTML标题都有一个默认大小。可以使用 style 的 font-size 属性指定标题文字的大小:
<h1 style="font-size:60px;">标题 1</h1>3.3.HTML 段落--p
HTML 段落是通过 <p> 标签来定义的。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>3.3.1. 水平线--hr
<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）:
<h1>这是标题 1</h1>
<p>这是一些文字。</p>
<hr>
<h2>这是标题 2</h2>
<p>这是一些其他的文本。</p>
<hr>
3.3.2.换行符--br
HTML <br> 元素定义换行符。
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签:
<p>这是一个<br>段落<br>有换行符。</p><br> 标记是空标记，这意味着它没有结束标记。
3.3.3.固定格式--pre
<!DOCTYPE html>
<html>
<body><p>在 HTML 中，空格和新行被忽略：</p><p>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</p></body>
</html>
解决方案 - HTML <pre> 元素
HTML <pre> 元素定义预先格式化的文本。
<pre> 元素中的文本以固定宽度字体显示（通常为 Courier），并保留空格和换行符:
<!DOCTYPE html>
<html>
<body><p>pre 标签保留空格和换行符：</p><pre>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</pre></body>
</html> 
3.4.HTML 链接--a
HTML 链接是通过 <a> 标签来定义的。
<a href="https://www.w3ccoo.com">这是一个链接</a>在 href 属性中指定链接的地址。
3.5.HTML 图像--img
HTML 图像是通过 <img> 标签进行定义的。
图像的名称和尺寸是以属性的形式提供的: (src), (alt), width, and height
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">3.6.如何查看 HTML 源代码?
查看 HTML 源代码:
在 HTML 页面中单击鼠标右键，然后在其他浏览器中选择"查看页面源"（在 Chrome 中）或"查看源"（在 Edge 中）或类似选项。这将打开一个包含页面的 HTML 源代码的窗口。
检查 HTML 元素:
右键单击一个元素（或空白区域），选择"Inspect"或"Inspect element"查看元素的组成（您将看到 HTML 和 CSS）。您还可以在打开的"元素或样式"面板中动态编辑 HTML 或 CSS。
4.HTML元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
<tagname>内容在这里...</tagname><h1>我的第一个标题</h1><p>我的第一个段落。</p>| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <h1> | 我的第一个标题 | </h1> |
| <p> | 我的第一个段落。 | </p> |
| <br> | none | none |
注释: 某些HTML元素没有内容 (如 <br> )。这些元素称为空元素。空元素没有结束标记！
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
注释: 您将在本教程的下一章中学习更多有关属性的内容。
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
下面的示例包含四个HTML元素 (<html>, <body>, <h1> , <p>):
<!DOCTYPE html>
<html>
<body><h1>我的第一个标题</h1>
<p>我的第一个段落。</p></body>
</html>不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML:
<html>
<body><p>这是一个段落。
<p>这是一个段落。</body>
</html>但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
HTML 标签对大小写不敏感
HTML 标签不区分大小写: <P> 等同 <p>。
在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
5.HTML 属性
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置 属性
- 属性可以在元素中添加 附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现，比如:name="value"
5.1.链接--href
<a> 标签用于定义HTML 链接。 链接的地址在 href 属性中指定:
<a href="https://www.w3ccoo.com">访问 W3Schools</a> 最最重要的是 <a> 标签的 href 属性，表示链接的目标。
<!DOCTYPE html>
<html>
<body><h1>HTML 链接</h1><p><a href="https://www.w3schools.cn/">访问 w3schools.cn！</a></p></body>
</html> 
默认情况下，链接将在所有浏览器中显示如下:
- 未访问的链接带有下划线和蓝色
- 访问的链接带有下划线和紫色
- 活动链接带有下划线和红色
| 属性/用法 | 描述 | 示例代码 | 备注 |
|---|---|---|---|
| target 属性 | 指定链接打开方式 | <a href="url" target="_value"> | |
- _self | 默认值，当前窗口打开 | <a href="url" target="_self"> | 可省略不写 |
- _blank | 新窗口/标签页打开 | <a href="url" target="_blank"> | 最常用 |
- _parent | 父框架中打开 | <a href="url" target="_parent"> | 用于框架页 |
- _top | 整个窗口打开 | <a href="url" target="_top"> | 用于框架页 |
| URL类型 | |||
| - 绝对URL | 完整网址 | <a href="https://www.example.com"> | 包含协议和域名 |
| - 相对URL | 相对路径 | <a href="/pages/about.html"> | 基于当前路径 |
| 特殊链接 | |||
| 图片链接 | 用图片作为链接 | <a href="url"><img src="image.gif"></a> | |
| 邮件链接 | 打开邮件客户端 | <a href="mailto:email@example.com"> | 自动添加mailto: |
| 按钮链接 | 按钮形式链接 | <button onclick="location.href='url'"> | 需要JavaScript |
| 其他属性 | |||
| title | 鼠标悬停提示 | <a href="url" title="提示文字"> | 提升可访问性 |
| href | 链接地址 | <a href="url"> | 必需属性 |
5.2.src 属性
<img> 标签用于在HTML页面中嵌入图像。 src 属性指定要显示的图像的路径:
<img src="img_girl.jpg">有两种方法可以在src属性中指定URL:
1. 绝对URL - 链接到另一个网站上的一个图像。 比如: src="https://www.w3ccoo.com/images/img_girl.jpg".
注意: 外部图像可能受版权保护。如果你没有得到使用它的许可，你可能违反了版权法。此外，您无法控制外部图像；它可能会突然被删除或更改。
2. 相对URL - 链接到网站中托管的图像。在这里，URL不包括域名。如果URL开头没有斜杠，它将相对于当前页面。 比如: src="img_girl.jpg". 如果URL以斜杠开头，它将是相对于当前域名的。 Example: src="/images/img_girl.jpg".
注意: 使用相对URL几乎总是最好的。如果您更改域，它们将不会中断。
5.3.width和height属性
<img> 标签还应包含 width 和 height 属性，该属性指定图像的宽度和高度（以像素为单位）:
<img src="img_girl.jpg" width="500" height="600">5.4.alt 属性
如果由于某种原因无法显示图像，则<img> 标签的 alt 属性指定图像的备用文本。 这可能是由于连接速度慢，或者src属性中的错误，或者如果用户浏览器异常。
<img src="img_girl.jpg" alt="穿夹克的女孩">看看如果试图显示一个不存在的图像会发生什么:
5.4.样式--style
style 属性用于设置样式，如颜色、字体、大小等。
<p style="color:red;">这是一个红色的段落。</p>尝试一下 »
简单介绍几种：
5.4.1.背景色
CSS background-color 属性定义HTML元素背景色。
<body style="background-color:powderblue;"><h1>这是一个标题</h1>
<p>这是一个段落。</p></body>
5.4.2.文本颜色
文本颜色 color 属性定义 HTML 元素的文本颜色:
<h1 style="color:blue;">这是一个标题</h1>
<p style="color:red;">这是一个段落。</p>
5.4.3.字体尺寸
CSS font-size 属性定义 HTML 元素的文本字体大小:
<h1 style="font-size:300%;">这是一个标题</h1>
<p style="font-size:160%;">这是一个段落。</p> 
5.5.lang 属性
在<html>标记中包含lang属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。
以下示例指定国家代码为英语:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>国家代码也可以添加到lang 属性中。前两个字符定义HTML页面的语言，后两个字符定义国家。
以下示例指定英语为语言，国家为美国:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>了解更多有关信息: HTML 语言代码参考
5.6.title 属性
title 属性 定义有关元素的一些额外信息。
当您将鼠标移到元素上时，title属性的值将显示提示:
<p title="我是一个工具提示">这是一个段落。</p>
尝试一下 »
5.7.文本格式
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义强调的文本 |
| <i> | 以交替的声音或语气定义文本的一部分 |
| <small> | 定义较小的文本 |
| <strong> | 定义重要文本 |
| <sub> | 定义下标文本 |
| <sup> | 定义上标文本 |
| <ins> | 定义插入的文本 |
| <del> | 定义删除的文本 |
| <mark> | 定义标记/突出显示的文本 |
建议: 属性要常用属性值
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
但是，W3C建议在HTML中使用引号，并对XHTML要求更严格的文档类型中使用引号。
正确:
<a href="https://www.w3ccoo.com/html/">访问我们的 HTML 教程</a>
错误:
<a href=https://www.w3ccoo.com/html/>访问我们的 HTML 教程</a>
以下实例必须使用引号。否则无法正确显示"title"属性，因为它包含空格:
6.HTML 引文、引用和定义元素
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <cite> | 定义著作的标题。 |
| <q> | 定义短的行内引用。 |
<!DOCTYPE html>
<html>
<body><p>浏览器通常缩进 blockquote 元素。</p><blockquote cite="http://www.worldwildlife.org/who/index.html">
近 60 年来，WWF 一直在保护自然的未来。 WWF 是世界领先的保护组织，在 100 个国家/地区开展工作，并得到美国超过 100 万会员和全球近 500 万会员的支持。
</blockquote></body>
</html>
7.HTML注释
HTML 注释不会显示在浏览器中，但它们可以帮助记录 HTML 源代码。
您能够通过如下语法向 HTML 源代码添加注释:
<!DOCTYPE html>
<html>
<body><!-- 这是注释 -->
<p>这是一个段落。</p>
<!-- 注释不显示在浏览器中 --></body>
</html>在开始标签中有一个惊叹号，但是结束标签中没有。
注释: 浏览器不会显示注释，但它们可以帮助记录HTML源代码。