《html标记措辞》课件

《标记措辞》HTMLHTML标记措辞是网页设计的基础，它定义了网页的结构和内容学习HTML标记措辞，可以让你了解如何创建网页，并掌握基本的网页设计技巧的基本概念HTML定义作用结构语法HTML全称超文本标记语HTML用于构建网页结构HTML文档由一系列标签HTML标签使用尖括号括言它是一种标记语言，，例如标题、段落、列表组成，这些标签描述网页起来，例如标签名标签用于创建网页和网页应用、图像和链接它告诉浏的结构和内容可以包含属性，用于提供程序览器如何显示网页内容有关标签的更多信息文档结构标签文档结构基本结构文档类型声明主要结构标签HTMLHTML文档由多个元素组成•文档类型声明告知浏览器文档所使用的包含``，``，``等标签，每个元素都有其特定的作HTML版本•HTML标签用和含义•头部信息•主体内容文本格式标签文本加粗文本倾斜使用B和/B标签，使用I和/I标签，可可以将文本内容加粗显示以将文本内容倾斜显示文本下划线文本删除线使用U和/U标签，使用S和/S标签，可以将文本内容添加下划线可以将文本内容添加删除线链接标签创建链接使用a标签创建链接，href属性指定目标地址链接文本链接文本指的是链接显示的文字，通常是描述目标网页内容目标地址href属性指定链接指向的目标地址，可以是网页地址、文件路径、电子邮件地址等图像标签标签属性img src用于网页中插入图像指定图像文件的路径属性和属性alt widthheight当图像无法显示时，提供文设置图像的宽度和高度本替代列表标签无序列表有序列表嵌套列表使用ul标签创建无序列表，li标签表示使用ol标签创建有序列表，li标签表示可在列表项中嵌套其他列表，以创建列表项列表项更复杂的结构表格标签表格标签表格标签用于创建表格结构，显示数据、文本和图像表格标签主要包括table、tr、td、th表单标签表单标签作用表单元素表单属性表单验证创建用户交互界面，收集用户输入•文本输入框设置表单元素的外观、行为、验证检查用户输入数据的有效性，确保信息，例如姓名、邮箱等规则等数据质量•密码输入框•下拉菜单•单选按钮•复选框•提交按钮框架标签框架标签框架集标签12框架标签用于在一个网页框架集标签用于定义框架中显示多个独立网页，可集，每个框架都定义了一以分别加载不同的内容个独立的网页区域框架标签3框架标签用来指定每个框架要显示的网页内容，可以包含多个框架样式设置标签样式表内部样式使用style标签或外部样式表将样式规则直接嵌入到style文件来设置网页元素的样式标签中，仅对当前页面有效外部样式内联样式使用link标签引入外部样式使用style属性直接为元素设表文件，适用于多个页面共置样式，仅对该元素有效享样式内联框架标签内联框架标签嵌入网页内联框架标签允许在当前页面中嵌入另一个网页使用``标签将一个网页嵌入到当前页面中/P/DIV DIVIMGquery=iframe框架代码控制/H4框架控制/H4P通过设置`src`属性指定要嵌入的网页地址/P/DIV/IMAGES/SECTION多媒体标签音频标签视频标签音频标签使用``元素嵌入音视频标签使用``元素嵌入视频文件频文件，可控制播放、暂停等功能嵌入对象对象标签使用``元素嵌入外部应用程使用`序，例如PDF、Flash等元数据标签描述关键词用于提供关于HTML文档的元信息，例如用于描述文档内容的关键词，方便搜索引文档的、版权信息、关键词等擎索引和用户查找刷新字符集用于控制网页内容的刷新频率，例如自动用于指定文档使用的字符编码，确保网页更新网站内容内容能够正确显示编码实体特殊字符表示字符集兼容

11.

22.使用编码实体来表示一些编码实体在不同字符集中无法直接输入的特殊字符可以保持一致的显示，提，例如版权符号、商标符高跨平台兼容性号、箭头等代码可读性安全性

33.

44.使用编码实体使代码更易防止特殊字符被误解或引于理解和维护，因为它清起安全漏洞晰地显示了字符的含义特殊字符使用特殊字符实体引用常见特殊字符编码示例在HTML中，使用特殊的实体引用使用#数字;或•表示符号例如，要显示“Hello,字符编码来表示一些无法字符名;的方式来表示特world!”，需要使用•表示符号直接输入的符号，例如小殊字符例如，代表小Hello,world!来代替•表示符号于号、大于号、于号，代表大于号双引号•表示符号引号等•表示符号注释标记注释标记的作用注释的格式注释是用于解释代码的文字HTML注释使用符号，在它说明，不会被浏览器解析或们之间添加注释内容执行注释的用途注释可以用于解释代码、记录修改信息，以及暂时禁用代码块有语义化标签语义化标签可读性语义化标签描述了HTML元素的含义，语义化标签使代码更易于阅读和理解，提例如header表示页面头部、nav高代码维护效率表示导航栏、article表示文章内容优化可访问性SEO搜索引擎可以更容易地理解页面内容，提语义化标签有助于提升页面可访问性，方高网站SEO优化效果便残障人士使用网站无语义化标签无语义化标签这些标签仅用于控制内容的显示，而不提供任何语义信息例如，``和``标签仅用于将内容分组或应用样式它们不会向搜索引擎或屏幕阅读器提供有关内容的含义或结构的任何信息示例标签浏览器兼容不同浏览器版本差异不同浏览器对HTML标签同一浏览器不同版本对的解析和渲染方式会有所不HTML标签的解析和渲染同，导致页面显示效果差异方式也会有所不同，导致页面显示效果差异测试兼容CSS Hack在多个浏览器和版本上进行使用CSS hack可以针对特测试，确保页面在所有浏览定浏览器或版本进行特殊样器上的显示效果一致式设置，确保页面在所有浏览器上的显示效果一致新增标签HTML5Canvas VideoAudio Geolocation用于绘制图形，提供2D绘用于在网页上播放视频，支用于在网页上播放音频，支允许用户根据设备位置获得图API，用于创建图像和动持各种视频格式和控制功能持各种音频格式和控制功能地理信息画语义化标签好处可读性增强优化SEO语义化标签让代码更易读，便于理解页面结构和内容语义化标签有助于搜索引擎更好地理解网页内容，提高网站排名开发者和搜索引擎都能更准确地理解页面内容搜索引擎可以根据标签内容识别网页的主题和关键词，提升搜索结果的准确性标签嵌套规则HTML标签嵌套规则非常重要，遵循规则可以确保网页的结构清晰，代码易于理解，并且能够被浏览器正确解析根元素1所有其他标签都包含在内块级元素2通常用于创建网页的结构行内元素3通常用于设置文本格式例如，段落标签p应该位于块级元素内部，例如div，而不能直接放在html标签内块级元素行内元素vs块级元素1独占一行，可以设置宽高行内元素2不独占一行，不能设置宽高区别3块级元素占据整个容器宽度，行内元素占据内容宽度在网页布局中，元素的显示方式主要分为两种块级元素和行内元素，它们在展示形式和属性设置上存在差异块级元素独立占据一行，可以设置宽度和高度，而行内元素则不占据整行，默认宽度和高度取决于内容的宽度和高度，不能直接设置块级元素分类块级元素分类常用的块级元素块级元素，指的是独占一行，可块级元素是页面布局的骨架，常以设置宽度和高度的元素用的块级元素包括•div•header•p•main•h1•footer•h2•article块级元素的特征块级元素会自动换行，设置宽度和高度会影响其大小块级元素可以包含行内元素和其它块级元素行内元素分类文本内容图片元素

11.

22.例如``、``、``、``、``、例如````、``、``、``、``、``、``、``等输入元素

33.例如``、``、`select`等/P/DIVDIVH

44.其他元素/H4P例如`br`、`wbr`、`kbd`、`samp`、`var`等/P/DIV/BULLETS/SECTION通用属性介绍属性属性属性属性ID ClassStyle Title唯一标识一个元素，便于通用于将元素分组，可以应用直接定义元素的样式，优先为元素提供提示信息，鼠标过JavaScript或CSS进行操相同的样式或行为级高于外部样式表悬停时显示作事件属性介绍事件属性描述事件触发时发生的事件，例如onclick、onmouseover等事件触发当用户执行特定操作时，例如点击、悬停或表单提交时触发JavaScript代码事件属性的值通常是JavaScript代码，用于定义事件发生时执行的操作验证检查W3CW3C验证检查是一种重要的步骤，可以确保您的HTML代码符合标准W3C验证检查可以帮助您发现代码中的错误和问题，并提供改进建议您可以在W3C网站上使用在线验证器或使用本地验证器进行检查编码规范建议命名规范代码风格

11.

22.使用有意义的名称，方便保持一致的缩进和空格，代码阅读提高代码可读性注释规范代码审查

33.

44.添加清晰准确的注释，解定期进行代码审查，发现释代码的功能和逻辑潜在问题和改进建议总结回顾学习HTML标记措辞，理解网页结构和元素组成掌握常用标签属性，编写语义化HTML代码，优化网页结构和可读性。