html+css+javascript教程课件ppt

HTMLWEB第一语言课程内容及学习周期HTML介绍HTML细节文件结构文字图片链接表格表单多窗口特殊字符……在不是很熟悉HTML的情况下，学习加练习的时间应该在4—8天对于已经熟悉HTML的读者可以略过本章本章内容针对程序员进行设置，不是培养设计师HTML简介HyperTextMarkupLanguage超文本(文字+图片+音视+链接…)标记语言(浏览器根据标记显示内容)来自于SGML(标准通用标记语言)专注于在Web上传递信息是写给浏览器的语言历史HTML1.0–HTML2.0(IETF制定)–HTML4.0(最终版)W3C-HTML5(未来代替HTML)•IETF–InternetEngineeringTaskForce•HTTP协议RFC等•RFC2616Http1.1RFC1521MIME•W3C–WorldWideWebConsortium()•HTMLXML等XHTML•符合XML标准的HTMLDHTMLDy’namicHTML•（X）HTML/CSS/JavaScript的综合运用HTML语法标记标记(标签或元素)的形式元素名内容/元素名•Eg.font文字/font元素名/•Eg.imgsrc=“…”/元素名•Eg.br位于尖括号内，可以具有属性值属性值必须“”或‘’，不写也可以解析，但是不推荐（不符合XHTML）有开始必须有结束(XHTML)标签不能嵌套不区分大小写但应该养成良好的编程习惯，推荐都用小写Html文档结构htmlheadtitle典型HTML/title/headbody我会努力的！/body/html!--中间的内容为注释--01.htmlhead中的常用标签title文字/title“文字”将显示在浏览器标题栏上meta：用于设置一些头信息metahttp-equiv=“content-type”content=“text/html;charset=gb2312”metahttp-equiv=“refresh”content=“3;url=”metaname=keywordscontent=yourkeywordsmetaname=descriptioncontent=yourdescriptionmetahttp-equiv=expirescontent=0metahttp-equiv=pragmacontent=no-cachemetaname=generator|author|copyrightcontent=…..style…/style定义CSS格式Scriptlanguage=“”…/Script用于定义脚本，Eg.Javascripthttp-equiv指明下面要设置的项目content指明该项目设置的内容02.htmllinkbase标签bodybodybgcolor=“#”--背景色background=img_url--背景图片/body色彩值“#rrggbb”Eg.bodybgcolor=“#ffffff”红绿蓝数字值bodybackground=“img_url”--图片地址body其他属性textlinkalinkvlinkbgcolorleftmargintopmargin…03.html04.html锚点标签--aaname=AnchorName在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置链接标签--a超级链接，跳转到另一文件ahref=“url”target=“TargetWindow”文字/a当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。连接到文件的特定部分Href=“url#point”链接到url的point部分在url文档中用aname=“point”/a标识Target见“框架“部分05.html06.html路径问题本地路径c:\dir1\dir2\…绝对路径相对路径images/01.jpg../../images/01.jpg/images/01.jpg=Eg.ahref=“”/aEg.imgsrc=“”/07.html相对于URL地址URLURIURNURLUniformResourceLocator（统一资源定位符）•网络协议＋主机名＋端口号＋资源名（定位标记）••带有参数的url及url编码问题见Servlet/JSP部分URNUniformResourceName持久可用的资源标准名称•例如邮箱名[e-mail]URIUniformResourceIdentifier包含URL和URNURI_URL_URN.html分隔线--hr语法hrsize=“pixels”align=“align”width=“pixels”color=“#”noshadeSize高度Align对齐方式，可以取left或rightNoshade无阴影效果颜色Eg.hrnoshadecolor=“#ff00ff”width=“600”size=“8”align=“left”08.html标题字体大小--h#h#…/h##=1、2、3、4、5、6按标题级别用黑体字显示标题内容自动插入空行h1最大h6最小09.html字体设置fontface=“”size=“”color=“”…/fontface定义字体size1234567•实际8101214182436（pixels）•fontsize=“+1”•fontsize=“-1”Color可以使用预定义的名字,也可以使用数字•red、blue、black…tt/tt通常是打字机风格字体cite/cite通常是引用方式（斜体）em/em强调（通常是斜体加粗体）10.html设置文字显示名称HTML代码黑体b/b斜体i/i下划线u/u中划线s/s闪烁blink/blink上标sup/sup下标sub/sub11.html特殊字符<>®注册商标&& 空格©copyright™商标™"“12.html可以使用&#xx来显示字符，xx为字符的unicode码dreamweaver&华文字的布局p…/p分段落现实div…/divspan…/span分块显示ul…/ullitype=“disccirclesquare”…符号列表ol…/olli…数字列表13.htmlbr换行nobr…/nobr不换行pre/pre保留原有格式marquee/marquee跑马灯效果blockquote/blockquotedldtdd对齐—alignh1align=“”divalign=“”tablealign=“”hralign=“”……取值:leftrightcentertopmiddlebottomcenter……/center对齐到中间14.html图片imgsrc=“”align=“”alt=“”border=“”Src图片路径，一般使用相对路径Alt图片无法显示时显示的文字Border边框的厚度Align=leftrighttopmiddlebottom图文混排时用于和图片的对齐15.html图片与链接－见DreamWeaver演示表格—重点掌握tablewidth=“”align=“”border=“”trthwidth=“”align=“”…/thth…/th…/trtrtdwidth=“”align=“”valign=“”…/tdtdrowspan=“”colspan=“”bgcolor=“”…/td……/tr/table%或像素值表头（可选）单元格topmiddlebottom跨行跨列16.htmltable的属性：bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight表单—重点掌握作用收集用户信息数据库查询收发email……用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者表单基础--formform……/formform的属性Method(getpost)•Get发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe•Post数据长度无限制，不会显示在url中Action•Form中数据交给服务器端哪个程序进行处理Eg.formmethod=“post”action=“user.jsp……/form位于表单中的输入标签位于form之中，接收用户输入格式：inputtype=“”name=“”type:•textradiocheckboxpasswordhiddenselectsubmitresetbuttontextareaimagename:•提交到服务器端的变量的名字表单中的输入标签文本框textinputtype=“text”name=“”value=“”maxlength=“”size=“”•maxlength–最大字符长度•size–文本框宽度（字符）密码区域—特殊的单行文本输入框passwordinputtype=“password”name=“”value=“”size=“”maxlength=“”单选按钮inputtype=“radio”name=“”value=checked•典型用法:同一名字，不同的值•错误的用法:不同的名字复选框inputtype=“checkbox”name=“”value=“”checked•典型的用法:同一name，不同的value隐藏域inputtype=“hidden”name=“”value=“”•不显示在网页中•通常用作向下一个页面传输已知信息或表单的附加信息select列表框selectname=“”size=“”multipleoptionvalue=“”selected…/optionoptionvalue=“”…/option……/select•Multiple表示多重列表框，可以多选•Selected被选中多行多列文本框textarearows=“”cols=“”wrap=“”…/textarea•Rows:行数•Cols:列数•Wrap:•Off:不换行•Soft:自动换行，并且如果行末有英文单词，会将整个单词移到下一行•Hard:自动换行，但会截断行末的单词中间的值会被提交所以不要含有空格buttoninputtype=buttonname=“”value=“”按下该按钮没有反映inputtype=submitname=“”value=“”按下该按钮，该form中所有的输入信息将被提交到服务器inputtype=resetname=“