什么是前端？

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

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

前端技术栈

HTML（最基础）负责页面结构和内容
CSS 样式例如：位置，大小，颜色等信息
JavaScript 定义见面的行为

前端应该关注哪些方面？

功能解决什么问题
美观界面是否好看
无障碍是否适用于所有人
安全能否保证数据安全
性能速度足够快，用户体验足够好
兼容性能否在不同的设备上使用

前端的边界

在互联网中发展很快的领域

HTML是什么？

HyperText Markup Language

mindmap
      HyperText
          图片
          标题
          链接
          表格

<!doctype html>
doctype标记了当前在使用的html文件是什么版本，最终浏览器会根据这个来选择进行哪种渲染模式，若不写，会使你的页面效果和实际的不太符合。

<html>是根标签。
<head>存放原数据，展现了页面的标题是什么，页面用了什么样的编码。
<body>是真正呈现给用户的内容，比如一段文字或一个图片等。

HTML语法

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

标题标签h1-h6

<h1></h1>

列表标签

有序列表

<ol>
<li>  </li>
<li>  </li>
<li>  </li>
</ol>

无序列表

<ul>
<li>  </li>
<li>  </li>
<li>  </li>
</ul>

描述列表

<dl> 定义列表
<dt> 描述列表的标题
<dd> 具体的值
多对多的关系

链接标签

<a href="网址" target="_blank"> </a>
<target="_blank">表示在新窗口打开

多媒体标签

图片标签

<img src="图片地址" alt="" width=""/>
<alt>表示替代性的文本，图片因某些原因加载失败或不加载的时候，显示出来的文字

音频标签

<audio src="音频地址" controls></audio>
<controls>显示浏览器默认的控件

视频标签

<video src="视频地址" controls></video>

输入控件

文本输入框

<input palceholder="请输入用户名">
palceholder表示用户还没输入的时候显示的信息
<input type="range">让用户输入一个范围
<input type="number" min="1" max="10">让用户输入一个数字只能输入范围内的数字
<input type="date" min="2018-02-10">让用户输入一个日期
<textare></textare>可以让用户输入多行内容，也可以让用户调整输入框的大小

选择控件

多选

<input type="checkbox" checked/>
checked表示默认被选中

单选

<input type="radio" name="">

下拉选择

<select>
 <option> </option>
 <option> </option>
 <option> </option>
</select>

快速选择

<input list="countries" />
<datalist id="countries">
  <option>Greece</option>
  <option>United Kingdom</option>
  <option>United States</option>
</datalist>

用list来显示用户可以选择的提示的选项

文本类标签

快捷引用(长引用)

<blockquite cite="来源"></blockquite>一般直接引用别人的一句话

短引用

<cite></cite>一般用来引用章节和书名

引用具体的内容

<q></q>

code标签

代码引用引用多行代码

<pre><code>
const add =(a,b)=>a+b;
const multiply=(a,b)=>a*b;
</code></pre>

强调类标签

<strong></strong>强调严重，紧急
<em></em>更侧重语气上的强调，一般表强调一句话里面重要的词

语义化是什么？

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

语义化的好处

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

如何做到语义化？

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

前端与HTML ｜ 青训营