《HTML语言基础》课件

语言基础HTML本课件旨在全面介绍HTML语言的基础知识，为Web开发的学习打下坚实的基础我们将从HTML的概述、发展历程入手，逐步深入到标签分类、语法、常用标签以及属性的使用同时，还会介绍HTML文档的结构、标签嵌套规则、注释语法和语义化等重要概念通过学习本课件，您将能够熟练掌握HTML语言，为后续的Web开发学习做好充分准备语言概述HTML定义作用特点HTML（HyperText MarkupHTML主要用于构建网页的结构和内HTML具有简单易学、跨平台性好、Language）即超文本标记语言，是容，通过标签将各种元素组织起来，可扩展性强等特点几乎所有的浏览构成网页的基础它使用一系列标签形成一个完整的网页它负责网页的器都支持HTML，使得网页能够在各来描述网页的内容结构，包括文本、骨架，而CSS负责美化，JavaScript种设备上正常显示HTML也在不断图像、链接等元素，并最终呈现给用负责交互发展，以适应新的Web技术的需求户语言发展历程HTML早期阶段1HTML的早期版本主要用于学术交流，由蒂姆·伯纳斯·李在1990年代初期发明这些版本功能较为简单，主要用于文本的格式化和链接标准化2随着Web的普及，HTML需要一个标准化的规范W3C（万维网联盟）开始制定HTML的标准，并陆续发布了HTML

2.

0、HTML

3.

2、HTML

4.01等版本HTML53HTML5是HTML的最新版本，于2014年正式发布它引入了许多新的特性，如语义化标签、多媒体支持、离线存储等，使得Web应用更加强大和灵活标签分类HTML块级标签行内标签空标签123块级标签占据一整行，可以包行内标签只占据内容所需的空空标签没有闭合标签，只有开含其他块级标签和行内标签间，不能包含块级标签常见始标签常见的空标签有BR、常见的块级标签有DIV、P、H1-的行内标签有SPAN、A、IMG HR、IMG、META、LINK等H

6、UL、OL、LI等、STRONG、EM等标签语法HTML标签结构HTML标签由开始标签、结束标签和标签内容组成例如这是一个段落p/p标签属性标签属性用于提供关于标签的额外信息，写在开始标签中例如图片img src=image.jpg alt=标签嵌套HTML标签可以嵌套使用，但必须遵循一定的规则例如这是一个嵌套的段落divp/p/div常用标签HTML文本标签包括H1-H

6、P、SPAN、STRONG、EM等，用于组织和格式化文本内容列表标签包括UL、OL、LI等，用于创建无序列表和有序列表链接标签A标签用于创建超链接，可以链接到其他网页或当前网页的某个位置图像标签IMG标签用于在网页中插入图像，需要指定图像的URL地址标题标签使用场景示例H1-H6HTML提供了六个级别的标题标签，标题标签用于组织网页的内容结构，h1这是一个一级标题/h1h2分别是H

1、H

2、H

3、H

