搜索
HTML高级应用培训宁远学堂主讲：许国英（产品部经理）日期：2012.3.2产品部培训第2期课程目标1.熟悉常用HTML元素的语义结构及应用场景；2.理解块状元素与行内元素的区别；3.掌握常用元素的属性设置4.理解对象-属性-事件模型5.熟悉常用HTML元素的事件设置目录一、HTML标签介绍二、HTML常用元素及属性介绍三、开发过程中常用的事件四、小结HTML介绍HTML是前端开发的基础，前端以HTML为结构，CSS为样式显示，javascript进行行为控制，将前端打造成为艺术与逻辑相结合的综合性岗位；语义化标签HTMLCSSJS原义合理应用精妙的技巧艺术的呈现严谨的逻辑软件工程学的设计前端HTML标签细分HTML细分：不同维度HTML标签：显示方式区别块状标签行内标签包含内容可以包含块及行内元素不能包含块状及行内元素显示区域默认显示一行，新增元素另起占一行默认显示内容区域的大小，新增的紧随其后对齐方式可给标签内的文本设置对齐方式不能给标签内的文本设置对齐方式典型标签div/div,p/pspan/span,a/a效果举例divstyle=“text-align:right”这是一个块元素/divspanstyle=“text-align:right”这是一个行元素/spanHTML标签：单双标签区别单标签：有一个标签组成，如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/htmlQ:常用的HTML文档类型有哪些？A:分别表示严格版本、过渡版本以及基于框架的HTML文档Q:在页头中有哪些标签跟SEO相关？A:title/titlemetaname=keywords/metametaname=description/metaQ:如果引用网站的域名作为默认路径？A:basehref=“”Q:如何使用自定义页头跳转标签？A:metahttp-equiv=refreshcontent=5,标签细分HTML标签：文字排版HTML标签介绍：页面结构类标签Q:如何合理化使用h1-/h6元素？Q:同样是加粗，如何选择使用b,strong标签？Q:同样有换行的作用，如何选择使用p或br？文字排版标签的技巧-1Q:如何合理化使用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.学会使用邮件链接：ahref=mailto:nyxuwen:qq.com发送邮件/a2.页面链接的锚点：ahref=#top回到顶部/adivid=top顶部的链接/div3.给链接增加鼠标提示：atitle=“点击查看刘洁的详细信息”查看/a4.理解链接的不同打开方式:ahref=“”target=“_top/_self/_blank”/aQ:IMG图片元素的注意事项？1.img需要增加描述alt：2.给image增加1px边框及填充的方法文字排版标签的技巧-2HTML标签细分HTML标签：数据列表HTML标签介绍：数据列表标签UL:无序列表，li子元素显示为默认的黑色圆点，也可通过参数自定义列表的符号，常用于新闻列表展示OL:有序列表，可以在列表前增加序号，如1，2，3，4；适用于排行榜；DL:自定义列表，可以包括标题及内容，可适合用制作风箱结构；Table:表格，适合于超过两行以上的数据呈现,重点了解表格的几个属性问题：如何做1px表格？选择性应用数据列表标签属性描述tablewidth=“*px/*%”设置表格的宽度，用绝对像素值或文档总宽度的百分比tralign=“left/center/right”设置表格的间距的水平对齐（左，中，右）tablecellspacing=#设置表格边框与其内容间的距离tablecellpadding=#设置表格之间的间距tdcolspan=n设置一个表格单元格应该跨占的行数（缺省为1）tdrowspan=n设置一个表格单元格应该跨占的列数（缺省为1）th/th设置表头的样式HTML标签细分HTML标签：页面布局HTML标签介绍：布局类标签frameset/frameset：设置一个框架文件，使用此标记时不再需要body/body标记，frameset一般用于后台的管理框架；iframe/frame：在后面的页面或调用的页面中经常可见到ifrmae跨站调用,要注意框架页面的链接打开方式及框架的相互引用；常用属性如下：重点说一下frame框架属性描述framesetrows=value,value定义上下分隔的框架中的每个窗口的行数，可以使用像素值或百分比framesetcols=value,value定义左右分隔的框架中的每个窗口的行数，可以使用像素值或百分比framesrc=URL/设置框架内显示什么HTML文档framename=name/定义框架的名称，以便别的框架可以指向它frameframeborder=“value”Frame边框的粗细framesrolling=“yes/no”/框架内的页面内容超过父框架时，是否有滚动条HTML标签细分HTML标签：数据列表HTML标签介绍：表单类标签表单类元素包括:表单主体(form),输入元素（文本输入框，密码输入框，文本框,文件上传），选择输入元素（单行下拉列表，多行下拉列表，复选框，单选框），按钮元素（按钮，提交，图片按钮）现针对表单元素常用属性如下：表单是数据交互的重点元素常用属性及描述form/formform元素将所有的表单包含起来，也相应于表单的作用域；常用的属性有action:表单提交的处理程序地址；method:表单提交的方式（post/get）Name:表单的名称；id:表单的唯一值；inputtype=text“name=“Usersize=#value=x“maxlength=“20”/文件输入框Name:控制名称size：文本框的长度disabled：是否禁用readonly:只读Value：输入框的值maxlenth：最大能输入的值inputtype=“password“/密码输入框，以星号隐藏输入的内容disabled：是否禁用inputtype=checkboxname=name“checked/复选框：如果选中checked属性为真；disabled：是否禁用inputtype=“radioname=“sex“checked/单选框：如果想将两个单选框合并成为一组，那么请在命名时注意使用同一命名，单选框有选中的属性，如果选中checked值为真HTML标签介绍：表单类标签续表元素常用属性及描述selectname=name“multiple=multipleoptionselected男/option/select下拉列表元素：Multiple：如增加这个属性表示多选selected:当前选中的项目textareaname=namecols=#rows=#/textarea多行文本域cols:列数rows:行数inputtype=“hidden“/隐藏域，类似文本框，只是不可见，但是其中的内容可以提交inputtype=imageborder=“nonesrc=name.gif/创建一个使用图像的提交按钮inputtype=buttonvalue=name/创建一个按钮，可以有单击的事件；inputtype=“submit”/创建一个提交按钮，单击时直接提交表单，没有onclick事件inputtype=reset/创建一个重置按钮，点击可以清空表单的内容目录一、HTML标签介绍二、HTML常用元素及属性介绍三、开发过程中常用的事件四、小结HTML常用事件汇总HTML交互处理流程对象网页元素事件触发动机属性执行动作表单事件演示1.页面的加载和退出演示2.按钮的单击表单验证3.鼠标的移至移出事件4.文本框获得焦点事件和失去焦点事件5.文本框的抬起事件6.表单的提交事件7.下拉列表内容改变的事件以上仅为常用的事件，具体的事件详见：“”目录一、HTML标签介绍二、HTML常用元素及属性介绍三、开发过程中常用的事件四、小结小结：1.本课程设置的条件是对HTML有一定的基础，有意向前端JS开发学习的同事2.内容仅为部分重要及内容的提炼，更多内容详见具体的说明文档；3.课程的重点是讲解常用元素的属性及常用的事件；4.更多的内容在工作中不断学习，交流前端介绍HTML标准教程：资料参考：