前端与HTML|青训营

77 阅读3分钟

一.前端工作的定义---使用Web技术栈解决多端图形用户界面交互问题 1.解决GUI人机交互问题 2.跨终端 (1)PC/移动浏览器 (2)客户端/小程序 (3)VR/AR等 3.Web技术栈 二.前端技术栈拆解与分析 1.前端技术栈 服务器端----------------- javaScript(行为) 网络协议 CSS(样式) HTML(内容) 2..前端应该关注哪些方面? 功能、安全、美观、无障碍、兼容、性能、体验 3..前端的边界?开发环境 三.HTML作用解析 1.HTML---是一种标记语言,主要用于描述网页的结构和内容。它使用标签和属性来表示不同的元素,并通过组合这些元素来构建页面。 HyperText(图片、标题、链接、表格) Markup Language(

文章标题

属性名 属性值 2.DOM树---DOM树由HTML元素(标签)和它们之间的关系组成,使得页面的不同部分可以通过JavaScript等脚本语言进行操作和交互。 3.HTML语法 (1)标签和属性不区分大小写,推荐小写 (2)空标签可以不闭合,比如input、meta (3)属性值推荐用双引号包裹,如<src="photo.jpg"> (4)某些属性值可以省略,比如required、readonly 4.标题h1~h6 有序列表和无序列表

5.链接 6.输入 四.HTML语义化 HTML语义化是指在编写HTML代码时,根据内容的结构和意义选择合适的标签和元素,使得页面的结构和内容能够更好地被搜索引擎理解和解析,也能够更好地实现无障碍访问,并增加页面的可读性和可维护性。

通过使用语义化的HTML标签和元素,可以让页面的结构更加清晰,提高代码的可读性和可维护性。同时,语义化的HTML可以帮助搜索引擎更好地理解页面的内容,提高页面在搜索结果中的排名。

使用语义化的HTML还可以增加页面的无障碍访问性,即让视觉障碍者和其他特殊需求的用户更容易理解和访问页面的内容。通过正确使用语义化的标签和元素,可以为辅助技术(如屏幕阅读器)提供更准确的信息,使网页内容对所有用户都更具可访问性。

在进行HTML语义化时,可以根据内容的结构和意义来选择合适的标签和元素。例如,使用

~

标签表示标题级别,

标签表示段落,

  • 标签表示无序列表等。此外,还可以使用语义化的标签和元素来表示文章的作者、发布时间、引用等信息。通过合理使用这些标签和元素,可以更好地表达页面的结构和内容,提高页面的可读性和可维护性。 五.总结 总之,HTML是前端开发中一项重要的技术,它定义了网页的结构和内容,通过使用各种标签和属性描述和组织页面的各个部分。合理地使用HTML的语法和语义化特性,可以为网页提供清晰的结构、可读性和可访问性。