HTML:常用标签

·  阅读 85
HTML:常用标签

本篇博客是作为个人自学记录,如有不足之处,请批评指正。

此博客是《HTML:入门笔记》的续篇,需要查看请点击此链接

a 标签

href

  • 超链接

hyper+reference

href 的取值

  • (写网址就写//...就行)

网址:

  • https
  • http
  • //...

路径:

  • /a/b/c 以及 a/b/c

(前者是绝对路径,后者是相对路径。http打开的话,/a/b/c 也是当前文件夹下的路径) index.html 以及 ./index.html

伪协议

javascript:;
  • 如果想做一个a标签,又想这个a标签里面什么都不做,那么就在href里写入javascript:; 这样点击a标签只会执行一段空的js,页面不会有其它改变。

id:

  • href=#xxx,然后在其他标签添加id选择器的话娿,点击a标签就会跳到相应的位置

mailto:邮箱地址

  • 直接发邮件

tel:手机号

  • 直接打电话

target

内置名称
_blank
  • 在空白页面(新窗口)打开
_top
  • 当前页面最顶层(层级)的窗口打开,可以用iframe引入,这样就实现内嵌页中页
_parent
  • 父级窗口

在当前链接所在的iframe的上一层(父级)打开

_self
window 的 name
  • 在自己的层级打开,也是默认值

target 的值写字符串,这样就可以重复在同一个窗口 target="xxx" 打开如果有一个叫xxx的窗口,就用xxx窗口,如果没有,就创建一个xxx窗口打开

download

  • 下载内容,但不是所有浏览器都支持,尤其是手机浏览器

作用

  • 不是打开页面,而是下载页面

问题

  • 不是所有浏览器都支持,尤其是手机浏览器可能不支持

iframe 标签

  • 内嵌窗口,实现 “页中页”

已经很少使用了,只有一些老系统在用

table 标签

  • 表格标签 里面只能有 thead tbody tfoot

相关的标签

thead

  • 表格头部

tbody

  • 表格的主要部分

tfoot

  • 表格脚部(底部)

tr

  • 表格的行

th

  • 行内的头部(标题)

td

  • 行内的数据(内容)

相关的样式

  • css样式

table-layout 单元格内容宽度

  • auto
  • fixed

border-collapse

  • 控制 border 是否合并

border-spacing

  • 控制 border 之间的空隙

img 标签

  • 图片标签

发出get请求,展示一张图片

属性

  • 不是css的属性,就是自身的属性

alt

  • 可选的、替换的 加载失败时显示alt的内容

宽和高

  • 前端工程师的底线:永远不要让图片变形

width 和 height不能同时写,同时写可能会使图片变形,只写一个就可以,另一个属性会自适应

src

  • 图片地址,可以是网址也可以是本地地址

事件

onload

  • 加载成功时执行的事件

onerror

  • 加载失败时执行的事件

响应式

max-width:100%

  • 适配手机页面

可替换元素

  • 之后会讲到

form 标签

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

属性

action

  • 控制请求哪个页面

method

  • 控制用 get 还是 post 来请求

autocomplete

  • 是否自动填充

target

  • 跟a标签的用法相似

告诉浏览器应该提交到哪个页面,哪个页面应该刷新

事件

onsubmit

  • form 想要触发提交事件,必须要有 type="submit"

input 和 button 里的 type="submit" 有什么区别

  • input 里面不能再有其他的内容,button 里面可以有任何内容;

button 里面是可以含有标签的


input 标签

  • 让用户输入内容

用于表单创建交互式控件,以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件

属性

type="password"

  • 密码框

type="radio"

  • 单选框,但是要添加给 name 命名

type="checkbox"

  • 复选框,最好也要给 name 命名,尤其是页面复选框很多的时候

type="file"

  • 上传文件 上传多个文件的时候需要加 multiple

type="hidden"

  • 隐藏,多用于使用 js 获取网页某些数据而不需要用户交互的场景

事件

onchange

  • 当用户输入改变的时候

onfocus

  • 当用户鼠标聚焦在标签上的时候

onblur

  • 当用户鼠标从标签失去聚焦的时候

验证器

  • H5 新增自带验证 以后会讲

比如:input 里写上required 如果用户没填写内容就无法提交


注意事项

  • 一般不监听 input 的 click 事件
  • form 里的 input 要有 name
  • form 里面要放一个 type="submit" 才能触发 submit 事件
分类:
前端
标签: