什么是前端？

关键词：

解决GUI人机交互问题

GUI：Graphical User Interface，图形用户界面，指采用图形方式显示的计算机操作用户界面，允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项，以选择命令、调用文件、启动程序或执行其它一些日常任务。

跨终端（PC/移动浏览器；客户端/小程序；VR/AR等）

Web技术栈

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

前端技术栈：

html：负责网页的内容和基本结构

css：负责UI样式

JavaScript：负责将用户请求传送到后端并将后端数据在html页面显示

运行在浏览器里面，浏览器通过http协议与服务器通信

前端要关注什么？

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

用node js可以开发服务端的应用，用electron或react native开发客户端的应用，用web rtc开发p2p的应用，用webgl开发流畅的3D游戏，用web assembly可以将某些语言编译成可以直接在浏览器中运行的代码。

什么是HTML？

HTML：HyperText Markup Language，超文本标记语言

比如：

<h1>一级标题</h1>

也可以在标签上设置属性，比如：

用img表示图片，

<img src="Photo.jpg"/>

其中src是属性名，后面的是属性值

<!doctype html>   //标记当前html的版本，浏览器渲染时用到此行
<html>
    <head>//放页面的元数据，比如，标题、编码
        <meta charset="utf-8">
        <title>页面标题</title>
    </head>
    <body>//放真正呈现给用户的内容
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

浏览器将html的代码进行解析，解析出DOM树，里面的每个节点称之为DOM节点

html语法

标签和属性不区分大小写，但建议用小写；自定义的组件用大写

空标签可以不闭合

属性值推荐使用双引号包裹

某些属性值可以省略，比如required、readonly

标题：h1~h6

列表分为有序列表和无序列表

有序列表

<h2>电影榜单</h2>
    <ol>
        <li>霸王别姬</li>
        <li>阿凡达</li>
        <li>复仇者联盟</li>
    </ol>

无序列表

<h2>购物清单</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>桃子</li>
    </ul>

<h2>购物清单</h2>
    <dl>
        <dt>水果：</dt>
        <dd>苹果</dd>
        <dd>梨</dd>
        <dt>蔬菜：</dt>
        <dd>菠菜</dd>
        <dd>芹菜</dd>
    </dl>

链接（anchor）

href：跳转地址

<a href="https://www.bytedance.com">
        字节跳动官网
    </a>
    
<a href="https://www.bytedance.com"
    target="_blank">    //这里表示在一个新窗口打开此链接，不写的话默认覆盖当前页面
        字节跳动官网
    </a>

注：在开发网站初期，如果还未确定跳转的链接，可以把"#"给href，表示空链接

媒体标签有图片（img单标签）、音频（audio双标签）、视频（video）

图片：

alt是替换文本（当图片不显示时，显示的文字）

title是提示文本（当用户鼠标悬停时，显示的文字）

路径：使用相对路径（从当前文件开始出发找目标文件），分为同级（./）、上级和下级，用../返回上级路径

音频（最好用mp3格式）、视频（最好用mp4格式）：

controls：显示播放控件

autoplay：自动播放（部分浏览器不支持音频自动播放，有些视频要想自动播放还要加一个muted来静音播放）

loop：循环播放

输入（input）

input标签可以根据type属性值的不同，展示不同的效果；是单标签

type属性值	效果	常用
text	文本框，用于输入单行文本，输入什么就显示什么	placeholder：占位符，提示用户输入内容的文本
password	密码框，用于输入密码，输入的内容都显示为圆点
radio	单选框，用于多选一	设置name属性值相同的为一组，一组中只能选一个在某个单选框中添加checked属性，设其为默认选中
checkbox	多选框，用于多选多	在某个多选框中添加checked属性，设其为默认选中
file	文件选择，用于之后上传文件	mutiple：多文件选择
submit	提交按钮，用于提交	用value给按钮设置要显示的文字（submit和reset有默认的）
reset	重置按钮，用于重置
button	普通按钮，默认无功能，之后配合js添加功能

按钮（button）

button标签：是双标签

type属性值	效果	常用
submit	提交按钮，用于提交	用value给按钮设置要显示的文字（submit和reset有默认的）
reset	重置按钮，点击之后恢复表单默认值
button	普通按钮，默认无功能，之后配合js添加功能
下拉菜单（select）

select：下拉菜单的整体

option：下单菜单中的一项

selected：下拉菜单的默认选中

文本域（textarea）

双标签

cols调整宽度，rows调整行数即高度（一般还是用css来调整）

lable标签

用于将内容与表单标签绑定

方法：直接使用lable标签将内容和表单标签包裹起来，然后将lable标签的for属性删除

语义化标签

没有含义的语义化标签：div、span

div标签：独占一行

span标签：不换行

有语义的标签：

header里面放的是logo、导航等，其中导航可以用nav

页面主体部分被放到main中，一个页面里面通常只有一个main，article可以没有，也可以有多个

aside表示与内容相关的但不直接属于该页面，比如广告、热点推荐等

footer放在页面尾部，比如参考链接、版权、备案等

语义化

语义化是什么：html中的元素、属性、属性值都具有某些含义

开发者应当遵循html语义来编写，方便其他使用者理解、使用

注：使用我们写的html的包括开发者（修改和维护页面）、浏览器（展示页面）、搜索引擎（提取关键词、排序）、屏幕阅读器（进行无障碍阅读）

语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性

如何做到语义化：了解每个标签的属性、含义（mdn、h3c）；思考什么标签最适合描述这个内容；不使用可视化工具生成代码

总结

html 传达的是内容，而不是传达样式

前端与HTML | 青训营

什么是前端？

前端要关注什么？

什么是HTML？

html语法

语义化