HTML常用标签

谷恒条野
206 阅读4分钟

单词

  • hyper 超级，html里的h哦。 /hi+per/
  • target 目标
  • reference 引用，refer的名词
  • frame 边框、框架
  • error 错误
  • blank 空白
  • parent 父母之一
  • self 自己
  • load 加载
  • canvas 画布 /kanvas/

a 标签

作用

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

属性

  • href = hyper reference =超链接
  • target 指定哪个窗口打开超链接
  • download
  • rel=noopener

href

注意
  1. 不要双击html文件来浏览网页，作为专业前端程序员应该借用***http-server***
yarn global add http-server //这是安装//

http-server -c-1  //下次直接输入

//得到的四个地址，复制一个到浏览器，在末尾加上html文件名浏览
  1. 可以不用http-server，用parcel
yarn global add parcel //也是安装

parcel a-href.html  //下次直接输入

//和http-server效果一样的
取值

  • 网址

    1. https网址
    2. http网址
    3. 无协议网址//google.com //其实就是继承，你是http就是http，所以我们用这个

  • 路径

    1. 绝对路径/a/b/c ，相对路径 a/b/c
      说明：我们在哪里打开http-server，哪里就是根目录，所以这里其实两者都一样（记结论）
    2. index.html 或者 ./index.html

  • 伪协议

    1. javascript:JS代码; 效果就是点击就执行了这段JS代码,最近很少用吧

      • JS代码留空可以实现一个点击什么都不做的需求，没有其他a标签写法能做到这样,因为href="＃"会跑到顶部，href=""会刷新页面***

    2. #xxx 搭配id= XXX使用实现点击跳转到id=XXX的元素

    3. mailto:xxx@xx.com 发邮件给XXX</a> 发邮件

    4. tel:123456789
      手机点击就会自动进到拨号界面并写上号码

  • id
    href=#xxx

target 属性

取值
  1. _blank 空白页打开
  2. _top 顶部打开(只有一个顶部)
  3. _parent 父级（的 iframe ）打开
  4. _self 自己（的 iframe ）打开
  5. XXX 这是指窗口的名字：windos.name 如果没有XXX就新建一个叫XXX的窗口，如果存在两个叫XXX的 iframe 那就会顺序覆盖
  6. iframe 的name，这时进行点击会在这个名字的iframe里执行href的对应操作
    比如配置如下
href = "//google.com",target = "myiframe" ,iframe src ="myiframe.html" , name = "myiframe".

那么点击了超链接后，在myiframe里打开了谷歌,但是谷歌拒绝了你内嵌访问它，哈哈.

  • 拓展
    将iframe设置成全屏那么大，整两个，再整两个超链接，就能实现googbai啦

download 属性

用于下载链接

rel = noopener 属性

暂时不用知道

iframe标签

用法

iframe + tab 补全，然后src ="",name = ""等等，看文档

作用

内嵌页面

补充说明

现在大多数不采用这个方式了，还有更好的方式，所以不作补充

table标签

内部只能有的三个标签

  1. thead 表头

    • tr = table row
      • th = table head 写表头内容，按列

  2. tbody 表体

    • tr
      • td = table data 按列来写内容

  3. tfoot 表尾

    • tr
      • td 一样

  4. 拓展 

td,th
{
    border: 1px solid red;
}
// 加了边框，一像素粗，红色

相关标签

  • table-layout
    • ~: auto
    • ~: fix
  • border-collapse 控制border是否合并
    • ~: collapse;
  • border-spacing 控制border的距离
    • ~: 0;


      演示

动手做个表格

  1. 就是thead，tbody，tfoot三个部分，写tr>th or td的内容，从左往右填空完事。最后在head里设置一下border。
  2. 用http-server推的地址后面接我这个demo的文件名，预览

img 标签

作用

  • 发出一个get请求展示一张图片

属性

  • alt 失败时作为代替显示的信息
  • height 高，只写高度，宽度会自适应
  • width 宽，只写宽度，高度会自适应

    都写可能会使图片变形

  • src
    • 用法: src = "图片的相对or绝对路径，网路地址"

永远也不要让图片变形，这是前端工程师的底线

事件

  • onload

    加载成功时该做什么

  • onerror

    加载失败时该做什么

响应式

使手机能正常看

  • 在head>style里，img{max-width: 100%;}

form 标签

表单

必须要有一个type ="submit"

作用

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

属性

  • action 后台给的一个路径，随便/XXX，报错不管

  • autocomplete 自动推荐要输入的内容，比如登录过，下次登录会提示一个用户名

  • method 控制是get还是POST

  • target

  • 拓展

  form标签里面使用input标签
  
  
  <body>
  <form>
  <input name ="username" type="text"/> 自动输入提醒
  
  <input type="submit" value="我可以自己写"/>
  
  <button type = "submit">
  <strong>我可以自己写</strong>
  <button/>
  
  </form>
  </body>
  input和button的巨大区别就是，button可以> strong、img等等，而input啥也不行！

事件

  • onsubmit

input 标签

作用

  • 让用户输入内容

属性

  • type
    • 取值 button
    • checkbox
    • email
    • file
    • hidden 用户写不了，给机器写
    • number
    • password
    • radio
    • search
    • submit
    • tel
    • text
  • name
  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value
  • placeholder
  • 其他输入标签
  • textarea 多行，style="resize: none; width: 50%; height: 300px"
  • select
    • option
  • label

事件

  • onchange 改变
  • onfocus 鼠标放上去
  • onblur

验证器

  • HTML 5 新增功能
    • required: 搭配text强制要填表

注意事项

  • 一般不监听input 的click 事件
  • form里面的input 要有name
  • form里要放一个 type=submit 才能触发submit事件

感想

内容很多很多，需要时间消化。有许多标签记录得很粗，但这些其实都是可以通过MDN找到的，不慌。忘了就去查资料。

avatar
文章
阅读
粉丝