HTML 常用标签

HTML 常用标签

1.a标签

常用属性

• href
• target
• download
• rel=noopener

作用

• 跳转外部界面
• 跳转内部锚点
• 跳转到邮箱，电话等

用法详情

a的href的用法:

href的常用取值包括网址，路径，伪协议以及id

• 当取值为网址时，常有以下三种形式：

    <a href="https://google.com">Google</a>
    <a href="http://google.com">Google</a>
    <a href="//google.com">Google</a>

第三种是最为推荐的写法。

• href的取值是路径的形式，可以取相对路径也可以取绝对路径：
  /a/b/c以及a/b/c
  其中/a/b/c的第一个/表示的是浏览器打开的文件的根目录，这里不同于文件的/根目录。

• href的取值是伪协议的形式：

    <a href="javascript:;">什么都不做</a>
    <a href="javascript:void(0);">什么都不做</a>
    <a href="mailto:1466666666@qq.com">邮箱</a>
    <a href="tel:15611111111">电话</a>

• href的取值是id的形式：

    <a href="#">点击会滑动到页面顶部</a>
    <a href="#id">取值是#加上对应锚点的id</a>

a的target的用法:

用于： 指定在何处打开目标链接

取值：

• a_blank 新页面打开
• a_self 当前页面加载
• a_top 顶层页面打开
• a_parent 在父级页面打开

a的download的用法:

此属性指示浏览器下载 URL

a的rel=noopener的用法:

能够禁止被打开的页面获得当前页面的部分控制权（用于防钓鱼网站）

img标签

作用： 发出get请求，展示一张图片
属性 ： src的值为图片地址；alt是在图片加载失败的情况下显示的文字 ；width定义图片宽度，仅定义width的情况下，图片高度自适应； heightwidth定义图片高度，仅定义width的情况下，图片宽度自适应。前端应该尽量做到不让图片变形。
事件： onload / onerror
响应式： max-width:100%
可替换元素： 可参见MDN 可替换元素 了解更多

table标签

相关标签

• table / thead / tbody / tfoot / tr / th / td
  完整形式

    <table>
        <thead>
            <tr>
                <th></th>
                <th>张三</th>
                <th>李四</th>
                <th>王五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>78</td>
                <td>34</td>
                <td>67</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>67</td>
                <td>98</td>
                <td>77</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>80</td>
                <td>64</td>
                <td>76</td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>

不应该省略tbody
相关属性
table-layout

1. table-layout: auto; auto表示根据内容来计算宽度
2. able-layout: fixed; fixed表示定宽，尽可能地让宽度平均

• border-collapse
• border-spacing

form标签

作用： 发出get请求或post请求，然后刷新页面
属性：

• action：发出请求的地址
• method：值为get或者post，即发出get请求还是post请求
• autocomplete: 值取"on"或者"off"，即打开填充提示与关闭填充提示
• target:在当前页面提交或者新开一个页面提交

事件： onsubmit
注： 一个form内必须有一个type=submit的东西，或是Input或是button，
差别为input内不能再有其他标签，文字提示有value值提供；
button内可以用其他标签，也可以img等，更易定制个性化的样式

input标签

作用： 让用户输入的地方
属性：

• 类型type：

1. text： 输入文本
2. radio： 单选框，name值相同的为一组
3. checkbox 多选框，name值相同的为一组
4. file: 上传文件，上传一个文件：；上传多个文件
5. email：输入邮箱地址
6. tel：输入电话号码
7. number： 数字
8. password 密码
9. button： 按钮
10. submit： 用于提交表单
11. hidden： 隐藏元素

• 其它：
  name autofocus checked disabled maxlength pattern value placeholder
  事件：
  onchange onfocus onblur

附：
textarea 文本框

 <textarea style="resize:none; width:80%; height:500px;"></textarea>

使用textarea应当固定大小，禁掉自由拖动
select 选择

<select name="week" id="">
    <option value="">-请选择-</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

iframe标签

因为页面上的每一个iframe都需要增加内存和其它计算资源，不建议再使用该标签，在维护一些老项目时可能会遇到。

其它标签

video
audio
canvas
svg
注意事项： 这些标签的兼容性一定要看文档

注：代码要多敲，多尝试