HTML常用标签

海绵宝宝Duker
147 阅读3分钟

单词列表

单词 翻译 单词 翻译
hyper 超级 blank 空白
target 目标 parent 父母之一
reference 引用 self 自己
frame 框架 load 加载
error 错误 canvas 画布

a标签 (anchor锚)

属性：

  • href
  • target
  • download

作用：

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱或者电话

href的取值

网址

路径

  • /a/b/c.html和a/b/c.html 浏览器会将当前目录作为根目录，所以前面两种路径相同。==不能直接双击打开HTML文件，因为会导致路径问题。==
  • index.html和./index.html

伪协议

  • javascript:代码;
    <a href="#">跳转到顶部</a>
    <a href="">刷新页面</a>
    <a href="javascript:void(0);">无任何操作</a>
  • mailto:邮箱
    <a href="mailto:1441408055yb@gmail.com">发送邮件</a>
  • tel:手机号
    <a href="tel:144XXXX0551">拨打电话</a>

id

    <a href="#xxx">跳转到锚点xxx</a>

target的取值

内置名字

  • _blank 在新窗口打开
  • _self 在当前页面打开
  • _top 配合iframe标签使用，在顶级iframe打开
  • _parent 配合iframe标签使用，在上一级iframe打开

自定义名字

  • window的name 在指定name的窗口打开，没有则新建窗口打开
  • iframe的name 在指定name的iframe打开
    <a href="//baidu.com" target="xxx">打开百度</a>
    <iframe name="xxx" style="width: 500px;height: 500px"></iframe>

table标签 表格

相关标签

  • table 整个表格
  • thead 头部区域
  • tbody 主体区域
  • tfoot 底部区域
  • tr 定义行
  • th 定义表头
  • td 定义单元格

相关样式

  • table-layout 表格样式
    table-layout: auto; /*默认，列宽度由单元格内容设定*/
    table-layout: fixed;  /*列宽由表格宽度和列宽度设定*/
    table-layout: inherit;  /*从父元素继承 table-layout 属性的值*/
  • border-collapse 为表格设置合并边框模型
  • border-spacing 设置单元格间距

img标签 图片

作用

  • 发送一个get请求，显示一张图片

属性

  • src 图片路径 source
  • alt 图片加载失败的展示内容
  • width 图片展示宽度
  • height 图片展示高度

事件

  • onload 图片加载完成后的操作
  • onerror 图片加载失败后的操作

响应式

  • 样式max-width: 100% 使图片自适应各种屏幕，不产生变形

可替换元素

可替换元素 MDN

form标签 表单

作用

  • 发送get或者post请求，然后刷新页面。

属性

  • action 请求的地址
  • autocomplete 给用户进行输入建议
    <form action="/aaa" method="get" autocomplete="on">
       <input name="username"/>
     </form>
  • method 请求方式 主要是post和get，其他方式存在兼容性问题
  • target 参见a标签

事件

  • onsubmit
<!--注意，form标签至少有一个submit类型的标签，否则无法请求。当form中只有一个button且不指定类型时，默认类型为submit-->

<!--区分-->
<input type="submit" value="提交1"/> <!--不能包含其他内容-->
<button type="button"> <!--可以包含其他内容-->
<strong>提交2</strong>
</button>

input标签 输入

作用

  • 让用户输入内容

属性

  • 类型type
    • button 按钮
    • checkbox 勾选框
    • email 邮箱
    • file 上传单个文件 添加属性multiple可以上传多个文件
    • hidden 隐藏标签 不是给用户使用，给机器使用
    • number 输入仅限数字
    • password 密码框
    • radio 选择框 当多个input属性name值相同可以实现单项
      <input type="radio" name="gender" value="1"/>男
  <input type="radio" name="gender" value="0"/>女
    • search 搜索框
    • submit 提交按钮
    • tel 电话
    • text 文本框 默认
    • textarea 文本区域

事件

  • onchange 当值改变时
  • onfocus 当获得焦点时
  • onblur 当失去焦点时

验证器

  • HTML5的新增功能
avatar
文章
阅读
粉丝