1. HTML标题
使用<h1>-<h6>标签定义
例如：
<h1>我的第一个标题</h1>
<h2>第2标题</h2>
<h3>第3标题</h3>
<h4>第4标题</h4>
<h5>第5标题</h5>
<h6>第6标题</h6>
HTML标题样式
- 浏览器会在标签前后添加空行
- 搜索引擎使用标题为网页的结构和内容编制索引
- 1号标题对应6号字体(
size='6')、2号字体对应5号字体，依次类推
1.1 HTML水平线
<hr/>标签，分割内容
<p>……</p>
<hr/>
<h1>一级标题，最重要</h1>
hr 展示
1.2 HTML注释
<!--这是一个注释，注释在浏览器中不显示-->
注：!为英文标点符号
1.3 HTML提示
如何查看源码？
- 方法1：鼠标右键->查看网页源码
- 方法2：F12(或右键->检查)->Elements
2. 段落
使用<p>标签来定义
<p>我的第一个段落。</p>
<p>我的另一个段落</p>
- 浏览器会自动在段落前后添加空行(</p>是块级元素)
2.1 HTML换行
<br/> 换行；空的HTML元素，关闭标签无任何意义，所以没有结束标签
注： <br>, <br/> 以及 <br />（带有空格）区分
<br> 是 HTML 写法。是 XHTML1.1 的写法, 也是 XML 写法。
<br/>是 XHTML (自行封闭，更加严谨)为兼容 HTML 的写法,也是 XML 写法。
HTML5 因为兼容 XHTML，所以三种写法都可以使用。
2.2 HTML输出
连续的空格和空行都会被算做一个
因屏幕大小、窗口调整等无法确定HTML被显示的确切效果
3. HTML链接
通过<a>标签来定义
<a href="url">链接文本</a>
href:属性，描述了链接的目标;是图片、当前网页某个位置、字、词等
链接文本：可以是文字、图片、或其他HTML元素
默认样式：
-
未访问的链接：蓝色字体并带下划线
未访问链接
- 访问过的链接：紫色字体并带下划线
- 点击链接时：红色并带下划线
3.1 target属性
| 序号 | target值 | 说明 |
|---|---|---|
| 1 | _blank | 在新窗口中打开url(新的标签页) |
| 2 | _self | 默认。在相同框架中打开url |
| 3 | _parent | 在父框架中打开url |
| 4 | _top | 在整个窗口中打开url |
| 5 | framename |
在指定框架中打开url |
例如：
<a href="https://www.baidu.com/" target="_blank">_blank 超链接</a><br>
<a href="https://www.runoob.com/html/html-links.html" target="_parent">_parent 超链接</a><br>
<a href="https://www.w3school.com.cn/tags/att_a_target.asp" target="_self">_self 超链接</a><br>
<a href="https://www.jianshu.com/" target="_top">_top 超链接</a><br>
3.2 id属性
用于创建一个HTML文档书签
实例：
<!--创建一个链接，跳转到指定位置-->
<a href="#head4">访问指定书签</a>
<!--插入ID-->
<a id="head4">HTML书签</a>
3.3 rel属性
规定当前文档与被链接文档之间的关系
<a rel="value">
| 序号 | rel值 | 描述 |
|---|---|---|
| 1 | alternate | 文档的替代版本（比如打印页、翻译或镜像）。 |
| 2 | stylesheet | 文档的外部样式表。 |
| 3 | start | 集合中的第一个文档。 |
| 4 | next | 集合中的下一个文档。 |
| 5 | prev | 集合中的上一个文档。 |
| 6 | contents | 文档的目录。 |
| 7 | index | 文档的索引。 |
| 8 | glossary | 在文档中使用的词汇的术语表（解释）。 |
| 9 | copyright | 包含版权信息的文档。 |
| 10 | chapter | 文档的章。 |
| 11 | section | 文档的节。 |
| 12 | subsection | 文档的小节。 |
| 13 | appendix | 文档的附录。 |
| 14 | help | 帮助文档。 |
| 15 | bookmark | 相关文档。 |
注：
-
rel="noopener noreferrer"防止钓鱼网站，让网站更安全。因为它获取的window.opener的值是null - 正斜杠添加到子文件夹。如
href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
3.4 电子邮件链接
<!-- 单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本。-->
<a href="mailto:someone@example.com?Subject=主题" target="_top">
someone@example.com ：收件人邮箱
Subject=XXX :XXX为邮件主题
- 延伸
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneChao@example.com&bcc=someoneSecret@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
cc=email :抄送人
bcc=email:密件抄送人
body=xxx:邮件主题
邮件中展示效果
4. HTML图像
通过<img>标签来定义
<img src="path" />
例如：
<img loading="lazy" alt="背景图" src="/images/logo.png" width="258" height="39" />
- 图像的名称和尺寸是以属性的形式提供的
- 插入动图如
.gif和静态图的语法相同
4.1 src属性
src，指“source”。源属性的值是图像URL地址
浏览器将图像显示在文档中图像标签出现的位置
4.2 Alt属性
Alt属性用来为图像定义一串预备可替换的文本
在浏览器无法载入图像时，替换文本属性告诉读者他们丢失的信息。
此时，浏览器显示这个替换性的文本而不是图像
alt属性的展示
为每个图像都加上替换文本是个好习惯，有助于更好展示信息；且对使用纯文本浏览器更有用。
注：无法加载的图片，图像标签会显示一个破碎图片
4.3 设置图像的高度和宽度
height（高度）和width（宽度）属性
指定图像的高度和宽度是一个很好的习惯。页面加载时会保留指定尺寸；否则可能破坏HTML页面的整体布局
4.4 loading属性
loading属性指定浏览器是应立即加载图像，还是延迟加载图像
<img src="images/background.png" alt="背景图" width="245" height="250" loading="lazy" />
| 序号 | loading值 | 描述 |
|---|---|---|
| 1 | eager | 默认，图像立即加载 |
| 2 | lazy | 只有鼠标滚动到该图片所在位置才会显示 |
4.5 title属性
可以用于任何元素上。
通常鼠标移动到元素上时，就会出现title的内容；起到对图片说明的作用，是对图片的一种备注或注释
4.6 其他
-
align属性，对齐方式；HTML5中已不支持，可以用css代替 -
style="float:left",浮动；HTML5中已不支持，可以用css代替 -
<map>定义图像地图 -
<area>定义图像带有可供点击区域的图像地图。其中每一个区域都是超链接
注意：加载图片需要时间，建议慎用
网友评论