HTML和CSS语言入门介绍(白舸)ppt课件

HTML和CSS语言入门介绍,信息技术部白舸,HTML是浏览器的“母语”,1989年3月，TimBerners-Lee提出一项计划，目的是使科学家们能很容易地翻阅同行们的文章。这项计划的后期目标是使科学家们能在服务器上创建新的文档。为了支持此计划，Tim创建了一种新的语言来传输和呈现超文本文档。这种语言就是超文本标注语言HTML(HypertextMarkupLanguage)。,从HTML到XHTML,事实上，XHTML就是HTML的下一版本，用于替代HTML并帮助转向XML语言的一套过渡性标记语言。无论是HTML还是XHTML，说到底都是一门让机器识别的语言。但在强调表现与内容想分离的WEB标准时代，HTML的语法模式已经力不从心，而XHTML的结构与标记更加严谨。XHTML是一门面向结构的语言，起设计的目的并不是为了最终表现，而是用于对网页内容进行结构设计，其严谨的语法结构有利于浏览器进行解析处理。是一门面向文档结构的设计语言。,例子是示例哦！,Webserver,Theinternet,互联网工作原理,元素和标签,元素（element）：用于结构化HTML文档，并告知浏览器如何呈现网页。标签（tag）：指示元素的起始与结束。例：b元素的作用，告诉浏览器介于标签和之间的文本应以粗体显示。这里，是首标签，是尾标签,这句话应显示为粗体,首标签和尾标签总是必须的吗？在HTML中，也有例外的情况，即有些元素没有尾标签。这些没有尾标签的元素被称作空元素（emptyelement）。它们与具体文本内容无关，比如像下面这个换行标签：。,元素和标签,HTML空元素,常用的空元素有：插入一个换行符画一条水平线（horizontalrule）无序列表（unorderedlist），为每个列表项显示一个粗点有序列表（orderedlist），显示每个列表项的序号把多个列表项组织为一个列表，其中的li代表“列表项（listitem）”,使用多个标签,可以同时应用多个标签，只要能避免标签交错。希望一段文本即是粗体又是斜体注意，不是这样：,既是粗体又是斜体,既是粗体又是斜体,一个完整的结构,完整结构示例是示例哦！,头部（head）:提供关于当前网页的信息主体（body）:提供文档的内容这里，title指定网页标题，p（paragraph）是一个文本段落。,属性,HTML通过标签告诉浏览器如何展示网页。同时，我们可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。属性应写在元素的首标签上。,这是HTML的属性,元素小结,综上所述，一个元素包括：1个首标签（starttag）、0或多个属性（attribute）、1些内容和1个尾标签（endtag）。,链接,链接也是通过元素和属性实现的。在上例中，属性href的值为，也被称作URL（统一资源定位符）。注意，在URL里必须包含“http:/”。,这是一个指向百度的链接,更多的链接,还可以为e-mail地址做链接：还可以在链接上使用title属性，title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上时，提示文字便会出现。,给nobody发电子邮件,图像,注意：img元素没有尾标签，它与一样，不与特定的文本相关。alt属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。,表格,在传统的表格中，往往只使用3个标签：table,tr和td。但XHTML标准的设计者还提供了许多表格专用标签：,单元格A单元格b,表格相关属性,colspan：用在标签中，用来指定单元格横向跨越的列数rowspan：作用是指定单元格纵向跨越的行数。,单元格1单元格2单元格3单元格4,CSS,CSS与HTML的区别：HTML用于结构化内容；CSS用于格式化结构化的内容。CSS的优点：通过单个样式表控制多个文档的布局；更精确的布局控制；为不同的媒体类型（屏幕、打印等）采取不同的布局；无数高级、先进的技巧。,基本的CSS语法,比如，要将网页的颜色设置为红色用HTML的话，我们可以这样：用CSS的话，我们可以这样：基本的CSS模型：,bodybackground-color:#FF0000;,行内样式表,方法一：行内样式表（使用HTML的style属性）,例子这个页面是红色的,内部样式表,方法二：内部样式表（使用style元素）,例子bodybackground-color:#FF0000;这个页面是红色的,外部样式表,方法三：外部样式表（引用一个样式表文件）外部样式表就是一个扩展名为css的文本文件。例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：,例子,在HTML文档里创建一个指向外部样式表文件的链接（link），这行代码必须被插入HTML代码的头部（header），即放在标签和标签之间。这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。,外部样式表,这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。,外部样式表,选择符,类型选择符：是网页中已有的标签名作为名称的选择符。群组选择符：除了可以对单个XHTML对象进行样式指定外，还可以对一组对象进行相同的样式指派。,BodyDivSpan,H1,h2,h3,p,spanfont-size:12px;font-family:arial,包含选择符：当我们只打算对某个对象的子对象进行样式指定时使用。包含选择符指选择符中前一个对象包含了后一个对象，对象之间用空格作为分隔。在XHTML中是如下格式：,H1spanfont-weight:bold;,这是我们的一段文本这是span内的文本被h2套用的文本这是h2下的span,选择符,选择符,id选择符id选择符是根据DOM文档对象模型原理锁出现的选择符类型。对于一个网页而言，其中的每个标签均可以使用类似于id=“”的形式来对id属性进行名称指派。在网页中，每个id名称只能使用一次。在CSS样式中，id选择符使用#符号进行标识。,#contentfont-size:14px;line-height:130%;,选择符,class选择符class是XHTML多个标签的组合。对于网页设计而言，可以使用类似于class=“”的形式来对class属性进行名称指派。与id不同，class允许重复使用。在CSS样式中，id选择符使用.点符号进行标识。,.p1Margin:10px;background-color:bule;,组织元素span,用div组织元素span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。HTML代码相应css代码,国民党亲民党民进党台湾团结联盟,#bluebackground:blue;#greenbackground:green;,组织元素span,伪类：link伪类:link用于浏览者从未访问过的链接。伪类：visited伪类:visited用于浏览者已访问过的链接。,a:linkcolor:#6699CC;将未访问过的链接设为浅蓝色。,a:visitedcolor:#660099;将已访问过的链接设为深紫色,伪类：active伪类:active用于活动的链接（即获得当前焦点的链接）。,a:activebackground-color:#FFFF00;将活动的链接设为具有黄色背景,伪类：hover伪类:hover用于有鼠标悬停的链接。,a:hovercolor:orange;font-style:italic;,链接,CSS中的盒状模型（boxmodel）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：,盒模型,盒模型,Article1:我失恋，郁闷消瘦无法排解。老爸看在眼里急在心中，但几十年没做亲子教育一时半会儿也不知如何开导。一天又是吃不下饭，问也不答，老爸又急又疼，一拍桌子：“你也是党员，我也是党员，我们党员和党员之间有什么不可以谈的!”失恋中的我硬是被这句话笑喷了饭。,我失恋，郁闷消瘦无法排解。老爸看在眼里急在心中，但几十年没做亲子教育一时半会儿也不知如何开导。一天又是吃不下饭，问也不答，老爸又急又疼，一拍桌子：“你也是党员，我也是党员，我们党员和党员之间有什么不可以谈的!”失恋中的我硬是被这句话笑喷了饭。,外边距和内边距,为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。,bodymargin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;,Bodymargin:100px40px10px70px;,为元素设置内边距内边距（padding）也可以被理解成“填充物”。因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。通过为标题设置内边距，可以控制在标题文本周围填充多少空白：,h1background:yellow;padding:20px20px20px80px;h2background:orange;padding-left:120px;,外边距和内边距,边框,边框宽度border-width边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下图所示：,边框颜色border-colorCSS属性border-color用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、“rgb(123,123,123)”、“yellow”等。,边框,边框样式border-style边框样式有多种可供选择。右图显示了8种不同样式的边框在InternetExplorer里的实际显示效果。如果不想有任何边框，可以为它取值为“none”或者“hidden”。,浮动元素（float）,我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边,浮动在很多情况下都很有用，它经常与定位联合使用。在网页布局中使用广泛。,元素的定位,CSS定位的原理把浏览器窗口想象成一个坐标系统：,CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。,h1position:absolute;top:100px;left:200px;,元素的定位,元素的定位,绝对定位采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。例如，我们要在文档的四个角落各放置一个盒子：,#box1position:absolute;top:50px;left:50px;#box2position:absolute;top:50px;right:50px;#box3position:absolute;bottom:50px;right:50px;#box4position:absolute;bottom:50px;left:50px;,元素的定位,相对定位要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。例如，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。,#dog1position:relative;left:350px;bottom:150px;#dog2position:relative;left:150px;bottom:500px;#dog3position:relative;left:50px;bottom:700px;,用z-index进行层次堆叠,CSS可以处理高度、宽度、深度三个维度。之前，我们已经了解了前两个维度。关于深度的问题，简言之，就是关于元素堆叠的次序问题。为此，你可以为每个元素指定一个数字（z-index）。其原理是：数字较大的元素将叠加在数字较小的元素之上。比如，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌：,层次可以应用于许多情况之下。例如，可以用z-index实现为标题（headline）增添效果（避免了采用图片的方式）。这样，一方面，装载文本的速度比图片要快；另一方面，采用文本可能更有利于提高网站的搜索引擎排名。,Web标准与验证,W3C即万维网联盟（WorldWideWebConsortium），是一个制订相关Web标准（如HTML、CSS和XML等）的非盈利组织。微软、Mozilla基金会以及许多其他的公司与组织都是W3C的成员，它