《【宁远学堂】前端课程_第二期：html高级应用培训》由会员分享，可在线阅读，更多相关《【宁远学堂】前端课程_第二期：html高级应用培训（27页珍藏版）》请在金锄头文库上搜索。
1、,HTML 高级应用培训,宁远学堂,主讲：许国英（产品部经理） 日期：2012.3.2,产品部培训第 2 期,课程目标,熟悉常用HTML元素的语义结构及应用场景； 理解块状元素与行内元素的区别； 掌握常用元素的属性设置 理解对象-属性-事件模型 熟悉常用HTML元素的事件设置,目录,一、HTML 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结,HTML介绍,HTML 是前端开发的基础，前端以HTML 为结构，CSS为样式显示，javascript进行行为控制，将前端打造成为艺术与逻辑相结合的综合性岗位；,HTML标签细分,HTML 细分：不同维度,HTML标签：
2、显示方式区别,HTML标签：单双标签区别,单标签： 有一个标签组成，如 双标签： 由“开始标签”和“结束标签”两部分构成，必须成对使用，如,是开始标签，表示一个段落的开始，是结束标签，表示一个段落的结束,目录,一、HTML 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结,HTML标签细分,HTML 标签：页面结构,HTML标签介绍：页面结构类标签,Q: HTML基本的页面结构是怎么样的？Q:常用的HTML文档类型有哪些？Q:在页头中有哪些标签跟SEO 相关？Q:如果引用网站的域名作为默认路径？Q:如何使用自定义页头跳转标签？,关于页面结构类的标签，你了解多少？,
3、Q: HTML基本的页面结构是怎么样的？ A: Q:常用的HTML文档类型有哪些？ A: 分别表示严格版本、过渡版本以及基于框架的 HTML 文档Q:在页头中有哪些标签跟SEO 相关？ A: Q:如果引用网站的域名作为默认路径？ A: Q:如何使用自定义页头跳转标签？ A: ,HTML标签细分,HTML 标签：文字排版,HTML标签介绍：页面结构类标签,Q: 如何合理化使用-元素？Q: 同样是加粗，如何选择使用,标签？Q:同样有换行的作用，如何选择使用或？,文字排版标签的技巧-1,Q: 如何合理化使用-元素？ A: H1到H6表示页面中的关键词，以使用时有以下的注意事项！ 1、代表最重要的，代
4、表相对最不重要的，因此，根据这个递减，适当安排关键词； 2、中使用的关键词，一个页面只能出现一次； 3、尽量靠近在html 中的标签，越近越好，以便让搜索引擎最快的领略主题。Q: 同样是加粗，如何选择使用,标签？A: b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，是在html中的标签，而在xhtml中只能使用，后者兼容性更好。Q:同样有换行的作用，如何选择使用或？A: 是换行，是段落。标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而标记在换行的时候另起了一新的段落。,HTML标签介绍：页面结构类标签,Q
5、: 使用链接标签的注意事项？1. 学会使用邮件链接：发送邮件2. 页面链接的锚点： 回到顶部 顶部的链接 3. 给链接增加 鼠标提示： 查看 4. 理解链接的不同打开方式: Q: IMG 图片元素的注意事项？1. img 需要增加描述alt：2. 给image 增加1px边框及填充的方法,文字排版标签的技巧-2,HTML标签细分,HTML 标签：数据列表,HTML标签介绍：数据列表标签,UL:无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示 OL:有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜； DL:自定义列表，可以包括标题及内容，可
6、适合用制作风箱结构； Table:表格，适合于超过两行以上的数据呈现,重点了解表格的几个属性 问题：如何做1px 表格？,选择性应用数据列表标签,HTML标签细分,HTML 标签：页面布局,HTML标签介绍：布局类标签,：设置一个框架文件，使用此标记时不再需要标记，frameset一般用于后台的管理框架；：在后面的页面或调用的页面中经常可见到ifrmae跨站调用,要注意框架页面的链接打开方式及框架的相互引用；常用属性如下：,重点说一下frame框架,HTML标签细分,HTML 标签：数据列表,HTML标签介绍：表单类标签,表单类元素包 括: 表单主体(form),输入元素（文本输入框，密码输入
7、框，文本框,文件上传），选择输入元素（单行下拉列表，多行下拉列表，复选 框，单 选 框），按钮元素（按钮，提交，图片按钮）现针对表单元素常用属性如下：,表单是数据交互的重点,HTML标签介绍：表单类标签,续表,目录,一、HTML 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结,HTML 常用事件汇总,HTML 交互处理流程,对象 网页元素,事件 触发动机,属性 执行动作,表单事件演示,1. 页面的加载和退出演示 2. 按钮的单击表单验证 3. 鼠标的移至移 出事件 4. 文本框获得焦点事件和失去焦点事件 5. 文本框的抬起事件 6. 表单的提交事件 7. 下拉列表内容改变的事件 以上仅为常用的事件，具体的事件详见： “http:/ 标签介绍 二、HTML 常用元素及属性介绍 三、开发过程中常用的事件 四、小结,小结：,1. 本课程设置的条件是对HTML有一定的基础，有意向前端JS开发学习的同事 2. 内容仅为部分重要及内容的提炼，更多内容详见具体的说明文档； 3. 课程的重点是讲解常用元素的属性及常用的事件； 4. 更多的内容在工作中不断学习，交流,前端介绍,HTML标准教程： http:/
