前端与HTML | 青训营笔记

奔跑的冰块
59 阅读3分钟

这是我参加【第四届青训营】笔记创造活动的第2天

第一天期望有一点高了，不过还是学到了很多的东西，算是复习了一下，顺便练习一下markdown

1、什么是前端？

  • 解决GUI人机交互问题（GUI：图形用户界面）

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • web技术栈

总结：前端工程师使用Web技术栈来解决多种终端图形用户界面下的人机交互问题

2、前端技术栈

1.HTML（内容）

2.CSS（样式）

3.JavaScript（行为）

4.网络协议（如HTTP协议）

浏览器通过HTTP协议与服务器端进行通信，浏览器被前端的HTML、CSS、JS代码从服务器获取到，然后对页面进行渲染。

浏览器也可以把用户填写的内容或行为通过HTTP协议提交到服务器端。

image.png

3、前端应该关注哪些方面？

  • 功能（核心）
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 体验

4、前端的边界？

  • Node.js：服务端应用

  • ELECTRON、React Native：客户端应用

  • WebRTC：3D游戏

  • WebASSEMBLY：使C++/Rust等代码可以在浏览器运行

image.png

前端技术发展更新很快，只有不断持续学习才能跟上技术发展。

5、前端的开发环境

image.png

6、什么是HTML？

HyperText（超文本）：如图片、标题、连接、表格

`M`arkup `L`anguage(标记语言)：<h1>文章标题</h1>>

image.png

  • <!doctype html>:声明为HTML5文档
  • <html>:HTML页面的根本元素
  • <head>:包含了文档的元（meta）数据
  • <title>:文档标题
  • <body>:可见的页面内容
  • <h1>:一级标题
  • <p>:段落内容

7、HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如required、readonly

7.1标题好h1~h6

7.2列表

有序：ol > li

无序：ul > li

自定义列表：dl > dt(标题) > dd(内容)

7.3连接

点一下进入我的掘金主页

  • href: 跳转连接
  • target: 打开新的连接（_blank）

7.4多媒体标签

<img>、<audio>、<video>

7.5输入

<input>

  • placeholder:用户未输入时，默认显示

  • type:

    • 范围（range）
    • 数字（number）
    • 多选框（checkbox）
    • 单选框（radio）

  • min/max: 最大值最小值（type="number"）、日历（type=“date”）

  • textarea: 文本域

7.6列表

  • <select>><option>
  • <datalist>><option>

7.7文本

引用：

  • <blockquote>:快捷引用
  • <city>：短引用，标题
  • <q>：短引用，具体引用内容
  • <code>:单行代码的引用
  • <pre>><code>:多行代码的引用

强调：

  • <strong>:含义的强调
  • <em>:预期的强调

7.8内容划分

image.png

  • <header>:页头
  • <nav>:导航
  • <main>:主体
  • <article>:文章
  • <aside>:侧边栏
  • <footer>:页尾

8、语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTNL

    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

9、谁在使用我们写的HTML

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键字、排序
  • 屏幕阅读器：给盲人读页面内容

10、语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
  • 传达内容，而不是样式

11、如何做到语义化呢？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化工具生成代码
avatar
文章
阅读
粉丝