HTML之常用标签及属性
标签
| 标签分类 | 标签名 | 英文 | 英文含义 | 标签类型 | 备注 |
|---|---|---|---|---|---|
| HTML页面结构 | < html> | ||||
| < head> | 头部 | ||||
| < title> | 网页标题 | ||||
| < body> | 主体 | ||||
| 常用标签 | < h1>~< h6> | 子标题 | 块标签 | ||
| < p> | 段落 | 块标签 | |||
| < font> | 字体 | ||||
| < a> | 超链接 | ||||
| < img> | image | 图像 | 空标签 | ||
| < br> | 换行 | 空标签 | |||
| < hr> | 水平线 | 空标签、块标签 | |||
| < marquee> | 滚动 | ||||
| 格式化标签 | < b> | 粗体 | |||
| < big> | 大号字 | ||||
| < em> | 着重 | ||||
| < i> | 斜体 | ||||
| < small> | 小号字 | ||||
| < strong> | 加重语气 | ||||
| < sub> | 下标 | ||||
| < sup> | supper | 上标 | |||
| < u> | 下划线 | ||||
| 列表标签 | < ul> | Unorder List | 无序列表 | 块标签 | |
| < ol> | Order List | 有序列表 | 块标签 | ||
| < li> | LIst | 列表项目 | 块标签 | ||
| < dl> | Define List | 定义列表 | 块标签 | ||
| < dt> | Define Title | 定义标题 | 块标签 | ||
| < dd> | Define Describtion | 定义描述 | 块标签 | ||
| 表格相关 | < table> | 表格 | 块标签 | ||
| < tr> | Table Row | 表行 | 块标签 | ||
| < td> | Table Data cell | 单元格 | |||
| < th> | Table Head | 表头 | |||
| < caption> | 标题 | ||||
| < thead> | 表头部分 | ||||
| < tbody> | 主体部分 | ||||
| < tfoot> | 底部业脚部分 | ||||
| 表单相关 | < form> | 表单 | |||
| < input> | 表单元素 (输入框) |
空标签 | |||
| < select> | 下拉框 | ||||
| < option> | 下拉列表项 | ||||
| < textarea> | 文本域 | ||||
| 框架相关 | < frameset> | 框架集 | |||
| < frame> | 框架 | 空标签 | |||
| < iframe> | 内嵌框架 | ||||
| 容器 | < div> | 容器标签 (块) |
|||
| < span> | 容器标签 (行内) |
属性
| 属性名 | 英文 | 英文含义 | 取值 | 应用场景 | 备注 |
|---|---|---|---|---|---|
| src | SouRCe | 资源位置 | 资源的路径 | ||
| border | 边框 | 数字(像素) | |||
| size | 尺寸 | 数字(像素) | |||
| width | 宽度 | 数字(像素) | |||
| height | 高度 | 数字(像素) | |||
| bgcolor | BackGround COLOR | 背景颜色 | 颜色值：rea或#ffffff | ||
| background | 背景图片 | 图片路径 | |||
| list-style | 设置列表的所有属性 | 列表 | |||
| list-style-image | 将图像设置为列表项标记 | None url |
列表 | ||
| list-style-type | 设置列表项标记的类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) |
列表 | ||
| line-height | 行高(行间距) | 数字(像素) | 布局多行文本 | ||
| text-align | 对齐方式 | Left、right、center | 各种元素对齐 | ||
| letter-spacing | 字符间距 | 数字(像素) | 加大字符间间隔 | ||
| text-decoration | 文本修饰 | Underline、none | 加下划线、中划线等 | ||
| margin-top (right、bottom、left) |
外边距 | 数字(像素) | |||
| padding-top (right、bottom、left) |
内边距 | 数字(像素) | |||
| display | 改变块级元素与行内元素的默认显示方式 | block(行变块) inline(块变行) none(该元素不显示在网页中) |
|||
| position | 定位 | static(静态定位) relative(相对定位) absolute(绝对定位) fixed(固定定位) |
用于定位 | ||
| float | 浮动 | None、left、right | |||
| clear | 处理浮动塌陷 | left(清除左边浮动) right(清除右边浮动) both(清除两边浮动) none(不清除浮动) |
|||
| type | 列表类型 | Disc(实心圆) Cirle(空心圆) Square(实心方块) |
用于列表 | ||
| align | 对齐 | Left、right、center top、middle、bottom |
段落内容水平对齐文字与图片垂直对齐 | ||
| type | 表单元素类型 | text(文本) checkbox(复选) radio(单选) password(密码) file(文件) submit(提交) reset(重置) button(按钮) image(图片按钮) hidden(隐藏) |
表单元素 | ||
| method | 表单数据的提交方式 | get post |
|||
| alt | 图片不显示时提示信息 | 图片 | |||
| cellpadding | 单元格内边距 | 数字 | 表格 | ||
| cellspacing | 单元格之间距离 | 数字 | 表格 | ||
| href | 跳转到文件位置 | ||||
| target | 网页打开的位置 | _blank(新窗口打开) _self(自身窗口打开) _top(以整个浏览器作业作为窗口显示新页面) _parent(在父窗口中打开新的页面) |
|||
| colspan | 单元格跨列 | 数字(跨的列数) | 表格 | ||
| rowspan | 单元格跨行 | 数字(跨的行数) | 表格 | ||
| readonly | 只读 | ||||
| value | 输入框的初始值 | ||||
| maxlength | 最大长度 | ||||
| scrolldelay | 滚动延时 | < m arquee> | |||
| direction | 滚动方向 | < m arquee |
块级标签与行级标签
| 块级标签 | 行级标签 |
|---|---|
| < div>、< h1>~< h6>、< p>、< hr>、 < ul>、< li>、< ol>、< dl>、< dt>、 < dd>、< table> |
< a>、< font>、< img>、< input>、< select>、< textarea>、< label>、< span> |
选择器
| 格式 | 选择器类别 | 备注 |
|---|---|---|
| 标签名{} | 标签选择器 | |
| .类名{} | 类选择器 | |
| #ID标识名 | ID选择器 | |
| p.red | 交集选择器 | 第一个必须是标签选择器，第二个必须是类选择器或ID选择器 |
| P,.red,#header | 并集选择器 | |
| #header ul li a | 后代选择器 | |
| 标签名:伪类名 | 特殊选择器 |
超链接伪类
| 伪类 | 英文 | 英文含义 | 示例 | 含义 | 应用场景 |
|---|---|---|---|---|---|
| a:link | a:link{color:#999} | 未单击访问时的超链接样式 | 常用，超链接主样式 | ||
| a:visited | a:visited{color:#999} | 单击访问后的超链接样式 | 区分是否已被访问 | ||
| a:hover | a:hover{color:#999} | 鼠标悬浮在超链接上的样式 | 常用，实现动态效果 | ||
| a:active | a:active{color:#999} | 鼠标单击未释放的超链接样式 | 少用，通常与link一致 |
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：Nemo
链接：https://www.cnblogs.com/blknemo/p/10553021.html
来源：博客园
