《HTML文档标记》课件

文档标记HTMLHTML文档标记是网页的核心，用于描述网页的内容和结构标记由尖括号包围，例如html和/html，分别代表HTML文档的开始和结束投稿人DH DingJunHong课程目标理解语言基础掌握常用标签构建基本网页结构HTML HTML学习HTML的基本语法和结构，掌握网页的熟练运用常用的HTML标签创建文本、图像能够独立设计和创建简单的网页，并进行基基本构成要素、链接、表格、表单等元素本的内容填充和样式设置简介HTMLHTMLHyper TextMarkup Language是一种用于创建网页的标准标记语言它使用标签来定义网页的结构和内容，例如标题、段落、图像、链接等HTML是一种简单易学的语言，但它也是一种强大的语言，可以用于创建各种类型的网页，从简单的个人网站到复杂的企业级网站文档结构HTML文档类型声明告知浏览器使用哪个版本的HTML规范，通常是HTML5HTML元素构成网页内容的基本单位，例如标题、段落、图片等头部信息包含文档的元数据，例如标题、字符集、样式表等主体内容包含网页上可见的文字、图片、视频等实际内容标签HTML标签定义标签语法HTML标签用于定义网页内容结构和语义，告诉浏览器如何呈标签由尖括号括起来，例如粗体，标签可以包含属性来设置现内容样式和行为标签类型标签作用标签分为单标签和双标签，单标签只有一个标签名，例如不同标签用于表示不同类型的内容，例如标题、段落、链接，双标签有一对，例如、图片等段落基本标签标签标签语法

11.HTML

22.HTML标签是HTML文档的基HTML标签通常成对出现，以本组成部分，用于定义网页内“”开头，以“”结尾，例如p容的结构和样式和/p标签属性标签嵌套

33.

44.标签可以包含属性，用于提供HTML标签可以嵌套，以便形更多关于标签的信息，例如成复杂的网页结构，例如img src=image.jpg alt=图divp一段文字片描述/p/div文本格式标签文本格式标签文本格式标签用来控制文本的显示样式，例如加粗、斜体、下划线等•加粗•斜体•下划线列表标签无序列表有序列表定义列表使用ul标签创建无序列表，使用li标使用ol标签创建有序列表，使用li标使用dl标签创建定义列表，使用dt标签创建列表项签创建列表项签定义项目，使用dd标签定义描述链接标签定义超链接链接文本目标空白页使用a标签创建链接，href属性指定目标链接文本是用户点击的内容，通常使用描述使用target属性_blank在新窗口或标签页URL性文字打开链接图像标签属性属性

11.src

22.alt指定图像文件的路径或URL提供图像的文字描述，供屏幕阅读器或图像无法加载时显示和属性属性

33.width height

