1/29 HTML常用标签
作者：互联网
英语小课堂
hyper 超级 target 目标 reference 引用 frame 边框 error 错误
blank 空白 parent 父母 self 自己 load 加载 canvas 画布
a标签
小贴士：
命令行执行 yarn global add http-server
http-server -c-1 然后点击一个地址 在输入自己要打开网页的名字
或者执行 yarn global add parcel 然后用 parcel 加网页名字打开
属性
href 超级链接 作用：取值 网址 路径 伪协议 id href=#xxx
<!-- 伪协议：-->
javascript:;
<a href="javascript:alert('你好');">伪协议</a>
<a href="javascript:;">空伪协议阻止页面刷新</a>
<!--mailto:邮件地址 发邮件给谁-->
<a href="mailto:xxx@qq.com">发邮件给XXX</a>
<!--tel:手机号 打电话给谁-->
<a href="tel:12345678901">打电话给谁</a>
<!--id href=#xxx-->
<p id="xxx">跳转到这里</p>
<a href="#xxx">跳转</a>
target 页面打开方式
内置样式
<a href="https://www.baidu.com/" target="_blank">这是一个网页 在新的页面打开</a>
<a href="//www.baidu.com/" target="_top">在最顶层窗口打开</a>
<!-- 主页
解释 _self 和 _parent 的用法
主页里面创建了一个一个盒子 用iframe标签引用其他标签里面的内容
注释：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
-->
<div style="width: 800px;height: 400px;">
<iframe src="iframe01.html" frameborder="0" width="800px" height="300px"></iframe>
</div>
<!--
第一个链接页面 在里面链接了一个百度网页 点击百度网页就会在自身的盒子内打开一个网页
下面又链接了第二个网页 用_parent 跳转就会在他的父盒子即parents类盒子打开链接页面
-->
<body style="background-color: brown; ">
我是iframE01 里面有个a标签
<div class="parents">
<a href="//www.baidu.com/" target="_self">链接</a>
<iframe src="iframe02.html" frameborder="0">这是第二个</iframe>
</div>
</body>
<!-- 第二个链接页面-->
<body style="background-color: green; ">
我是iframE02 里面有个a标签
<div>
<a href="//www.baidu.com/" target="_parent">链接</a>
</div>
</body>
程序员样式 name 组合 iframe
<a href="//google.com" target="xxx">google</a>
<a href="//www.baidu.com/" target="xxx">baidu</a>
<hr />
<iframe style="border: none; width: 600px ; height: 300px;" src="" name="xxx"></iframe>
<hr />
download 下载 rel=noopener
table标签
<style>
table {
/* auto 根据内容调整宽高 */
table-layout: fixed;
/* 是否合并 */
border-collapse: collapse;
/*控制表格与表格之间的距离 */
border-spacing: 20px;
}
th,
td {
border: 1px solid red;
}
</style>
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>error</td>
<td>错误</td>
</tr>
<tr>
<td>look</td>
<td>看</td>
</tr>
<tr>
<td>error</td>
<td>错误</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
img 标签
小贴士：
永远不能让图片变形
<img id="xxx" src="images/hua.jpg" alt="这是一朵花">
<!-- 图片加载失败 用 alt描述图片 -->
<script>
// 事件 onl oad one rror
xxx.onload = function() {
console.log("图片加载成功");
}
xxx.onerror = function() {
xxx.src = '/images/huacopy.jpg';
};
</script>
form标签和input标签
小贴士：
一个form表单必须要有一个标签含有 type=“submit” 才可以提交 否则默认提交
input :submit和button有什么区别
input里面不能再有内容 button里面可以有任何东西有任何标签
<!-- autocomplete 自动填充
target 我要提交到那个页面
method 必须选中 POST/GET
-->
<form action="/xx" method="POST" autocomplete="on" target="_blank">
<input type="text" name="username" id="">
<input type="submit" value="提交咯01">
<!-- button不写 type="submit" 默认就是 type="submit" -->
<button type="submit">
<strong>提交咯02</strong>
</button>
<hr>
<input type="password" name="" id="">
<hr>
<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
<hr>
<!-- 同一个name就表明他们是一组的 -->
<input type="checkbox" name="hobby" id="">唱
<input type="checkbox" name="hobby" id="">跳
<hr>
<!-- multiple 同时上传多个文件 -->
<input type="file" name="" id="" multiple>
<hr>
<!-- 看不见的 给机器留的 不是给我们用的 自动填一些ID /字符串-->
<input type="hidden" name="">
<hr>
<textarea name="" id="" cols="30" rows="10" style="resize: none; width: 50px; height: 50px;"></textarea>
<hr>
<select name="" id="">
<option value="">-请选择-</option>
<option value="1">星期一</option>
<option value="2">星期二</option>
</select>
<!-- 事件
onchange/onfocus/onblur
-->
</form>
小贴士
一般我们不监听input的click事件
form里面的input要有name
form里面放一个 type="submit"才能触发submit事件
感想
相对于之前学的常用标签的基础上又学习了很多。单独的标签上的用法了解到了更多和很多标签的注意事项。
资料来源：饥人谷
本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
标签：小贴士,form,标签,xxx,29,submit,HTML,input 来源： https://blog.csdn.net/m0_53364469/article/details/113399120