《HTML语言框架》课件

HTML语言框架HTML语言简介超文本标记语言HTML是超文本标记语言(HyperTextMarkupLanguage)的缩写，它是一种用于创建网页的标记语言。网页结构HTML用于定义网页的结构和内容，包括标题、段落、图像、链接等元素。浏览器解析浏览器可以理解并解析HTML代码，将网页内容呈现给用户。HTML发展历程1HTML5(2014)新增语义化标签、多媒体支持、性能优化2HTML4(1997)完善标签规范、新增表格、框架等功能3HTML3.2(1997)引入样式表，提高网页可读性和可维护性4HTML2.0(1995)建立基本标签体系，推动网页快速发展5HTML1.0(1993)网页诞生，开启网络信息时代HTML语法规则标签标签由尖括号括起来，例如``、``和``。属性属性在标签中定义，用于提供有关元素的额外信息，例如`src`、`href`和`alt`。嵌套标签可以嵌套，例如``标签可以包含``标签。HTML基本元素标签(Tags)标签是HTML语言的核心，用于定义网页内容的结构和语义。属性(Attributes)属性是标签的附加信息，用于提供额外的描述或控制元素的行为。文本内容(Content)文本内容是标签之间包含的实际文本，如标题、段落和列表项。HTML常用标签段落标签用于创建段落。标题标签用于定义标题。图像标签用于插入图像。超链接标签用于创建链接。HTML属性使用1属性名称属性名称区分大小写，如：`class`和`Class`是不同的属性。2属性值属性值必须用引号括起来，可以是字符串、数字或布尔值。3属性作用属性可以为元素提供额外的信息，例如：`id`用于标识元素、`style`用于设置元素的样式。HTML文档结构1DOCTYPE声明告诉浏览器使用哪个版本的HTML标准。2HTML根元素包含整个HTML文档的所有内容。3头部元素包含元数据信息，例如标题、字符集和样式表。4主体元素包含用户可见的HTML文档内容，例如文本、图片和链接。HTML文档头部元数据文档标题、、日期、编码等。链接文件引入CSS样式表和JavaScript脚本。字符集指定网页使用的字符编码。HTML文档主体主体内容主体部分包含网页中所有可见内容,例如文本、图片、视频等.标签结构主体内容由各种HTML标签组成,用来描述网页的结构和内容.逻辑组织主体部分通常使用标题、段落、列表等标签来组织内容,提升可读性.HTML标题标签标题级别HTML提供了六个级别的标题标签，从H1到H6，级别越高越重要。文本格式标题标签用于标记网页中的标题，使用不同的标签可以表示不同级别的标题，例如H1代表一级标题，H2代表二级标题。语法结构标题标签的语法结构为`标题文本`，其中``为开始标签，``为结束标签，标题文本是需要显示的标题内容。HTML段落标签作用用于定义一段文本。浏览器会自动在段落前后添加空格，使文本更易读。语法<p>段落内容</p>HTML格式化标签粗体标签使用标签表示粗体文本。斜体标签使用标签表示斜体文本。下划线标签使用标签表示下划线文本。HTML图像标签HTML图像标签使用<img>标签，用于在网页中插入图片。<img>标签是一个空标签，没有结束标签，其属性用来定义图片的属性。常见的属性包括：src属性指定图片的路径，alt属性指定图片的描述信息，用于图片无法显示时的替代文本，title属性指定图片的标题，用于鼠标悬停时的提示文本。width和height属性指定图片的宽度和高度，用于控制图片的大小。HTML超链接标签定义链接使用<a>标签定义链接设置目标使用href属性指定链接地址显示文本链接文本内容HTML列表标签无序列表使用UL标签和LI标签创建无序列表，每个列表项使用LI标签表示。有序列表使用OL标签和LI标签创建有序列表，每个列表项使用LI标签表示。嵌套列表可以在列表项中嵌套其他列表，创建多层级的列表结构。HTML表格标签表格标签TABLE标签用于创建表格，TR标签定义表格行，TD标签定义表格单元格。表格属性BORDER属性设置表格边框，CELLPADDING属性设置单元格内边距，CELLSPACING属性设置单元格间距。表格示例使用表格标签可以方便地展示数据，例如产品列表，价格信息等。HTML表单标签1输入框用于收集用户输入的文本信息，例如用户名、密码或地址。2按钮用于提交表单或执行其他操作，例如“提交”或“重置”。3下拉列表提供预定义选项供用户选择，例如国家、性别或产品类型。4复选框允许用户选择多个选项，例如兴趣爱好或服务类型。HTML框架标签框架标签框架标签（<iframe>）允许在当前网页中嵌入另一个网页。框架用法使用框架标签可以创建网页内的独立区域，展示其他内容或网站。HTML多媒体标签音频标签使用<audio>标签嵌入音频文件，支持MP3、WAV等格式，并可设置播放、暂停、音量等控制。视频标签使用<video>标签嵌入视频文件，支持MP4、WebM等格式，并可设置播放、暂停、全屏等控制。HTML布局标签DIV标签用于将网页内容分成不同的区域，方便进行样式控制。SPAN标签用于将网页内容的某些部分进行标记，方便进行样式控制。TABLE标签用于创建表格，方便进行数据展示和布局。HTML样式应用内联样式直接在HTML元素中使用style属性。嵌入式样式将样式代码嵌入到HTML文档的<style>标签中。外部样式表将样式代码独立存放在CSS文件中，然后通过<link>标签引入HTML文档。CSS选择器1元素选择器根据标签名选择元素，例如`p`选择所有段落。2ID选择器根据元素的id属性选择元素，例如`#header`选择id为`header`的元素。3类选择器根据元素的class属性选择元素，例如`.important`选择所有class为`important`的元素。4后代选择器选择父元素内部的所有子孙元素，例如`divp`选择所有`div`元素内部的`p`元素。CSS文本样式字体系列选择适当的字体系列可以提升文本的可读性和视觉效果。字体大小根据内容和页面布局调整字体大小，确保文本清晰易读。字体颜色使用颜色来强调重点内容，并保持一致性。字体粗细通过设置粗细来突出重要信息，并保持视觉平衡。CSS字体样式字体系列选择不同的字体系列，例如"TimesNewRoman"、"Arial"、"Helvetica"等，来改变文本的外观和风格。字体大小使用"font-size"属性来设置字体的大小，例如"12px"、"16pt"等。字体粗细通过"font-weight"属性来控制字体的粗细，例如"normal"、"bold"、"lighter"等。字体样式使用"font-style"属性来指定字体的样式，例如"normal"、"italic"、"oblique"等。CSS背景样式背景颜色使用background-color属性设置元素的背景颜色。例如：background-color:#FF0000;设置背景颜色为红色。背景图片使用background-image属性设置元素的背景图片。例如：background-image:url('image.jpg');设置背景图片为image.jpg。背景重复使用background-repeat属性设置背景图片的重复方式。例如：background-repeat:no-repeat;设置背景图片不重复。背景位置使用background-position属性设置背景图片的位置。例如：background-position:center;设置背景图片居中显示。CSS盒模型内容区内容区是盒模型的最内层，包含元素的实际内容，例如文本、图片等。内边距内边距是内容区与边框之间的空白区域，用于控制内容与边框之间的距离。边框边框是围绕内容区和内边距的线，用于定义元素的外观。外边距外边距是边框与其他元素之间的空白区域，用于控制元素之间的间隔。CSS定位1静态定位默认定位方式，不影响元素的布局。2相对定位相对于元素本身的位置进行偏移。3绝对定位相对于最近的祖先元素进行定位。4固定定位相对于浏览器窗口进行定位。CSS浮动布局控制CSS浮动允许元素脱离文档流，控制其在页面上的位置。文本环绕浮动元素可以使文本环绕在周围，创造出灵活的版式设计。多列布局通过浮动，可以轻松实现多列布局，并将元素排列在不同的列中。CSS实例演示将学习到的