1. a 标签的用法

1.1 作用：

a 元素可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。a 中的内容应该应该指明链接的意图。如果存在 href 属性，当 a元素聚焦时按下回车键就会激活它。

1.2 常用属性href

href：包含超链接指向的 URL 或 URL 片段。

1.2.1 网址

href里面可以指定要访问的网址，例如：

<a href="//example.com">Website</a>

注：【//】写法可以自适应网站的协议，也就是可以自动转换成http或者https协议。

1.2.2 路径

href里面可以指定要访问的文件，例如：

<a href="/html/html_links.cfm">Basic Link</a>

注：这个路径是http协议规定的路径写法，不是文件系统的路径写法，所以有些区别，最大的区别就是根路径的选取，http协议的原则是当前文件所在的文件夹就是根路径，所以【/html/tutorial/html_links.cfm】就是寻找当前文件夹下的html文件夹里面的html_links.cfm文件。

1.2.3 伪协议

伪协议不同于因特网上所真实存在的协议，如http://，https://，ftp://，而是为关联应用程序而使用的.如:tencent://(关联QQ)，data:(用base64编码来在浏览器端输出二进制文件)，还有就是javascript:我们可以在浏览地址栏里输入"javascript:alert(‘JS!’);"，点转到后会发现，实际上是把javascript:后面的代码当JavaScript来执行，并将结果值返回给当前页面。

1.2.3.1 运行js代码

<a href="javascript:;">do nothing</a>

在:；之间可以写js代码。

1.2.3.2 发邮件

<a href="mailto:m.bluth@example.com">Email</a>

1.2.3.3 打电话

<a href="tel:+123456789">Phone</a>

1.2.4 id

<a href="id">id</a>

如果指定id可以快速跳转到id所在位置

1.3 常用属性target

该属性指定在何处显示链接的资源。

示例：

<a href="//example.com" target="_blank">Website</a>

1.3.1 target 常用选项

_self: 当前页面加载，即当前的响应到同一HTM。此值是默认的，如果没有指定属性的话；
_blank: 新窗口打开，即到一个新的未命名的HTML窗口；
_parent: 加载响应到当前框架的HTML父框架。如果没有parent框架，此选项的行为方式与 _self 相同；
_top: 加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self；

2. img 标签的用法

2.1 作用

元素通常会发起get请求，并将一份图像嵌入文档。

示例：

<img class="fit-picture"src="/media/cc0-images/grapefruit-slice-332-332.jpg"alt="Grapefruit slice atop a pile of other slices" height = "100%" width = "100%">

2.2 常用属性

2.2.1 alt

alt 属性包含一条对图像的文本描述,屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本让读者知道这个图片是什么含义。

2.2.2 src

src 属性是必须的，它包含了你想嵌入的图片的文件路径。

2.2.3 height，width

图片的高度和宽度，如果有其中一项没有设置，那么浏览器会自动调整。

2.3 事件

2.3.1 onload

如果图片加载成功，会运行此事件绑定的代码。

2.3.2 onerror

如果图片加载失败，会运行此事件绑定的代码。

这里一般会做一些补救的措施，例如图片加载失败会展示一些备用图片。

2.4 响应式编程

设置 max-width:100% 这样，图片会随着屏幕大小而变化。

2.5 src是可替换元素

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

3. table 标签的用法

3.1 作用

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

示例：

<table><thead><tr><th colspan="2">The table header</th></tr></thead><tbody><tr><td>The table body</td><td>with two columns</td></tr></tbody><tfoot><tr><td>nothing</td><td>nothing</td></tr></tfoot>
</table>

3.2 相关标签

table: 表示这个是一个表格。

thead: 表示这是表格中的表头。

tbody: 表示这是表格中的表格体，存储表格元素的地方。

tfoot: 表示这是表格中的表尾。

tr: 表示表格的一行。

td: 表示存储普通表格元素。

th: 存储表头中的元素。

3.3 相关样式

3.3.1 table-layout

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。

常用的有两种值：

auto 大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
fixed 表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

使用示例：

<table><tr><td>Ed</td><td>Wood</td></tr><tr><td>Albert</td><td>Schweitzer</td></tr><tr><td>Jane</td><td>Fonda</td></tr><tr><td>William</td><td>Shakespeare</td></tr>
</table>

table {table-layout: fixed;width: 120px;border: 1px solid red;
}

3.3.2 border-collapse

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

常用的值有：

collapse 相邻的单元格共用同一条边框。
separate 默认值。每个单元格拥有独立的边框。

示例：

border-collapse: collapse;
border-collapse: separate;

3.3.3 border-spacing

border-spacing 属性指定相邻单元格边框之间的距离。

示例：

border-spacing: 2px;

《HTML入门笔记--HTML常用标签》相关推荐

ComeFuture英伽学院——2020年全国大学生英语竞赛【C类初赛真题解析】(持续更新)
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
ComeFuture英伽学院——2019年全国大学生英语竞赛【C类初赛真题解析】大小作文——详细解析
视频:ComeFuture英伽学院--2019年全国大学生英语竞赛[C类初赛真题解析]大小作文--详细解析课件:[课件]2019年大学生英语竞赛C类初赛.pdf 视频:2020年全国大学生英语竞赛 ...
信息学奥赛真题解析（玩具谜题）
玩具谜题(2016年信息学奥赛提高组真题) 题目描述小南有一套可爱的玩具小人, 它们各有不同的职业.有一天, 这些玩具小人把小南的眼镜藏了起来.小南发现玩具小人们围成了一个圈,它们有的面朝圈内,有的 ...
信息学奥赛之初赛第1轮讲解（01-08课）
信息学奥赛之初赛讲解 01 计算机概述系统基本结构信息学奥赛之初赛讲解 01 计算机概述系统基本结构_哔哩哔哩_bilibili 信息学奥赛之初赛讲解 02 软件系统计算机语言进制转换信息 ...
信息学奥赛一本通习题答案（五）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通习题答案（三）
最近在给小学生做C++的入门培训,用的教程是信息学奥赛一本通,刷题网址 http://ybt.ssoier.cn:8088/index.php 现将部分习题的答案放在博客上,希望能给其他有需要的人带来 ...
信息学奥赛一本通提高篇第六部分数学基础相关的真题
第1章快速幂 1875:[13NOIP提高组]转圈游戏信息学奥赛一本通(C++版)在线评测系统第2 章素数第 3 章约数第 4 章同余问题第 5 章矩阵乘法第 6 章 ...
信息学奥赛一本通题目代码（非题库）
为了完善自己学c++,很多人都去读相关文献,就比如<信息学奥赛一本通>,可又对题目无从下手,从今天开始,我将把书上的题目一一的解析下来,可以做参考,如果有错,可以告诉我,将在下次解析里重 ...
信息学奥赛一本通（C++版）刷题记录
总目录详见:https://blog.csdn.net/mrcrack/article/details/86501716 信息学奥赛一本通(C++版) 刷题记录 http://ybt.ssoier. ...
最近公共祖先三种算法详解 + 模板题建议新手收藏例题：信息学奥赛一本通祖孙询问距离
首先什么是最近公共祖先?? 如图:红色节点的祖先为红色的1, 2, 3. 绿色节点的祖先为绿色的1, 2, 3, 4. 他们的最近公共祖先即他们最先相交的地方,如在上图中黄色的点就是他们的最近公共祖先 ...

《HTML入门笔记--HTML常用标签》