《HTML与CSS》PPT课件.ppt

1、1、网络编程，第2章，超文本标记语言技术介绍，第3章，超文本标记语言技术基础，第2章，主题，章节内容，本章总结课后练习，第3章，章节内容，2.0简介2.1超文本标记语言网页文档结构2.2常用超文本标记语言标签2.3超文本标记语言(层叠样式表)，第4章，2.0简介，超文本标记语言是制作网页的基础，而现实中的各种网页都是基于超文本标记语言的。通过超文本标记语言，你可以显示页面元素。本章简要介绍了网页文档的基本知识、总体结构、常用的标签和超链接。CSS技术是网页技术的核心内容之一。CSS不仅可以控制页面上元素的显示样式，还可以控制整个站点中元素的样式。本章将简要介绍CSS技术的基本知识。理解超文本标

2、记语言和超文本标记语言的基本原理是开发静态网页的基础。5，章节内容，2.0简介2.1超文本标记语言网页文档结构2.2常用超文本标记语言标签2.3 CSS(层叠样式表)，2.1超文本标记语言网页文档结构，一个完整的超文本标记语言文件由各种嵌入对象组成，如标题、段落、表格和文本，它们统称为元素，超文本标记语言使用标签来分隔和描述这些元素。事实上，整个超文本标记语言文件是由元素和标签组成的。标记文件的开始，标记文件头的开始，标记文件头的结束，标记文件体的开始，标记文件体的结束，7。章节内容，2.0简介2.1超文本标记语言网页文档结构2.2常用超文本标记语言标签2.3 CSS(层叠样式表)，超文本标记

3、语言标签可分为以下四种格式：标签名称：单一类型，无设定值。例如，br标记名属性“属性值”:单一类型，带设置值。例如，HR width=80% 标签名/标签名：对称，无设定值。例如，标题/标题标签名称属性属性值-/标签名称：与设定值对称。例如，body bgcolor=red-/body，2.2常用的超文本标记语言标签，9和超文本标记语言标题。超文本标记语言标题由诸如“-”之类的标签定义，这些标签只能出现在标题标签中。实例的最大字体大小标题中的字体大小标题、最小字体大小标题、11、超文本标记语言段落由标签定义。超文本标记语言的英文全称是超文本标记语言，它是超文本标记语言的缩写，也是在互联网上编写

4、网页的主要语言。在超文本标记语言中用作标签的每个符号都可以被视为一个命令，它告诉浏览器如何显示文件的内容。超文本标记语言图像是由标签定义的。14，15，超文本链接超文本链接由标签定义。示例内蒙古大学，17，超链接标签链接文本超链接目标属性，表表由标签定义。每个表有几行(由标签定义)，每一行被分成几个单元格(由标签定义)。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。行1、列1行1、列2行2、列1行2、列2、列19设置表格的边框和大小。这些属性用于定义表格边框线的厚度、高度和宽度。绝对位置表示：像素被用作设置单位，无论窗口如何调整，它都占据一个固定的像素。相对位置表示法：百分比

5、作为设定单位，占据固定的比例。20、表中数据的对齐和表中数据的对齐可以分为两种类型：水平对齐和垂直对齐。如果标签中使用了这两个属性，则可以设置整行的对齐方式，如果标签中使用了这两个属性，则可以设置单个单元格中数据的对齐方式。表单表单是包含表单元素的区域。表单元素允许用户在表单中输入信息(如文本字段、下拉列表、单选框、复选框等)。)，然后服务器可以获取用户输入的数据。表单标签()定义。名称：年龄：22、23、24、表单和交互式网页结构、25、JSP获取用户在由标签构成的表单块的特定字段中输入的数据内容。26、创建表单，标签在网页上创建特定区域作为标签容器，形成具有收集用户数据功能的网页表单。属性

6、方法、动作和名称，以及标签，构成了创建表单的完整语法。在表单内容中，方法指定网页传输表单属性数据的模式。两种可能的模式是发布和获取。Action表示发送表单网页后，服务器为响应该表单网页而返回的网页路径地址。如果未设置此属性，网页本身将被视为操作属性的值。该名称表示表单的名称，JSP使用该名称来标识网页中的特定表单区域。27、文本框用于获取用户在网页上输入的姓名、地址和其他相关数据。文本框的外观密码输入属性主要用于获取用户输入的密码，密码符号将代替用户输入的数据出现，以避免密码被他人看到。28，文本框属性，29，多行文本输入区，这通常用于输入大量文本数据，30，属性，31，单选按钮，这在多项选

