HTML 常用标签

HTML 常用标签

预览网页小工具

http server

//安装命令:安装后自动加入path,可以直接使用
$ yarn global add http-server
//使用命令 .可以省略;-c表示缓存,-c-1表示不需要缓存
$ http-server . -c-1
//缩写
$ hs -c-1
//执行命令后,给出访问链接,按住ctrl点击链接打开浏览器
//在url输入栏后面加上要打开的html页面的名称(例如:a-href.html)进行访问。

parcel

//安装命令
$ yarn global add parcel
//使用命令
$parcel xxx.html
//执行命令后,给出访问链接,按住ctrl点击链接打开浏览器

a 标签

属性

href

全称:hyper reference 超级引用,超链接

超链接
取值
//点击 a 链接,页面定位到 id="xxx"所在的标签

5

锚点定位

target

作用:指定在哪个窗口打开超链接。(当前窗口或新开窗口)

超链接
取值
  • _blank :新开窗口跳转
  • _self:当前窗口跳转(默认值)
  • _top:顶层窗口(在页面中的 iframe 子页面中写 a 标签,指向 top 时,在浏览器顶层页面进行跳转)
  • _parent:父级窗口(在页面中的多层级的 iframe 子页面中写 a 标签,指向 parent 时,在当前 iframe 页面的父级页面中进行跳转)
  • xxx:xxx 为自定义的 window 的 name

    作用:如果有一个叫做 xxx 的窗口,就在该窗口进行跳转,如果没有 xxx 窗口,则新开窗口进行跳 转,同时给新开的这个窗口命名为 xxx。

    优点:实现重复利用同一个窗口打开不同的页面。

    //在页面点击【百度】超链接时,新开一个窗口进行跳转,并将窗口命名为 xxx
    //可在控制台输入:window.name 验证窗口名称
    //此时在页面点击【谷歌】超链接时,也在该新开的窗口 xxx 进行跳转
    百度
    谷歌
  • xxx:xxx 为 iframe 的 name

    作用:在 ifram 页面中打开链接页面。

download

作用:下载页面,但很多浏览器不支持,了解即可。

rel=noopener

作用

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

iframe 标签

现在已经很少使用。

table 标签

基本格式


    ----头部,放置标题,可省略
    
      ----行
      
      ---标题单元格
      
      ---数据单元格
    
  ---身体部分,放置数据内容,必填
  
  ---脚部,可省略

示例

英语 翻译
hyper 超级
targer 目标
blank 空白
111 111

相关样式

table-layout

取值
  • auto

    根据单元格的内容自动计算表格行和列的宽高,内容不同,宽高不同。

  • fixed

    根据单元格的内容自动计算表格行和列的宽高,尽量保持各行各列平均分配宽高。

border-collapse

控制 border 是否合并

border-spacing

table 的 tr 和 td 之间默认有间距,border-spacing 可以控制 border 之间的距离,通常我们设置为 0。

img 标签

作用

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

一只dog

属性

src

源路径,填写图片的存放位置及路径

alt

若图片加载失败,则展示 alt 设置的内容

height

设置图片的高度,若只设置高度,则宽度自适应。

width

设置图片的宽度,若只设置宽度,则高度自适应。

注:若图片宽高都设置,但设置的并非图片本来的宽高,会导致图片变形,一定不能让图片变形。所以建议宽高设置一个即可。

事件

onload

图片加载成功触发的事件

onerror

图片加载失败触发的事件



  
    
    
    Document
  
  
    一只dog
    
  

响应式

max-width: 100%;

设置最大宽度为当前屏幕宽度的百分之百,则页面拖拽或者不同手机都可以自适应宽度。



  
    
    
    Document
    
  
  
    一只dog
    
  

可替换元素

https://developer.mozilla.org...

form 标签

作用

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

注:一个 form 表单,必须包含一个 type=“submit”的 input 或者 button 按钮

属性

action

控制请求哪个页面

method

控制请求方式是 get 还是 post

autocomplete

设置自动填充

  • on-自动填充
  • off-不自动填充

target

设置请求的页面在哪个页面打卡



  
    
    
    Document
  
  
    

事件

onsubmit

作用:当用户点击提交时触发的事件。

input 标签

作用

让用户输入内容

属性

  • type
  • name
  • autofocus
  • checked
  • disabled
  • maxlength
  • pattern
  • value
  • placeholder


  
    
    
    Document
  
  
    text:
    
    
color:
password:
radio:
checkbox: 爱好1 爱好2 爱好3
file:
hidden:
textarea:

select:
submit: button:

事件

onchange

当用户输入改变时,触发事件

onfocus

当用户将鼠标集中在某个标签上时,触发事件

onblur

当用户将鼠标移出时,触发事件

验证器

HTML5 新增功能
例如:


//require 就是一个自带的验证功能,若上面的文本框为空,则提交时提示不能为空。

注意事项

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

其他输入标签

select+option

select:


textarea

textarea textarea:



 

label

其他标签

video

audio

canvas

svg

注意事项

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

你可能感兴趣的:(html)