1/29 HTML重点知识

英语小课堂

hyper 超级 target 目标 reference 引用 frame 边框 error 错误

blank 空白 parent 父母 self 自己 load 加载 canvas 画布

a标签

小贴士：
  1. 命令行执行 yarn global add http-server
  3. http-server -c-1    然后点击一个地址 在输入自己要打开网页的名字
  5. 或者执行 yarn global add parcel      然后用 parcel 加网页名字打开

属性

href 超级链接 作用：取值 网址 路径 伪协议 id href=#xxx
  1.     <!-- 伪协议：-->
  2.     javascript:;
  3.     <a href="javascript:alert('你好');">伪协议</a>
  4.     <a href="javascript:;">空伪协议阻止页面刷新</a>
  6.     <!--mailto:邮件地址    发邮件给谁-->
  7.     <a href="mailto:xxx@qq.com">发邮件给XXX</a>
  9.     <!--tel:手机号    打电话给谁-->
  10.     <a href="tel:12345678901">打电话给谁</a>
  12.     <!--id    href=#xxx-->
  13.     <p id="xxx">跳转到这里</p>
  14.     <a href="#xxx">跳转</a>

target 页面打开方式

内置样式
  2.     <a href="https://www.baidu.com/" target="_blank">这是一个网页 在新的页面打开</a>
  3.     <a href="//www.baidu.com/" target="_top">在最顶层窗口打开</a>
  4. <!-- 主页  
  5.     解释 _self 和 _parent 的用法
  6.     主页里面创建了一个一个盒子 用iframe标签引用其他标签里面的内容 
  7.     注释：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
  8. -->
  9.     <div style="width: 800px;height: 400px;">
  10.     <iframe src="iframe01.html" frameborder="0" width="800px" height="300px"></iframe>
  11.     </div>
  12. <!-- 
  13.     第一个链接页面 在里面链接了一个百度网页 点击百度网页就会在自身的盒子内打开一个网页
  14.     下面又链接了第二个网页 用_parent 跳转就会在他的父盒子即parents类盒子打开链接页面
  15. -->
  16.     <body style="background-color: brown; ">
  17.         我是iframE01 里面有个a标签
  18.         <div class="parents">
  19.             <a href="//www.baidu.com/" target="_self">链接</a>
  20.             <iframe src="iframe02.html" frameborder="0">这是第二个</iframe>
  21.         </div>
  22.     </body>
  23. <!-- 第二个链接页面-->
  24.     <body style="background-color: green; ">
  25.         我是iframE02 里面有个a标签
  26.         <div>
  27.             <a href="//www.baidu.com/" target="_parent">链接</a>
  28.         </div>
  29.     </body>

程序员样式 name 组合 iframe
  1.     <a href="//google.com" target="xxx">google</a>
  2.     <a href="//www.baidu.com/" target="xxx">baidu</a>
  3.     <hr />
  4.     <iframe style="border: none;  width: 600px ; height: 300px;" src="" name="xxx"></iframe>
  5.     <hr />

download 下载 rel=noopener

table标签

  1.     <style>
  2.         table {
  3.             /* auto 根据内容调整宽高 */
  4.             table-layout: fixed;
  5.             /* 是否合并 */
  6.             border-collapse: collapse;
  7.             /*控制表格与表格之间的距离  */
  8.             border-spacing: 20px;
  9.         }
  11.         th,
  12.         td {
  13.             border: 1px solid red;
  14.         }
  15.     </style>
  16.     <table>
  17.         <thead>
  18.             <tr>
  19.                 <th>英语</th>
  20.                 <th>翻译</th>
  21.             </tr>
  22.         </thead>
  23.         <tbody>
  24.             <tr>
  25.                 <td>error</td>
  26.                 <td>错误</td>
  27.             </tr>
  28.             <tr>
  29.                 <td>look</td>
  30.                 <td>看</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>error</td>
  34.                 <td>错误</td>
  35.             </tr>
  36.         </tbody>
  37.         <tfoot>
  38.             <tr>
  39.                 <td>空</td>
  40.                 <td>空</td>
  41.             </tr>
  42.         </tfoot>
  43.     </table>

img 标签

小贴士：
  1. 永远不能让图片变形
  1.     <img id="xxx" src="images/hua.jpg" alt="这是一朵花">
  2.     <!-- 图片加载失败 用 alt描述图片 -->
  3.     <script>
  4.         // 事件 onload onerror 
  5.         xxx.onload = function() {
  6.             console.log("图片加载成功");
  7.         }
  8.         xxx.onerror = function() {
  9.             xxx.src = '/images/huacopy.jpg';
  10.         };
  11.     </script>

form标签和input标签

小贴士：
  1. 一个form表单必须要有一个标签含有 type="submit" 才可以提交 否则默认提交

input :submit和button有什么区别
  1. input里面不能再有内容 button里面可以有任何东西有任何标签
  1.     <!-- autocomplete 自动填充 
  2.          target 我要提交到那个页面
  3.          method 必须选中 POST/GET
  4.     -->
  5.     <form action="/xx" method="POST" autocomplete="on" target="_blank">
  6.         <input type="text" name="username" id="">
  7.         <input type="submit" value="提交咯01">
  8.         <!-- button不写 type="submit" 默认就是 type="submit" -->
  9.         <button type="submit">
  10.             <strong>提交咯02</strong>
  11.         </button>
  12.         <hr>
  13.         <input type="password" name="" id="">
  14.         <hr>
  15.         <input type="radio" name="gender" id="">男
  16.         <input type="radio" name="gender" id="">女
  17.         <hr>
  18.         <!-- 同一个name就表明他们是一组的 -->
  19.         <input type="checkbox" name="hobby" id="">唱
  20.         <input type="checkbox" name="hobby" id="">跳
  21.         <hr>
  22.         <!-- multiple 同时上传多个文件 -->
  23.         <input type="file" name="" id="" multiple>
  24.         <hr>
  25.         <!-- 看不见的 给机器留的 不是给我们用的 自动填一些ID /字符串-->
  26.         <input type="hidden" name="">
  27.         <hr>
  28.         <textarea name="" id="" cols="30" rows="10" style="resize: none; width: 50px; height: 50px;"></textarea>
  29.         <hr>
  30.         <select name="" id="">
  31.             <option value="">-请选择-</option>
  32.             <option value="1">星期一</option>
  33.             <option value="2">星期二</option>
  34.         </select>
  35.         <!-- 事件
  36.         onchange/onfocus/onblur
  37.         -->
  38.     </form>

小贴士
  1. 一般我们不监听input的click事件
  3. form里面的input要有name
  5. form里面放一个 type="submit"才能触发submit事件

感想

相对于之前学的常用标签的基础上又学习了很多。单独的标签上的用法了解到了更多和很多标签的注意事项。

资料来源：饥人谷

本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源