HTML常用标签(html常用标签及属性)
在预览自己写的页面时，为了减少BUG，不要用双击打开链接的方式开启页面，
用以下方式打开：
安装 http-server
用命令行
http-server -c-1.通过ctrl+点击链接打开并在开启的地址后加上文件名
安装 parcel
命令行
parcel 文件名打开
a标签
a标签的属性
1.href(hyper ref)的取值
网址
https://google.comhttp://google.com//google.com(无协议网址)，浏览页面时，需先在浏览器打开开发者工具->Network->preserve log 勾选，这种方法会自动选择适用http还是https，防止bug路径
绝对路径 /a/b/c
相对路径 a/b/c 用http开启服务，在哪里开启，哪里就是根目录
index.html和./index.html 在当前目录下找文件
伪协议
打电话给指定号码
发送邮件给指定邮箱
用途
javascript:代码;
mailto:邮箱
tel：手机号
javascript:;空的伪协议，点击之后什么事都不会发生，不刷新也不会返回顶部执行一段没有意义的JS代码
id
href=#xxx 跳转到指定标签
2.target的取值
内置名字
PS.不是所有网页都支持iframe
_blank 新的页面打开
_self 默认值，当前页面打开
_top 当引用iframe(内嵌窗口)时，不在内嵌窗口打开，而是在最顶部窗口打开
_parent 当引用多个iframe时，点击链接会在该链接所在窗口的父级窗口打开
程序员命名
<iframe src="" name="xxx"></iframe>对应上面的``target="xxx"`,便可点击上面链接时，在内嵌窗口打开
一个页面同时有多个链接时，给这些标签同时添加属性
target="xxx"点击这些链接时，都会在同一个窗口打开
window的命名
iframe的命名
3.其他
a的download
作用：不是打开页面，而是下载页面
问题： 不是所有浏览器都支持，尤其是手机浏览器可能不支持
rel=noopener
作用： 防止BUG
a标签的作用
跳转外部页面
跳转内部锚点
跳转到邮箱或电话等
table标签
相关标签
thead
th(table head)表头
tr(table row) 一行
tbody
tr
td(table data) 数据
tfoot
tr
td
以上三个标签的位置顺序可以随意，html会自动更改
简单示例
<table> <thead> <tr> <th>英语</th> <th>翻译</th> </tr> </thead> <tbody> <tr> <td>frame</td> <td>边框</td> </tr> <tr> <td>canvas</td> <td>画布</td> </tr> <tr> <td>reference</td> <td>引用</td> </tr> </tbody> <tfoot> <tr> <td>空</td> <td>空</td> </tr> </tfoot> </table> 复制代码
实现如下效果
两个表头
<table> <thead> <tr> <th></th> <th>王小明</th> <th>小红</th> <th>小刚</th> </tr> </thead> <tbody> <tr> <th>数</th> <td>61</td> <td>91</td> <td>85</td> </tr> <tr> <th>语</th> <td>79</td> <td>82</td> <td>92</td> </tr> <tr> <th>英</th> <td>100</td> <td>97</td> <td>87</td> </tr> </tbody> <tfoot> <tr> <th>总分</th> <td>240</td> <td>270</td> <td>264</td> </tr> </tfoot> </table> 复制代码
表头用<th>表示，数据用<td>表示 效果如下：
相关样式
table-layout
table-layout：auto根据不同内容制定不同宽度table-layout：fixed所有内容宽度都尽量相等border-collapse
用来决定表格表框分开还是合并
border-spacing
调整表格间隙
示例(table的常用样式)
<style> table{ width:600px; table-layout: auto; border-collapse: collapse; border-spacing: 0; } td,th{ border:1px solid red } </style> 复制代码效果如图：
img标签
作用
发出get请求，展示一张图片
属性
src 图片地址
alt 图片加载失败时，会显示出alt里添加的内容以备用
height 只写高度，宽度会自适应
width 只写宽度，高度会自适应
如果两者都写图片尺寸可以自定义，但图片会变形，所以一般写其一即可
事件
onload JS监听加载成功
onerror JS监听加载失败
例子(测试时使用)
<img src="picture.jpg" alt=""> <script> xxx.onload=function(){ console.log("加载成功") }; xxx.onerror=function(){ console.log("加载失败") xxx.src="Alternate-picture.jpg"; }; </script> 复制代码可以在控制台查看加载成功还是失败，当失败时，会通过xxx.src="Alternate-picture.jpg";加载出一张备用图片
响应式
max-width:100% 自适应不同屏幕大小
* { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } 复制代码form标签
作用
发get或post请求，然后刷新页面
属性
action 控制请求哪个页面
method 控制请求方式用get还是POST
target 与a标签用法类似
autocomplete 自动填充
<input name="username" type="text">在input里加上username之后<form action="/xxx" autocomplete="on">会根据用户之前填写过的内容给出提示
autocomplete="off" 则不会
Input的submit和button的submit区别
input 里面不能含其他标签
button 里面可以包含其他标签
<form action="/xxx" autocomplete="on"> <input name="username" type="text"> <input type="submit" value="这是input"> <button type="submit"> <strong>这是button</strong> </button> 复制代码
效果如图：
input标签
作用
让用户输入内容
常用属性
text 输入文本
color 选择颜色
password 输入密码
radio 单选
二选一：给两个input相同的name,例：
<input type="radio" name="gender"> 男 <input type="radio" name="gender"> 女 复制代码
checkbox 复选
也需给相同的name
<input type="checkbox" name="hobby" id="">琴 <input type="checkbox" name="hobby" id="">棋 <input type="checkbox" name="hobby" id="">书 <input type="checkbox" name="hobby" id="">画 复制代码
hidden 隐藏
给JS自动填充一些id,字符串用的
file 上传文件
<input type="file">上传一个文件<input type="file" multiple>上传多个文件
事件
onchange 用户输入改变触发
onfocus 把鼠标集中在标签上面时触发
onblur 把鼠标从标签上移开时触发
验证器
HTML5新增功能
<input type="text" required>用户必须填写该栏内容，才能提交
其他标签
select+option 选择
<select name="week" id=""> <option value="">- 请选择 -</option> <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> </select> 复制代码
效果如图
textarea 多行文本输入
默认可拖动文本框大小，可用CSS固定大小
<textarea style="resize:none; width:50%; height:300px;"></textarea> 复制代码
注意事项
一般不监听input的click事件
form里面的input要有name
form里面要放一个含有type=submit属性的标签，才能触发submit事件
作者：PrayWang
链接：https://juejin.cn/post/7028768726551887885