4、H5和H6使得用户能够快速了解网页的主题和这是一个二级标题/h2h3这是一H1标签表示最高级别的标题，H6内容通常，一个网页只有一个H1个三级标题/h3标签表示最低级别的标题标签，用于表示网页的主标题段落标签标签使用场景示例P123P标签用于定义一个段落段落P标签用于将网页的文本内容分p这是一个段落这是一个段是网页中最常用的文本组织形成多个段落，使得网页的结构落这是一个段落/p式，用于将相关的文本内容组更加清晰，易于阅读段落可织在一起以包含文本、链接、图像等元素字体样式标签标签标签B I1B标签用于定义粗体文本例如I标签用于定义斜体文本例如2这是粗体文本这是斜体文本b/b i/i标签标签S U4S标签用于定义删除线文本例如U标签用于定义下划线文本例如3这是删除线文本这是下划线文本s/s u/u列表标签标签ULUL标签用于定义无序列表列表中的每一项都使用LI标签定义例如ulli第一项/lili第二项/li/ul标签OLOL标签用于定义有序列表列表中的每一项也使用LI标签定义例如olli第一项/lili第二项/li/ol标签LILI标签用于定义列表中的每一项它可以包含文本、链接、图像等元素链接标签标签属性使用场景A targetA标签用于定义超链接通过href属target属性用于指定链接的打开方式链接标签用于将网页连接到其他网页性指定链接的目标URL例如a_blank表示在新窗口中打开链接，或当前网页的某个位置它是Webhref=https://www.example.com_self表示在当前窗口中打开链接的核心元素之一这是一个链接例如/a ahref=https://www.example.com这是一个在新target=_blank窗口中打开的链接/a图像标签标签属性IMG alt12IMG标签用于在网页中插alt属性用于指定图像的替入图像通过src属性指代文本当图像无法显示定图像的URL例如时，会显示替代文本这img src=image.jpg对于SEO和可访问性非常alt=图片重要和属性width height3width和height属性用于指定图像的宽度和高度可以按像素或百分比指定建议设置这两个属性，以避免图像加载时页面布局发生变化表格标签标签描述TABLE定义表格TR定义表格行TD定义表格单元格TH定义表头单元格表格标签用于在网页中创建表格可以使用TABLE、TR、TD、TH等标签来定义表格的结构和内容表格通常用于显示结构化的数据表单标签标签FORMFORM标签用于定义HTML表单表单用于收集用户输入的数据，并将其提交到服务器进行处理例如formaction=submit.php method=post.../form标签INPUTINPUT标签用于定义表单中的输入字段type属性指定输入字段的类型，如text、password、email、radio、checkbox等例如input type=text name=username其他表单标签除了INPUT标签，还有TEXTAREA（多行文本输入框）、SELECT（下拉列表）、BUTTON（按钮）等表单标签框架标签标签标签标签FRAMESET FRAMEIFRAMEFRAMESET标签用于定义一个框架集FRAME标签用于定义框架集中的一IFRAME标签用于在当前HTML文档框架集将浏览器窗口分割成多个区个框架src属性指定框架中显示的中嵌入另一个HTML文档它类似于域，每个区域显示一个独立的HTML HTML文档的URL该标签在HTML5FRAME标签，但更加灵活，也更符文档该标签在HTML5中已不推荐中已不推荐使用合HTML5的规范例如iframe使用src=other.html/iframe属性使用HTML属性语法通用属性特定属性123HTML属性写在开始标签中，以属有些属性可以用于所有的HTML标有些属性只能用于特定的HTML标性名=属性值的形式出现属性签，如id、class、style、title等签，如src属性只能用于IMG标签值通常用双引号或单引号括起来id属性用于指定元素的唯一ID，，href属性只能用于A标签class属性用于指定元素的CSS类名，style属性用于指定元素的CSS样式，title属性用于指定元素的提示文本文档结构HTMLhtml1根标签head2头部信息body3主体内容一个标准的HTML文档通常包含以下几个部分!DOCTYPE html（文档类型声明）、html（根标签）、head（头部信息）和body（主体内容）头部信息包括文档的标题、字符编码、CSS样式、JavaScript代码等主体内容包括网页中显示的所有内容标签嵌套规则HTML正确嵌套1HTML标签必须正确嵌套，即先开始的标签后结束例如divp这是一个段落/p/div是正确的嵌套错误嵌套2错误的嵌套会导致网页显示异常例如divp这是一个段落/div/p是错误的嵌套避免交叉嵌套3尽量避免标签的交叉嵌套例如bi这是一个文本/b/i应该改为bi这是一个文本/i/b注释语法HTML注释语法使用场景注意事项HTML注释用于在代码中添加说明，注释可以用于解释代码的功能、目的注释不能嵌套使用注释中的内容会不会在网页中显示注释以!--开或实现方式，方便自己或他人阅读和被浏览器忽略，因此可以包含任何字始，以--结束例如!--这是理解代码也可以用于临时屏蔽代码符，但建议不要包含敏感信息一个注释--，进行调试或测试语义化HTML语义化定义语义化标签12HTML语义化是指使用具有HTML5引入了许多语义化语义意义的HTML标签来描标签，如ARTICLE、ASIDE述网页的内容结构，而不是、NAV、HEADER、仅仅使用DIV和SPAN标签FOOTER、SECTION等这些标签能够更清晰地描述网页的各个部分，提高网页的可读性和可维护性语义化优点3HTML语义化有助于提高网页的可访问性、SEO排名，以及代码的可维护性它使得搜索引擎和屏幕阅读器能够更好地理解网页的内容结构特殊字符HTML字符描述实体小于号lt;大于号gt;和号amp;引号quot;撇号apos;在HTML中，有些字符具有特殊的含义，不能直接使用需要使用实体来表示常用的HTML实体包括、、、、等文件存储与发布HTML文件存储HTML文件通常以.html或.htm为扩展名进行存储建议使用UTF-8编码，以支持各种字符集文件发布HTML文件可以通过Web服务器（如Apache、Nginx）进行发布将HTML文件上传到Web服务器的指定目录，即可通过浏览器访问域名和空间发布网站需要注册域名和购买Web空间域名是网站的地址，Web空间用于存储网站的文件编辑器使用HTML文本编辑器IDE可以使用任何文本编辑器编写也可以使用集成开发环境（IDEHTML代码，如Notepad++、）编写HTML代码，如Sublime Text、Visual StudioWebStorm、Eclipse等IDECode等这些编辑器通常提供通常提供更强大的功能，如代代码高亮、自动完成等功能，码调试、版本控制等提高开发效率在线编辑器还可以使用在线HTML编辑器，如CodePen、JSFiddle等这些编辑器可以在浏览器中直接编写和运行HTML代码，方便快捷文件编码HTML编码UTF-8UTF-8是一种通用的字符编码，能2够支持各种字符集，包括中文、英字符编码文、日文、韩文等建议使用UTF-8编码，以避免出现乱码问题字符编码用于将字符转换为计算机1能够识别的数字常用的字符编码指定编码有ASCII、UTF-

