前言
今天介绍 HTML 的常用重点标签,包括
- a 标签
- table 标签
- img 标签
- form 标签
- input 标签
- 其他输入标签
- HTML5 其他新标签
a 标签
标签<a>元素（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
属性
- href
- target
- download
- rel=noopener
作用
- 跳转外部页面
- 定位到内部锚点
- 跳转到邮箱或电话等
a 标签 href 取值
网址(跳转外部页面)
- google.com
- //google.com(基于当前页面的协议)
例如：<a href="https://google.com">
路径(项目内页面跳转)
- /a/b/c 以及 a/b/c
- index.html 以及 ./index.html
例如： <a href="./index.html">
伪协议
- javascript:代码;
- mailto:邮箱;
- tel: 手机号码; 例如:
<a href="javascript:console.log(1)">测试</a>
<a href="mailto:m.bluth@example.com">Email</a>
<a href="tel:+123456789">Phone</a>
id(锚点)
- id="xxx"(会定位到页面中id为xxx的元素)
例如: <a href="#xxx">
a 标签 target 取值
- _self 当前页面加载。此值是默认的，如果没有指定属性的话。
- _blank 新窗口打开。
- _parent 加载响应到父浏览上下文
- _top 加载响应进入顶层浏览上下文
a 标签的 download
downloaa属性表明当前链接用于下载，而不是跳转到其他网页，如下
<a href="test.txt" download>下载</a>
注意：download属性只在链接与网址同源时，才会生效，链接必须与网址是同一个网站
download 设置了属性值，下载时文件名称就是规定的 download属性值:
<a href="test.txt" download="test.txt"></a>
更加复杂用法见MDN
table 标签
相关标签
- table
- thead
- tbody
- tfoot
- tr
- td
- th 用法:
<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>
</table>
效果：
<table>包裹。thead,tbody,tfoot分别代表表格的整体结构划分为：头部、内容、脚部。th、td、th就是其中的内容。
table 标签相关样式
img 标签
作用
发出get请求，展示一张图片
属性
- alt 图像的替换文本(若图片显示错误，则会显示该文本)
- height 图片高度
- width 图片宽度
- src 图片位置 例如:
<img class="fit-picture"
src="https://www.baidu.com/img/bd_logo1.png?where=super"
alt="百度"
width="500"
height="500"
>
图片默认大小是插入图像的大小，width 属性和 height 属性可以给图片设置宽高，单位是像素，也可设置百分比。
事件触发
- onload(成功加载时)
- onerror(错误加载时)
myImg.onload = function() {
console.log('加载完成！')
}
/*myImg 是当前图片*/
myImg.onerror = function() {
console.log('加载失败');
}
/*加载失败后，可以给图片一个默认的图片，这样对于用户来说就显得比较友好了*/
响应式
max-width: 100%;
form 标签
作用
发送get或post请求，然后刷新页面。
属性
- action
- autocomplete
- method
- target
事件
-
onsubmit
注: form里面的input要有name，form里要放置一个type=submit才能触发submit事件
input 标签
作用
让用户输入内容
属性
- type: button / checkbox / email / file / hidden / number / passwod / radio / search / submit / tel / text
- 其他 name / autofocus / checked / disabled / maxlength / pattern / value / placehold
事件触发
- onchange
- onfocus
- onblur
其他输入标签
- select + option 下拉选项框
- textarea 多行纯文本编辑控件
- label 用户界面中某个元素的说明
其他标签
参考: MDN HTML