7、择的情况下使用。标签的类型属性设置为单选：具有相同名称属性的单选按钮汇总到同一个选项组中，因此只能选择其中一个。如果名称属性不同，则它们是独立的选择组。32，单选按钮属性，33，复选框，复选框用于检查多个选项，并且INPUT标签的类型属性设置为复选框。复选框通常代表布尔类型的数据，如果符合其提示描述，则选中该复选框。一组复选框没有特别限制，只允许选择一个选项。34，复选框属性，35，下拉列表框。下拉列表框的主体由标签组成，其内容选项由标签设置。选项1选项2，36，下拉列表框属性，37，提交按钮和重置按钮，发送按钮：当用户点击该按钮时，数据可以传输到程序进行处理。复位按钮：清除输入和选择的数据。

8、value属性用于设置按钮上显示的文本。特效和多媒体处理，并实现滚动效果。滚动内容、特效和多媒体处理，并设置背景音乐1的代码指定模式。实际上，通常使用标签，使用这个标签的语法格式如下。40、2通常在现实中通过使用标签来实现，并且使用该标签的语法格式如下。常见属性：自动开始：为真或假，循环：是否自动播放为正整数，重复次数宽度和高度：为正整数，玩家的宽度和高度为正整数。特效和多媒体处理，插入Flash您可以通过页面中的标签插入Flash，使用此标签的语法格式如下。特殊效果和多媒体处理，ActiveX控件可以通过标记插入到页面中，并且使用这个标记的语法格式如下。43，HTML摘要：所有元素都不区分大

9、小写，但是属性值区分大小写。所有标签必须关闭。超文本标记语言元素的属性值必须用“”括起来，并且属性之间的空格要分开。使用开发工具编写和使用属性更方便。表单元素必须掌握在线学习材料：44，章节内容，2.0简介2.1超文本标记语言网页文档结构2.2常用超文本标记语言标签2.3css(层叠样式表)，2.3css(层叠样式表)，css基础我们看到的超文本标记语言文件也是由内容和格式组成的，所以我们需要一个可以设置统一规则的样式表，css是完成这个功能的，CSS是层叠样式表的简称，也就是层叠样式表。层叠意味着CSS通常被翻译成层叠样式形式，这是一种用于增强对网页样式的控制并允许从网页内容中分离信息的标记

10、语言。CSS提供了比HTML标记属性更多的特性供用户设置，并且应用起来相对灵活。作为一种网页风格的显示技术，CSS主要有以下特点。CSS语言是一种标记语言，可以由浏览器直接执行，无需编译。CSS负责在标准网页设计中呈现网页内容。css文件也可以说是一个文本文件，它包含一些CSS标签。CSS文件必须使用CSS作为文件名的后缀。我们可以简单地改变CSS文件，改变网页的整体表达形式，减少我们的工作量，所以她是每个网页设计师的必修课。CSS是由W3C的CSS工作组制作和维护的。CSS的含义CSS被引入网页制作领域后，它有如下含义：实现内容和表达的分离；完全分离网页的内容和表达。表达的统一性：它可以使网

11、页的表达非常统一，易于修改。CSS可以支持多种设备，如手机、掌上电脑、打印机、电视、游戏机等等。使用CSS可以减少网页的代码量，提高网页的浏览速度，减少硬盘的占用空间。CSS的技术优势如下：样式重用一个好的CSS文档可以用于多个HTML文档，从而达到重用样式的目的，节省编写代码的时间，统一多个HTML文档的样式。轻松增加网页的特殊效果。使用CSS标签，您可以轻松地装饰图片和文本信息，并设置相关属性。使元素定位更加准确，并使显示的信息按照设计者的意愿出现在指定的位置。2.3.2创建样式表。有了CSS样式，网页设计者可以摆脱原有的HTML语法的限制，进一步更准确地定义各种HTML标签。然而，并不是

