HTML常用标签

全球少女的梦中情人
272 阅读2分钟

a标签

属性

  1. href 超链接

  2. target 指定在哪个窗口打开链接

  3. download 下载页面，很多浏览器不支持

  4. rel=noppener

target的取值

  • target="_self" 默认，在当前页面打开链接
  • target="_blank" 在空白页面打开链接
  • target="_top" 在顶层页面打开链接
  • target="_parent" 在父类页面打开链接
  • 程序员命名 window的name
  • iframe 的name

href的取值

  1. 网址

  2. 路径

    • /a/b/c以及a/b/c
    • index.html以及./index

  3. 伪协议

    • JavaScript:代码; 执行javascript代码
    • JavaScript:; 什么的不做，也不会刷新页面

  4. id

    • href=#xxx id，跳转到指定标签

  5. mailto: 邮箱，自动填写邮箱

  6. tel: 手机号，自动填入手机号

table标签

相关标签

  1. <thead></thead> 表格头部
  2. <tbody></tbody> 表格身体
  3. <tfoot></tfoot> 表格脚部
  4. <tr></tr> 表格里面的一行
  5. <th></th> 表头
  6. <td></td> 表格里面的数据

相关样式

  1. table-layout:auto 根据内容自动设置宽度
  2. table-layout:fixed 等宽
  3. border-spacing: 0px; 控制间隙的距离
  4. border-collapse: collapse 表格间隙合并

img标签

作用

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

属性

  1. src 图片地址
  2. alt 图片加载失败，显示alt内容
  3. height 高度
  4. width 宽度
    只写高度或宽度，图片会自适应，2个都写，图片强制变形

事件

监听图片是否加载成功

  1. onload 加载成功
  2. onerror 加载失败
<img id="xxx" src="1.jpg" alt="美照">
<script>
        xxx.onload = function(){
            console.log('图片加载成功')
        }
        xxx.onerror = function(){
            console.log('图片加载失败')
            xxx.src = "404.jpg"
        }
</script>

响应式

max-width: 100% 使图片变成响应式，根据设备大小自行更改，不会固定大小

form标签

作用

发get或post请求，然后刷新页面

属性

  1. action 控制请求页面地址
  2. method 控制发送GET还是POST请求
  3. autocomplete="on" 自动给出建议
  4. target 提交到哪个页面
    • target="_self" 当前页面
    • target="_blank" 空白页面
    • target="_top" 顶层页面
    • target="_parent" 父类页面

input标签： 输入框

type属性常用取值

  1. <input type="text"> 普通文本
  2. <input type="password"> 密码
  3. <input type="button"> 按钮
  4. <input type="color"> 选择颜色
  5. 单选框，name需一样
<input name="xxx" type="radio">男
<input name="xxx" type="radio">女
  1. 多选框，name一样为一组
<input name="yyy" type="checkbox">唱
<input name="yyy" type="checkbox">跳
<input name="yyy" type="checkbox">rap
<input name="yyy" type="checkbox">篮球
  1. <input type="file"> 文件
  2. <input type="file" multiple> 文件多选
  3. <input type="hidden"> 隐藏，看不见的

事件

  1. onchange 用户改变了内容
  2. onfocus 鼠标聚焦
  3. onblur 鼠标失去聚焦
  4. required 必填，否则无法提交

多行文本

<textarea></textarea> 多行文本输入框
<textarea style="resize: none"></textarea> 不允许更改大小

下拉框

<select>
    <option value="">请选择</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>

注意事项

  1. 一般不监听input的click事件

  2. form里面的input要有name

  3. form表单必须要有一个type="submit"
    如果不写，默认为submit
    如果type="button"就不能提交表单

  4. input和button提交区别

    <input type="submit" value="提交">
<button type="submit">提交</button>

    两者区别：button里面还可以添加标签，input不能

avatar
文章
阅读
粉丝