HTML和CSS语言入门介绍(白舸)_第1页
HTML和CSS语言入门介绍(白舸)_第2页
HTML和CSS语言入门介绍(白舸)_第3页
HTML和CSS语言入门介绍(白舸)_第4页
HTML和CSS语言入门介绍(白舸)_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML和CSS语言入门介绍信息技术部白舸HTML是浏览器的“母语”1989年3月，TimBerners-Lee提出一项计划，目的是使科学家们能很容易地翻阅同行们的文章。这项计划的后期目标是使科学家们能在服务器上创建新的文档。为了支持此计划，Tim创建了一种新的语言来传输和呈现超文本文档。这种语言就是超文本标注语言HTML(HypertextMarkupLanguage)。从HTML到XHTML事实上，XHTML就是HTML的下一版本，用于替代HTML并帮助转向XML语言的一套过渡性标记语言。无论是HTML还是XHTML，说到底都是一门让机器识别的语言。但在强调表现与内容想分离的WEB标准时代，HTML的语法模式已经力不从心，而XHTML的结构与标记更加严谨。XHTML是一门面向结构的语言，起设计的目的并不是为了最终表现，而是用于对网页内容进行结构设计，其严谨的语法结构有利于浏览器进行解析处理。是一门面向文档结构的设计语言。</html><head><title>例子</title></head><body><p>是示例哦！</p></body></html>WebserverTheinternet互联网工作原理元素和标签元素（element）：用于结构化HTML文档，并告知浏览器如何呈现网页。标签（tag）：指示元素的起始与结束。例：b元素的作用，告诉浏览器介于标签<b>和</b>之间的文本

应以粗体显示。这里，<b>是首标签，</b>是尾标签<b>这句话应显示为粗体</b>首标签和尾标签总是必须的吗？在HTML中，也有例外的情况，即有些元素没有尾标签。这些没有尾标签的元素被称作空元素（emptyelement）。它们与具体文本内容无关，比如像下面这个换行标签：<br/>。元素和标签HTML空元素常用的空元素有：<br/>插入一个换行符<hr/>画一条水平线（horizontalrule）<ul>无序列表（unorderedlist），为每个列表项显示一个粗点<ol>有序列表（orderedlist），显示每个列表项的序号<li>把多个列表项组织为一个列表，其中的li代表“列表项

（listitem）”

使用多个标签可以同时应用多个标签，只要能避免标签交错。希望一段文本即是粗体又是斜体注意，不是这样：<b><i>既是粗体又是斜体</i></b><b><i>既是粗体又是斜体</b></i>一个完整的结构</html> <head> <title>完整结构示例</title> </head> <body> <p>是示例哦！</p> </body></html>头部（head）:提供关于当前网页的信息主体（body）:提供文档的内容这里，title指定网页标题，p（paragraph）是一个文本段落。属性HTML通过标签告诉浏览器如何展示网页。同时，我们可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。属性应写在元素的首标签上。<h2style=“background-color:#ff0000;”>这是HTML的属性</h2>元素小结综上所述，一个元素包括：1个首标签（starttag）、0或多个属性（attribute）、1些内容和1个尾标签（endtag）。链接链接也是通过元素和属性实现的。在上例中，属性href的值为，也被称作URL（统一资源定位符）。注意，在URL里必须包含“http://”。<ahref=“http://”>这是一个指向百度的链接</a>更多的链接还可以为e-mail地址做链接：还可以在链接上使用title属性，title属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该

链接上时，提示文字便会出现。<ahref="mailto:nobody@">给nobody@发电子邮件</a><ahref=“”title=“百度一下"></a>图像<imgsrc="TimBerners-Lee.bmp"alt="TimBerners-Lee"/>注意：img元素没有尾标签，它与<br/>一样，不与特定的文本相关。alt属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。表格在传统的表格中，往往只使用3个标签：table,tr和td。但XHTML标准的设计者还提供了许多表格专用标签：<table><tr><td>单元格A</td><td>单元格 b</td></tr></table>名称描述Caption定义表格名称Tbody定义表格内容区Thead定义表头Tfoot定义表格页脚Th定义表头单元格表格相关属性colspan：用在<td>标签中，用来指定单元格横向跨越的

