a标签

  • 属性

    • href
    • target
      • _blank：在新窗口中打开
      • _top
      • _parent
      • _self：模人值，在当前页面打开
    • downdload
    • rel = noopener

  • 用法

    • 跳转外部页面
  1.   <a href="http://www.baidu.com" target="_self"> 百度 </a>
  • 跳转内部锚点
  1. <div id="a1"> a1 </div>
  2.      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  3. <div id="a2"> a2 </div>
  4.    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  5. <a href="#a1"> find a1 </a>
  6. <a href="#a2"> find a2 </a>
  • 跳转到邮箱或电话
  1. <a href="tel:6666666"> 给猪猪打电话 </a>
  2. <a href="mailto: zhuzhu@qq.com"> 给猪猪发邮件 </a>
  • 协议限定符：

<a href="javascript:代码;">aa</a>
什么都不做的a标签：<a href="javascript:;">aa</a>
调转到页面顶部：<a href="javascript:#;">aa</a>

  1. <a href="javascript:while(1){alert('猪猪不腻你')}"> 点一下猪猪 </a>

iframe标签

页面中引入显示别的页面，很少用

table

  • css 样式：table-layput, border-collapse, border-spacing
  • table: 定义表格
    • width:
    • border:
    • cellpadding: 内容与单元格的距离
    • cellspacing: 单元格之间的距离
    • bgcolor: 背景颜色
    • align:
  • tr: 定义行
    • bgcolor
    • align
  • td: 定义单元格
    • colspan: 合并行
    • rowspan: 合并列
  • th: 定义表头单元格
  • : 表格标题
  • 语义化标签: , , 
    1. <table>
    2.   <thead>
    3.       <tr>
    4.           <th>表头1</th>
    5.       </tr>
    6.               <tr>
    7.           <th>表头2</th>
    8.       </tr>
    9.   </thead>
    10.   <tbody>
    11.       <tr>
    12.           <td>内容1</td>
    13.       </tr>
    14.       <tr>
    15.           <td>内容2</td>
    16.       </tr>
    17.   </tbody>
    18.   <tfoot>
    19.       <tr>
    20.           <td>内容1</td>
    21.       </tr>
    22.       <tr>
    23.           <td>内容2</td>
    24.       </tr>
    25.   </tfoot>
    26. </table>

img

  • 如果图片加载失败，则显示alt内容

    1. <img src="./img/1.jpg">
    2. <img src="./img/2.jpg" align="right" alt="title" width="500"/>

  • src: resource资源

  • 事件：onload, onerror
  • 响应式：大小与浏览器窗口一样大，可在手机上也能看
    img {
    max-size: 100%
    }

form

  • 事件：onsubmit
  1. <form action="#" method="get">  
  2. <!-- * form：定义表单
  3.     表单中数据必须指定name才能被提交,属性：
  4.     * action: 指定提交数据的URL
  5.       * method: 指定提交方式，一共七种，常用两种
  6.       * get:  
  7.                     1.请求参数在地址栏中显示
  8.           2.请求参数大小有限制
  9.           3.不太安全
  10.       * post: 
  11.                     1.请求参数不在地址栏中显示，会封装在请求体中(HTTP协议)
  12.           2.请求参数大小没有限制
  13.           3.较安全
  14.      * autcomplete
  15.      * target
  16.    * 表单中数据必须指定name才能被提交 
  17.     -->
  18. <table border="1" cellspadding="0" align="center" width="500">
  19.         <tr>     
  20.             <td> <label for="username">用户名 </label></td>
  21.             <td> <input type="text" placeholder="Input username" name="username" id="username"> </td>
  22.         </tr>
  24.         <tr>     
  25.             <td> <label for="password">密码 </label></td>
  26.             <td> <input type="password" placeholder="Input password" name="password" id="password"> </td>
  27.         </tr>
  29.         <tr>     
  30.             <td> <label for="email">Email</label> </td>
  31.             <td> <input type="email" placeholder="Input Email" name="email" id="email"> </td>
  32.         </tr>
  34.         <tr>     
  35.             <td> 性别 </td>
  36.             <td>
  37.                 <!-- 单选框radio -->
  38.                 <input type="radio" name="gender" value="male">男 
  39.                       <!-- 设置默认选择：checked="checked" -->
  40.                 <input type="radio" name="gender" value="female" checked>女 
  41.             </td>
  42.         </tr>
  44.         <tr>     
  45.             <td> 爱好 </td>
  46.             <td>
  47.                 <!-- 复选框checkbox -->
  48.                 <input type="checkbox" name="hobby" value="shopping">逛街
  49.                 <input type="checkbox" name="hobby" value="game">游戏 
  50.             </td>
  51.         </tr>
  53.         <tr>     
  54.             <td> 出生日期 </td>
  55.             <td> <input type="date" name="birthday"> </td>
  56.         </tr>
  58.         <tr>     
  59.             <td> 年龄 </td>
  60.             <td> <input type="number" name="age"> </td>
  61.         </tr>
  63.         <tr>     
  64.             <td> 省份 </td>
  65.             <td> 
  66.             <select name="proovince">
  67.             <option value="BeiJing"> 北京 </option>
  68.             <option value="ShangHai"> 上海 </option>
  69.             <option value="Guangzhou"> 广州 </option>
  70.             </select>
  71.             </td>
  72.         </tr>
  74.         <tr>     
  75.             <td> 头像 </td>
  76.             <td> <input type="file" name="file"> </td>
  77.                 </tr>
  79.         <tr> 
  80.             <td> 取色器 </td> 
  81.             <td> <input type="color" name="color"> </td>
  83.         </tr>
  85.         <tr> 
  86.             <td> 自我评价 </td> 
  87.             <td> <textarea cols="20" rows="5" name="color"> </textarea> </td>
  89.         </tr>
  91.         <tr>     
  92.                 <td> <label for="checkcode">验证码</label> </td>
  93.                 <td> <input type="text" name="checkcode" id="checkcode"></td>
  94.         </tr>
  96.         <tr>     
  97.             <td colspan="2"> 
  98.                 <center><input type="submit" value="注册"></center>
  99.             </td>
  100.         </tr>
  101.     </table>
  102. </form>

表单.png

像用户一样访问页面

  • 使用http-server：
  1. 安装http-server
  1.  yarn global add http-server
  1. 输入命令行
    -c -1 表示不要缓存
  1. http-server . -c -1

或

  1. hs -c .l
  • 使用parcel
  1. 安装
  1. yarn global add parcel
  1. 输入命令行
  1. parcel test.html

将网页部署到github

选择对应仓库的setting -> github pages