标签 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
我是标题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
女
姓名
年龄
性别
xiaoming
12
男
anqila
16
女
ul、li 无序列表
介绍:ul 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示没有序号的列表
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
- xiaoming
- libai
- anqila
- xiaoming
- libai
- anqila
ol、li 有序列表
介绍:ol 默认自带了 margin、padding 样式,一般需要结合 li 使用,主要用于展示有序号的列表
类型:块级元素 block,盒子占用宽度为一整行
属性:没有属性
- xiaoming
- libai
- anqila
- xiaoming
- libai
- 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:展示播放器控件,样式根据浏览器决定