《语义化web设计html培训教材》由会员分享，可在线阅读，更多相关《语义化web设计html培训教材（62页珍藏版）》请在金锄头文库上搜索。
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 class
2、,在xhtml中，,和都是必须的标签。 必须设置标签的xmlns属性，且其值为http:/www.w3.org/1999/xhtml 所有元素都必须结束。 所有标签都必须小写。 任何属性值必须用单引号/双引号引起来。 所有属性必须有值。 “&”符号必须编码。& - &,our titleour content, 当需要利用HTML在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写XHTML时。,- doctype申明将指示使用哪一类的文档定义类型（Document Type Definition ,DTD）。其中xhtml1.0一共有三种可用的doctype。,需要干净的标记
3、，避免表现上的混乱。请与层叠样式表配合使用。, 需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。,our titleour content,our titleour content,- title是标签中唯一的强制元素。而meta是用来在HTML文档中模拟HTTP协议的响应头报文。,our title ,X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的， 这个区别与content=“IE=7”在无论页面是否包含指令，都像是使用 了 Windows Internet Explorer 7的标准模式。而content=“IE=EmulateIE7
4、”模式遵 循指令。对于多数网站来说，它是首选的兼容性模式。 目前IE8尚在测试版中，所以为了避免制作出的页面在IE8下面出现错误，建议直 接将IE8使用IE7进行渲染。也就是直接在页面的header的meta标签中加入如下代码：这样我们才能使得页面在IE8里面表现正常！,our title ,our content , 首页 ,h1h6在各个浏览器下的预置状态并非统一表现。可以尝试用css进行统一的格式化。,标题标题标题标题标题,P是段落标记，带有换行属性，合理利用提高效率和结构组织。当然br也不能就此歇菜掉。,段落标记，知道了。 ,blockquote: 是块级引用，而 是行内引用。cite
5、属性来制定其来源。 当然不推荐使用。 ,列表一 列表二 列表三 ,列表一 列表二 列表三 ,Dl列表中，Dt作为标题用，dd是列表元素内容,用户体验部视觉组交互组前端组 ,Title属性作为鼠标移动至超链接上时候提示的内容。,西风坊,删除的文本删除的段落添加的文本添加的段落 ,斜体显示文本 粗体显示文本 电传机字体或者等宽字体文本 字体变大 字体变小 内容中间划条线 内容下面划条线,前面留空白 e=mc2 H2O,要强调的文本 要更加强调的文本,这是一个引用 苹果是这样定义的。苹果有,var a = “hello”;document.write(a+“world”);hello worldPr
6、ess a to continue,日历 类似Excel那样的电子数据表 统计图形 日常安排表 ,表格标题单元头单元尾内容内容,form action method enctype accept accept-charset name, text:文本输入框 password：密码输入框 file：文件上传 checkbox：复选框 radio：单选框 hidden：隐藏输入 reset：重置 submit/image：提交,按钮 文本域菜单选项1菜单选项2 ,fieldset legend label,会员注册用户名 用户名,DIV+CSS ?,贷款首页最新活动,12 ,贷款首页最新活动12
7、list_name ,贷款首页最新活动成功秘笈贷款群英贷款论坛专家博客热门资讯贷款问答,贷款首页最新活动 成功秘笈 贷款群英 贷款论坛 专家博客 热门资讯 贷款问答 ,Table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格则通过gif等进行占位来实现，最终的结构是一个复杂的表格，不利于设计和修改。,1、结构复杂，冗余多，下载速度慢 2、表现样式和结构混杂在一起，维护不方便 3、毫无语义，对搜索引擎不友好 4、可重用性低 5、嵌入javascript等其他效果困难,缺点,首页关于阿里巴巴管理层banner公司概况管理层文化和价值观高级管理层卫哲 首席执行官卫
8、哲为本公司执行董事兼首席执行官。,利器应用,Firebug Ietester Expression web super preview Ie8 开发人员工具,Firebug简介,本人最为顺手的前端调试工具，比较快捷、准确，有实时调试更、改各个元素属性的强大功能。可谓是前端人员不可或缺的一把利剑。当然美工人员用它做即时的再更改最为直观。,Ietester,专为IE家族打造的多版本IE浏览器共存需要，所实现的一揽子方案。有了她，则可以在一台机器上同时拥有至少IE5.5IE8多个版本。,Expression web super preview,此宝贝目前尚处于beta阶段，她可是个很有前途的前端之星，光看名称也许您会比较陌生，但是提起她的出处，则是无人不知无人不晓，她是来自全球人都知道的微软公司。 广告语：大品牌、微软造、实惠不要钱，您瞅准咯BETA版。,Expression web super preview,Ie8 开发人员工具,
