前端与HTML ｜ 青训营笔记

小z99
116 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

前端与HTML

一、本堂课重点内容：

什么是前端？

  1. 解决GUI人机交互问题
  2. 跨终端（PC/移动端、客户端/小程序、VR/AR）
  3. Web技术栈

image.png

前端应关注哪些方面？

美观、安全、功能、体验、兼容、性能、无障碍

前端的边界？

image.png

HTML是什么？

HyperText Markup Language 超文本标记语言

image.png

二、详细知识点介绍：

HTML标签的类型（head， body，！Doctype），他们的作用是什么？

!DOCTYPE 标签：

它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

head：

是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者。 该标签下所包含的部分可加入的标签有 <base>, <link>, <meta>, <script>, <style>和<title>。

body :

用于定义文档的主体, 包含了文档的所有内容。 该标签支持 html 的全局属性和事件属性.

DOM树

image.png

HTML的语法

image.png

什么是语义化

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

image.png

语义化的优点

image.png

如何做到语义化

image.png

三、实践练习例子：

<hn>           <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>           <!--：无序列表。-->
<li>           <!--：有序列表。-->
<header>       <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>          <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>      <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>      <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>       <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small>        <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>           <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>       <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption>   <!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>         <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto>   <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>            <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>         <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>         <!--：简称或缩写。-->
<dfn>          <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>      <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>          <!--：移除的内容。-->
<ins>          <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>     <!--：定义运行中的进度（进程）。-->

四、课后个人总结：

语义化的优点

  1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
  2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  3. 方便其他设备解析，如盲人阅读器根据语义渲染网页
  4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

H5的新特性

  • 新增选择器 document.querySelector、document.querySelectorAll
  • 拖拽释放(Drag and drop) API
  • 媒体播放的 video 和 audio
  • 本地存储 localStorage 和 sessionStorage
  • 离线应用 manifest
  • 桌面通知 Notifications
  • 语意化标签 article、footer、header、nav、section
  • 增强表单控件 calendar、date、time、email、url、search
  • 地理位置 Geolocation
  • 多任务 webworker
  • 全双工通信协议 websocket
  • 历史管理 history
  • 跨域资源共享(CORS) Access-Control-Allow-Origin
  • 页面可见性改变事件 visibilitychange
  • 跨窗口通信 PostMessage
  • Form Data 对象
  • 绘画 canvas

五、引用参考：

bytedance.feishu.cn/file/boxcn4…

avatar
文章
阅读
粉丝