教程-HTML基础

什么是HTMLHTML是一种网页语言，使用HTML语言的文本文件能被网络浏览器读取，并呈现其内容。从本质上来说，internet网是一个由HTML文件及一系列传输协议所组成的集合。HTML是一个不断发展的标准。随着时间的推移，越来越多的标识符被加入到了HTML规范中，WorldWideWebConsortium(W3C)是保存HTML标准的机构。DHTMLDHTML就是当网页从WEB服务器下载后无须再经过服务器的处理，而在浏览器中直接动态地更新网页的内容、排版样式、动画。它是一种通过各种技术的综合发展而得以实现的概念，这些技术包括JavaScript,VB0Script,DocumentObjectModel(HTMLDOM文档对象模块)，CascadingStyleSheets(CSS样式表)等。页面中的每个HTML元素和样式都可以通过脚本语言编程来访问和控制。网页与服务器的交互示例：FORMACTION＝“/somedirectory/mypage.asp”METHOD=“POST”INPUTtype=”text”NAME=“text1”INPUTtype=”text”NAME=“text2”INPUTTYPE=SUBMITVALUE=“提交!”/FORM当你点击提交后，窗体信息将会送到在ACTION属性中指定的目的地去，送去处理的信息将会是：text1=yourfirstname&text2=yourlastname浏览器将申请发送到诸如IIS的WebServer上，WebServer将这个文件发送到一个叫做ASP.DLL特定文件中，执行表单所指定的ActiveServerPages程序（后缀名为.ASP的文档）。ActiveServerPages文件将会从头至尾被执行并根据命令要求生成响应的静态页，发送到客户端浏览器HTML元素HTML标签是用来标记HTML元素的。HTML标签被和符号包围。这些包围的符号叫作尖括号。HTML标签是成对出现的。例如b和/b。位于起始标签和终止标签之间的文本是元素的内容。HTML标签对大小写不敏感，b和B的作用的相同的。HTML标签的属性1.属性为HTML元素提供附加信息。2.属性总是以名称/值对的形式出现，比如：name=value3.属性总是在HTML元素的开始标签中规定。URL（UniformResourceLocator，统一资源定位符/器）一个完整的网址，例如：，遵守如下语法规则:scheme://host.domain:port/path/filename最流行的scheme访问file本地PC上的文件。ftpFTP服务器上的文件。httpWorldWideWeb服务器上的文件。gopherGopher服务器上的文件。newsUsenet新闻组。telnetTelnet连接。WAISWAIS服务器上的文件。访问新闻组以下HTML代码创建一个指向新闻组的链接：ahref=news:alt.htmlHTMLNewsgroup/a这个链接显示如下：HTMLNewsgroup使用FTP进行下载以下HTML代码创建一个下载文件的链接：ahref=这个链接显示如下：DownloadWinZip链接到邮件系统以下HTML代码创建一个指向您的邮件系统的链接：ahref=mailto:[e-mail]@w3school.com.cn/a这个链接显示如下：[e-mail]框架框架结构标签（框架集）（frameset）1.框架结构标签（frameset）定义如何将窗口分割为框架2.每个frameset定义了一系列行或列3.rows/columns的值规定了每行或每列占据屏幕的面积4.不能将body/body标签与frameset/frameset标签同时使用示例：framesetcols=25%,75%framesrc=frame_a.htmframesrc=frame_b.htm/frameset表格表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。tableborder=1trthHeading/ththAnotherHeading/th/trtrtdrow1,cell1/tdtdrow1,cell2/td/trtrtdrow2,cell1/tdtdrow2,cell2/td/tr/table表单和输入HTML表单用于搜集不同类型的用户输入。表单使用表单标签（form）定义，是一个包含表单元素的区域。多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。formFirstname:inputtype=textname=firstnamebrLastname:inputtype=textname=lastnamebrinputtype=radioname=sexMaleinputtype=radioname=sexFemalebrinputtype=checkboxname=bikeIhaveabikebrinputtype=checkboxname=carIhaveacar/form图像imgsrc=boat.gif区域div是块级元素，内可包含其它元素HTML字符实体显示结果描述实体名称实体编号空格  小于号<<大于号>>&和号&&引号""'撇号''CSS引言:通过使用h1、p、table这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中使创建文档内容清晰地独立于文档表现层的站点变得越来越困难。于是CSS应运而生，解决内容与表现分离的问题。什么是CSSCSS指层叠样式表(CascadingStyleSheets)：是用于（增强）控制网页样式并允许将样式信息,使用CascadingStyleSheets（CSS），你可以获取对你网页上每个元精确控制外观。样式定义如何显示HTML元素，以及在页中放置元素的位置。样式是为了解决内容与表现分离的问题，如可以创建一个通用规则,而不是将属性逐个分配给页中的每个元素。样式通常存储在样式表中，外部样式表通常存储在CSS文件中，外部样式表可以极大提高工作效率。多个样式定义可层叠为一如何将样式加入您的网页链入外部样式表文件LINKREL=stylesheetType=text/cssHREF=mystyles.css定义内部样式块htmlstyletype=text/cssbody{font:10ptArial}/stylebody内联定义pstyle=margin-left:0.5in;margin-right:0.5in这一行被增加了左右的外补丁/p样式表语法CSS语法由三部分(选择器、属性和值)构成Selector{property:value}例:H1{text-align:center;color:red;}CSS样式规则的优先级(以下4最高)1.浏览器缺省设置2.外部样式表3.内部样式表（位于head标签内部）4.内联样式（在HTML元素内部）即全局样式规则会一直应用于HTML元素，直到有局部样式规则将其取代为止。选择符HTML元素选择符类选择符例:.head2{font-size:14pt;text-align:center;color:red;}DIVCLASS=head2ID选择符例:#red{color:red;}pid=red这个段落是红色。/p选择器的分组(分享相同的声明)例:h1,h2,h3,h6{color:green;}元素派生选择器通过依据元素在其位置的上下文关系来定义样式例:listrong{font-style:italic;}只有li元素中的strong元素的样式为斜体字id派生选择器例:#sidebarp{font-style:italic;text-align:right;}class派生选择器例:.fancytd{color:#f60;background:#666;}继承及其问题根据CSS，子元素从父元素继承属性。如果你不希望被所有的子元素继承，又该怎么做呢？创建一个针对的特殊规则，这样它就会摆脱父元素的规则,例:body{font-family:Verdana,sans-serif;}p{font-family:Times,TimesNewRoman,serif;}CSS伪类、伪元素用于向某些选择器添加特殊的效果语法选择器:伪类伪元素{属性:值}例:a:link{color:#FF0000}/*unvisitedlink*/a:visited{color:#00FF00}/*visitedlink*/a:hover{color:#FF00FF}/*mouseoverlink*/a:active{color:#0000FF}/*selectedlink*/媒介类型文档可以被显示在显示器、纸媒介或者听觉浏览器等等例：style@mediascreen{p.test{font-family:verdana,sans-serif;font-size:14px}}@mediaprint{p.test{font-family:times,serif;font-size:10px}}/styleCSS属性CSS框模型（规定了元素框处理元素内容、内边距padding、边框border和外边距margin的方式背景文本字体列表表格尺寸分类定位分类属性描述clear设置一个元素的侧面是否允许其他的浮动元素。cursor规定当指向某元素之上时显示的指针类型。display设置是否及如何显示元素。float定义元素在哪个方向浮动。position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。visibility设置元素是否可见或不可见。IE行为InternetExplorer5引入了行为(behaviors)。behaviors是一种通过使用CSS向HTML元素添加行为的方法。注意：只有InternetExplorer支持behavior属性例：styletype=text/cssh1{behavior:url(behave.htc)}/style