前端与HTML | 青训营笔记

清染小林
644 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第1天。
今日份课程笔记：前端与HTML

一、前端与HTML知识要点

  1. 什么是前端工程师？

    使用Web技术栈解决多端及用户界面交互的工程师

  2. 前端工程师关注重点

    功能 + 美观 + 无障碍 + 安全 + 兼容性 + 性能 + 用户体验

  3. HTML（HyperText Markup Language）

    超文本标记语言。Hypertext：包含图片、标题、链接、表格

  4. 重要标签 
    <!doctype html>
标记当前html文件版本，决定渲染模式

<audio src="" controls></audio>
展示默认控制面板，video同理

<input list = "countries">
<datalist id="countries">
    <option></option>
</datalist>
输入框提示选项
  5. 内容划分

image.png 各个标签与H5语义化相关，便于搜索引擎优化

二、前端与HTML重要知识点

  1. DOM树

image.png 以document为根节点，由多层节点构成的文档。可以通过DOM操作添加、删除和修改页面的各个部分

引申：BOM

浏览器对象模型，是使用JavaScript开发Web应用程序的核心，包含window、location、navigator、screen、history对象，提供了与网页无关的浏览器功能对象

  1. 语义化 用合理HTML标记以及其特有的属性去格式化文档内容，HTML中的元素、属性及属性值都拥有某些含义，清晰地表达出页面结构。

    使用语义化优势：
    1. 提高代码可读性
    2. 可维护性
    3. 便于SEO搜索引擎优化
    4. 提升无障碍性

引申：搜索引擎优化（SEO）

利用搜索引擎的搜索规则来提高当前网站在有关搜索引擎内的自然排名的方式

三、小小实践

你已经学会了1+1，现在来算微积分吧

<style>省略</style>

<header>
  这里是header
  <nav>这里是nav部分</nav>
</header>
<main>
  这里是main
  <article>article1</article>
  <article>article2</article>
</main>
<aside>这里是aside</aside>
<footer>这里是footer</footer>

实现效果：

image.png

四、个人总结

HTML是前端的基础之基础，没有HTML就没有网页骨架，也就没有后续其他所有知识。正因它基础而简单，所以很容易被前端开发人员忽略。
前端工程人员需要注意网页无障碍性，这一点笔者在实习过程中深有体会。访问网站的网民可能有色弱患者，可能有视力残疾人，因此需要做好语义化标签，通过特定脚本读取网页标签，之后使用扬声器播放标签内部文字。标签属性意义在这里就显得尤为重要。

标题：前端与 HTML - 掘金

网址：juejin.cn/course/byte…

avatar
文章
阅读
粉丝