前端与HTML | 青训营

折果
82 阅读4分钟

一、什么是前端？

1. 解决GUI人机交互问题

2. 跨终端

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

3.Web技术栈

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

  • 美观：前端界面要美观。
  • 安全：保障客户数据安全。防止隐私泄露。
  • 功能：功能多样化，满足客户各种各样的需求。
  • 兼容：保障各种设备都能兼容，流畅运行。
  • 性能：保证页面流畅运行，不出现卡顿。
  • 无障碍：界面适配于所有人群，保障页面与客户无障碍交互。
  • 体验：非常重要，保障用户良好体验。

三、前端的边界？

  • Node：Node.js 是一个跨平台 JavaScript 运行环境，使开发者可以搭建服务器端的 JavaScript 应用程序。

  • Electron：Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。Electron兼容Mac、和Linux可以构建出三个平台的应用程序。

  • WebRTC：是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

  • WebGL：是一种3D绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个JavaScript绑定， WebGL 可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

  • WebASSEMBLY：是一个虚拟指令集体系架构 （virtual ISA） ，整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境（如Web）的应用编程接口 （WebAssembly API） 。其初始目标是为C/C++等语言编写的程序经过编译，在确保安全和接近原生应用的运行速度更好地在Web平台上运行。

四、HTML（HyperText Markup Language）超文本标记语言

1. DOM树

image.png

2. HTML语法

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

3. HTML标签

  • 超链接标签
<a href="...">
 超链接
</a>
<a href="..." target="_blank">
  超链接
</a>
//target=”_blank”加载一个新的页面，不替换掉原有页面

  • 表单标签

    • <input placeholder="请输入用户名">
    • <input type="range">
    • <input type="number" min="1" max="10">
    • <input type="date" min="2018-02-10">
    • <textarea>Hey</textarea>

image.png

  • 文本引用标签

    • blockquote：块级引用元素。

    • cite：表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

    • p：表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。p标签是块级元素。

    • code：呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

    • pre：元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

  1. 页面内容划分

image.png

五、语义化是什么？

  1. HTML中的元素，属性及属性值都拥有某些含义。
  2. 开发者应该遵循语义来编写HTML。
  • 有序列表用ol;无序列表用ul。
  • lang属性表示内容所使用的语言。

六、谁在使用我们写的HTML？

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

七、语义化的好处？

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

八、如何做到语义化？

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