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

什么是前端？

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

解决GUI人机交互问题
跨终端
Web技术栈

前端技术栈

JavaScript（行为）
CSS（样式）
HTML（内容）

浏览器通过http协议和服务器进行通信，将前端代码渲染成页面，浏览器也可以将用户填写的内容或者行为通过http协议提交到服务器端。

前端应该关注哪些方面

功能、美观、无障碍、安全、性能、用户体验、兼容性

HTML

全称：Hypertext Markup Language(超文本）

Hypertext：图片、标题、链接、表格

Markup Language：使用标记语言

一级标题：<h1>文章标题</h2>

表示一张图片<img src="photo.jpg"/>(src 属性名，photo.jpg 属性值）

<!doctype html>：标记当前HTML标签使用的版本

<html></html>：文档的根标签

<head></head>：放页面的元数据

<body></body>：呈现给用户的内容

<title></title>:会在页面标签中显示

DOM树

HTML语法

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

HTML语义化

标题h1~h6

有序列表 <ol></ol> 无序列表<ul></ul>

描述列表：属性名+属性值<dl></dl> 列表标题<dt></dt> 具体描述<dd></dd>(可以多对多关系）

链接<a herf="地址"></a> 在新的页面打开target="_blank"

图片<img src="图片地址" alt=" " width=" "/>

替代性文本（图片因某些原因加载失败或不被加载）alt

音/视频<audio/video src=" " controls(浏览器默认播放固件）>

输入

<input placeholder=" ">占位符
<input type="range">范围
<input type="number" min="1" max="10">数字最小值与最大值
<input type="date" min="2018-02-10">日期
<textarea>Hey</textarea>多行输入

选择一个或多个值

选择多个值<input type="checkbox" />（<checked>表示已经选择）
只能选择一个<input type="radio" name=" " />
下拉选择<select> <option></option> <option></option> <option></option> </select>
提示选择输入<input list=" " /> <datalist id=" "> <option></option> <option></option> <option></option> </datalist>

文本类标签

快捷引用（长引用）<blockquote cite="文字来源">
短引用<cite></cite>（作品名字）
再次引用<q></q>（内容）
引用多行代码<pre><code> 代码 </code></pre>（等宽字体）
强调1<strong></strong>（内容含义的重要、紧急）
强调2<em></em>（语气重读的词）

lang属性表示内容所使用的语言

使用HTML

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

如何做到语义化

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

前端与 HTML | 青训营笔记