HTML 常用标签

目录

1、a 标签的具体用法

1.1 a 标签的 href 属性及取值

1.2 a 标签的 target 属性及取值

2、img 标签的具体用法

2.1 img 标签的常用属性

2.2 img 标签的几个事件

3、table 标签的具体用法

4、form 标签的具体用法

5、input 标签的具体用法

5.1 input 标签的基本属性

5.2 input 标签的几个事件

---

1、a 标签的具体用法

HTML 中的 a 标签（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置（内部锚点）、电子邮件地址或任何其他 URL 的超链接，它有以下几个常用属性属性：href、target、download（此属性指示浏览器下载 URL 而不是导航到它）、rel（该属性指定了目标对象到链接对象的关系）。下面主要说一下 href 属性和 target 属性的取值。

1.1 a 标签的 href 属性及取值

属性	取值	描述
href（hyper reference）	网址	如：<a href="//google.com">超链接</a> ，在前端页面会展示一个超链接，点击跳转到 google 首页，网址可以写成：https://google.com、http://google.com、//google.com 三种形式，第三种形式属于无协议网址，当用户点击第三种形式的超链接时，浏览器返回的响应头会给一个 location 继续跳转参数，此时浏览器会继续跳转到 location 地址。         这样写的好处是如果你不知道网址的协议是 http 还是 https 可以不写，这样浏览器会自动寻址，但是如果你不知道网址的正确协议就随便写了一个，一旦写错就会报错。所以了解一下第三种写法吧~
	路径	如：<a href="/a/b/c.html">跳转</a> ，a 标签的 href 属性取值还可以是文件路径，可以是相对路径过绝对路径，如果是绝对路径的话，这里会有一个坑，当你双击打开有 href 取值为绝对路径的 html 页面时，该绝对路径会基于系统根目录去找，而不是基于你当前的项目去找，这要就会导致超链接跳转的地方和我们预期的不一致。         解决方法：（1）绝对路径会出问题，可以写相对路径（2）不要双击打开 .html 文件，可以全局安装 yarn/npm global add http-server，然后通过 http-server . -c-1 命令起一个本地服务，注意加上 html 的文件路径，即可访问（可以直接缩写成 hs 启动页面）。或者安装：yarn/npm global add parcel，然后通过 parcel src/index.html 的方式实现预览。
	伪协议	如：<a href="javascript : ; ">执行</a> ，该超链接被点击后页面什么都不做，如果在冒号和分号中间添加 JavaScript 代码，则点击该 a 标签，就会执行 JavaScript 代码。         注意：这里 href 的属性值为 javascript : ; 的时候和值为 # 号并不一样，如果 href 的值为 #，点击后页面会回滚到顶部，而前者是什么都不做。还有一种情况是 href 的属性值什么都不写，点击后页面会刷新，不信你可以到到控制台看一下。
	id 值	如：<a href="#header">去哪</a> ，该超链接被点击后会跳转到同一页面的 id 值为 header 的元素位置。
	邮箱或电话	如：<a href="mailto：123@qq.com">发邮件</a> ，<a href="tel：110">打电话</a>

1.2 a 标签的 target 属性及取值

属性	取值	描述
target	_blank	如：<a href="//google.com" target=“_blank”>超链接</a> ，点击该超链接后，会在一个新的标签页打开 google
	_self	如：<a href="//google.com" target=“_self”>超链接</a> ，点击该超链接后，会在当前页面打开 google
	_top	该属性值需要在页面内嵌 iframe 窗口的情况下使用，如：<a href="//google.com" target=“_top”>超链接</a> ，当 iframe 窗口内的 a 标签设置了该 target 属性值，点击后会在嵌含有该 a 标签的 最顶层窗口打开 google
	_parent	该属性值需要在页面内嵌 iframe 窗口的情况下使用，如：<a href="//google.com" target=“_parent”>超链接</a> ，当 iframe 窗口内的 a 标签设置了该 target 属性值，点击后会在嵌含有该 a 标签的上一层窗口打开 google
	window.xxx	如：<a href="//google.com" target=“xxx”>超链接</a>，点击后如果有 name 为 xxx 的窗口就打开，如果没有就创建一个名为 xxx 的新标签页，如果页面具有两个上述的 a 标签，点击第二个可以同样跳转到第一个超链接打开的标签页，至于页面的 name 属性，可以到该页面的控制台输入 console.log(window.name); 打印。
	iframe.xxx	<a href="https://google.com" target="xxx">google</a>    <!--点击后会在第一个iframe窗口打开google--> <a href="https://baidu.com" target="yyy">baidu</a>    <!--点击后会在第二个iframe窗口打开baidu--> <iframe src=""name="xxx"></iframe> <iframe src=""name="yyy"></iframe>            注：iframe 标签现在用到不多了， 酌情了解

2、img 标签的具体用法

HTML 中的 img 标签主要是将一份图像嵌入文档。它有以下几个常用属性：alt、height、width、src，以及常用的onload、onerror 事件，下面具体介绍以下：

2.1 img 标签的常用属性

