## a标签 HTML 元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接，简单点说就是点击a标签可以跳转到新的页面或者当前页面中的某个部分。[a标签](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a) 鼠标悬停在a标签上时箭头会变成一个手型，表示可以点击，这个是a标签的一个默认样式 ### a标签的常用属性 * href 链接的目标 URL，如果是跳转到新的页面，属性值就是页面的url，如果是当前页面中的某个部分，属性值则是#号加目标元素的id，这两种方式也可以组合使用，就是在页面的url后面加上#号和要定位的元素id * target 定义打开页面的方式，一般是在跳转页面的时候用到 1. _blank：表示在新的窗口中打开新页面，如果是要定位到当前页面的某个部分时，如果target值是_blank时，点击a标签只会开新窗口打开当前页面，不会定位到目标位置 2. _self：表示在当前窗口中打开新页面，是target的默认值 3. _parent：表示在当前窗口的父窗口打开新页面，若页面中有两个嵌套的iframe窗口，在里层iframe窗口触发时，会用外层的iframe窗口会打开新页面 4. _top：表示在当前页面的顶级窗口中打开新页面，如果当前页面中有多个嵌套的iframe窗口，即使是最底层的iframe页面，也会将当前页面跳转到新页面此外，若target的值是以上4个之外的值时，正常情况下看到的是_blank的效果，就是在新窗口打开页面，但是如果有两个a标签的target属性的值是一样的，先点击第一个a标签后，再点击第二个a标签时，会通过第一个a标签打开的窗口打开新页面。因为如果target值是自定义的时候，会以自定义的值为窗口名称来打开一个新窗口，如果已经存在这个名称命名的窗口，则在该窗口打开新页面。 * download a标签添加了download属性后点击a标签时可以下载href所指向的文件，但是不支持下载跨域的文件关于跨域 [浏览器同源政策](https://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html) ### 相关资料 [javascript:void(0)和javascript:;的用法](https://www.cnblogs.com/Qian123/p/5345697.html) [标签中 href 和 onclick 的区别](https://blog.csdn.net/chenchunlin526/article/details/77346049) ## img标签用于在页面中显示图片 ### img标签常用属性 * src 设置图像的URL，浏览器会对该URL发起get请求 * alt 在图片加载失败或者用户禁止加载图片的时候，会在浏览器中显示的信息 * title 在鼠标悬停在img标签上时，显示的信息，但是目前在手机上用处不大 ### img标签相关事件 * onload事件会在图图加载完成后立即发生，若需要在图片加载完后做一些处理，就可以在onload中处理（也可以通过img对象的complete属性来判断图片是否加载结束）在IE6中，如果图片是多帧的gif，会触发多次的onload事件。因此，为避免这种情况，需要在onload事件处理函数中解除事件函数 ```` img.onload = function(){ img.onload=null; img = null; } ```` * onerror事件会在文档或图像加载过程中发生错误时被触发 * onabort 会在图像加载被中断时发生。例如用户单击了浏览器的Stop按钮，或者在图像下载的过程中。需要注意的是在绑定img的相关事件的时，若图片先加载结束（不管是否成功），再绑定事件，是不会触发事件的，所以建议先绑定事件后再设置img的src属性 ### 相关资料 [标签的方方面面](https://www.cnblogs.com/hencehong/archive/2012/10/06/something_interesting_about_image.html) ## table标签以表格的方式展示数据 ````

标题
cell 1-1	cell 1-2	cell 1-3
cell 4-1	cell 4-2	cell 4-3
cell 2-1	cell 2-2	cell 2-3

```` ![显示效果](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-10-26-21-18-33.png) * caption标签可以设置表格的标题 * thead标签用于显示表格中的表头信息 * tfoot标签用于显示表格中的页脚（脚注或表注） * tbody标签用于显示表格中的主体内容 * tr标签是在thead、tfoot、tbody标签中使用的，用于显示表格每行的内容 * th标签是在tr标签中使用的，一般用在thead的tr标签中，显示列标题，标签内的文字默认居中，加粗 * td标签是在tr标签中使用的，用于显示表格行中每个单元格的内容 th和td标签都有colspan和rowspan属性 colspan 属性规定单元格可横跨的列数。 ```` 性别男女 ```` ![跨列](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-10-26-22-21-19.png) rowspan 属性规定单元格可横跨的行数。 ```` 性别男女 ```` ![跨行](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-10-26-22-21-39.png) * 此外，表格中每个单元格默认是有间距的，可以通过设置table标签的css属性来取消间距 ``` border-spacing: 0; border-collapse: collapse; ``` * 每个table标签中只能有一个thead和tfoot标签，但是tbody可以有多个 ### 相关资料 [精通HTML表格的使用(阮一峰)](http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html) ## 其他感想要学的东西好多啊啊啊啊啊 ![我爱学习](//static.xiedaimala.com/xdml/image/4bff426e-91a4-4d91-aeb7-0e710bf7db8b/2019-10-26-22-50-42.png)

HTML常用标签