这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

前端的概述

前端是什么？

解决GUI人机交互问题
跨终端
- pc/移动浏览器
- 客户端/小程序
- vr/ar等
web技术栈

前端工程师就是使用web技术栈解决多端图形用户界面交互问题的工程师

前端技术栈

html 页面结构和内容 css 样式（页面大小etc） js 定义行为 ——运行在浏览器中以上与服务器端通过http网络协议进行交互

前端应该关注哪些方面

功能
美观
无障碍 access ability
安全（用户数据的安全）
性能（速度
兼容性
用户体验

前端的边界

nodejs 服务器端 Electron 客户端 React Native 客户端 Web RTC ttp在线传输，多人会议 WebGL 3d游戏 WebASSEMBLY 转c等代码为js等可在浏览器中使用的代码

HTML介绍

开发环境

浏览器 IE edge chrome firefox safari
编辑器 vscode vim webstorm

HTML是什么

HyperText Markup Language 超文本（图片、标题、链接、表格）标记语言

<h1>文章标题</h1> 开始标签和结束标签成对出现
<img src="photo.jpg" />可在标签上设置属性属性名 = "属性值"

HTML代码

<!doctype html> 标记了当前在使用html文件的版本，浏览器会按照其选择渲染模式，如果不写，浏览器会按照老旧的怪异模式（quirks mode）渲染怪异模式的判断可参见blog.csdn.net/lamanchas/a… <html>标签是根标签，所有其他的标签都是写在html标签里的 <head>标签中放页面的元数据，如：页面编码、标题 <body>标签中放呈现给用户的内容

DOM树

DOM结点

HTML语法

标签和属性不区分大小写，推荐小写原生标签：小写，自定义的组件：大写
空标签可以不闭合，可以不用结束标签，如input meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required 、readonly

标题h1~h6

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

列表

<ol> order list 有序列表

<ul>undefine order list 无序列表

<dl>描述列表

<dt>

<dd>描述值

链接

<a href="www.sth.com" target="_blank"> target="_blank"指并不是在原有页面打开，而是在新标签页打开该页面

多媒体

图片

<img src="sth.jpg" alt="Metal movable type" width = "400" /> `alt = "Metal movable type" 指替代文本应用场景：省流量或加载失败时，内容降级

音频

<audio src="/assets/music.ogg" controls></audio> controls默认出现控制条

视频

<video></video>

输入

表单

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

code style : js 中 type = "sth" html 中 type="number" />结束标签前要有空格

选择

多选框

<label><input type="checkbox" />🍎</label>

<label><input type="checkbox" checked />🍏</label>

单选

<label><input type="radio" name="sport" />⚽️</label>

<label><input type="radio" name="sport" />🏀</label>

互斥关系通过name相同达成

文本

<blockquote>块级引用 <cite></cite>短引用 ——作品 <q></q>之前内容的引用，短引用 ——内容 <code></code>引用 ——代码，可多行

<pre></pre>是为了做格式化

该<pre>标记定义预格式化的文本。

pre 元素中的文本以固定宽度显示字体displayed in a fixed-width font，它保留spaces空格和line breaks换行符.文本将完全按照 HTML 源代码中所写的方式显示。

支持全局属性和事件属性。

其默认的css设置如下

pre {  
  display: block;  
  font-family: monospace;  
  white-space: pre;  
  margin: 1em 0;  
}

强调，加粗，着重 <strong></strong> 非常紧急的 “事” <em></em> 语气上的强调 “词”

内容整体划分

一个页面一般只有一个main元素 aside表示与页面相关，但不是直接属于页面内容，如推荐等正文一般放在main->article中 footer放在页尾，包含参考链接、版权等

语义化

语义化是什么？

html中的元素、属性及属性值都拥有某些含义开发者应该遵循语义来编写HTML

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

为什么强调语义化的方式写HTML——谁在使用我们写的HTML

开发者：修改、维护页面——便于协作
浏览器：展示页面
搜索引擎：提取关键词、排序——依据在于html中，对搜索引擎优化很重要，在DOM树不同位置权重不同
屏幕阅读器：给盲人读页面内容（无障碍）

语义化的好处

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

语义化的关键——传达内容，而不是样式

❌<p style="font-size:32px">前端工程师的自我修养</p>

✅<h1>前端工程师的自我修养</h1>

如何做到语义化

了解每个标签和属性的含义
- MDN、W3C(HTML5规范）
思考什么标签最适合描述这个内容
不建议用可视化工具生成代码——无法控制生成的标签是否语义化

前端与HTML｜青训营笔记