属性	描述
src（source）	img 标签的 src 属性可以是网络地址，也可以是相对路径和绝对路径，它会发送发出一条 get 请求，展示一张图片。
alt（alternative）	<img src="dog.png" alt="这是一只狗子">，可替换的，如果图片加载失败了，就会显示 alt 属性的内容。
width / height	该属性可以设置图片展示的宽高，推荐设置一个就可以，另一个属性会根据图片的原比例进行子使用。
响应式	如果想做到图片响应式（手机端和 PC 端都能正常浏览），可以给 img 标签设置 style 样式：max-width：100% 。

2.2 img 标签的几个事件

事件	描述
onload()	如果图片加载成功就会调用 onload() 方法，如：<img id="xxx" src="dog.png">，可以通过 JavaScript 代码通过 id 获取该 img 标签，xxx.onload = function（）{ console.log（‘图片加载成功’）}，//这种获取元素的方法只能测试的时候用，如果写时候还是老老实实 getElementById() 吧。
onerror()	如果图片加载失败就会调用 onerror() 方法，有了该方法我们就可以在图片加载失败的情况下进行挽救，对 img 标签的 src 属性重新赋值，加载别的路径的图片，xxx.onload = function（）{ xxx.src = '404.png' }，这样图片在加载失败的情况下会重新加载404.png

3、table 标签的具体用法

与 table 标签相关的标签有很多，比如：table、thead、tbody、tfoot、tr、th、td，其中 tr 标签是表头，内容会自动呈现加粗样式，在写 tbale 标签是，最好写上 thead、tbody 和 tfoot，如果不写的话，tr 和 td 标签会被浏览器纠错默认将其添加到 tbody 中。添加边框却不加任何样式的 table 标签在展示的时候比较难看，最好进行如下样式设置：mdn 参考文档

table { border-collapse:collapse; border-spacing:0 }

table-layout 自动定制列宽（值为auto则根据内容宽度，值为fixed则列宽等宽）
table-collapse 控制单元格是否合并
border-spacing 控制表格单元格间距

4、form 标签的具体用法

form 标签表示文档中的一个区域，此区域包含有交互控制元件，用来向 Web 服务器提交信息。form 标签的相关属性有：action、autocomplete、method、target，下面具体看一下：

属性	描述
action	action 属性表示请求页面的地址，如：<form action="//google.com"><input type="text"><input type="submit"></form>
autocomplete	表示是否自动填充，该属性值有 on/off 两个值， 假如form 表单中有 <input name="username"type="text"> ，在给 form 表单设置 autocomplete 属性为 on 时，用户在输入时就会自动填充用户名，当然都是你个人用户名的记录。
method	form 表单的请求方法，如果不写该属性的话，默认是 GET 请求，如果是 POST 请求的话必须特别指定 method="POST"
target	代表你想提交的页面，如果是_blank就会提交到一个新的页面，该属性和 a 标签的 target 类似
注意：一个表单必须要有一个类型为 submit 的按钮，可以是 type = "submit" 的 input 标签，也可以是 type = "submit" 的 button 标签（如果你写的是一个 button 没指定 type 的话，默认就是 submit 类型），但是如果没有一个为 submit 类型的按钮，则该表单就不能提交。
input 和 button 之间的区别是什么？，button 标签中间还可以加标签甚至是 img，如 ：<button type="submit"><strong>搞起</strong>button>，而 input 中间不可以加标签（input 就是个单标签，你让他怎么加？），如：<input type="submit"value="搞起”>
注意事项：一般不监听 input 的 click 事件，form 里面的 input 要有 name 属性，form 里要放一个 type=submit 按钮才能触发 submit 事件

5、input 标签的具体用法

input 标签用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据，它的主要作用就是让用户输入内容。

5.1 input 标签的基本属性

标签	描述	标签	描述
<input type = "text" required>	默认类型 + html5的验证器	<input type = "date">	输入日期的控件
<input type = "button">	按钮	<input type = "hidden">	特殊使用的隐藏输入框
<input type = "submit">	提交按钮	<input type = "color">	用于指定颜色的控件
<input type = "checkbox">	多选框，相同的name属性为一组	<input type = "password">	值被遮盖的单行文本字段
<input type = "radio">	单选框，相同的name属性为一组	<input type = "e-mail">	编辑 e-mail 的字段
<input type = "file">	点击可上传文件，multiple多文件	<input type = "number">	输入浮点数的控件
<input type = "img">	图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
<input name= "erha">	表单内的input要有name属性	<input autofocus type = "text">	自动聚焦
<input type="checkbox" checked>	表示已经选中状态	<input placeholder= "请输入">	输入提示
<input value="123">	输入框的值	<input type = "button" disabled>	禁用
<select><option value="">-请选择-<option><option value="1">星期一</option><option value="2">星期二</option></select>
<textarea style="resize:none;width:50%;height:300px"></textarea>

5.2 input 标签的几个事件

事件	描述
onfocus()	当input 获取到焦点时触发
onblur()	当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空
onchange()	当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
onclick()	主要是用于 input type=button，input 作为一个按钮使用时的鼠标点击事件
onselect()	当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
oninput()	当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）
onkeydown()	按下按键时的事件触发
onkeyup()	当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过
以上事件可以直接放到input的属性里，例如：<input type="text" οnfοcus="a();" οnblur="b()" οnchange="c();" οnkeydοwn="d();" />，
也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName('input').onfocus = function(){};