本文共 7594 字,大约阅读时间需要 25 分钟。
Leftmargin topmargin用来调整链接或文字位置 Text用来调整字体颜色 <XMP><a href="http://www.baidu.com">点击进入百度页面</a> 添加链接</XMP> alink点击时链接 link当前显示链接 vlink点击后链接 主要用来控制链接字体的颜色 bgcolor用来设置背景颜色 background用来设置背景图片(GIF、JPG) background=fixed使背景图片成固定效果,不随滚动条滚动 HTML定义了6级标题,1-6级,标题文字随级数增大而减小 通过align来控制文本出现的位置,属性值有3种,分别为left、center、right 文字设置 <XMP> <B>设置文字以粗体方式显示,语法<B> </B> <I>设置文字以斜体方式显示,语法<I> </I> <EM>效果同<I>,语法<EM> </EM> <SUP>设置文字以上标文本方式显示,语法<SUP> </SUP> <SUB>设置文字以下标文本方式显示,语法<SUB> </SUB> <U>设置文字以下划线方式显示,语法<U> </U> <S>设置文字以删除线方式显示,语法<S> </S> </XMP> FONT控制字体,大小,颜色 <XMP><FONT face="字体" size="大小" color="颜色值"></FONT></XMP> 段落设置 <XMP> <P>段落标记,一般情况下在每个段落的前面加一个<P>标记既可以区分段落,又可以换行 <BR>之后的文字在下一行显示 <HR>设置水平线 <center>标记所有包含的内容,将以居中对齐的方式显示在网页中 <PRE>标签可以把原文件中的空格、回车、换行、Tab键表现出来 <NOBR>标记将取消浏览器由于窗口大小变化而换行 <XMP>在HTML文档中加入<XMP>标记,使标记内的HTML标记不起作用 <代表<,>代表> </XMP> <XMP> <MARQUEE>标记可以使文字产生跑动的效果 direction 文字跑动的方向 bgcolor设置文字背景颜色 height设置文字跑动的高度 width设置文字跑动的宽度 hspace设置文字的水平边距 vspace设置文字的上边距 behavior设置文字的运动方式(scrol/alternate/slide) loop设置文字跑动的圈数 scrollanount设置跑动文字的移动速度 scrolldelay设置跑动文字的移动延时 </XMP> HTML超链接 <XMP> 格式<A>这是一个链接</A> href设置超链接目标地址URL(全球资源定位) name在html文档中建立特定位置的名称 target设置被链接的网页打开时的窗口_blank/_parent/_self/_top acceskey设置超链接的快捷键 title设置超链接的说明文字 style运用css样式设置超链接的文字样式 利用这些属性可以设置锚点(返回顶部之类) </XMP> HTML列表 列表分为三种类型:有序列表、无序列表和自定义列表 有序列表使用编号来记录项目的顺序,无序列表使用项目符号来记录无需的项目,自定义列表由两部分组成:定义条件和定义描述 <XMP> 有序列表: <OL type="编号样式"(默认为阿拉伯数字1) start="编号起始值"> <li>项目一</li> <li>项目二</li> </OL> </XMP> type 1 阿拉伯数字 a 英文小写 A 英文大写 i 罗马小写数字 I 罗马大写数字 start编号样式的起始数字,如:编号样式设为A,起始值设为2,则列表的起始值为B <XMP> 无序列表: <UL type="编号样式"(默认为圆点disc) > <li>项目一</li> <li>项目二</li> </UL> </XMP> type circle 空心圆 disc 圆点 square 正方形 <XMP> 自定义列表: <DL> <DT>用于定义列表</DT> <DD>用于解释名词的列表,包含两个层次,一是名词,一是名词的解释</DD> </DL> </XMP> HTML表格: 格式: <XMP> <table> <tr><td>表格中第一行第一列数据</td><td>表格中第一行第二列数据</td></tr> <tr><td>表格中第二行第一列数据</td><td>表格中第二行第二列数据</td></tr> </table> </XMP> <XMP> <table>标签的属性: border 设置表格边框 caption 设置表格标题 align 设置表格在网页中的布局 width 设置表格宽度 height 设置表格高度 cellspacing 设置表格各单元格之间的距离 cellpadding 设置单元格内部与文本之间的距离 bordercolorlight 设置表格亮面颜色 bordercolordark 设置表格暗面颜色 </XMP> <XMP> <tr>标签属性: bgcolor 设置行背景颜色 align 设置行对齐方式 valign 设置单元格垂直对齐方式 </XMP> <XMP> <td>和<th>标签属性: bgcolor 设置单元格背景颜色 rowspan 设置单元格所占行数 colspan 设置单元格所占列数 align 设置对齐方式 valign 设置单元格垂直对齐方式 width 设置单元格宽度 height 设置单元格高度 </XMP> <XMP><th>用来表示数据的名称</XMP> HTML特殊表格 rules 设置单元格的特效 fieldset 设置特殊表格 HTML表单 格式: <XMP> <form name="f1" action="处理表单用的URL" method="get或post"> </form> </XMP> 1. name: 设置表单的名称 2. action: 设置表单的表单的处理程序的URL 3. method: 提交表单的方法 输入域<input>一般在表单中使用 <XMP> 1.<input type="text"/>输入单行文字 size属性为宽度,value为默认值,maxlength为可输入的最大长度,readonly为只读,该属性值只有一个,即readonly; 2.<input type="password"/>输入密码 3.<input type="radio"/>单选按钮 利用name属性进行分组,相同name值为一组; 4.<input type="checkbox"/>多选按钮 checked属性表示选中,属性值只有checked 5.<input type="image"/>图片 使用src属性指定图片地址,用来实现美化的“登录按钮”; 6.<input type="file"/>文件上传 使用file,则form的enctype必须设置为multipart/form-data,method属性设为POST; 7.<input type="hidden"/>隐藏域 8.<input type="reset"/>撤销按钮 9.<input type="submit"/>提交按钮 通过value值来改变现实的文本; 10.<input type="button"/>普通按钮 通过value值来改变现实的文本; </XMP> <XMP> <textarea>标签 多行文本输入标记格式: <textarea name="t1" rows=x cols=y> ...... </textarea> </XMP> name 设置识别名称 rows 设置文本域的行数 cols 设置文本域的列数 disabled 设置文本为禁用 warp 设置为off不换行 <lable>标签 在<input type=”text”/>前可以写普通的文本来修饰,但是单击修饰文本时input并不会得到焦点,而用lable标签则可以; for属性指定要修饰的空间的id; 为被修饰的空间设置一个唯一的id; <XMP><lable for id=”name”>姓名</lable> <input id=”name” type=”text”/></XMP> <XMP> <filedset>标签 类似WinForm中的GroupBox效果,将控件划分一个区域,看起来更规整; <filedset> <legend>要显示的属性值</legend> <input type=”…”/> </filedeset> </XMP> 选择域<select> 用来创建类似于WinForm中的ComboBox或者ListBox; 如果size属性大于1就是ListBox(size值为显示出来的列表数量),否则就是ComboBox,默认为ComboBox; 通过select的multiple属性(multiple只有一个属性值)可以设置多选的ListBox; 格式: <XMP> <select name=selectname> <option selected>选项一</option>表示该项已选中 <option> 选项二</option> ..... </select> <select name=selectname> <optgroup lable=“分组名”>使选项更清晰 <option selected>选项一</option>表示该项已选中 <option> 选项二</option> …… </optgroup> </select> </XMP> HTML的框架 使用框架可以划分页面 格式: <XMP> <head> <frameset cols="20%,80%"> <frame src=A.html> <frame src=B.html> </frameset> <body> </body> </head> </XMP> frameset标签属性 cols 设置列的大小 rows 设置行的大小 frameborder 是否显示边框 yes/no,1/0 framespacing 设置分割条大小 <frame>标签属性 src设置要链接的HTML文件 name 窗体的名称 marginwidth 设置窗口左右边界的距离 marginheight 设置窗口上下边界的距离 scrolling 设置窗口是否使用滚动条yes/no,默认使用auto,即窗口有滚动条使使用滚动条,没有滚动条时不使用滚动条 noresize 不能调整窗口大小 HTML iframe标签 使用格式: <XMP> <iframe src=URL name=iframename> ... </iframe> </XMP> src 设置要链接的HTML文件 frameborder 是否显示边框yes/no,1/0 width 设置宽度 height 设置高度 scrolling 设置窗口是否使用滚动条yes/no,默认为auto HTML不把“ ”当空格,因为HTML中经常有缩进,如果把缩紧的空格在浏览器中以空格的形式展现,排版会很麻烦; <小于号 >大于号 空格符 相对URL:表示对当前文档的资源,“/”表示网站根目录,“../”表示父目录,“./”或者不写任何斜线便是相对于当前路径的目录,站内引用最好用相对URL,这样域名改变了、目录改变了都不受影响; <XMP> <image src=”../images/csharp.jpg”/>表示父目录下查找 < image src=”/images/csharp.jpg”/>表示根目录下查找 </XMP> <image>标签 Src指向的文件,图片是链接的,不是插入的,当src指向的文件不存在了,图片就看不了了; Title鼠标放上去显示出来的文字 Alt属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示“点击查看大图”; Border属性指定边框,属性值为0时不显示边框; Width、height属性指定现实的图片大小,如果不指定则是图片的原始大小; 最好指定Width、height,哪怕是原始尺寸大小,因为如果不指定大小,图片会不占位置,图片下载后才调整大小,会造成页面很乱; CSS(层叠样式表) 用来美化页面,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部三种使用方式。CSS是描述元素的皮肤! 元素内联,直接将样式写在元素的style属性中 <XMP> <input type=”text” style=”background-color:red”/>适用于样式没有可重复性的场合 页面嵌入:在head中加入 <style type=”text/css”> Input{background-color:red} 要设置的样式… </style> </XMP> 表示页面中所有的input都采用指定的样式。适用于样式重复,减少页面体积; 外部引用,将css内容写入css后缀文件 Textarea{ background-color:red} 然后再页面中引用,在head中加入 <XMP><link type=”text/css” rel=”styleheet” href=”s1.css”/></XMP> 适合于多个页面共享css。 Div(层) 层:<Div></Div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等。类似于WinForm中的Panel; Span(块) Div是将内容放到一个矩形的区块中,会影响布局,而span只是将一段内容定义成一个整体操作,但不影响布局显示; 常见样式: Css计量单位:css中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等。Width:20px Background-color:red;背景颜色,color:文本颜色 Border-style:solid;边框风格(默认没有边框),还有dotted(点)等值; Border-color:边框颜色;border-width:边框宽度(默认为0)。 例:style=“border-color:red;border-width:1px;border-style:dotted;” Display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素前后会带有换行符。)、inline(显示为内敛元素,元素前后没有换行符)等。 Cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、text(输入bean)、wait(忙沙漏)、help(帮助)等。 LI不显示圆点:LIST-STYLE-TYPE:none;一般设在li或者ul上 应用:图片:不显示边框,见备注 样式选择器 对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合于哪些元素,三种:标签选择器、class选择器和id选择器。 标签选择器: <XMP>input{border-color:yellow;color:red}</XMP>,对于指定的标签采用统一的样式 class选择器: 以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格 <XMP> .warning{blockgroud:yellow} .highlight{font-size:xx-large;cursor:help;} <table> <tr> <td class=”highlight”>你好</td> <td class=”warning”>我好</td> <td class=”highlight warning”>大家好</td> </tr> </table> </XMP> 标签+class选择器 Class选择器也可以针对不同的标签有不同的样式,只要在样式名前加标签名即可。 <XMP> Input.accountno{text-align:right;color:red;} Label.accountno{font-style:italic;} <input class=”accountno” type=”text” value=”Hello”/> <label class=”accountno”>Hello</label> </XMP> Id选择器 为指定id的元素设定样式,id前加# <XMP> #username { Font-size:xx-large; } <input id=”username” type=”text” value=”aaaaaaaaa”/> Style、class可以同时组合使用 <input id=”username”class=”accountno” style=”font-size:xx-large” type=”text” value=”aaaaaaaaa”/> </XMP> 关联选择器: <XMP> P strong{background-color:yellow} 表示P标签内的strong标签内的内容使用的样式 <strong>aaaaaaaa</strong> <p><strong>bbbbbbb</strong></p> </XMP> 组合选择器,同时为多个标签设定一个样式 <XMP> H1,H2,input{background-color:yellow} <h1>nihao</h1> <input type=”text” value=”test”/> </XMP> 伪选择器,为标签的不同状态设定不同的样式; A:visited;超链接点击过的样式; A:active;选中链接时的样式; A:link;超链接未被访问时的状态; A:hover;鼠标移到超链接时的状态; A:visited{TEXT-DECORATION:none} A:active{TEXT-DECORATION:none} A:link{TEXT-DECORATION:none} A:hover{TEXT-DECORATION:none} 多套用指定格式;转载地址:http://jtxgi.baihongyu.com/