quanshiyinian 发表于 2014-8-5 11:07:53

HTML标签及属性大全

1、HTML框架</span>
<html>
      <head>
                <title></title>
      </head>
      <body></body>
</html>
2、基本标签
标题标签,<h1></h1>,h2,h3,h4,h5,h6
段落标签 <p></p>
换行标签 <br/>
水平线标签<hr/>
加粗标签<strong></strong>
斜体标签<em></em>
特殊符号<!--注释内容-->

图像标签:<img src="图像文件名(全名)" alt="替代文本" title="鼠标悬浮提示"/>
超链接标签:
页面间链接:<a href="#" target="_blank" name=""></a>
锚链接:(本页面间的锚链接:A页面甲位置跳转到A页面的乙位置。跨页面的跳转:A页面甲位置跳转到B页面的乙位置)
功能性链接

列表:
      无序列表:<ul><li></li></ul>
      有序列表:<ol><li></li></ol>
      定义列表:<dl><dt></dt><dd></dd></dl>
表格:
      <table>
      <tr>
                <td colspan=""></td>
                <td></td>
      </tr>
      <tr>
                <td rowspan=""></td>
                <td></td>
      </tr>
      <tr>
                <td></td>
                <td></td>
      </tr>
      </table>

框架:
      框架集:<frameset cols="200,200,*">
                        <frame src=""/>
                        <frame src=""/>
                        <frameset rows="50%,*">
                              <frame src=""/>
                              <frame src=""/>
                        </frameset>
      </frameset>
      内嵌框架:<iframe src=""/>


表单:(action:表单提交的地址;method:提交的方式      get/post)
      表单元素:input(type:text文本,password密码,checkbox复选框      ,radio单选按钮,submit/reset/button/image按钮,file文件域      ,hidden隐藏域)
      select-option(下拉框和列表项)
      textarea(多行文本域)
      fieldset-legend(域和域标题)
      label(标注标签)

      表单高级用法:hidden,readonly,disabled

CSS(层叠样式表):选择器{声明1;声明2;} 举例:h1{color:red;
                                                font-size:18px;}
选择器分类:标签选择器(标签名)、类选择器(.类名)、ID选择器(#ID名)
      ID选择器>类选择器>标签选择器

行内样式: style=""
内部样式表: <style type="text/css">...</style>
外部样式表:
      1、链接式<link href="路径" rel="stylesheet"            type="text/css"/>               
      2、导入式<style type="text/css">@import url("路            径");</style>
行内样式>内部样式表>外部样式表

复合选择器:后代选择器(用空格隔开)、交集选择器(不隔开)、并集选择器(用逗号隔开)

继承:子标签可以继承父标签的样式,但是子标签不影响父标签

第五章:
CSS设置字体效果:font-size(大小),font-family(类型),font-style(风格),font-weight(粗细),font(风格 粗细 大小 类型)
CSS设置文本效果:color(颜色),text-align(水平对齐),text-indent(缩进),line-height(行高),text-decoration(装饰)
CSS设置超链接:伪类样式 a:link{未单击} a:visited{单击访问后} a:hover{悬浮} a:active{单击未释放}
顺序:link>visited>hover>active
CSS设置鼠标效果:cursor:pointer;
CSS设置背景样式:background-color(颜色),background-image(图片),background-repeat(重复方式),background-position(定位方式,水平 垂直)background(整个背景样式 颜色 图片 定位 重复方式)
CSS设置列表样式:list-style-type(项目编号类型),list-style-image(项目图片),list-style-position(定位),list-style(整个列表项 type positon image)

第六章:盒子模型
边框(border)border-color(颜色),border-width(粗细),border-style(样式:solid dashed none.....) 综合:border:width color style;
外边距(margin):margin-top:上边 右边 下边 左边;
内边距(padding):padding-top:上 右 下 左;
盒子尺寸=2*border+2*margin+2*padding+内容宽度;
显示(display):block(块级元素),inline(内联元素),none(隐藏)

第七章:浮动
float:left,right,none;
clear:left,right,both,none;
固定盒子的尺寸:overflow:visiable,hidden,scroll,auto

第八章:定位网页元素
position:static,relative(相对自己的位置,原来的文档流位置还在),absolute(相对于基准偏移,脱离了原来的文档流位置),fixed
z-index:整数(标准文档流值为0,设置了position属性后可以更改值)

页面布局的四种常用结构
div-ul(ol)-li
div-dl-dt-dd
div-table-tr-td
form-table-tr-td



页: [1]
查看完整版本: HTML标签及属性大全