《尚学堂html+css+javascript教程课件》由会员分享，可在线阅读，更多相关《尚学堂html+css+javascript教程课件（93页珍藏版）》请在金锄头文库上搜索。
1、尚学堂 手把手教程http:/版权所有：尚学堂科技JAVA V3.0 http:/HTMLWEB第一语言手把手教程版权所有：尚学堂科技http:/尚学堂课程内容及学习周期 HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 在不是很熟悉HTML的情况下， 学习加练习的时间应该在48个小时 对于已经熟悉HTML的读者可以略过 本章 本章内容针对程序员进行设置，不是 培养设计师手把手教程版权所有：尚学堂科技http:/尚学堂HTML简介 Hyper Text Markup Language 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记显示内容)
2、来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3C IETF Internet Engineering Task Force HTTP协议 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C World Wide Web Consortium (www.w3.org) HTML XML等 XHTML 符合XML标准的HTML DHTML Dynamic HTML （X）HTML / CSS / JavaScript的综合运用手把手教程版权所有：尚学堂科
3、技http:/尚学堂HTML语法标记 标记(标签或元素)的形式 内容 Eg. 文字 Eg. Eg. 位于尖括号内，可以具有属性值 属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合XHTML ） 有开始必须有结束(XHTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯，推荐都用小写手把手教程版权所有：尚学堂科技http:/尚学堂Html文档结构 典型HTML我会努力的！ 01.html手把手教程版权所有：尚学堂科技http:/尚学堂head中的常用标签 文字 “文字”将显示在浏览器标题栏上 ：用于设置一些头信息 定义CSS格式 用于定义脚本，Eg. Javascript“h
4、ttp-equiv“指明下面 要设置的项目 “content“指明该项目 设置的内容02.html标签手把手教程版权所有：尚学堂科技http:/尚学堂 色彩值 “#rrggbb” Eg. 红绿蓝数字值 body其他属性 text link alink vlink bgcolor leftmargin topmargin03.html04.html手把手教程版权所有：尚学堂科技http:/尚学堂锚点标签- 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名 字，别人可以用这个名字直接链接到该文件的这个位置手把手教程版权所有：尚学堂科技http:/尚学堂链接标签- 超级链接，跳转到
5、另一文件 文字 当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定 target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识 Target 见“框架“部分05.html 06.html手把手教程版权所有：尚学堂科技http:/尚学堂路径问题 本地路径 “c:dir1dir2“ 绝对路径 “http:/ 相对路径 “images/01.jpg“ “/images/01.jpg“ “/images/01.jpg“ = “http:/mysite/images/01.jpg Eg. Eg.
6、07.html相对于URL地址手把手教程版权所有：尚学堂科技http:/尚学堂URL URI URN URL Uniform Resource Locator（统一资源定位符） 网络协议 主机名 端口号 资源名（定位标记） http:/:80/index.html#top 带有参数的url 及 url编码问题 见Servlet / JSP部分 URN Uniform Resource Name 持久可用的资源标准名称 例如邮箱名 URI Uniform Resource Identifier 包含URL和URNURI_URL_URN.html手把手教程版权所有：尚学堂科技http:/尚学堂分隔
7、线- 语法 Size 高度 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色 Eg. 08.html手把手教程版权所有：尚学堂科技http:/尚学堂标题字体大小- #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 最大 最小09.html手把手教程版权所有：尚学堂科技http:/尚学堂字体设置 face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36（pixels） Color可以使用预定义的名字,也可以使用数字 red、blue、black 通常是打字机风格字体 通常是引用方式（斜体） 强调
8、（通常是斜体加粗体）10.html手把手教程版权所有：尚学堂科技http:/尚学堂设置文字显示名称HTML代码黑体斜体下划线中划线闪烁上标下标11.html手把手教程版权所有：尚学堂科技http:/尚学堂特殊字符空格 copyright 商标 “12.html可以使用手把手教程版权所有：尚学堂科技http:/尚学堂文字的布局 分段落现实 分块显示 符号列表 数字列表 换行 不换行 保留原有格式 跑马灯效果 13.html手把手教程版权所有：尚学堂科技http:/尚学堂对齐align 取值:left right center top middle bottom 对齐到中间14.html手把手教程
9、版权所有：尚学堂科技http:/尚学堂图片 Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom 图文混排时用于和图片的对齐15.html图片与链接 见DreamWeaver演示 手把手教程版权所有：尚学堂科技http:/尚学堂表格重点掌握 %或像素值表头（可选 ）单元格top middle bottom跨行跨列16.htmltable的属性： bgcolor border bordercolorlight bordercolordark cellspacing cellpadd
10、ing width height手把手教程版权所有：尚学堂科技http:/尚学堂表单重点掌握 作用 收集用户信息 数据库查询 收发email 用户不仅仅是信息的被动接受者，还可以通过表单成为信息 的主动发出者手把手教程版权所有：尚学堂科技http:/尚学堂表单基础- 的属性 Method (get post) Get 发送较少数据（256byte），显示在url中，url/userinfo?username= 张三 属性2:值2 01.html手把手教程版权所有：尚学堂科技http:/尚学堂CSS的调用方式 在Head中调用(01.html) 在Body中调用(02.html) 调用css文件
11、(03.html/03.css) CSS的优先级问题 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准手把手教程版权所有：尚学堂科技http:/尚学堂CLASS font-family:serif P A 06_2.html 注释： /*这是注释*/手把手教程版权所有：尚学堂科技http:/尚学堂字体属性属性含义属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighterfont-size字体大小absol
12、ute、relative、%color字体颜色颜色值例：07.html手把手教程版权所有：尚学堂科技http:/尚学堂颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x | repeat-y | no- repeatBackground-attachment背景的滚动Scroll | fixBackground-position背景图案初始位置% | n em | top | left | right | bottom 例：08.html手
13、把手教程版权所有：尚学堂科技http:/尚学堂文本属性属性含义属性值word-spacing单词间距n emletter-spacing字母间距n emtext-decoration装饰样式underline| overline| line-through| blinkvertical-align垂直方向位置sub| super |top |text-top| middle| bottom| text-bottomtext-transform转为其他形式capitalize| uppercase| lowercasetext-align对齐left| right| center| justifytext-indent缩进n em| %line-height行高pixels、n em、%例：09.htmlEm:12pixels 的 M 常用于印刷的单位手把手教程版权所有：尚学堂科技http:/尚学堂装饰超链接 伪类选择符 对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html手把手教程版
