HTML常用标签及属性

常用标签和属性标签分类标签名中文意思空标签块标签备注Html页面结构htmlhead头部title网页标题body主题常用标签h1～h6标题块标签p段落块标签font字体a超链接img图像空标签imagebr换行空标签hr水平线空标签块标签marquee滚动格式化标签b粗体big大号字em着重i斜体small小号字strong加重语气sub下标sup上标supperu下划线列表标签ul无序列表块标签Unorderlistol有序列表块标签Orderlistli列表项目块标签listdl定义列表块标签Definelistdt定义标题块标签Definetitledd定义描述块标签Definedescribtion表格相关table表格块标签tr行块标签Tablerowtd单元格Tabledatacellth表头Tableheadcaption标题thead表头部分tbody主体部分tfoot底部页脚部分表单相关form表单input表单元素（输入框）空标签select下拉框option下拉列表项textarea文本域框架相关frameset框架集frame框架空标签iframe内嵌框架容器div容器标签（块）span容器标签（行内）常用属性属性名意思取值应用场景Src资源位置资源的路径sourceborder边框数字（像素）size尺寸数字（像素）width宽度数字（像素）height高度数字（像素）bgcolor背景颜色颜色值：red或#ffffffbackgroundcolorbackground背景图片图片路径list-style设置列表的所有属性列表list-style-image将图像设置为列表项标记Noneurl列表list-style-type设置列表项标记的类型Disc（实心圆）Circle（空心圆）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、rightclear处理浮动塌陷left（清除左边浮动）right（清除右边浮动）both（清除两边浮动）none（不清楚浮动）type列表类型DiscCircleSquare1AaIi用于列表align对齐LeftcenterrightTopmiddlebottom段落内容水平对齐文字与图片垂直对齐type表单元素类型Text(文本)Checkbox（复选）Radio（单选）Password（密码）File（文件）Submit（提交）Reset（重置）Button（按钮）Image（图片按钮）Hidden（隐藏）表单元素method表单数据的提交方式getpostalt图片不显示时提示信息图片cellpadding单元格内边距数字表格cellspacing单元格之间距离数字表格href跳转到文件位置target网页打开的位置_blank（新窗口打开）_self（自身窗口打开）_top（以整个浏览器作业作为窗口显示新页面）_parent（在父窗口中打开新的页面）colspan单元格跨列数字跨的列数表格rowspan单元格跨行数字跨的行数表格readonly只读value输入框的初始值maxlength最大长度scrolldelay滚动延时marqueedirection滚动方向marquee块级标签与行级标签常见的块级标签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并集选择器#headerullia后代选择器标签名：伪类名特殊选择器超链接伪类伪类示例含义应用场景a:linka:link{color:#999;}未单击访问时的超链接样式常用，超链接主样式a:visiteda:visited{color:#333;}单机访问后的超链接样式区分是否已被访问a:hovera:hover{color:#f60;}鼠标悬浮在超链接上的样式常用，实现动态效果a:activea:active{color:#999;}鼠标单击未释放的超链接样式少用，通常与link一致