前端语言串讲&HTML ｜ 青训营

用户1506214101080
82 阅读3分钟

一、前端语言的基本能力

  1. HTML（超文本标记语言）：Web页面的基础结构；一种用于定义内容结构的标记语言。
  2. CSS（层叠样式表）：一门样式表语言；用于描述 HTML元素的外观和布局。
  3. JavaScript：一种脚本语言，编写脚本来处理用户操作。
  4. 1997年：JavaScript语言正式成为一个独立的编程语言。2010年：JavaScript成为一种全栈开发语言。

二、前端语言的协作配合

（一）在HTML中使用CSS和JavaScript：

  1. 内联方式：直接在HTML元素的style属性中添加CSS样式，或在标签中使用 onclick 等事件属性直接嵌入JavaScript代码
  2. 内部样式表：在HTML文件的标签内使用标签定义CSS样式
  3. 外部样式表：将CSS样式代码保存到一个独立的.css文件中，并在HTML文件中使用标签引入
  4. 外部JavaScript文件：将JavaScript代码保存到一个独立的 .js 文件中，并在 HTML 文件中使用

（二）在JavaScript中操作HTML和CSS

  1. 操作HTML元素
  2. 操作CSS样式

三、HTML5的新增功能

  1. 引入新的语义化标签，如 <header>、<footer>、<nav> 等

    作用：更准确地描述文档的结构、提升了网页的可访问性和 SEO 优化能力

  2. 引入<video> 和 <audio> 标签

    作用：更简单地在网页上直接嵌入视频和音频

  3. canvas元素

    作用：提供了一个绘制图形的区域，为游戏开发、数据可视化和交互式图形应用提供了强大的工具。

  4. 提供了新的表单元素和属性，如 <input type="date">、<input type="email">等

    作用：更方便地输入和验证用户的数据。

  5. 提供了 localStorage 和 sessionStorage API

    作用：在浏览器端可以方便地进行本地数据的存储和读取，不再依赖于 cookie。

  6. 引入了WebSocket协议

    作用：允许在浏览器和服务器之间建立持久性的双向通信连接，实现实时通信和数据交换。

四、前端定义

使用web技术栈解决多端图形用户界面交互的问题

前端最基础的技术栈：HTML、CSS、JavaScript

网络协议（http和WebSocekt）

五、HTML的语义化

指在编写HTML代码时，使用合适的标签和元素来描述文档的结构和内容，使得网页具备清晰的结构和含义。通过使用语义化的HTML，能够增强网页的可读性、可访问性、搜索引擎优化和代码维护性。

语义化的HTML包括以下几个方面：

  1. 使用恰当的标签：选择适当的HTML标签来表示文档中的不同部分，如使用<header>表示页面的头部，<nav>表示导航菜单，<article>表示独立的文章等。
  2. 标签嵌套和层次结构：合理地嵌套HTML标签，形成良好的层次结构，使得文档的结构清晰可见，如使用<section>包裹相关的内容块，使用<ul>表示无序列表等。
  3. 提供有意义的标签内容：使用具有实际含义的标签内容，而不是仅仅依赖CSS样式来呈现效果。例如，使用<h1>到<h6>标签来表示标题级别，使用<em>或<strong>标签强调文本，使用<cite>标签表示引用等。
  4. 使用有助于可访问性的属性：为提供更好的可访问性，可以使用一些辅助属性，如alt属性为图片提供替代文本，aria-*属性为增强可访问性的交互元素提供描述等。

通过遵循HTML语义化的原则，可以使得网页更易于理解、维护和修改，同时也有助于搜索引擎正确解读页面内容，提升网页的可访问性和用户体验。

作为一个小白，只能把老师讲的大部分内容缩减成知识导图一般的笔记再去逐个查解，唉，路漫漫呀，但真的很开心能一点点地进步，多学一点，积少成多！

avatar
文章
阅读
粉丝