HTML常用标签

223 阅读3分钟

a标签

超链接标签,可以跳转到其他网页

属性

herf

href:跳转地址

href取值:

网址

https://google.com
http://google.com
//google.com

路径

/a/b/c  以及  a/b/c
index.html  以及./index.html

伪协议

javascript:代码;
mailto:邮箱
tel:手机号
#id名 // 点击跳转到id标签对应处(锚点)
​
// 常使用在href=javascript:void(0); 消除a标签跳转动作
// 或href=javascript:;
target

target:在何处打开网页

target取值:

内置名字

_blank     // 新建一个窗口打开
_top       // 在嵌套关系的最高层级窗口打开
_parent    // 在父级窗口打开
_self      // 在自身窗口打开

程序员命名

window的name   
eg:
    <a href="//baidu.com" target="bo">google</a>
    // 在一个名叫bo的窗口打开,如果没有则创建一个新窗口命名为bo并打开
    // 可以在console种通过window.name获取到窗口的名称
iframe的name
eg:
    <a href="//baidu.com" target="iFrame">google</a>
    // 在名叫iFrame的框架中打开

download:下载该网页

rel=noopener

作用

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

table标签

table:表格标签,用来存放表格

thead:表格的头部

tbody:表格的主体

tfoot:表格的底部

tr:表格的行

th:表头内容的列

td:表格内容的列

样式

table-layout:定义以何种方式去设置表格的单元格大小

值:

auto:根据内容自动设置

fixed:尽量平均分配

border-collapse:用来决定表格的边框是分开的还是合并的

值:

collapsed:合并单元之间共享边框(合并)

separated:单元格之间不共享边框(分开)

border-spacing:这是单元格之间的距离,只用于边框分离模式

img标签

作用

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

属性

alt:图片加载失败时用于代替的文字

height:图片的高度

width:图片的宽度

注意:高度和宽度只设置一个的时候另一个会根据图片原有大小进行自适应

src:图片的请求路径,可以是网络上的,也可以时服务器上的相对地址

事件

用于监听图片是否加载成功

onload:成功执行onload

onerror:失败执行onerror

用途:可以用于挽救加载失败的图片

响应式

img {
    /* 图片宽度自适应 */
    max-width: 100%;
}

form标签

作用

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

属性

action:请求地址

autocomplete:控件的值是否可被浏览器自动填充

method:请求的方式,get请求还是post请求

target:表示在提交表单之后,在哪里显示响应信息

值:

_blank // 新建一个窗口打开

_top // 在嵌套关系的最高层级窗口打开

_parent // 在父级窗口打开

_self // 在自身窗口打开

注:同样可以显示在iframe中

事件

onsubmit:提交之前触发的事件,返回值为true则提交返回值为false则不提交

input标签

作用

让用户输入内容

属性

type:执行input标签的类型

值:

button

checkbox

email

file // 上传文件 ,上传多个文件的时候要加multiple属性

hidden

number

password

radio

search // 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。

submit

color // 用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器。

tel // 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。

text

name

autofocus

checked

disabled

maxlength

pattern

value

placeholder

事件

onchange :改变的时候触发的事件

onfocus:得到焦点时触发的事件

onblur:失去焦点时触发的事件

验证器

HTML5新增功能

required:必填的

textarea标签

作用

多行文本标签,可以用于在表单中输入多行文本信息

select标签

作用

下拉选择框