版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
HTML基本标签<html>:开始标签,以<开始,以>结束,这代表一种开始标签。<标签名>,标签在HTML一般是成对,在XML或其她标签语言中必须成对。html标签意味一份html文档的开始</html>:结束标签html标签的内容一般有两部分:head\bodyhead里有一种很重要的标签:标题title<html><head><title>标题的内容</title></head><body>页面内容</body></html>成对标签:<标签名属性名="属性值"属性名="属性值">标签内容</标签名><bodybgcolor="red"background="bg.jpg">...</body>bgcolor="red":背景色为红,颜色用单词bgcolor="#FF0000"可以用6位16进制数表达,前面2位表达红色部分中间2位表达绿色部分最后2位表达蓝色部分background表达背景图片单独标签:<标签名属性名="属性值"属性名="属性值"/>例如:<br/><hrwidth="300px/50%"align="center"size="10"noshade="noshade"/>hr:align属性表达对齐方式(有:left、right、center)默认是居中(center),width表达宽度,可以用像素或比例,size表达大小,noshade使得横线进行填充。相对途径与绝对途径:绝对途径:以驱动器开始出发达到目的地的一串地址相对途径:以目前程径为出发地达到目的地的一串地址(途径)例如:<imgsrc=”d:\myhtml\图片\1.jpg”>绝对途径<imgsrc=”图片\1.jpg”>相对途径<imgsrc=""/>获取网上的图片HTML中的注释:<!--注释内容--><p></p>:段落,段前段后都要换行,同样可以通过align设立对齐方向。注意:在html文本中不管你输入多少个空格和或者回车,网页成果只空一格,要想空多格或回车需要有特殊字符或者标签。特殊字符:>(>全称:greatthan)<(<全称:lessthan)空格( )&(&)引号(")©(©)<pre></pre>:预定义格式,可以保持html文本中的格式,把空格转为 ;把回车转为<br>.字体:<font></font>:size属性值是1~7,由小到大字体越来越大,不会换行,并且3号是正常大小的字体,color属性可以设立字体颜色,size=“+1”表达在size=“3”的基本上加大一号,“-1”<hn></hn>:h1~h6,由小到大字体是越来越小,会换行,并且h4是正常的大小字体。<i></i>:斜体字。<b></b>、<strong></strong>:粗体字。<u></u>:字体有下划线。<s></s>:字体有删除线。<marquee></marquee>:字体移动、跑马灯。<marqueedirection="right"scrollamount="50"scrolldelay="100"bgcolor="yellow"width="50%"height="100px"onMouseOver="this.stop();"onMouseOut="this.start();">与其上二流大学不如读硅谷学院</marquee>Direction:方向left、right、up、downScrolldelay:移动的速度Scrollamount:每次移动的长度onMouseOver="this.stop();"鼠标移上去就停止滚动onMouseOut="this.start();"鼠标离开就继续滚动超链接:<a></a>一般链接(内部链接、外部链接):<ahref=”要连接的网页”></a>例如:<ahref="第二个.html">链接第二个页面</a>链接本地(站点内部)的网页<ahref="">百度页面</a>链接网络上(站点外部)的一种网页<ahref="..\resource\abc.rar">下载</a>下载文献锚链接(书签链接):设立锚的链接(抛锚)<aname=”锚的名字”>文本</a>创立一种连接本网页的锚的超链接<ahref=”#锚的名字”>文本</a>例如:<ahref="#end"name="start">down</a><aname="end"href="#start">top</a>创立一种连接到别的网页的锚的超链接:<ahref="第一种.html#mao">链接第一种网页的抛锚处</a>邮件链接:<ahref="mailto:">联系站长</a>其她:<ahref="abc.txt">链接记事本</a>链接其她的文献<ahref="abc.rar">下载</a>下载文献标签的嵌套使用:<ahref=""><img src=""height="30px"width="30px"/></a>超链接的target属性:Target属性值有:_blank、_self、_top、_parent、框架的名称在默认状况下超链接的target属性是_self._self:在本窗口打开目的页面。_blank:在新窗口打开目的页面。框架的名称:在设立的框架中打开目的页面。_parent:在父窗口打开目的页面。_top:在最顶部的窗口打开目的页面。表格表格<table>行<tr>单元格<td>可选的标签:thead、tbody、tfoot、caption(表格的标题)、th(列名,居中加粗)可选标签的前面三个重要是将表格进行优化,如果表格数据诸多时,就必须所有的内容下载完毕后才干显示给顾客,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完毕。例如:<tableborder="1"> <tr> <td> 姓名 </td> <td> 年龄 </td> </tr> <tr> <td> 张三 </td> <td> 23 </td> </tr> </table>表格标签的先后顺序:table->tr->td表格中存储数据的标签是:td表格中设立Bgcolor、Background属性的优先级:td>tr>tableTable的属性:Border:边框的粗细的大小Width:表格的宽度,可以是像素和比例。Align:设立整个表格的对齐方式。Height:整个表格的高度。Bgcolor:表格的背景颜色。Background:表格的背景图片。Cellspacing:单元格之间的间距。Cellpadding:单元格中文本与单元格边框的间距。Tr的属性中有个属性valign(垂直方向的对齐方式top、bottom、middle)。表格中的跨行、跨列:Rowspan:跨行(纵向)Colspan:跨列(横向)例如:<html> <head></head> <body> <tableborder="1"width="50%"align="center"height="300px"cellspacing="10px"> <trvalign="middle"> <tdcolspan="2"align="center"> 学员信息 </td> </tr> <tr> <td> 张三 </td> <td> 23 </td> </tr> <tr> <td> 李四 </td> <tdrowspan="2"> 24 </td> </tr> <tr> <td> 王五 </td> </tr> </table> </body></html>表单表单的作用:客户端(浏览器)与服务器进行信息交互。哪些地方使用了表单?搜索、注册、登陆………..表单:<form></form>表单的元素:文本框:<inputtype="text"name="uid"size="10"maxlength="6"value="请输入顾客名"/> Type:设立标签类型。Name:给标签取个名字,可以使服务器通过名字来获得标签中的信息。Size:文本框的宽度。Maxlength:文本框中最多能输入几种字符。Value:文本框初始时的文本。密码框:<inputtype="password"name="pwd"size="15"maxlength="6"/> 单选框:<inputtype="radio"name="sex"value="male"/> 男<inputtype="radio"name="sex"value="female"/> 女注意:name属性值要相似,value属性是单选框的值。复选框:<inputtype="checkbox"name="hobby"checked="checked"/>篮球<inputtype="checkbox"name="hobby"/>音乐<inputtype="checkbox"name="hobby"/>排球<inputtype="checkbox"name="hobby"/>旅游注意:name属性值可以不相似,如果不相似服务器获取数据时需要一种一种获取,checked属性是设立复选框初始时被选中。文本区域:<textareacols="5"rows="5">本人喜欢IT行业,IT行业好前景</textarea>注意:textarea要设立初始的文本,是将文本写在标签中间,而不是通过value属性来设立,cols设立一行能显示多少个字母的宽度,rows设立可以显示多少行。文献上传:<inputtype="file"size="15"/>选择框(下拉列表):<selectsize="2"multiple="multiple"> <optgrouplabel="中国"> <optionvalue="gd">广东</option> <optionvalue="bj">北京</option> <optionvalue="hn"selected="selected">湖南</option> </optgroup> <optgrouplabel="美国"> <optionvalue="gd">纽约</option> <optionvalue="bj">华盛顿</option> </optgroup></select> 注意:size属性不是设立宽度,而是设立初始显示的选项的个数,value设立值,selected设立初始时被选中,optgroup对选项进行分组。提交按钮:<inputtype="submit"value="提交"/>将表单中的数据提交给服务器解决。重置按钮:<inputtype="reset"value="清空"/>将表单还原成初始的状态。一般按钮:<inputtype="button"value="一般按钮"/>Fieldset的使用<fieldset> <legend> 登陆 </legend> <labelfor="mytext">顾客名:</label><inputid="mytext"value="请填数据"readonly="readonly"disabled="disabled"accesskey="u"tabindex="30"type="text"/><br>密  码:<inputtabindex="1"type="password"/><br>个人简介:<textareatabindex="20"title="想填什么就填什么"></textarea></fieldset> Tabindex:用来设定按下tab键时焦点的移动顺序,数字越小越先访问。Title:用弹出式协助来给顾客提示。Accesskey:设定页面快捷键,IE为alt+accesskey属性值,FireFox为alt+shift+accesskey属性值Readonly:顾客不能修改表单控件,控件值将被传送到服务器,控件可以被鼠标和通过tab键选定。Disabled:顾客不能修改表单控件,控件值将不会被传送到服务器,控件不能被鼠标和通过tab键选定。表单的属性:Action(必选属性):表单数据要提交的页面。Method:提交数据的措施。Get(默认):数据提交,url会显示数据,不安全,并且url字符<=255,例如:file:///D:/MyHTML/表单.html?uid=aaa&pwd=123&sex=male&hobby=on Post:数据提交,url不会显示提交的数据。例如:D:\MyHTML\表单.htmlID与name属性的区别:name的值可以相似(姓名),会传给服务器,以便服务器获取数据,id一般状况下不倡导取相似的值(学号)不会传给服务器。列表和框架无序列表:<ul></ul><ultype="square"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li></ul>Type:设立无序列表的显示状况,属性值有:disc(默认,实心圆)、square(实心正方形)、circle(空心圆)。有序列表:<ol></ol><oltype="a"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li></ol>Type:设立有序列表的显示状况,属性值有:1(默认)、a、A、i、I。框架:<framesetcols="30%,*"bordercolor="red"border="10"> <framename="f1"noresize="noresize"scrolling="no"src="left.html"></frame> <framename="f2"src="right.html"></frame></frameset><noframe>对不起,您使用的浏览器不支持框架!</noframe>frameset:设立框架的布局。 Cols:纵向设计框架。 Rows:横向设计框架 Bordercolor:设立框架的边框颜色。 Border:设立边框的宽度。Frame:框架。 Src:框架中要显示的页面。 Noresize:设立不能让客户调节框架的大小。 Scrolling:设立框架中不浮现滚动条,属性值:no、yes(默认)。Noframe:如果使用的浏览器不支持框架页,就显示noframe中的文本。Iframe:可以单独的作为一种框架插入到网页中。Src用来指定内联框架中显示的网页Align设立内联框架在相邻文档中的位置Width,height设立内联框架区域的宽度和高度Frameborder设立与否有3维边框(“yes”或”no”)Scrolling设立与否有滚动条(同<frameset>)Base标签:作用:为没有涉及显示的target属性的目前文档中的每一种超链接设立一种默认目的。例如:<html><head> <basetarget="main"/></head><body><ahref="student.html">学员</a><br/><ahref="teacher.html">教师</a></body></html>层叠样式表(CSS):行内样式:语法:style=”属性:属性值;属性:属性值;…..”例如:<fontstyle="font-size:30px;color:red;font-family:宋体">这句是加了样式表的</font>和下面的类似:<fontsize="6"color="red"face="宋体">这句是加了属性的</font> 注意:其她的样式属性,请参照ftp中的“常用样式属性.txt”文献。内嵌样式:语法:<styletype=”text/css”> 选择器{属性:属性值;属性:属性值;…..}</style>分类:标签选择器、类选择器、ID选择器、伪类选择器标签选择器(HTML选择器):<styletype="text/css"> h2{color:red;text-align:center;font-style:italic}</style>类选择器:<styletype="text/css"> .myfont{color:green;font-family:隶书;font-size:50px}</style>使用的地方:<h4class="myfont">硅谷学院</h4>注意:调用类选择器样式的时候,需要在标签中加入class=“类选择器名称”。ID选择器:<styletype="text/css"> #mh{color:yellow;font-family:隶书;font-size:30px}</style><pid="mh">好好学习每天向上</p>注意:id属性为后来程序员获取标签设立的,同步也可以设立id的ID选择器样式。伪类选择器:<styletype="text/css"> a:link{color:black;text-decoration:none}//正常状况下 a:hover{color:red;text-decoration:underline}//鼠标悬浮 a:active{color:green;text-decoration:underline}//鼠标点击 a:visited{color:yellow;text-decoration:none}//访问后</style><ahref="#">超级链接</a>注意:并不是只有超链接可以设立伪类样式,其她的选择器也可以设立伪类样式,例如.myfont:link、.myfont:hover……外部样式表:作用:外部样式表其实就是将网页中的样式进行封装,一种外部样式表可以在多种网页中使用,使得样式的编写和html(页面显示)实现了分离。样式表的引入:1、<styletype="text/css"> @import"外部样式表.css"; </style>2、<linkhref="外部样式表.css"rel="sty
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- Snow-7115042064011014-2026教培艺术机构招生引流与家长沟通SOP工具包
- 2026年体育产业六月赛事赞助方案
- 我有闪光点我有闪光点
- 会计半年工作总结合集15篇
- 河北省唐山市迁安市2025-2026学年高二下学期7月期末地理试题(文字版含答案)
- 艺术管理职业规划指南
- 小水电消防安全应急预案
- EIPB技术就业前景
- 湖南省雅礼中学2025-2026学年高二下学期7月期末考试 英语答案
- 《生活科学常识课堂|发现身边的驱蚊原理知识》
- 煤矿安全生产标准化管理体系2024版与2026版对比分析报告
- 2025-2026学年-浙教版七年级下册数学期末质量检测模拟卷(含答案)
- 2026年湖南省岳阳市高一下学期期末考试数学试卷(含参考答案)
- 2026年版初中历史八年级下册复习提纲(表格型)
- 二级公共营养师《专业技能》试卷真题及解析(2026年)
- 2026年北京医师定期考核法律法规复习试题(附答案)
- 2026年高考全国一卷地理真题解析含答案
- 2025年山东省青岛市辅警考试题库(含答案)
- 焊工考试题库及焊工证模拟考试(及答案)
- 反恐怖防范安全风险评估工作指南(试行)
- 2026秋人教版九年级英语上册单词默写
评论
0/150
提交评论