44.title指定图像的宽度和高度，以像当鼠标悬停在图像上时，会显素为单位示该属性的值表格标签定义表格表格标签TABLE标签用于定义表格每个表格包含一个或多个行（TR），•TABLE每行包含一个或多个单元格（TD）•TR•TD•TH表单标签输入框按钮用户输入文本、数字或其他数据提交表单或执行特定操作•文本框•提交按钮•密码框•重置按钮•数字框选择框其他用户选择多个选项之一用于收集其他类型数据或提供额外的功能•下拉菜单•文本域•复选框•文件上传•单选按钮•日期选择器样式表样式表是用来定义网页样式的规则集合通过使用样式表，我们可以控制网页元素的外观，例如字体、颜色、大小、布局等等基本语法CSS选择器属性值CSS选择器用于选择要应用样式的HTML属性用于指定要应用于元素的样式特性，例值是为每个属性指定的具体值，例如red元素如颜色、字体大小或边框、12px或bold选择器CSS元素选择器类选择器根据元素标签名称选择元素，例通过类属性选择元素，例如如p选择所有段落元素.example选择所有带有class属性为example的元素选择器组合选择器ID通过ID属性选择元素，例如使用多个选择器来组合选择元素#example选择所有带有id属性为，例如p.example选择所有带有example的元素class属性为example的段落元素文字样式字体大小字体颜色字体加粗字体倾斜使用font-size属性设置文字的使用color属性设置文字的颜使用font-weight属性设置文使用font-style属性设置文字大小，单位可以是像素（px）色，可以使用颜色名称或十六字的粗细，可以使用bold或的倾斜方式，可以使用italic、百分比%或em进制颜色代码normal或normal背景样式背景颜色背景图片12使用CSS的`background-使用`background-image`属color`属性可以设置背景颜色性可以设置背景图片，例如，例如`background-color:`background-image:#f0f0f0;`可以设置背景颜色urlbackground.jpg;`可以为浅灰色设置背景图片为`background.jpg`文件背景重复背景位置34使用`background-repeat`使用`background-position`属性可以控制背景图片的重复属性可以设置背景图片的位置方式，例如`background-，例如`background-repeat:no-repeat;`可以设置position:center;`可以设置背背景图片不重复景图片居中边框样式边框粗细边框样式边框颜色使用border-width属性设置边框的粗细使用border-style属性设置边框的样式使用border-color属性设置边框的颜色•solid•颜色名称•thin•dashed•十六进制颜色值•medium•dotted•RGB颜色值•thick盒模型内容区域填充边框外边距内容区域包含在HTML元素中填充是指内容区域周围的空白边框是包围内容区域和填充区外边距是元素外部的空白区域显示的所有内容，例如文本、区域，用于增加内容区域与边域的线，可以控制边框的宽度，用于控制元素之间的间距，图片、视频等框之间的距离，使页面更加美、颜色和样式使页面布局更加合理观布局样式弹性盒子网格布局浮动布局弹性盒子模型是一种更灵活的布局方式它网格布局使用行和列来创建二维布局，方便浮动布局可以将元素置于文本周围，适用于可以根据内容自动调整元素的宽度和高度，管理大量内容，适用于复杂布局场景创建侧边栏、图片轮播等布局效果并支持各种排列方式定位静态定位1默认定位方式，元素在正常文档流中排列，定位属性无效相对定位2元素基于正常文档流定位，可使用left、top、right、bottom相对自身位置进行移动绝对定位3元素脱离正常文档流，相对于最近的已定位祖先元素或视窗进行定位固定定位4元素脱离正常文档流，相对于视窗进行定位，即使滚动页面也不会移动位置浮动浮动是CSS中一个重要的布局属性，它允许元素脱离标准文档流，向左或向右浮动基础概念1元素脱离文档流，向左或向右浮动块级元素2浮动元素会自动转换为块级元素影响3会影响周围元素的布局清除浮动4使用clear属性清除浮动影响浮动可以使元素在页面上更灵活地排列，但也会造成一些布局问题，例如，浮动元素可能会影响其他元素的定位，需要使用清除浮动来解决这些问题响应式设计自适应布局媒体查询12根据不同设备尺寸自动调整网使用媒体查询来识别设备类型页布局，优化用户体验和屏幕尺寸，并应用不同的样式灵活的图像灵活的字体34使用响应式图像技术，根据设使用相对单位（如百分比）设备尺寸加载不同的图像尺寸置字体大小，确保在不同设备上可读媒体查询响应式布局关键定制化体验媒体查询允许网站根据设备屏幕尺寸和特性自动调整布局根据不同的设备特性，例如屏幕大小、方向和分辨率，加载不同的样式新特性HTML5HTML5是HTML的最新版本，它引入了许多新特性，使网页设计和开发更加强大、灵活和易用这些新特性涵盖了语义化、多媒体、离线功能、本地存储以及性能优化等方面语义化标签增强可读性提高搜索引擎优化提升网页可访问性语义化标签使HTML代码更易于理解，提高搜索引擎可以更好地理解页面内容，提高网语义化标签有助于屏幕阅读器等辅助工具更可读性，使代码更易于维护站排名好地理解网页内容多媒体标签音频标签视频标签音频标签用于在网页中嵌入音频内容，支持多种音频格式，例视频标签用于在网页中嵌入视频内容，支持多种视频格式，例如MP

3、WAV等如MP

4、WebM等嵌入标签标签Canvas嵌入标签用于在网页中嵌入其他网页或文件，例如YouTube视Canvas标签用于在网页中创建动态图形，例如游戏、动画等频、PDF文档等离线功能无网络访问缓存数据离线应用HTML5允许网页在没有网络连接的情况下浏览器可以缓存之前访问过的网页内容，即开发者可以创建离线应用，允许用户在没有，仍然可以访问和使用部分内容使没有网络，用户也可以浏览缓存的页面网络连接的情况下使用应用程序本地存储数据持久化数据存储本地存储用于将数据保存在用户本地存储支持存储键值对数据，的浏览器中，即使关闭浏览器后提供一种简单方便的机制来存储也能保存用户信息、应用配置等安全性本地存储提供数据安全机制，只有来自同一域的网页才能访问这些数据总结与思考基础网页结构1HTML2掌握HTML基础知识，学习创了解网页元素，学习网页结构建静态网页的搭建页面样式实践运用34使用CSS进行网页样式设计，通过实践练习，熟练掌握提高网页美观度HTML基础技能，提升网页制作能力课后练习实践应用1尝试创建简单的HTML页面拓展学习2深入了解更多HTML标签和属性项目实战3完成一个小型网站项目通过练习巩固所学知识，并进一步探索HTML的更多应用推荐使用在线编辑器或本地开发环境进行实践。