HTML 常用标签

一、 <a> 标签

1.属性

• href (hyper refer 的简写) =
  • 网址
    • 'google.com'
    • 'google.com'
    • '//google.com' 这种写法好处在于，浏览器会自动判断选择合适的协议
  • 路径
    • '/a/b/c' 以及 'a/b/c'
    • 'index.html' 以及 './index.html'
  • 伪协议
    • 'javascript:代码;' JavaScript伪协议
    • 'javascript:;' 空的伪协议，什么都不会发生
    • 'mailto:邮箱'
    • 'tel:手机号'
    • '#' 页面虽然不会刷新，但会滚到顶部
    • '#xxx'（id名）点击可跳转到指定的标签 xxx
• target 指定新页面打开位置 =
  • 内置名字
    • '_blank' 在空白页面打开
    • '_top' 在顶层部分打开
    • '_parent' 在当前 iframe的上一层中打开
    • '_self' 在当前 iframe 中打开
• download 下载链接页面，取决于浏览器是否支持
• rel=noopener

2.作用

• 跳转到外部链接
• 跳转内部锚点
• 跳转到邮箱或电话

二、<table></table> 标签

1.相关标签

• <table></table>
• <thead></thead>
• <tbody></tbody>
• <tfoot></tfoot>
• <tr></tr>
• <td></td>
• <th></th>
• 基本格式示例

<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>

• 注意事项
  • thead, tbody, tfoot 三组标签可互换，但浏览器默认会按规则顺序渲染

2.相关样式

• table-layout 定义了用于布局表格单元格，行和列的算法 :
  • auto 表格及单元格的宽度取决于其包含的内容，即使指定了表格的width，表格仍然会自适应内容自动撑开
  • fixed 某一列的宽度仅由该列首行的单元格决定，若table给定宽度，会自动根据该单元格的宽度平均分配该行其他所有单元格的宽度，并不会根据内容自适应宽度
• border-spacing 单元格间距
  • 只适用于边框分离模式
• border-collapse 定表格的边框是分开的还是合并的 :
  • collapse
  • seperate

三、<img> 标签

1.作用

• 发出 GET 请求，展示一张图片

2.属性

• alt
• height
• width
• src

3.事件

• onload
• onerror

<script>
  xxx.onload = function () {
    console.log("图片加载成功");
  };
    xxx.onerror = function () {
    console.log("图片加载失败");
    xxx.src = "/404.png"; // 此处写 ./404 或 直接写 404 均可
  };
</script>

4.响应式

• max-width:100% 可在移动端适配

5.可替换元素

• 详见 MDN 文档

四、<form></form> 标签

1.作用

• 发 GET 或 POST 请求，然后刷新页面

2.属性

• action
• autocomplete
• method
• target

3.事件

• onsubmit

4.注意事项

• 一个完整的表单必须有 type='submit' 的 <input> 或者 <button></button> 标签，才能提交（即触发 submit 事件）
• form 里面的 input 要有 name 属性

五、<input> 标签

1.作用

• 让用户输入内容

2.属性

• type类型属性
  • button / chekcbox / email / file / hidden / number / password / radio / search / sunbit / tel / text
• name
• autofocus
• checked
• disabled
• maxlength
• pattern
• value
• placeholder
• multiple
• required 验证器，设置必填选项填写后才能提交

3注意事项

• 一般不监听 input 的 click 事件

4.示例

 <form action="/xxx" method="POST" autocomplete="on" target="a">
     <input name="username" type="text" required/>
     <input type="color" />
     <input type="password" />
     
     <input name="gender" type="radio" />男
     <input name="gender" type="radio" />女
     
     <input name="hobby" type="checkbox" /> 唱
     <input name="hobby" type="checkbox" /> 跳
     <input name="hobby" type="checkbox" /> 舞
     <input name="hobby" type="checkbox" /> 打
     
     <input type="file" multiple /> <!--multiple 用于选择多个文件-->
     
     看不见我吧：<input type="hidden" />
     
     <input type="submit" value="搞起" />
     <button type="submit">搞起</button>
</form>

五、其他输入标签

• <select></select>+<option></option> 组合

<select name="" id="">
  <option value="">请选择</option>
  <option value="1">周一</option>
  <option value="2">周二</option>
</select>

• <texrarea></texrarea>

<textarea
  style="resize: none"
  name=""
  id=""
  cols="30"
  rows="10"
></textarea>

• <label></label>