一.什么是前端？

解决GUI人机交互问题。无论是PC端还是移动端，APP还是小程序或者VR
前端工程师使用web技术栈解决多端图形用户界面交互问题

二.前端技术栈？

html:负责页面结构内容
css:设置页面样式
js:定义网页行为

以上三个都运行在浏览器中，浏览器通过HTTP协议，与服务器通信。

三.前端应该关注哪些方面？

做出的产品有哪些功能？
做出的界面是否美观？
无障碍需求者是否能够正常使用网页
能不能保证用户数据的安全，防止被漏洞利用？
做出来的网站性能是否好？动画是否流畅？用户体验感觉是否良好？
做出来的网页是否兼容？能否在各个浏览器上运行？

四.前端的边界

使用 node.js 构建服务器应用
使用 electron 开发客户端应用
使用 webrtc 进行p2p在线传输
使用 webgl 开发3d游戏

前端在互联网行业是发展很快的领域，技术更新特别快，只有不断学习，才能跟上时代的发展.

五.开发环境

浏览器:IE/Edge,Chorme,Firefox,Safari
编辑器: vscode,webstorm,vim等

六.HTML介绍

HTML 全名为HyperText Markup Language(超文本标记语言)
HyperText(超文本) 包括图片,标题,链接,表格
HTML使用标签表示一段内容,例如:<h1>标题</h1>
我们可以在标签上写入属性，例如:<img src="photo.jpg"/>,其中,src表示属性名,photo.jpg表示属性值 HTML的第一行为<!doctype html>，用于标识页面的html版本。

HTML的根标签为html，所有元素都需要包括在该标签中。

html里有head和body，其中head存放我们看不到的内容(标题除外)，body存放我们给用户看的内容。

浏览器拿到HTML内容后，会进行解析，解析出来一个DOM树，如下图所示：

我们写好代码，打开浏览器，然后右键检查就可以看到是一个树形结构，每个节点都是dom节点

七. HTML语法

1.标签属性推荐小写
2. 空标签可以不闭合
3.属性值推荐使用双引号包裹
4.某些属性值可以忽略，如required，readonly

八.HTML标签

8.1标题

从h1到h6依次减少

8.2列表

列表分为有序列表，无序列表和自定义列表

有序列表为ol，无序列表为ul，它们的子元素都为li

自定义列表分为dl，列表标签的子元素有两种：

dt代表父类
dd代表子类为了更好的理解清楚，我举了以下例子：

<h4>无序列表</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
    </ul>
    <h4>有序列表</h4>
    <ol>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>
    <h4>自定义列表</h4>
    <dl>
        <dt>前端</dt>
        <dd>html</dd>
        <dd>css</dd>
        <dd>js</dd>
    </dl>

上面代码运行结果如下图所示:

8.3超链接

我们可以通过点击链接，到达别的地址
<a href="https://www.baidu.com"></a>
超链接的属性是href，就是你想点击跳转的地址
target属性不写的话默认在当前页面打开，当属性值为_blank时，点击链接会新开一个页面

8.4媒体属性

img
audio
video
这三个属性都是媒体数据，使用src 属性提供数据

audio，video的controls的属性可以让浏览器显示播放控件

8.5输入框

主要使用input标签，使用type属性指定input类型。默认为text

使用placeholder指定未输入时的文本提示
type属性值有以下方面：

   type="text"--->文本框
	type="password"--->密码框
	type="radio"--->单选框
	type="checkbox"--->复选框
	type="file"--->图片上传
	type="hidden"--->隐藏控件
	type="image"--->图片按钮
	type="button"--->普通按钮
	type="submit"--->提交按钮
	type="reset"--->重置按钮
	type="number"--->年龄控件
	type="search"--->搜索框
	type="range"--->滑块
	type="tel"--->电话号码
	type="url"--->网址
	type="color"--->颜色选择
	type="email"--->邮箱
	type="datetime-local"--->日期时间控件   <!-- 火狐不支持  谷歌支持 -->
	type="date"--->日期控件
   type="time"--->时间控件      <!-- 火狐可以显示上午下午  谷歌不显示 -->
   type="month"--->月份控件     <!-- 火狐不支持  谷歌支持 -->
   type="week"--->周控件      <!-- 火狐不支持  谷歌支持-->

textarea(文本域)，它可以输入更多的文本信息。

select多选输入框，子元素为option

如果想让input输入关键词时有提示，可以使用list属性，示例如下：
 <input list="a">
        <datalist id="a">
            <option>up</option>
            <option>dnow</option>
            <option>dft</option>
        </datalist>

8.6内容划分

标签	含义
header	页头
nav	导航栏
main	页面主体
article	列表头目
aside	侧边栏
footer	底部导航栏

九.语义化

9.1语义化的好处?

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

9.2原则

传递内容,而不是样式

9.3如何做到语义化？

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

十.谁在使用我们写的HTML

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

前端与HTML学习笔记 | 青训营