蓝桥杯web备赛----html篇
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 应用