8、GBK等可以在HTML文档的head标签中3使用meta charset=UTF-8来指定字符编码文件预览HTML浏览器预览开发者工具移动设备预览可以使用任何浏览器预览HTML文件浏览器通常提供开发者工具，可以用可以使用移动设备（如手机、平板电双击HTML文件，或在浏览器中打于查看HTML代码、CSS样式、脑）预览HTML文件，以确保网页在开HTML文件，即可查看网页的效果JavaScript代码，以及进行调试和性各种设备上都能够正常显示能分析标签兼容性处理HTML浏览器兼容性兼容性处理polyfill123不同的浏览器对HTML标签的可以使用CSS Hack、条件注释可以使用polyfill来为旧版本的支持程度可能不同有些标签等技术进行兼容性处理，以确浏览器提供新特性的支持在某些浏览器中可能无法正常保网页在各种浏览器中都能够polyfill是一种JavaScript代码显示，或显示效果不一致正常显示，能够模拟新特性的行为新特性HTML5语义化标签1多媒体支持2离线存储3本地存储4地理位置5HTML5引入了许多新的特性，如语义化标签、多媒体支持、离线存储、本地存储、地理位置、拖放API、画布Canvas等这些新特性使得Web应用更加强大和灵活语义化标签HTML5标签标签标签ARTICLE ASIDENAVARTICLE标签用于定义独立的文章内ASIDE标签用于定义与主要内容相关NAV标签用于定义导航链接例如容例如博客文章、新闻报道等的附加信息例如侧边栏、广告等网站的菜单、目录等多媒体标签HTML5标签AUDIOAUDIO标签用于在网页中嵌入音频支持多种音频格式，如MP

3、WAV、OGG等例如audio src=audio.mp3controls/audio标签VIDEOVIDEO标签用于在网页中嵌入视频支持多种视频格式，如MP

