3HTML基础.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,2019/12/3,3-HTML,基础,HTML5-,过去现在和未来,2015 Spring,xian,本章内容,超文本标记语言,HTML,概念,HTML,文档结构,HTML,通用元素,Section,段落元素,语义结构元素,超文本标记语言,超文本标记语言,HTML,超文本标记语言,为了描述的标记,文档结构（语义标记）,格式（显示标记）,看起来像：,一个,Word,文档,标记的,tag,标签提供了页面内容结构的信息,HTML,文档包含许多标签,创建,HTML,页面,HTML,文档必须为,.htm,或,.html,文件扩展名,HTML,文件能够由文本编辑器创建：,Notepad,Notepad+,Sublime Text,或者,HTML,编辑器（所见即所得编辑器）：,Microsoft WebMatrix,Microsoft Expression Web,Microsoft Visual Studio,Adobe Dreamweaver,HTML,过去，现在，未来,1991 HTML,首先提及,Tim Berners-Lee HTML,标签,1993 HTML(,第一个公开版本,在,IETF,发行,),1993 HTML 2,起草,1995 HTML 2 W3C,1995 HTML 3,起草,1997 HTML 3.2 “Wilbur”,1997 HTML 4 ”Cougar”CSS,1999 HTML 4.01(,最终,),2000 XHTML,起草,2001 XHTML(,最终,),2008 HTML5/XHTML5,起草,2011 HTML5,特性完成,en.wikipedia.org/wiki/HTML5,HTML,术语,标签，属性和元素,HTML,术语,HTML,中的概念,Tag,标签,起始标签和关闭标签,HTML,最小片段,Attribute,属性,标签的属性,大小，颜色，等,Element,元素,由起始标签，关闭标签和特性组成,HTML,标签,标签是,HTML,文档中最小片段,开始于,两类标签,起始,标记了,HTML,元素,的开始,结束,标签了,HTML,元素的结束,以,/,开始,Hello Pesho!,属性,属性是,HTML,元素的属性,用于设置大小，颜色，边框，等,直接放在标签中,用,或,围绕着值,值总是一个字符串,go to Google,多数通用属性,有一些属性是每个,HTML,元素都通用的,Id,class,name,style,一些属性是特定的,如,img,元素的属性,src,显示图像的路径,HTML,元素,HTML,元素是标签和属性的组合,带有一些或没有属性的起始标签，以及关闭标签,go to Google,HTML,术语,演示,HTML,文档结构,HTML,文档,head,body,doctype,HTML,文档结构,一些元素是每个,HTML,文档必须的,html,head,body,doctype,html,元素,用于标记一个,HTML,文档的开始和结束,在标签中是所有网页的内容,head,标签,head,标签包含了用户（使用浏览器的人们）看不到的标记,但帮助浏览器来正确渲染,HTML,文档,其中有什么？,样式，脚本,编码声明,等,title,标签,浏览器选项卡上的文字,body,元素和,doctype,body,元素包含了所有可视的用户标记,标题，文本，超链接，图像，等,文本框，滑动块，按钮，等,doctype,是一种页面的验证器,告诉浏览器，页面是用哪个版本的,HTML,写成,HTML5 doctype,HTML,文档结构,演示,HTML,通用元素,用于,90%,的站点,文本格式,文本格式标签在起始标签和结束标签内修改了文本,如,Hello,，让,Hello,加粗,许多格式标签不推荐使用,以,CSS,代替,bold,italicized,underlined,Sample,superscript,Sample,subscript,strong,emphasized,Preformatted text,一些简单标签,超链接标签,图像标签,文本格式标签,链接到新浪网站,This text is emphasized.,new line,This one is more emphasized.,标题和段落,标题标签,(h1-h6),文段标签,段落：,div,和,span,Heading 1,Sub heading 2,Sub heading 3,This is my first paragraph,This is my second paragraph,This is a div,有序列表：,标签,创建一个有序列表使用,：,type,的属性值为,1,A,a,I,or i,Apple,Orange,Grapefruit,Apple,Orange,Grapefruit,23,Apple,Orange,Grapefruit,Apple,Orange,Grapefruit,Apple,Orange,Grapefruit,Apple,Orange,Grapefruit,无序列表：,标签,创建无序列表使用,：,type,的属性值为：,disc,circle,或,square,Apple,Orange,Grapefruit,Apple,Orange,Pear,Apple,Orange,Pear,Apple,Orange,Pear,定义列表：,标签,创建定义列表使用,一对文本和关联定义组成一对；文本用,标签，定义用,标签,并没有渲染出编号符号,定义是缩进的,HTML,A markup language,CSS,Language used to,HTML,通用元素 演示,段落元素,和,标签,在一个页面中创建了逻辑部分,块元素,使用,CSS,示例：,DIV example,This one is only a test.,演示,标签,行内样式元素,用于修改文本的特定部分,不要在文档中创建分离区域（文段）,主要用于文本的样式部分,This one is only a test.,This one is another TEST.,演示,some text,语义结构标签,网页的结构,一个网页的布局结构示例,HTML4,及之前,方法,使用,div,和,id,id,用来加样式,HTML4,方法 演示,HTML5,方法,在,HTML5,中有布局的语义标签,只在新浏览器上运行,HTML5,方法 演示,记住,对,HTML,有正确的愿景和态度是非常重要的,HTML,只关心结构，不关心外观,浏览器容许无效,HTML,代码并分析错误,你并不能容忍,总是思考语义,W3C HTML,验证器是一种验证你的,HTML,的方法,validator.w3.org/,提问环节,练习,写一个,HTML,页面，如下：,用标题，,div,，文段和,ul,练习,写一个,HTML,页面，如下：,练习,创建一个用户介绍网页,profile.html,，朋友页面,friends.html,和主信息页面,home.html,。使用,标签将其连接起来。,谢谢观赏！,