12、所有的浏览器都支持CSS样式表。因此，为了防止浏览器不支持CSS的问题，最好使用注释标签来隐藏CSS样式。使用CSS的基本语法如下。使用CSS时应该遵循以下三个原则。当有多个属性时，“；”必须在属性之间使用分离。集合属性必须包含在“”中。如果一个属性有多个值，它们必须用空格隔开。样式表的基础是组成它的CSS规则，每个规则都是一个独立的语句。CSS规则由两部分组成：选择器和声明。声明由属性和属性值组成。语法格式为：选择器属性：值；选择器用于指定要将样式表应用到哪个超文本标记语言标签，任何超文本标记语言元素都可以是一个CSS选择器。例如，P颜色：红色；类别选择器类别选择器可以对相同的超文本标记语言

13、标签进行分类，并定义不同的样式。定义类别选择器时，添加一个点“.”在自定义类的名称之前。在页面中，元素的标识属性指定了唯一元素的标识。同样，标识选择器可用于为特定元素定义唯一的样式。身份选择器的应用类似于类选择器的应用，只要类被身份替换。包含选择器当元素1包含子元素2时，您可以为子元素2定义包含选择器。53，54，声明是包含在大括号中的内容。首先，给出属性名，它可以包括颜色、边界和字体，然后是属性值，以给出属性的可接受值。添加分号后，您可以指定多种样式。例如：H1字体大小size: 24ptColor:绿色组合规则用户在大括号中列出声明，有时为同一个选择器列出几个规则，此时，规则可以被组合和编

14、写，而许多不同的选择器有重复的样式表声明。为了减少样式表的重复声明，允许组合选择器声明。例如：h1，H2，H3，H4，H5，h6color3360red继承嵌套在选择器中的所有选择器的Font-family: sans-serif将继承由外部选择器指定的属性值，除非另有更改。例如，BODY定义的颜色值也适用于段落文本。注释注释是用户嵌入在CSS代码中的特殊位，浏览器会忽略注释。样式表中的注释以与C语言编程中的约定相同的方式指定。CSS上的注释以字符/*开始，以*/结束，浏览器将忽略它们之间的内容。2.3.3添加样式表的方法，开发人员可以使用任何一种文本编辑工具来编写样式表CSS，比如Windo

15、ws下的记事本和写字板。此外，你还可以使用一些特殊的超文本标记语言文本编辑工具(如首页，超级编辑等)。)来编辑CSS文档。在CSS中，有四种不同的方法将样式表的功能添加到网页中。方法包括：直接定义元素的STYLE属性，定义内部样式表，嵌入外部样式表和连接外部样式表。以上四种方法将样式表分为内部样式表和外部样式表。添加css样式表的方法内嵌样式表内嵌样式表是使用它们的最简单方法，标签样式属性支持这种方法，CSS规则直接写在标签中，例如：但是，当使用此方法定义样式表时，只能控制此元素。添加CSS样式表的方法嵌入式样式表(内部样式表)嵌入式样式表是一种样式集，是网页代码的一部分。CSS直接嵌入到带有

16、标签的超文本标记语言文件中。它与行间样式表相似，但不同。行间样式表的范围只有一行，而嵌入式样式表可以作用于整个文档。嵌入样式表就是将样式表放入页面。这些定义的样式应用于特定的页面，并且样式表添加了元素。链接样式表也是一个外部样式表。它首先用扩展名定义一个文件。css，它包含所需的所有CSS规则，但不包含任何HTML代码，如blue.css。样式表文件创建后，它需要与要格式化的HTML文件相关联。这种添加样式表的方式是通过超文本标记语言中的标签实现的，链接标签只出现在超文本标记语言页面上。链接样式表的方法是将以下代码添加到超文本标记语言文件中：行，嵌入样式表的输入样式表。简而言之，当浏览器读取一个超文本标记语言文件时，它会以嵌入的方式将样式表复制到超文本标记语言文件中。创建css文件的方法非常简单，只需将定义元素样式的代码放在记事本文件中，并将扩展名更改为。保存文件时使用CSS。输入外部样式表的方法类似于链接的方法，只是链接方法不能与其他方法结合使用，但输入法可以。请注意，当使用“import”来导入一个外部样式表文件时，它