HTML常用标签
a标签
作用
1.跳转外部页面 2.跳转内部锚点 3.跳转到邮箱或电话等
属性
- href --链接到某个网页
- target --在哪个窗口打开超链接
- download --下载网页(理论上有用,实际咩用)
- real=noopener -- 跳转到XXX标签
a的href取值
网址
- google.com
- htttp://google.com
- //google.com
路径
- /a/b/c以及a/b/c
- index.html以及 ./index.html
伪协议
- javascript:代码;
- mailto:邮箱
- tel:手机号
ID
- href=#xxx
代码
<a href="//google.com">google</a> <a href="/a/b/c.html">C.html</a> <a href="/index.html">index.html</a> <a href="javascript:alert(1)">JavaScript伪协议</a> <a href="javascript:;">查看</a> <a href="mailto:t2785970361@163.com">发邮件给我</a> <a href="tel:13012365684">打电话给我</a> <a href="#xxx">查看xxx</a>
table标签
内置
- _blank 在空白(新)的页面打开
- _self 在当前页面打开
- _top 在顶级(最上边)的窗口打开
- _parent 在当前页面的上一层打开
属性
- table
- thead --头
- tbody --中
- tfoot --底
- th --表头
- tr --行
- td --数据
代码示例
<table> <thead> <tr> <th>英语</th> <th>翻译</th> </tr> </thead> <tbody> <tr> <td>hyper</td> <td>超级</td> </tr> <tr> <td>target</td> <td>目标</td> </tr> <tr> <td>reference</td> <td>引用</td> </tr> </tbody> <tfoot> <tr> <td>空</td> <td>空</td> </tr> </tfoot> </table>
相关样式
1.table-layount: [auto:个性] [fixed:平均] 2.border-collapse: 控制是否合并 3.border-spacing: 控制border间距
常用设置
table-layout: auto; border-spacing: 0; border-collapse: collapse;
img标签
作用:发出get请求,展示一张图片
属性
- alt 图片加载失败,显示文字提示用户
- height 高
- width 宽
- src 图片地址
事件
- onload 加载成功
- onerror 加载失败
检测图片加载是否成功,从而进行挽救
代码示例
<img id="xxx" src="1.jpg" alt="美照"> <script> xxx.onload = function() { console.log('图片加载成功') } xxx.onerror = function() { console.log('图片加载失败') xxx.src = "404.jpg" } </script>
响应式
- max-width:100% 使图片变成响应式,根据设备大小自行更改,不会固定大小
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>img标签</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } </style> </head> <body> <img id="xxx" src="dog.jpg" alt="狗子"> <script> xxx.onload = function(){ console.log("图片加载成功"); } xxx.onerror = function(){ console.log("图片加载失败"); xxx.src="/失败.jpg" ; }; </script> </body> </html>
form标签
作用:发get或post请求,然后刷新页面
属性
- action 控制请求哪个页面
- autocomplete 是否自动填充
- method 控制是get还是post
- target 要提交到XX页面,XX页面需要刷新
target="_self"
当前页面target="_blank"
空白页面target="_top"
顶层页面target="_parent"
父类页面
type属性常用取值
<input type="text">
普通文本<input type="password">
密码<input type="button">
按钮<input type="color">
选择颜色- 单选框,name需一样
<input name="xxx" type="radio">男 <input name="xxx" type="radio">女
- 多选框,name一样为一组
<input name="yyy" type="checkbox">唱 <input name="yyy" type="checkbox">跳 <input name="yyy" type="checkbox">rap <input name="yyy" type="checkbox">篮球 复制代码
<input type="file">
文件<input type="file" multiple>
文件多选<input type="hidden">
隐藏,看不见的
事件
- onsubmit
要触发,表单必须有input或者button的type="submit"
onchange
用户改变了内容onfocus
鼠标聚焦onblur
鼠标失去聚焦required
必填,否则无法提交
多行文本
<textarea></textarea>
多行文本输入框
<textarea style="resize: none"></textarea>
不允许更改大小
注意
不要双击打开HTML,要用http server -c-1(hs -c-1)卓和parcel XXX。
input 标签
作用: 用户输入内容
属性
常见标签 :checkbox , file , password , radio , reset , submit , button
1、input标签默认type属性为文本标签text;
2、checkbox、radio 第一个为多选按钮,第二个为单选按钮;
3、password用于密码输入框;
4、file标签文件上传,默认为单文件上传,设置multiple后则可批量文件上传;
file标签代码语法 :<input type="file" multiple>
file标签展示效果 :
<form > <input type="file" multiple> </form>
注意事项
- 一般不监听input的click事件
- form里面的input要有name
- form表单必须要有一个
type="submit"
如果不写,默认为submit
如果type="button"
就不能提交表单 - input和button提交区别
<input type="submit" value="提交"> <button type="submit">提交</button>