这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
前言
什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
前端技术栈
- HTML：内容
- CSS：样式
- JavaScript：行为
前端的边界
- node.js
- electron
- React Native
- WebRTC
- WebGL
- WebASSEMBLY
开发环境
- 浏览器：IE/Edge Chrome Firefox Safari
- 编辑器：VSCode Vim WebStorm
HTML基本语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如input、meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，如required、readonly
HTML
HTML-> HyperText Markup Language 超文本标记语言
HTML骨架格式
<!-- 声明为HTML5文档 -->
<!DOCTYPE html>
<!-- 定义语言为英语-->
<html lang="en">
<head>
<!-- 定义字符集编码方式 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>文本标题</title>
</head>
<body>
<!-- 文档的主体 -->
</body>
</html>
HTML常用标签
-
排版标签
- 标题 h(h1~h6)
- 段落 p
- 换行标签 br
- 盒子 div span
- 水平线 hr
-
字体样式
- b 和 strong 文字粗体
- i 和 em 文字斜体
- u 和 ins 文字加下划线
- s 和 del 文字加删除线
-
图像标签
- img
- 例如：
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
- img
-
链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>target="_self" 默认窗口弹出方式target="_blank" 新窗口弹出
-
列表 ```
- 有序列表
<ul> <li>无序列表</li> </ul> <!-- 自定义列表 --> <dl> <dt>名词1</dt> <dd>名词解释</dd> </dl> -
表单
- 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
- 表单控件
<input type="属性值" value="你好">
