HTML 常用标签内容介绍：a标签的介绍、img标签的用法、table标签的用法、怎么使用工具通过http来运行html

HTML常用标签

a 标签

• 属性

  • href
  • target
  • download 下载页面，很多浏览器不支持
  • rel=noopener

• 作用

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

a的href取值

• 网址

  • google.com
  • google.com
  • //google.com

• 路径

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

    • 基于了http协议，寻找文件位置的时候根目录为开启服务的位置

  • index.html以及./index.html

• 伪协议

  • javascript:; 使点击a标签什么都不做
  • mailto:邮箱 跳转到邮箱
  • tel:手机号 跳转到电话

• id

  • href=#xxx
  • 跳转到带有id的元素

a的target的取值

• 内置名字

  • _blank 在空白窗口打开
  • _top 在顶层窗口打开
  • _parent 在上一层窗口打开
  • _self 当前窗口打开

• 程序员命名

  • windows的name 在自定义命名的时候如果没有这个名字浏览器会创建一个叫这个名字的窗口，如果有了，浏览器会覆盖那个名字的窗口
  • firame 的name

iframe标签 内嵌窗口，已经很少使用了，还有些老系统在用

table标签

• 相关的标签

  • table
  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th

• 相关的样式

  • table-layout

    • auto 表格及单元格的宽度取决于其包含的内容
    • fixed 单元格内容所在行不会影响列宽

  • border-collapse

    • 合并单元格

  • border-spacing

    • 表格之间的间隙的值

img标签

• 作用

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

• 属性

  • alt、height、src、width

• 事件

  • onload（加载成功）/onerror（加载失败）

• 响应式

  • max-width100%

• 可替换元素

form标签

• 作用

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

• 属性

  • action 请求哪个页面
  • autocomplete 自动填充
  • method 方法
  • target 提交哪个页面

• 事件

  • onsubmit

input标签

• 作用 ：让用户输入内容

• 属性

  • 类型type：button/checkbox/email/file/hidden/number/password/radio/search/sbumit/tel/text
  • 其他name：autofocus/checked/disabled/maxlength/pattern/value/placeholder

• 事件

  • onchange（改变）/onfocus（用户聚焦）/onblur（鼠标移开）

• 验证器

  • HTML5新增功能

其他输入标签

• 标签

  • select+option
  • textarea
  • label

• 注意事项

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

其他标签

• 标签

  • video
  • audio
  • canvas
  • svg

• 注意事项

  • 这些标签的兼容性一定要查看文档

input和button有什么区别

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

区别就是button里面可以再放标签，但是input放不了标签

如果不写type button默认的type是submit

一个form表单默认要含有一个submit的button

工具

通过http-server和parcel可以通过http来访问html文件避免一些问题

1、http-server

安装：

 yarn global add http-server 

可以通过网址来预览html文件

 http-server . -c -1

2、 parcel

安装：

 yarn global add parcel

然后跟上你要预览的html文件

 parcel abc.html

补充

meta标签VScode生成的不完整

meta:vp完整内容

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">