《HTML语言框架》课件

语言框架HTML语言简介HTML超文本标记语言网页结构是超文本标记语言用于定义网页的结构和内HTML HyperHTML的缩容，包括标题、段落、图像、链Text MarkupLanguage写，它是一种用于创建网页的标接等元素记语言浏览器解析浏览器可以理解并解析代码，将网页内容呈现给用户HTML发展历程HTMLHTML520141新增语义化标签、多媒体支持、性能优化HTML419972完善标签规范、新增表格、框架等功能HTML

3.219973引入样式表，提高网页可读性和可维护性HTML

2.019954建立基本标签体系，推动网页快速发展HTML

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