HTML和CSS.ppt

1、HTML and CSS,zhang peng,HTML标记,什么是标记？ 标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 例如： ,文本格式标记,文本格式标记是网页中定义文本格式的标记 1）直接写文本； 2）用段落标记格式化文本，各段落文本将分行显示； 3）用标题标记格式化文本，作用：定义第n号标题字体，n=16，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记； 4) 用预格式化标记格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换

2、行和定位符；,文本的强制换行,电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布 供求信息等活动实现的途径就是网页。 强制不换行标记，常用于一串数字,文本中的空格,标记(除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入（表示一个半角空格）。 行内元素可看成一个字符,文本中的转义字符,在HTML源代码中，有些字符有特别的含义，比如小于号“ , ”符号,综合实例, 分段换行与预格式 以下是直接写文本的情况： 星期一、星期二、星期三、星期四、

3、 星期五、星期六、星期日。 以下是使用了三个换行标记的情况： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用分段标记（分为两段）： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 以下使用预格式： 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 ,文本修饰标记,文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。 1）font标记：定义文字的各种属性。 例： ,加粗、倾斜与下划线标记,2）加粗、倾斜与下划线的定义标记（b、i、u） 使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。 如：此处以红

4、色五号字粗体显示,上标（sup）和下标（sub）标记,用于书写数学公式或分子式。 如：H2O X2 由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。,列表标记,为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 无序列表(Unordered List) , 有序列表(Ordered List) , 定义列表(Defined List) , , ,超链接标记,超链接是网页的基本元素，网页正是通过超链接而相

5、互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。 超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。 URL分为绝对URL和相对URL,超链接的种类-根据源对象划分,1) 用文本做超链接： 首页 2) 用图像做超链接： 3) 文本图像混合做链接： 格力空调1型 该方法在商品展示的网站上较常用。,超链接的种类根据href的取值,1) 链接到其他网页或文件（jpg, rar等） 内部链接返回首页 外部链接 网易网站 下载链接点击下载 2) 电子邮件链接 给我留言 3) 锚链接（链接到页面中

6、某一指定的位置） 当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。 也可以链接到其他网页某个锚点处 ,图像标记,图像标记 ： 将图形文件嵌入到网页文档中的当前位置 说明：网页中插入图像有两种方法，一是插入一个元素，二是将图像作为背景嵌入到网页中 由于CSS的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。如果图像是通过元素插入，则可以在浏览器上通过按住鼠标左键拖动选中图片，或者将它拖动到地址栏里，如果作为背景嵌入，则无法选中图片 img的属性:src, alt, title, align, width, height,表格标记

7、,（创建一个表格） 和（创建表格中的每一行和每一格） （创建表格头） 。,表单标记,（表单开始和结束标记） （输入区标记） （列表框标记） （多行文本框标记）,标记,标记具有action、method和target属性。 action的值是处理程序的程序名。 method用来定义处理程序从表单中获得信息的方式，可取值为 GET 或 POST 。GET方式是程序从当前网页文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。 POST方式与GET方式相反，它是当前网页文档把数据传送给处理程序，传送的数据量要比使用GET方式大得多。 target用来指定显示表单的目标窗口。,

8、imput,标记用来定义一个用户输入区，用户可在其中输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选钮等八种类型的输入区域 。,标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记之间。具有multiple、name和size属性。,标记创建可以输入多行的文本框，此标记对用于标记对之间。 有name、cols和rows属性。 name 、cols和rows属性分别用来设置文本框的名称、列数和行数。列与行以字符数为单位。,CSS,CSS技术是一种格式化网页的标准方式，它通过设置CSS属性债周页元素获得各种不同效果。层叠样式表最大的优点就在于把内容和格式分离开来

9、，使得能够用一种统一的方式来管理各种不同的显示格式.只有4.0及其更高版本的IE浏览器才对CSS有较好的支持,CSS的优先级,CSS的优先级 层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。,CSS的分类,CSS的分类 一般情况下，层叠样式表可以分为三种： 内联式样式表 嵌入式样式表 外部样式表,内联式样式表,内联式样式表 内联式样式表是在现有HTML元素的基础上

10、，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子： 内联式样式表 这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表： 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示,嵌入样式表,嵌入样式表 嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。它的书写格式通常为： 在这个格式中，style元素的type属性必须设为

11、text/css，表示这定义的是一个层叠样式表。这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。 另外，在STYLE元素中还添加了HTML的注释符，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。嵌入式样式表首先可以为某个HTML标记定义样式，定义好之后，整个网页中所有的这个标记都会采用这种样式来显示其中的网页对象。比如本例中对H1元素定义了嵌入式样式，所以网页中凡是包含在H1元素中的文字都将使用所定义的样式显示，,外部样式表,外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中

12、定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式，如下所示： h1 font-size: 36px; font-family: 隶书; font-weight: bold; color: #993366; 提示：在定义嵌入样式表时，标记必须放在和标记之间。,1样式规则 在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再具体应用于网页中的元素

13、，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式定义样式的方式为： selectorproperty1:vaIue1;property2:value2; 其中，selector表示样式作用的对象（选择器）property和value则表示相应CSS属性和值。每一对属性和值用“分号”隔开。 如：h1font-family:楷体_gb2312;text-align:center，其中h1是选择器，font- family:楷体_gb2312;text-align:center”是声明。在声明中，fo