Day1、前端介绍
- 解决GUI(图形界面)人机交互问题
- 跨终端(PC/移动浏览器、客户端/小程序、VR/AR等)
- Web技术栈
1.前端简介
1.1前端技术栈
- HTML(页面结构和内容)
- CSS(样式)
- JavaScript(行为)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfUHR0JS-1658682292642)(C:\Users\林夕林\AppData\Roaming\Typora\typora-user-images\image-20220724162418372.png)]
1.2前端关注问题方面
功能、美观、无障碍、安全、性能、兼容、体验等
1.3前端边界/前沿
node.js、ELECTRON、React Native、Web RTC、WebGL、WebASSEMBLY
1.4开发环境
- 浏览器:IE/Edge、Chrome、Firefox、Safari等
- 编辑器:VSCode、Vim、WebStorm等
2.HTML
2.1简介
HTML(HyperText Markup Language 超文本标记语言)
- HyperText:图片、标题、连接、表格等
- Markup Language:标签(eg:
<h1>Title<h1>
)及标签上的属性(eg:<img src="1.jpg"/>
src即为属性名,引号内为属性值)
<!doctype html> <!--标记当前使用HTML文件使用版本,浏览器据此选择对应渲染模式-->
<html> <!--html根标签,所有标签写在其中-->
<head> <!--head标签,存放页面源数据,比如页面标题及使用编码-->
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body> <!--body标签内存放给用户真正的内容,比如文字、图片、视频等-->
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
浏览器获取HTML文件后会将代码解析为DOM树
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3m1KyvbA-1658682292643)(C:\Users\林夕林\AppData\Roaming\Typora\typora-user-images\image-20220724165429651.png)]
2.2语法
- 标签和属性不区分大小写(建议小写)
- 空标签可以不闭合(eg:input、meta等)
- 属性值用西文引号包裹(建议双引)
- 某些属性值可以省略(eg:required、readonly)
标题header:<h1></h1>
~<h6></h6>
列表list:<li></li>
和<dl></dl>
- 有序列表ordered list:
<ol></ol>
- 无序列表unordered list:
<ul></ul>
- 定义列表definition list:
- 标题definition term:
<dt></dt>
- 描述definition description:
<dd></dd>
- 标题definition term:
实例:
<h2>学生排序</h2>