前端与 HTML | 青训营笔记

王大帅哥学前端
96 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 1 天，欢迎各位大佬批评指正。

前端究竟是什么

一句话概括：前端就是在图形界面下（GUI）解决人机交互的问题。

前端开发工程师应该注意哪些方面的技能？

  1. 跨端开发（web端、iso端、Andriod端、小程序端等）
  2. 用户体验感（页面加载CSR/SSR；性能；美观；兼容-ie；无障碍-色盲等）
  3. 信息安全（预防XSS、CSRF攻击等）
  4. 组件化、工程化开发
  5. WebGL、WebAssembly、WebRTC等新技术的发展与应用

HTML

HTML - HyperText Markup Language （超文本标记语言）
HTML是每个前端工程师必备的最基础技能，是构成网页的基本骨架，也是网页上内容呈现的载体和容器。简单看一下它的基本结构：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
  • 首先我们聚焦于第一行

<!DOCTYPE html>

对于很多初学者而言，基本的HTML框架是由ide自动生成的，因此可能很少关注前几行代码的作用。其实这行并不是HTML代码，而是申明HTML的版本，浏览器会根据这行代码去对应采取相应的渲染模式。如果不加上这一行代码会使得浏览器用一种更旧的方式去渲染页面，导致实际加载出来与预想的结果不符合。

DOM tree.png

HTML总是由一对尖括号的标签组成，包括开始标签和结束标签（部分不需要写入内容的标签可以自闭合：<img />、<br />、<hr />等）。在开始和结束标签之间可以写入标签体的内容，标签之间也可以进行嵌套，形成多级的结构构成一个DOM树。

  • <meta>标签的作用

在<head>标签中可能初学者更多关注都是<link>、<style>引入文件等或者实现具体样式等标签，而对<meta>标签的认识并不深入。其实，<meta>标签的作用非同一般，它可以定义网页的作者信息，描述和关键词等方面搜索引擎抓取，定义页面使用的语言等。

比如上面例子中<meta>标签：

<meta charset="UTF-8">
用于指定网页的字符编码集，用于正确编码文字，防止出现乱码等问题。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
指定文档兼容模式；即任何ie版本都以当前版本所支持的最高级标准模式渲染。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
获取视口宽高，一般用于不同型号的移动端设备的适配。

HTML语义化原则

由于HTML标签非常多，很多时候使用不合时宜的标签会导致阅读HTML代码时不知所谓，不能快速获得文档的一个基本结构。因此HTML5推出一项比较重要的原则：语义化原则。

内容布局：<header>、<nav>、<main>、<article>、<aside>、<footer>取代大量的<div>。
文本标签：<strong>取代<b>；<em>取代<i>；<cite>、<q>、<blockquote>等。
表单元素：<input>属性值大量扩展 -- range，date，file，email，color等。
......

avatar
文章
阅读
粉丝