1、html
写在前面，html相对简单，主要会考基础标签、html5新特性、html5本地存储、但是目前我还没有做到本地存储的题目
1.1 基础标签
(1)、链接标签
a:
<a href="https://www.example.com">访问 Example</a>-
href:链接
-
target：定义链接的打开方式。
-
_blank: 在新窗口或新标签页中打开链接。_self: 在当前窗口或标签页中打开链接（默认）。_parent: 在父框架中打开链接。_top: 在整个窗口中打开链接，取消任何框架。
-
rel：定义链接与目标页面的关系。
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target="_blank" 时。
-
noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。noopener noreferrer: 同时使用noopener和noreferrer。例子:<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>
download：提示浏览器下载链接目标而不是导航到该目标。
如果指定了文件名，浏览器会提示下载并保存为指定文件名。
<a href="file.pdf" download="example.pdf">下载文件</a>title:额外信息，悬停则出现
id:a和id搭配可以实现锚点功能
<a href="#section1">跳转到第1部分</a>
<div id="section1">这是第1部分</div>hreflang:指定链接目标的语言
(2)、html图像
- img:定义图像
- map:定义图像地图
- aera:定义图像地图可点击区域
属性：
alt:用来为图像定义一串预备的可替换的文本。
注意一下map标签：map是和img一起用的，map不显示(他们通过name和usemap两个属性简历连接)，aera则是可以点击的区域
<img src="img/1.png" alt="Image with map" usemap="#planetmap" width="100px" height="100px">
<map name="planetmap">
<!-- 确保坐标和链接正确 -->
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>(3)、html表格
- ：定义表格的标题部分
- ：定义表格的身体部分
- ：定义表格的页脚部分
- ：标题
- ：每一行
- ：每一列
- ：表格的标题
属性：
boder：表格的边框属性，有这个表格就有一个边框
(4)、列表标签
| 标签 | 描述 |
|---|---|
| 定义有序列表 | |
| 定义无序列表 | |
| * | 定义列表项 |
| 定义列表(最外层) | |
| 自定义列表项目 | |
| 定义自定列表项的描述 |
(5)、表单标签
| 标签 | 描述 |
|---|---|
| form | 定义供用户输入的表单, action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法(post&&get) |
| input | 定义输入域 |
| textaera | 定义文本域 (一个多行的输入控件) |
| lable | 定义了 元素的标签，一般为输入标题 |
| fieldset | 定义了一组相关的表单元素，并使用外框包含起来 |
| legend | 定义了 元素的标题 |
| select | 定义了下拉选项列表 |
| optgroup | 定义选项组 |
| option | 定义下拉列表中的选项 |
| button | 定义一个点击按钮 |
| datalist{新} | 指定一个预先定义的输入控件选项列表 |
| keygen(新) | 定义了表单的密钥对生成器字段 |
| output(新) | 定义一个计算结果 |
1.2 html5
- 新元素
- 新属性
- 完全支持 CSS3
- Video 和 Audio
- 2D/3D 制图
- 本地存储
- 本地 SQL 数据
- Web 应用
(1)、新标签
| 标签 | 描述 |
|---|---|
| 定义页面独立的内容区域。 | |
| 定义页面的侧边栏内容。 | |
| 允许您设置一段文本，使其脱离其父元素的文本方向设置。 | |
| 定义命令按钮，比如单选按钮、复选框或按钮 | |
| 用于描述文档或文档某个部分的细节 | |
| 定义对话框，比如提示框 | |
| 标签包含 details 元素的标题 | |
| 规定独立的流内容（图像、图表、照片、代码等等）。 | |
| 定义 元素的标题 | |
| 定义 section 或 document 的页脚。 | |
| 定义了文档的头部区域 | |
| 定义带有记号的文本。 | |
| 定义度量衡。仅用于已知最大和最小值的度量。 | |
| 定义导航链接的部分。 | |
| 定义任何类型的任务的进度。 | |
| 定义 ruby 注释（中文注音或字符）。 | |
| 定义字符（中文注音或字符）的解释或发音。 | |
| 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 | |
| 定义文档中的节（section、区段）。 | |
| 定义日期或时间。 | |
| 规定在文本中的何处适合添加换行符。 |
| 标签 | 用法 |
|---|---|
| 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API | |
| 定义嵌入的插件 | |
| 可伸缩矢量图形 | |
| 在互联网上书写数学符号和公式的置标语言 |
(2)、本地存储
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
api:
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
ps: JSON.stringify 来存储对象数据，JSON.stringify 可以将对象转换为字符串。之后我们使用 JSON.parse 方法将字符串转换为 JSON 对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>html5本地存储练习</h1>
<h2>找学号系统</h2>
<!-- 保存姓名加学号 -->
<!-- 保存姓名加学号 -->
<div class="top">
<label for="keyname">姓名:</label>
<input type="text" name="keyname" id="keyname" placeholder="请输入姓名">
<br/>
<label for="number">学号:</label>
<input type="number" name="number" id="number">
<button onclick="save()">点击保存</button>
</div>
<div class="bottom">
<h2>输入姓名找学号吧</h2>
<!-- 输入姓名可以得到对应的学号 -->
<label for="searchname">姓名:</label>
<input type="text" name="searchname" id="searchname">
<button onclick="find()">点击寻找</button>
</div>
<script>
// 在这里实现save和find函数
function save () {
// 首先获取姓名以及学号
const name = document.getElementById("keyname").value;
const id = document.getElementById("number").value;
// 然后检查是否为空
if(name === " " || id === " "){
alert("姓名或学号不能为空");
return;
}
// 然后使用localStorage来存储
localStorage.setItem(name , id);
alert("存储成功");
}
// find函数
function find () {
// 先获取输入的姓名
const name = document.getElementById("searchname").value;
// 然后在localStorage中寻找
const item = localStorage.getItem(name);
if(item === undefined){
alert("没有找到该学号");
return;
}else {
alert(`学号为：${item}`);
}
}
</script>
</body>
</html>