列数rowspan：作用是指定单元格纵向跨越的行数。<tableborder="1"><tr><tdrowspan="2">单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td></tr><tr><tdcolspan="2">单元格4</td></tr></table>CSSCSS与HTML的区别：HTML用于结构化内容；CSS用于格式化结构化的内容。CSS的优点：通过单个样式表控制多个文档的布局；更精确的布局控制；为不同的媒体类型（屏幕、打印等）采取不同的布局；无数高级、先进的技巧。基本的CSS语法比如，要将网页的颜色设置为红色用HTML的话，我们可以这样：用CSS的话，我们可以这样：基本的CSS模型：<bodybgcolor="#FF0000">body{background-color:#FF0000;}行内样式表方法一：行内样式表（使用HTML的style属性）<html><head><title>例子</title></head>

<bodystyle="background-color:#FF0000;">

<p>这个页面是红色的</p></body></html>内部样式表方法二：内部样式表（使用style元素）

<html><head><title>例子</title></head><styletype="text/css">

body{background-color:#FF0000;}

</style>

<body><p>这个页面是红色的</p></body></html>外部样式表方法三：外部样式表（引用一个样式表文件）外部样式表就是一个扩展名为css的文本文件。例如，比方说你的样式表文件名为style.css，它通常被存放于名为style的目录中。就像下面这样：<html><head><title>例子</title>

<linkrel="stylesheet"type="text/css"href="style/style.css"/></head><body>……在HTML文档里创建一个指向外部样式表文件的链接（link），这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。

外部样式表这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。外部样式表选择符类型选择符：是网页中已有的标签名作为名称的选择符。群组选择符：除了可以对单个XHTML对象进行样式指定外，还可以对一组对象进行相同的样式指派。Body{}Div{}Span{}H1,h2,h3,p,span{font-size:12px;font-family:arial}包含选择符：当我们只打算对某个对象的子对象进行样式指定时使用。包含选择符指选择符中前一个对象包含了后一个对象，对象之间用空格作为分隔。在XHTML中是如下格式：H1span{font-weight:bold;}<h1>这是我们的一段文本<span>这是span内的文本</span></h1><h2>被h2套用的文本<span>这是h2下的span</span></h2>选择符选择符id选择符

id选择符是根据DOM文档对象模型原理锁出现的选择符类型。对于一个网页而言，其中的每个标签均可以使用类似于id=“”的形式来对id属性进行名称指派。在网页中，每个id名称只能使用一次。在CSS样式中，id选择符使用#符号进行标识。#content{font-size:14px;line-height:130%;}选择符class选择符

class是XHTML多个标签的组合。对于网页设计而言，可以使用类似于class=“”的形式来对class属性进行名称指派。与id不同，class允许重复使用。在CSS样式中，id选择符使用.点符号进行标识。.p1{Margin:10px;background-color:bule;}组织元素span&div用span组织元素：span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。让我们用一句弗兰克林的名言来举个例子：相应的css代码如下：<p>早睡早起

使人<spanclass="benefit">健康</span>、

<spanclass="benefit">富裕</span>

和<spanclass="benefit">聪颖</span>。</p>span.benefit{color:red;}用div组织元素span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。HTML代码相应css代码<divid="blue"><ul><li>国民党</li><li>亲民党</li></ul></div><divid="green"><ul><li>民进党</li><li>台湾团结联盟</li></ul></div>#blue{ background:blue;}#green{ background:green;}组织元素span&div链接比HTML更进一步的是，CSS允许根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。这需要通过伪类（pseudo-class）来控制这些效果。伪类（pseudo-class）是可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。例如：在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器（selector）：a{color:blue;}伪类：link伪类:link用于浏览者从未访问过的链接。伪类：visited伪类:visited用于浏览者已访问过的链接。a:link{color:#6699CC;}将未访问过的链接设为浅蓝色。

a:visited{color:#660099;}将已访问过的链接设为深紫色伪类：active伪类:active用于活动的链接（即获得当前焦点的链接）。a:active{background-color:#FFFF00;}将活动的链接设为具有黄色背景伪类：hover伪类:hover用于有鼠标悬停的链接。a:hover{color:orange;font-style:italic;}链接CSS中的盒状模型（boxmodel）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构：盒模型盒模型<h1>Article1:</h1><p>我失恋，郁闷消瘦无法排解。老爸看在眼里急在心中，但几十年没做亲子教育一时半会儿也不知如何开导。一天又是吃不下饭，问也不答，老爸又急又疼，一拍桌子：“你也是党员，我也是党员，我们党员和党员之间有什么不可以谈的!”失恋中的我硬是被这句话笑喷了饭。</p>我失恋，郁闷消瘦无法排解。老爸看在眼里急在心中，但几十年没做亲子教育一时半会儿也不知如何开导。一天又是吃不下饭，问也不答，老爸又急又疼，一拍桌子：“你也是党员，我也是党员，我们党员和党员之间有什么不可以谈的!”失恋中的我硬是被这句话笑喷了饭。外边距和内边距为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。body{margin-top:100px;margin-right:40px;margin-bottom:10px;margin-left:70px;}Body{margin:100px40px10px70px;}为元素设置内边距内边距（padding）也可以被理解成“填充物”。因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。通过为标题设置内边距，可以控制在标题文本周围填充多少空白：h1{background:yellow;

padding:20px20px20px80px;}h2{background:orange;

padding-left:120px;}外边距和内边距边框边框宽度[border-width]边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下图所示：边框颜色[border-color]CSS属性border-color用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、“rgb(123,123,123)”、“yellow”等。边框边框样式[border-style]边框样式有多种可供选择。右图显示了8种不同样式的边框在InternetExplorer里的实际显示效果。如果不想有任何边框，可以为它取值为“none”或者“hidden”。浮动元素（float）我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边浮动在很多情况下都很有用，它经常与定位联合使用。在网页布局中使用广泛。元素的定位CSS定位的原理把浏览器窗口想象成一个坐标系统：CSS定位的原理是：你可以将任何盒子（box）放置在坐标系统的任何位置上。h1{position:absolute;top:100px;left:200px;}元素的定位元素的定位绝对定位采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为absolute。接着，你可以通过属性left、right、top和bottom来设定将盒子放置在哪里。例如，我们要在文档的四个角落各放置一个盒子：#box1{position:absolute;top:50px;left:50px;}#box2{position:absolute;top:50px;right:50px;}#box3{position:absolute;bottom:50px;right:50px;}#box4{position:absolute;bottom:50px;left:50px;}元素的定位相对定位要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。例如，我们可以相对于三张图片在页面上的原始位置来对它们进行相对定位。注意这些图片将在文档中各自的原始位置处留下空位。#dog1{position:rel

人人文库> 全部分类> 教育资料 > 幼儿教育

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论