课件1-html部分.

培养独立工作和独立思考的人html课程—初识培养独立工作和独立思考的人课程内容体系培养独立工作和独立思考的人实例展示html-标记-网页内容CSS-属性-网页样式美观的网页+=培养独立工作和独立思考的人综合案例培养独立工作和独立思考的人1-网页设计与制作—html概述培养独立工作和独立思考的人网页相关知识页面浏览过程浏览器静态和动态页面培养独立工作和独立思考的人浏览器（Browser）IE6.07.08.0Firefox更多……完成的网页应在多种浏览器中都有较好的浏览效果。培养独立工作和独立思考的人现实中的网页静态网页动态网页可从文件的扩展名来判断静态网页的URL的后缀是.htm、.html、.shtml、.xml等;动态网页的URL的后缀是.asp、.aspx、.jsp、.php等。2-网页设计与制作—html基本标记培养独立工作和独立思考的人主要内容html基本标记图片超链接培养独立工作和独立思考的人什么是HTML文件？HTML的英文全称是HyperTextMarkupLanguage，中文叫做“超文本标记语言”。一个HTML文件的后缀名是.htm或者是.html。用记事本就可以编写HTML文件。培养独立工作和独立思考的人HTML的标记HTML标记最基本的格式是：标记内容/标记标记通常成对使用；标记表示某种格式的开始；/标记表示这种格式的结束。培养独立工作和独立思考的人html基本标记h?……/h?标题p……/p段落em……/em斜体strong……/strong粗体sub……/sub下标sup……/sup上标ul……/ul无序列表li……/li列表项培养独立工作和独立思考的人实例1用记事本写第一个网页培养独立工作和独立思考的人标准HTML文件的结构htmlheadtitle这是网页的标题/title/headbody这是页面的主体内容。/body/htmlhtml标记头部信息主体网页的题目培养独立工作和独立思考的人html基本标记–文本h?……/h?标题p……/p段落br/换行!--……--注释em斜体strong粗体sub下标sup上标ul无序列表li列表项培养独立工作和独立思考的人实例2标题字h?通过上面的实例，可以发现：（1）h1到h6的内容都自动加粗并且显示为黑体字。（2）h1到h6自动换行。htmlheadtitle标题标记的作用/title/headbody这里是正文……h1我是H1标题字，我最大/h1h2我是H2标题字/h2h3我是H3标题字/h3h4我是H4标题字/h4h5我是H5标题字/h5h6我是H6标题字，我最小/h6/body/htmlheadline培养独立工作和独立思考的人实例3分段标记和换行标记p……/p是分段标记，它是一个成对的标记，段之间的距离较大，相当于换行后又空一行。br/是换行标记，它是一个单标记，表示换行。body大家好p我是分段标记，是一对哦~/p看清楚哦br/我是换行标记，是个单标记！/bodyparagraphbreakline培养独立工作和独立思考的人实例4注释语句的应用!--注释语句--注释语句中的内容不显示在网页上。1、说明文字2、隐藏暂时不用的代码或功能body这是标有制作日期的页面。!--2011年-8月-18日--/body培养独立工作和独立思考的人常用文本格式标记文本标记含义说明对应英文释义em强调文本，通常以斜体显示emphasisstrong加重强调，通常是黑体strongsub下标sub-sup上标super培养独立工作和独立思考的人实例5常用文本格式标记bodyp斜体字可以用emem表示。/em/pp粗体不换行的话，可以用strongstrong表示。/strong/ppHsub2/subO这里的2是下标/ppMsup2/sup这里的2是上标/p/body培养独立工作和独立思考的人html基本标记-列表olli（有序列表）ulli（无序列表）dldtdd（定义列表）培养独立工作和独立思考的人实例6有序列表在有序列表中，每个列表项前标有数字，表示顺序。有序列表由ol开始，每个列表项由li开始。bodyh2常用的搜索引擎/h2olli百度/liliGoogle/lili雅虎/li/ol/bodyorderedlistlist培养独立工作和独立思考的人实例7无序列表无序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点、方块等。无序列表由ul开始，每个列表项同样由li开始。bodyh2儿时的经典动画片/h2ulli大闹天宫/lili九色鹿/lili阿凡提/li/ul/bodyunorderedlist培养独立工作和独立思考的人实例8定义列表dl标记定义列表（definitionlist），的开始另起一行显示。dt标记的含义是定义题目（definitiontitle），另起一行显示。dd标记的含义是定义描述（definitiondescription），另起一行显示。培养独立工作和独立思考的人课堂练习完成本节课讲的7个例子可以写在同一个网页（要保证网页结构正确）标签中的内容可以简化培养独立工作和独立思考的人复习与提问html文件基本结构是怎样的？基本文字标签的问与答。培养独立工作和独立思考的人2-网页设计与制作—html标记进阶培养独立工作和独立思考的人html的属性HTML标记可以有很多属性，属性可以扩展HTML标记的功能。语法格式如下：标记属性1=属性值1属性2=属性值2…………/标记属性通常是写在开始标记里面，属性值一般用双引号标记起来（注意：是英文半角状态下的双引号）,多个属性并列的时候，用空格间隔，培养独立工作和独立思考的人实例1align属性align属性的作用是定义水平对齐方式，常见属性值有：left、center、right三种，能够控制大多数元素的左对齐、居中对齐和右对齐。bodypalign=left左对齐/ppalign=center居中对齐/ppalign=right右对齐/p/body培养独立工作和独立思考的人实例2style属性标记style=属性名称1：属性值1;属性名称2：属性值2……/标记bodypstyle=color:red;font-size:12px;文字的颜色和大小都改变了哦~/p/body培养独立工作和独立思考的人网页颜色RGB分别是Red、Green、Blue的首字母，即红、绿、蓝三原色的意思。表示方式为#rrggbb。其中红、绿、蓝三色的对应取值范围都是00到ff。如：白色的RGB值(255,255,255)，就用#ffffff表示；黑色的RGB值(0,0,0)，就用#000000表示。培养独立工作和独立思考的人实例3div和spandiv标记是一个块状的容器，其默认的状态就是占据整个一行。span标记是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。培养独立工作和独立思考的人实例4marquee应用1滚动字幕标记的基本语法结构如下：marquee……/marquee培养独立工作和独立思考的人实例5marquee应用2bodymarqueedirection=uponmouseover=stop()onmouseout=start()通知br/有人看我就停下来br/没人看我就继续走~/marquee/body培养独立工作和独立思考的人字符实体的应用1．在HTML中有特殊含义的字符。例如：,,”,&,空格等；2．无法用键盘直接输入的字符。例如：¥，£，©，×，÷，€等；培养独立工作和独立思考的人实例6字符实体body<p>是段落标记br/这里是   三个空格字符。/body培养独立工作和独立思考的人复习与提问属性怎么写？有什么用？基本标签的问与答。代码大找茬。培养独立工作和独立思考的人html基本标记小结P40文本标记含义说明h?设置正文标题字体的大小p设置文本的段落br/换行em强调文本，通常以斜体显示strong加重强调，通常是黑体!--注释--HTML文件中的解释和说明ul表示不排序的项目列表li表示列表中的一个项目div是一个块状的容器，默认的状态是占据整个一行span是一个行间的容器，其默认状态是行间的一部分，占据行的长短由内容的多少来决定。培养独立工作和独立思考的人Xhtml代码撰写规范1．所有的标记都必须要有一个相应的结束标记。例如：p……/pbr/2.所有标签的元素和属性的名字都必须使用小写.例如：BODY必须写成body3.XHTML元素必须合理嵌套。例如：下面的代码：pb/p/b必须修改为：pb/b/p4.所有的属性必须用英文双引号括起来。例如：palign=left左对齐/p培养独立工作和独立思考的人课后练习-电影介绍编写一个电影介绍页面，如图所示。注意所选html标签的含义要准确，代码简单、有效。不需要应用任何样式。拓展文档：定义标题的最好方法2-网页设计与制作—插入图片培养独立工作和独立思考的人插入图片图像格式文件路径绝对路径相对路径插入图片站点培养独立工作和独立思考的人网页设计与制作实例教程图像格式图片有很多格式，常见的有BMP、JPG、GIF、PNG等，网页设计中最常用的是JPG和GIF两种。JPG格式：可压缩文件，扩展名为jpg或jpeg，数码相机所采用的图片格式大多是JPG。GIF格式：压缩文件，可在一个GIF文件中可以同时存多幅彩色图像，构成GIF动画。应避免在网页中使用体积较大的图片。支持透明功能的图片格式：GIF、PNG（示例）培养独立工作和独立思考的人网页设计与制作实例教程文件路径HTML超文本标记语言能够利用URL，将不同格式、不同属性、不同位置的各种网络资源，用统一的方式互相链接起来。常见的文件路径有两种：一种是绝对路径，另一种是相对路径，下面分别来介绍。培养独立工作和独立思考的人网页设计与制作实例教程绝对路径绝对路径是指带域名的文件的完整路径。一个完整的绝对路径包括以下几个部分：一个传输协议（如HTTP协议）网络域名或者服务器IP地址网站结构的目录树文件名（文本、图片、音频和视频等）这些部分就构成了一个完整的绝对路径，例如：培养独立工作和独立思考的人网页设计与制作实例教程相对路径相对路径这个概念，在网页制作中经常遇到，比如超链接、链接图片、背景音乐、CSS文件、JS文件、数据库等，都要应用到相对路径。什么是相对路径？相对路径就是指由这个文件所在的位置引起的跟其它文件(或文件夹)的路径关系，也就是自己相对于目标的位置。培养独立工作和独立思考的人网页设计与制作实例教程实例演示在网页中插入图片培养独立工作和独立思考的人网页设计与制作实例教程在网页中使用图片HTML中插入图片用的是img/标记,它的属性包括图片的路径、宽、高和替代文