语义化web设计HTML培训教材.ppt

1、语义化的web页面,HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。 HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。, web页面 example ,受益人,Spider,developer,js,css,Html,结构,显示,行为,元素（element） 标签（tag） 属性（attribute） 块级元素（block-level box） 行内元素 (inline-level box) div span id c

2、lass,在xhtml中，,和都是必须的标签。 必须设置标签的xmlns属性，且其值为/1999/xhtml 所有元素都必须结束。 所有标签都必须小写。 任何属性值必须用单引号/双引号引起来。 所有属性必须有值。 “ document.write(a+“world”); hello world Press a to continue,日历 类似Excel那样的电子数据表 统计图形 日常安排表 , 表格标题 单元头 单元尾 内容内容 ,form action method enctype accept accept-charset name, text:文本输入框

3、 password：密码输入框 file：文件上传 checkbox：复选框 radio：单选框 hidden：隐藏输入 reset：重置 submit/image：提交,按钮 文本域 菜单选项1 菜单选项2 ,fieldset legend label, 会员注册 用户名 用户名 ,DIV+CSS ?, 贷款首页最新活动 , 1 2 , 贷款首页最新活动 1 2 list_name , 贷款首页 最新活动 成功秘笈 贷款群英 贷款论坛 专家博客 热门资讯 贷款问答 , 贷款首页 最新活动 成功秘笈 贷款群英 贷款论坛 专家博客 热门资讯 贷款问答 ,Table布局的核心在于设计一个能满足版式

4、要求的表格结构，将内容装入每个单元格中，间距及空格则通过gif等进行占位来实现，最终的结构是一个复杂的表格，不利于设计和修改。,1、结构复杂，冗余多，下载速度慢 2、表现样式和结构混杂在一起，维护不方便 3、毫无语义，对搜索引擎不友好 4、可重用性低 5、嵌入javascript等其他效果困难,缺点, 首页关于阿里巴巴管理层 banner 公司概况管理层文化和价值观 高级管理层 卫哲 首席执行官 卫哲为本公司执行董事兼首席执行官。 ,利器应用,Firebug Ietester Expression web super preview Ie8 开发人员工具,Firebug简介,本人最为顺手的前端调试工具，比较快捷、准确，有实时调试更、改各个元素属性的强大功能。可谓是前端人员不可或缺的一把利剑。当然美工人员用它做即时的再更改最为直观。,Ietester,专为IE家族打造的多版本IE浏览器共存需要，所实现的一揽子方案。有了她，则可以在一台机器上同时拥有至少IE5.5IE8多个版本。,Expression web super preview,此宝贝目前尚处于beta阶段，她可是个很有前途的前端之星，光看名称也许您会比较陌生，但是提起她的出处，则是无人不知无人不晓，她是来自全球人都知道