4、WebM、OGV等例如video src=video.mp4controls/video标签SOURCESOURCE标签用于为AUDIO和VIDEO标签指定多个媒体资源浏览器会根据自身的支持情况选择合适的媒体资源表单增强HTML5新的输入类型新的表单属性12HTML5引入了许多新的输HTML5引入了许多新的表入类型，如email、url、单属性，如placeholder、number、range、date、required、autofocus、time、color等这些新的autocomplete等这些新输入类型能够提供更好的的表单属性能够简化表单用户体验和数据验证的开发和增强用户体验表单验证3HTML5提供了内置的表单验证功能浏览器能够自动验证表单数据的格式和有效性，减少服务器端的压力离线存储HTML5文件manifestmanifest文件是一个文本文件，列2出了需要缓存的资源浏览器会根Application Cache据manifest文件缓存资源，并在离Application Cache是一种HTML5线状态下使用缓存的资源1离线存储技术，允许Web应用在离线状态下运行通过定义一个更新缓存manifest文件，指定需要缓存的资源当manifest文件发生变化时，浏览3器会重新缓存资源可以通过修改manifest文件来更新缓存本地存储HTML5使用场景localStorage sessionStoragelocalStorage是一种HTML5本地存sessionStorage类似于localStorage本地存储可以用于存储用户的偏好设储技术，允许Web应用在客户端存，但数据只在当前会话中有效当用置、购物车数据、登录状态等可以储键值对数据数据会永久存储在浏户关闭浏览器窗口时，数据会被清除提高Web应用的性能和用户体验览器中，除非用户手动删除地理位置HTML5获取位置使用场景Geolocation API123Geolocation API是一种HTML5可以使用地理位置可以用于提供基于位置API，允许Web应用获取用户的navigator.geolocation.getCurre的服务，如地图应用、附近商家地理位置信息需要用户授权才ntPosition方法获取用户的当前推荐等能获取地理位置信息位置该方法接受一个成功回调函数和一个错误回调函数拖放HTML5API拖放事件HTML5拖放API提供了一系列的拖放事件，如dragstart、drag、dragenter、dragover、dragleave、drop、dragend等可以使用这些事件来控制拖放的行为设置可拖放可以使用draggable属性将元素设置为可拖放例如divdraggable=true这是一个可拖放的元素/div数据传输可以使用dataTransfer对象在拖放过程中传输数据例如设置拖放的数据类型和数据内容画布HTML5Canvas标签使用场景Canvas Canvas APICanvas标签用于在网页中创建一个CanvasAPI提供了一系列的Canvas可以用于创建各种Web游戏画布可以使用JavaScript在画布JavaScript方法，用于在画布上绘制、数据可视化、图像处理等应用它上绘制图形、图像和文本例如各种图形如矩形、圆形、线条、文提供了一种强大的图形绘制能力canvas id=myCanvas本等可以使用这些方法创建各种复width=200杂的图形效果height=100/canvas其他新特性HTML5Web WorkersWeb Sockets12Web Workers允许Web Sockets提供了一种JavaScript代码在后台线全双工的通信协议，允许程中运行，避免阻塞主线客户端和服务器之间进行程，提高Web应用的性能实时的双向通信可以用于创建实时的Web应用，如聊天室、在线游戏等Server-Sent Events3Server-Sent Events允许服务器向客户端推送数据客户端可以订阅服务器的事件，并接收服务器推送的数据可以用于创建实时的信息流应用基础知识CSS选择器1属性2值3CSS（Cascading StyleSheets）即层叠样式表，用于控制网页的样式和布局CSS由选择器、属性和值组成选择器用于选择HTML元素，属性用于指定元素的样式，值用于指定属性的具体值语法结构CSS基本语法注释引入方式CSS规则由选择器和声明块组成声CSS注释以/*开始，以*/结束注CSS可以通过三种方式引入到HTML明块包含一个或多个声明，每个声明释可以用于解释代码的功能、目的或文档中行内样式、内部样式和外部由属性和值组成例如p{实现方式例如/*这是一个注释样式建议使用外部样式，以提高代color:red;font-size:16px;*/码的可维护性}选择器分类CSS元素选择器元素选择器用于选择HTML元素例如p{color:red;}选择所有的P标签类选择器类选择器用于选择具有相同class属性的HTML元素例如.red{color:red;}选择所有class属性为red的元素选择器IDID选择器用于选择具有特定id属性的HTML元素例如#header{background-color:#eee;}选择id属性为header的元素属性应用CSS颜色属性字体属性12用于设置元素的颜色，如用于设置元素的字体，如color（文本颜色）、font-size（字体大小）、background-color（背景font-family（字体类型）颜色）、border-color（、font-weight（字体粗细边框颜色）等）等文本属性3用于设置元素的文本样式，如text-align（文本对齐方式）、text-decoration（文本装饰）、line-height（行高）等盒模型CSS内边距内容1内容与边框之间的距离，使用元素的内容，如文本、图像等2padding属性设置外边距边框4元素与元素之间的距离，使用围绕元素内容的边框，使用border3margin属性设置属性设置CSS盒模型用于描述HTML元素的布局每个HTML元素都可以看作一个盒子，由内容、内边距、边框和外边距组成盒模型决定了元素在页面中的大小和位置背景属性CSSbackground-color background-image background-repeat设置元素的背景颜色可以使用颜色设置元素的背景图像可以使用图像设置背景图像的重复方式可以选择名称、十六进制值、RGB值等例如的URL地址例如background-repeat（重复）、repeat-x（水平重background-color:red;image:urlimage.jpg;复）、repeat-y（垂直重复）、no-repeat（不重复）等例如background-repeat:no-repeat;字体属性CSSfont-size font-family12设置字体的大小可以使设置字体的类型可以指用像素（px）、em、rem定多个字体，浏览器会按等单位例如font-照顺序选择可用的字体例如size:16px;font-family:Microsoft YaHei,sans-serif;font-weight3设置字体的粗细可以选择normal（正常）、bold（粗体）、lighter（更细）、bolder（更粗）等可以使用数字100-900指定粗细程度例如font-weight:bold;文本属性CSStext-align设置文本的对齐方式可以选择left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等例如text-align:center;text-decoration设置文本的装饰效果可以选择none（无装饰）、underline（下划线）、overline（上划线）、line-through（删除线）等例如text-decoration:underline;line-height设置文本的行高可以使用像素（px）、em、数字等单位例如line-height:

