HTML学习记录

---

一、超链接

个人感觉非常实用的一个标签，可以完成很多工作

1.语法

<a href="https://cn.bing.com/" target="_blank">bing一下</a>

说明：

1. href即为要跳转去的地址 URL（Uniform Resorce Locator)

2. target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）

3. 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

2.锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>

使用方法即将id为C4的元素的锚点摆放在页面的某一位置，然后通过超链接指向该锚点进行跳转即可，第一段代码放在HTML代码块的最下方更易理解

二、图片及文件路径img

1.图片

在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

1. src属性为要显示图片文件的位置 URL，即图片文件的路径
2. alt属性当获取图片出现问题时显示的文字（占位符）
3. 可为图片指定高宽度，但不建议（可能导致图片变形）

提示： 对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。

2.文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

<img src="./img/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

将图片存入如下文件夹后

加载速度更快

思考： 如何用图片做成一个超链接？

<a href="https://www.baidu.com/"><img src="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></a>

前面先添加需要跳转的链接，后面加入图片的链接即可
参考资料

https://jingyan.baidu.com/article/75ab0bcb8bc3e0d6874db274.html

三、列表

1.placeholder

作用为提示符，可在输入框内显示提示信息

2.type

1. text文本格式可输入任意字符

2. password密码框会隐藏输入的内容

3. number仅输入数字

4. radio单选框

5. selected下拉列表，可用于选项较多的情况

6. checkbox多选框

7. date日期选择器

8. file文件选择器

9. message文本输入区域，提供一块区域输入

10. submit/reset 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理

3.checked

有无checked属性的区别，会在网页打开时先选择其中一项

4.换行符

5.电子邮件链接

测验一中有相关的选项，但是一一测试后发现需要修改为如下代码

  <a href="mailto:xxx@yyy">email</a>