这是我参加「第四届青训营」笔记创作活动的第一天

认识前端

1、什么是前端？

解决GUI（图形界面）人机交互问题
跨终端
- 面对PC/移动浏览器、客户端/小程序、VR/AR等 -Web技术栈
- HTML、CSS、JS、HTTP网络协议

2、什么是前端工程师？

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

3、前端技术栈

可分为三层：

HTML:负责页面结构和内容
CSS：设置页面样式（大小、颜色、位置）
JavaScript：定义网页行为（点击按钮页面如何响应）

注意：它们运行在浏览器中，浏览器可通过HTTP协议和服务器进行通信，将前端代码进行渲染生成页面。

HTML、CSS、JavaScript、HTTP协议构成前端最基础的技术栈。

4、前端关注问题

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

5、开发环境

浏览器：Edge、Chrome、Firefox、Safari
编辑器：VSCode、Vim、WebStorm

认识HTML

1、HTML是什么？

HyperText Markup Language

HyperText：超文本（图片、标题、链接、表格等） Markup Language：标记语言,用开始标签和结束标签表示一段内容

2、 HTML例子

<!DOCTYPE html>
//标记当前HTML文件是什么HTML版本，浏览器根据它选择使用哪种渲染模式，
//若无会使用怪异模式渲染页面从而造成页面展示效果和实际不太符合
<html>//根标签
<head>//页面元数据：页面标题编码等
    <meta charset='utf-8'>
    <title>Page Title</title>
</head>
<body>//放入真正内容
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

效果

Page Title
一级标题

段落内容

3、HTML语法

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

4、常用标签

标题标签：h1~h6

<h1></h1>
<h2></h3>
......

2.列表标签

有序列表ol

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

无序列表

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

定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
</ul>

链接

<a href='' target='_blank'></a>//新窗口打开

图片

<img src='' alt='Metal movable type'></img>//当图片加载失败会显示'Metal movable type'

输入

常见type的属性值：

```
 text 文本框
```
```
 password 隐藏字符的密码框 
```

 submit、reset、button 依次是：提交按钮、重置按钮、普通按钮

 checkbox、radio 依次是：复选框，一组复选框(name属性值相同)用户可以勾选多个、单选按钮，一组单选按钮(name属性值相同)用户只可以选中一个

 email、tel、url 依次是：检测电子邮件、号码、网址的文本框

<input type='text'></input>

更多标签使用www.w3school.com.cn/html/html5_…

5、语义化是什么？

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

总结

今天的课程内容比较简单，但第一次写笔记有点不熟练，并且将所学内容系统化整理还是需要花费一些时间。

前端与HTML | 青训营笔记