1.5;列表属性CSSlist-style-type list-style-image list-style-position设置列表项的标记类型可以选择设置列表项的标记图像可以使用图设置列表项的标记位置可以选择disc（实心圆）、circle（空心圆）像的URL地址例如list-inside（标记在列表项内部）、、square（实心方块）、decimal（style-image:outside（标记在列表项外部）例数字）、lower-alpha（小写字母）urlimage.png;如list-style-position:、upper-alpha（大写字母）等例inside;如list-style-type:square;表格属性CSSborder-collapse border-spacing12设置表格的边框是否合并设置表格单元格之间的距可以选择collapse（合离可以使用像素（px）并）、separate（分离）单位例如border-例如border-spacing:5px;collapse:collapse;empty-cells3设置是否显示空单元格的边框和背景可以选择show（显示）、hide（隐藏）例如empty-cells:hide;定位属性CSSposition:relativeposition:static相对定位元素相对于自身在正常默认值元素按照正常的文档流进1文档流中的位置进行偏移不会影行布局2响其他元素的布局position:absoluteposition:fixed绝对定位元素相对于最近的已定固定定位元素相对于浏览器窗口4位的祖先元素进行偏移会脱离正进行偏移会脱离正常的文档流，3常的文档流，影响其他元素的布局固定在页面的某个位置CSS定位属性用于控制元素在页面中的位置可以选择static、relative、absolute、fixed等不同的定位方式浮动属性CSSfloat:left float:right clear元素向左浮动会脱离正常的文档流元素向右浮动会脱离正常的文档流用于清除浮动的影响可以选择left，移动到父元素的左侧，并允许其他，移动到父元素的右侧，并允许其他（清除左浮动）、right（清除右浮动元素环绕在其周围元素环绕在其周围）、both（清除左右浮动）例如clear:both;样式优先级CSS优先级规则声明特殊性!important123CSS样式优先级由高到低依次!important声明用于提升样式特殊性用于计算选择器的优先为!important声明、行内样的优先级例如color:red级ID选择器的特殊性最高，式、ID选择器、类选择器、元!important;类选择器的特殊性次之，元素素选择器、通配符选择器、继选择器的特殊性最低承样式样式继承CSS继承CSS样式继承是指子元素会自动继承父元素的某些样式如字体属性、文本属性等不可继承有些样式是不可继承的如盒模型属性、定位属性、背景属性等利用继承可以利用CSS样式继承来简化代码，提高开发效率例如在body标签中设置字体属性，所有子元素都会自动继承该字体属性兼容性处理CSS浏览器兼容性条件注释CSS Hack不同的浏览器对CSS属性的支持程可以使用CSS Hack来针对不同的浏可以使用条件注释来针对不同的IE度可能不同有些属性在某些浏览器览器应用不同的样式CSS Hack是浏览器应用不同的CSS样式条件中可能无法正常显示，或显示效果不一种特殊的CSS语法，能够被特定注释是一种特殊的HTML注释，能够一致的浏览器识别被特定的IE浏览器识别总结和展望通过本课件的学习，我们了解了HTML语言的基础知识，包括HTML的概述、发展历程、标签分类、语法、常用标签、属性使用、文档结构、标签嵌套规则、注释语法、语义化、特殊字符、文件存储与发布、编辑器使用、文件编码、文件预览、标签兼容性处理、HTML5新特性以及CSS基础知识希望这些知识能够帮助您在Web开发的道路上越走越远随着Web技术的不断发展，HTML和CSS也在不断更新和完善我们需要不断学习新的知识，才能适应Web开发的需求。