前端与HTML|青训营笔记

陶言
291 阅读4分钟

题外话：由于这几天在外面，没有电脑使用，导致我错过了第一次直播课，十分可惜。但是我看到前端基础班是以录播课程为主的，因此我向负责人梁幸芝老师提出了一点关于课程的考勤方式的建议：在录播中添加一个签到功能，在快看完录播时触发签到提示。这样对于那些暂时不方便上课的同学们，回头看录播时也能打卡签到，不至于缺勤。不过老师现在还没回复。

这是我参与「第四届青训营 」笔记创作活动的的第1天。 第一堂课的标题是【前端与HTML】，授课老师是韩广军，本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。

  1. 什么是前端？

    • 传统意义上，前端指Web前端。现是指各种跨终端的前台页面的统称，其包括但不限于以下几种：PC/移动端浏览器打开的网页；客户端/小程序的界面;VR/AR等技术。

  2. 前端工程师的职责是？

    • 一句话解释：前端工程师使用WEB技术栈解决多端GUI人机交互问题。

  3. 什么是WEB技术栈？ WEB技术栈的基础分别为：HTML（内容）,CSS（样式）,JavaScript（行为）以及和服务器端进行通信的网络协议。HTML,CSS,JavaScript运行在浏览器上，浏览器通过网络协议获取到源码到浏览器，浏览器再渲染成页面展示，中途客户端与服务端还能通过网络协议传输交互数据（例如各种表单提交，按钮，以及通过javascript定义的通信函数等）。

  4. 前端关注哪些方面？

    • 功能
    • 美观
    • 无障碍
    • 安全
    • 性能
    • 兼容性

  5. 前端的边界？

    如今各种新兴技术的不断发展，前端已经不至于界面的简单范畴。例如NodeJS能充当服务器后端，ELECTRON用以编写客户端等。前端的技术不断在迭代，我们需要保持学习技术的热情。

  6. HTML是什么？（联想到更为广泛使用的xml）

    HTML是超文本标记语言。主要语法格式为标签名，属性名，属性值。

    代码概览：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

    doctype告诉浏览器统一按照HTML5标准渲染，其不是HTML的标签。

    html标签代表页面代码部分。

    head标签间通常放置的是不需要呈现给用户的内容，如编码，页面标题等。

    body标签间存放的是要展示的内容。

    浏览器拿到HTML代码后会将其解析成DOM（文档对象模型,Document Object Model）树，即将HTML代码转化成树结构，每个节点就是一个DOM节点。

    1. HTML语法

    • 语法介绍

    1. 建议 标签、属性小写（各种框架如react等的标签用大写）

    2. 空标签可不闭合，如input，meta

    3. 属性值推荐用双引号包裹

    4. 某些属性值可省略，只写属性，如required，readonly

    • 语法细节

      • 标题 h1-h6，数字越大，字越小

      • 列表（有序和无序的每一项用li展示）

        • 有序列表 ol
        • 无序列表 ul
        • 定义列表 dl 用法如下：
      <h2>HelloWorld<h2>
<dl>
    <dt>Title</dt>
    <dd>description</dd>
</dl>

      • 链接： <a href=”link”>description</a>常用属性：target=”_blank”,使用新窗口打开

    • 多媒体：

      • img,搭配src alt(替代性文本) video使用。
      • audio 搭配src
      • video 搭配src

    • 输入

      • input ，搭配placeholder=”xx”，占位符，type=”number”等各种属性。（表多选时用 type=”checkbox”，单选时用”radio”，通过name或其他属性来区分值）
      • textarea，可换行大文本框
      • select+option表下拉选择，还有快捷输入方式（datalist）

    • 文字标签

      • 块引用<blockquote>

      • 关键字引用<cite>

      • 引用讲过的话<q>

      • 代码块引用<code>

      • <strong>/<em>，强调意思/语气

    1. HTML内容布局
    1. HTML的语义化：HTML的元素/属性/属性值应有某些含义。

    1. 谁在使用我们写的HTML

      • 开发者

      • 浏览器

      • 搜索引擎

      • 屏幕阅读器

      代码语义化，旨在使各种群体更好识别我们想传达的意思。

    2. 如何语义化

      • 推荐查看MDN, W3C上的HTML5规范，了解标签和属性的含义
      • 思考什么标签适合描述什么内容
      • 不使用可视化工具生成代码

    3. 引用参考

      1. WEB前端的定义

      2. DOCTYPE

avatar
文章
阅读
粉丝