【宁远学堂】前端课程_第二期：HTML 高级应用培训.ppt

HTML 高级应用培训 宁远学堂 主讲：许国英（产品部经理） 日期：2012.3.2 产品部培训第 2 期 课程目标 熟悉常用HTML元素的语义结构及应用场景； 理解块状元素与行内元素的区别； 掌握常用元素的属性设置 理解对象-属性-事件模型 熟悉常用HTML元素的事件设置 目录 一、HTML 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结 HTML介绍 HTML 是前端开发的基础，前端以HTML 为结构，CSS为样式显示，javascript进行行为控制，将前端打造成为艺术与逻辑相结合的综合性岗位； 语义化标签 HTML CSS JS 原义合理应用 精妙的技巧 艺术的呈现 严谨的逻辑 软件工程学的设计 HTML标签细分 HTML 细分：不同维度 HTML标签：显示方式区别 块状标签 行内标签 包含内容 可以包含块及行内元素 不能包含块状及行内元素 显示区域 默认显示一行，新增元素另起占一行 默认显示内容区域的大小，新增的紧随其后 对齐方式 可给标签内的文本设置对齐方式 不能给标签内的文本设置对齐方式 典型标签 div/div,p/p span/span,a/a 效果举例 div style=“text-align:right” 这是一个块元素 /div span style=“text-align:right” 这是一个行元素 /span HTML标签：单双标签区别 单标签： 有一个标签组成，如br / hr / ? 双标签： 由“开始标签”和“结束标签”两部分构成，必须成对使用，如p/p,p是开始标签，表示一个段落的开始，/p是结束标签，表示一个段落的结束 目录 一、HTML 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结 HTML标签细分 HTML 标签：页面结构 HTML标签介绍：页面结构类标签 Q: HTML基本的页面结构是怎么样的？ Q:常用的HTML文档类型有哪些？ Q:在页头中有哪些标签跟SEO 相关？ Q:如果引用网站的域名作为默认路径？ Q:如何使用自定义页头跳转标签？ 关于页面结构类的标签，你了解多少？ Q: HTML基本的页面结构是怎么样的？ A: htmlhead/headbody/body/html Q:常用的HTML文档类型有哪些？ A: 分别表示严格版本、过渡版本以及基于框架的 HTML 文档 Q:在页头中有哪些标签跟SEO 相关？ A: title/titlemeta name=keywords/metameta name=description/meta Q:如果引用网站的域名作为默认路径？ A: base href=“” Q:如何使用自定义页头跳转标签？ A: meta http-equiv=refresh content=5,/ HTML标签细分 HTML 标签：文字排版 HTML标签介绍：页面结构类标签 Q: 如何合理化使用h1-/h6元素？ Q: 同样是加粗，如何选择使用b,strong标签？ Q:同样有换行的作用，如何选择使用p或br？ 文字排版标签的技巧-1 Q: 如何合理化使用h1-/h6元素？ A: H1到H6表示页面中的关键词，以使用时有以下的注意事项！1、h1代表最重要的，h6代表相对最不重要的，因此，根据这个递减，适当安排关键词；2、h1中使用的关键词，一个页面只能出现一次；3、h1尽量靠近在html 中的body标签，越近越好，以便让有哪些信誉好的足球投注网站引擎最快的领略主题。 Q: 同样是加粗，如何选择使用b,strong标签？ A: b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，b是在html中的标签，而在xhtml中只能使用strong，后者兼容性更好。 Q:同样有换行的作用，如何选择使用p或br？ A: br是换行，p是段落。 br标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而p标记在换行的时候另起了一新的段落。 HTML标签介绍：页面结构类标签 Q: 使用链接标签的注意事项？ 1. 学会使用邮件链接：a href=mailto:nyxuwen:发送邮件/a 2. 页面链接的锚点： a href=#top回到顶部/a div id=top顶部的链接/div 3. 给链接增加 鼠标提示： a title=“点击查看刘洁的详细信息”查看/a 4. 理解链接的不同打开方式: a href=“” target=“_top/_self/_blank”/a