北京大学《计算概论》课件：html v

基础教程北京大学HTML《计算概论》课件欢迎来到北京大学《计算概论》课程的HTML部分本教程将全面介绍HTML的基础知识，帮助您掌握网页开发的核心技能文档结构HTML声明DOCTYPE1根元素2HTML头部3head主体4bodyHTML文档遵循严格的结构从顶部的DOCTYPE声明开始，包含HTML、头部和主体元素这种结构确保浏览器正确解析和显示网页内容标签HTML开始标签结束标签如p，标记元素的开始如/p，标记元素的结束自闭合标签如br/，不需要结束标签HTML标签是构建网页的基本单位它们定义了文档的结构和内容类型，使浏览器能够正确显示信息属性HTML名称等号值如class、id、src=用引号括起来的具体内容属性为HTML元素提供额外信息它们总是在开始标签中定义，通常以名称/值对的形式出现元素HTML段落元素标题元素p h1到h6分区元素行内元素div spanHTML元素是构建网页的基础它们定义了内容的结构和含义，从简单的文本到复杂的表单和多媒体内容文本HTML段落标题格式化p标签用于创建段落h1到h6定义不同级别的标题strong,em,mark等用于文本格式化列表HTML无序列表有序列表定义列表123使用ul和li标签创建使用ol和li标签创建使用dl,dt和dd标签创建列表是组织和展示信息的有效方式HTML提供了多种列表类型，适用于不同的内容结构链接HTML基本语法内部链接a href=URL链接文本/a链接到同一网页的其他部分外部链接邮件链接链接到其他网站打开默认邮件客户端链接是互联网的核心通过a标签，我们可以创建各种类型的超链接，连接网页、文件或特定位置图像HTML插入图像使用img标签设置属性src,alt,width,height响应式图像使用srcset和sizes属性图像映射创建可点击区域图像丰富了网页内容，提高了用户体验正确使用图像标签和属性可以优化加载速度和可访问性表格HTML表格标签描述table定义表格tr定义行td定义单元格th定义表头单元格表格用于展示结构化数据通过合理使用表格标签，可以创建清晰、易读的数据展示表单HTMLform1输入元素2选择元素3按钮4标签5表单是收集用户输入的主要方式它包含各种输入元素，如文本框、复选框、单选按钮等正确构建表单对用户体验至关重要表单元素HTML文本输入复选框input type=text input type=checkbox单选按钮下拉列表inputtype=radio select和optionHTML提供了多种表单元素，满足不同的数据输入需求了解各种元素的特性和用法，可以创建更友好的用户界面表单验证HTML必填字段输入类型验证使用required属性如email,number,url等模式匹配自定义验证使用pattern属性定义正则表达式使用JavaScript进行复杂验证表单验证确保用户输入的数据符合预期格式HTML5引入了多种内置验证方法，简化了开发过程框架HTML（已废弃）iframe frameset内联框架，可嵌入其他HTML页面定义框架集（已废弃）frame定义框架集中的单个框架框架允许在一个浏览器窗口中显示多个文档虽然frameset和frame已被废弃，但iframe仍广泛用于嵌入外部内容音频和视频HTML音频视频控制选项audio标签用于嵌入音频内容video标签用于嵌入视频内容如autoplay,controls,loop等属性HTML5引入了原生音频和视频支持，无需插件即可播放多媒体内容这大大简化了网页中多媒体的使用样式HTML内联样式1使用style属性直接应用于元素内部样式表2在head中使用style标签外部样式表3使用link标签链接外部CSS文件HTML样式用于控制网页的外观虽然现代开发中推荐使用外部CSS，但了解HTML中的样式应用方法仍然重要布局HTML布局语义化布局表格布局（不推荐）DIV使用div元素创建块级布局使用header,nav,main等语义化元素使用table创建布局（旧方法）头部元素HTMLtitle meta定义文档标题提供元数据link style链接外部资源定义内部样式头部元素位于head标签内，包含了关于文档的元信息这些信息对搜索引擎优化和浏览器渲染都很重要元字符HTML字符实体名称实体编号lt;#60;gt;#62;amp;#38;quot;#34;元字符用于表示HTML中的特殊字符使用实体名称或编号可以正确显示这些字符，避免与HTML语法冲突实体HTML空格版权符号数学符号nbsp;表示不间断空格copy;表示©plusmn;表示±HTML实体是用于表示特殊字符的代码它们以开始，以;结束实体确保特殊字符在所有浏览器中正确显示字符集HTMLASCII ISO-8859-1基本英文字符集西欧语言字符集UTF-8GB2312Unicode字符集，支持多语言简体中文字符集字符集定义了HTML文档中使用的字符编码选择正确的字符集对于正确显示文本至关重要，尤其是在多语言网站中编码HTML选择字符集通常选择UTF-8设置标签metameta charset=UTF-8保存文件使用相同的编码保存正确设置HTML编码确保网页在不同环境中正确显示UTF-8是目前最通用的编码，支持几乎所有语言字符语义HTML文章节article section侧边栏页脚aside footer语义化HTML使用具有特定含义的标签来构建网页这不仅提高了代码的可读性，还有助于搜索引擎理解网页结构可访问性HTML使用语义化标签提供替代文本12如nav,main,article为图像添加alt属性使用属性键盘导航ARIA34增强复杂控件的可访问性确保所有功能可通过键盘访问可访问性设计确保所有用户，包括残障人士，都能方便地使用网站这不仅是道德责任，也是法律要求多媒体HTMLHTML5大大增强了多媒体支持，包括原生音频和视频播放、Canvas绘图和SVG图形这些功能为网页开发带来了新的可能性元数据HTML描述关键词meta name=description meta name=keywordscontent=...content=...视口metaname=author metaname=viewportcontent=...content=...元数据提供了关于HTML文档的额外信息它们对搜索引擎优化和移动设备适配至关重要正确设置元数据可以提高网站的可见性导航HTML导航菜单nav元素锚点链接页内跳转面包屑显示当前位置站点地图网站结构概览良好的导航设计是用户体验的关键HTML提供了多种方式来创建清晰、直观的导航结构，帮助用户轻松浏览网站地理位置HTML获取位置用途隐私考虑使用navigator.geolocation API定制内容、地图服务、位置追踪需要用户授权HTML5引入的地理位置API允许网页获取用户的地理位置这为创建位置感知的服务和应用提供了可能离线应用HTML应用缓存1使用manifest文件（已废弃）Service Workers2现代离线功能实现方式本地存储3使用localStorage和sessionStorageIndexedDB4客户端存储结构化数据HTML5提供了多种技术来实现离线Web应用这些技术允许网站在无网络连接时仍能运行，提高了用户体验存储HTML5MB5MB容量容量localStorage sessionStorage永久存储，不随会话结束而清除临时存储，随会话结束而清除∞容量IndexedDB理论上无限，取决于设备存储空间HTML5引入了多种客户端存储方案，用于存储大量结构化数据这些技术极大地提高了Web应用的性能和离线能力总结HTML基础知识高级特性掌握HTML标签、属性和结构了解HTML5新特性和API最佳实践持续学习遵循语义化、可访问性和性能优跟进Web标准和新技术发展化原则HTML是Web开发的基石通过本课程，您已经掌握了HTML的核心概念和高级特性继续实践和学习，将使您成为优秀的Web开发者。