常用标签整理

93 阅读2分钟

a 标签

属性:

  1. href (hyper reference)超链接
  2. target 在何处打开target的值(也就是网页
  3. download 可以引导下载
  4. rel = noopener

作用:

跳转外部页面,内部锚点,邮箱或电话

href 的取值

网址

  • http://taobao.com

  • https://taobao.com

  • //taobao.com (自动选择http或是https,最好用)

路径

  • /a/b/c/v
  • a/b/d
  • index.html 、 login.html

伪协议

  • javascript:代码; javascript:; 点击之后啥事都不会发生
  • mailto:邮箱 发邮件
  • tel:手机号 直接打电话 (手机上好用

id

  • href = #ddd 跳转到指定的标签( id = "ddd" )

target

内置名字

  • _blank 空白页面打开
  • _top 在最顶层页面打开
  • _parent 在父级窗口打开
  • _self 在当前页面打开 (可以在iframe中打开

程序员命名

window 的 name xxx 可以在xxx页面重复进入多个页面,但是下一个会覆盖上一个

iframe 的name 在iframe打开页面

iframe标签

暂时不写很少用

table 标签

<table>
            <thead>
                <tr>
                    <th>语文</th> 
                    <th>数学</th> 
                </tr> 
            </thead>
            <tbody>
                <tr>
                    <td>100</td>
                    <td>100</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>null</td>
                    <td>N/A</td>
                </tr>
            </tfoot>
        </table> 

语文数学
100100
nullN/A

其中 trtable rowthtable headtdtable data th 也可以写在tbody里面

样式

table-layout 行列宽度的算法

  • auto 就自动计算,默认auto
  • fixed 尽量平均每个表格的宽度

boder-collapse 有border的时候,每一个td都有一个border,不重合

  • collapse 可以使得每个td的border重复多的border重合

border-spacing 表格之间的距离

img 标签

作用

发送get请求,展示图片

属性

alt 加载失败时候显示一段字

src 图片地址

height 高度

width 宽度

事件

onload img加载成功调用

onerror img加载失败调用

响应式

max-width:100%

对img进行优化当加载图片失败的时候,把他的src换成别的图片 可以在onerror 中写

form 标签

作用

发送get或者post请求,然后刷新页面

属性

action 提交表单到xxx页面

autocomplete 是否自动填充

  • on 开启
  • off 关闭

method 控制请求方法

  • GET
  • POST

target 指示提交表单后显示响应的位置即在何处打开action的页面

和a标签一样

input 标签

作用

让用户输入内容

属性(type)

button / checkbox / email / file / hidden / number

password / radio / search / submit / tel / text

其他的属性 name / autofocus / checked / disabled / maxlength

pattern / value / placeholder

事件

onchange 当 input 内容改变的时候

onfocus 当 input 被鼠标聚焦的时候

onblur 当 input 被鼠标离焦的时候

一些另外input的标签

textarea 标签

可大可小的input框,resize:none;就不会给用户拖动

select 标签

下面跟着option 标签 代表选择 哦~选择

注意

form中的input要有name,不然提交之后就不知道哪个搭哪个

form中一定要有一个type = submit才能提交submit事件