HTML中必须掌握的标签,欢迎补充~

标签 tag

基础标签

div 块元素

介绍:没有任何含义,主要用于 div 进行模块布局

类型:块级元素 block,盒子占用宽度为一整行

属性:没有属性

我是模块

span 行内文本元素

介绍:没有任何含义,主要用于展示文本内容

类型:内联元素 inline,盒子占用宽度根据内容决定

属性:没有属性

我是内容

p 段落元素

介绍:默认自带了 margin 样式,主要用于展示一段内容

类型:块级元素 block,独占一行

属性:没有属性

我是第一行内容

我是第二行内容

img 图片元素

介绍:单标签、主要用于展示图片

类型:内联元素 inline,占用位置根据图片宽度决定

属性:

  • src :图片的路径
  • alt :图片加载不出来时显示的文本
  • width :图片展示宽度
  • height :图片展示高度
加载失败

h1 ~ h6 一级标题 ~ 六级标题

介绍:默认自带了 margin 和 font 样式,主要用于展示不同级别标题

类型:块级元素 block,盒子占用宽度为一整行

属性:没有属性

我是标题1

我是标题2

我是标题3

我是标题4

我是标题5
我是标题6

a 超链接

介绍:默认自带了 font 样式,主要用于展示超链接文字

类型:内联元素 inline,盒子占用宽度根据内容决定

属性:

  • href :超链接地址
  • target :窗口打开方式,_blank(新窗口)、_self(当前窗口,默认)
点我跳转

table 表格元素

介绍:一般需要结合 thead、tbody、tr、th、td 标签进行使用,主要用于展示表格

类型:表格元素 table,盒子占用宽度为一整行

属性:

  • border :表格边框
  • cellspacing :每一行之间以及每一列之间的间距
  • cellpadding :每一列的内边距
  • width :表格宽度,不设置则由内容撑开

子元素:

  • thead:表头部分
  • tbody:表主体部分
  • tr:每一行
  • th:表头中每一列
  • td:表主体中每一列
姓名 年龄 性别
xiaoming 12
anqila 16

ul、li 无序列表

介绍:ul 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示没有序号的列表

类型:块级元素 block,盒子占用宽度为一整行

属性:没有属性

  • xiaoming
  • libai
  • anqila

ol、li 有序列表

介绍:ol 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示有序号的列表

类型:块级元素 block,盒子占用宽度为一整行

属性:没有属性

  1. xiaoming
  2. libai
  3. anqila

表单标签

input 输入框

介绍:单标签、默认自带了 margin、width 样式,主要用于展示输入框

类型:行内块级元素 inline-block,盒子占用宽度根据内容决定

属性:

  • type:输入框类型
    • text:文本框
    • password:密码框
    • radio:单选框
    • checkbox:多选框
    • button:按钮
    • file:上传文件
  • value:表单值

textarea 文本域

介绍:默认自带了 padding、border、width 样式,主要用于展示多行文本输入框

类型:行内块级元素 inline-block,盒子占用宽度根据内容决定

属性:

  • rows:行数
  • cols:列数
  • placeholder:提示信息

button 按钮

介绍:默认自带了 padding、border 样式,主要用于展示按钮

类型:行内块级元素 inline-block,盒子占用宽度根据内容决定

属性:没有属性


select、option 下拉框

介绍:默认自带了 border 样式,一般需要结合 option 使用,主要用于展示下拉框

类型:行内块级元素 inline-block,盒子占用宽度根据内容决定

属性:

  • label:选项文本
  • value:选项值

多媒体标签

canvas 绘图

在 HTML5 中提供了 canvasAPI ,允许在 canvas 画布上绘制图形

ie6、7、8 不兼容




svg、path 矢量图形

介绍:默认自带了 width、height 样式,一般需要结合 path 使用,主要用于展示矢量图形

类型:内联元素 inline,占用位置根据矢量图形宽度决定

属性:

  • d:矢量图形路径

    

audio 音频

介绍:主要用于展示音频播放器

属性:

  • src:音频地址,一般使用 mp3 格式
  • loop:是否循环播放
  • muted:静音
  • autoplay:自动播放,浏览器一般都是禁止的,需要结合静音使用才能生效
  • controls:展示播放器控件,样式根据浏览器决定

video 视频

介绍:主要用于展示视频播放器

属性:

  • src:视频地址,一般使用 mp4 格式
  • loop:是否循环播放
  • muted:静音
  • autoplay:自动播放,浏览器一般都是禁止的,需要结合静音使用才能生效
  • controls:展示播放器控件,样式根据浏览器决定

你可能感兴趣的:(前端,html,css,前端,标签)