这是我参加「第五届青训营」笔记创作活动的第1天。
Day 1
- 了解基础前端知识
- 入门HTML
1.什么是前端？
- 解决决GUI人机交互问题
- 跨终端
-
- PC/移动浏览器
-
- 客户端/小程序
-
- VR/AR等
- Web技术栈
-
- HTML(内容)
-
- CSS(样式)
-
- JavaScript(行为)
- 前端应该关注的方面：功能 美观 安全 兼容 性能 无障碍 体验...
ps：开发常用工具
node.js开发服务器端的应用
Election RectNAtive开发客户端的应用
webrtc ptop 在线传输多人会议
webGL 开发3D游戏
webAssembly 用于c++ rust 编译成在浏览器中可以运行的代码
vim vscode webStorm 三个编辑器都可用于前端的开发
2.HTML入门
HTML含义: HyperText(超文本) Markup(标签) Language(语言)
书写规范
<img src="1.jpg"/>
<!--<标签名 属性名="属性值">-->
<!doctype html>
<!--标记版本 决定浏览器用哪钟渲染模式-->
<html><!--根标签-->
<head><!--放页面元数据 页面需要的信息但不用呈现给用户-->
<meta></meta><!--页面编码设置-->
<title></title><!--页面标题-->
</head>
<body><!--呈现给用的的内容-->
</body>
</html>
最后浏览器会将html代码解析成DOM树
常用标签
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
列表标签
| 标签名 | 作用 |
|---|---|
| li | |
| ol | 有序列表 order list |
| ul | 无序列表 unorder list |
| dl | 定义列表 |
| dt | 定义标题 title |
| dd | 具体描述 dt dd之间有多对多联系 |
链接标签
<a href="链接地址 target="-blank"/> _blank表示跳转时新打开页面不替换原来的页面
图片标签
<img/> alt属性加载图片失败替换的文本
音频标签
<audio/> 属性 controls默认显示播放
视频标签
<video/>
文本类标签
| 标签名（引用类） | 作用 |
|---|---|
<blockquote> | 快捷引用 cite属性标记来源于哪个网址 |
<cite> | 短引用 用于书名 章节 |
<p> | 短引用 之前讲过的再来引用 一般是具体内容 |
<code> | 引用代码 采用编程字体等宽字体 |
| 标签名（强调类） | 作用 |
|---|---|
<strong> | 强调含义上的重要 |
<em> | 语气上的强调 |
表单类控件
<input>标签
placeholder属性表示占位符没有输入的时候默认显示的内容
| input标签type属性 | 作用 |
|---|---|
| range | 输入范围设置有滑动块调节 |
| number | min max 数字设置 |
| date | 输入日期 |
| radio | 拥有相同name里只能选择一个 |
| checkbox | 选择多个 |
其中属性max设置最大输入 属性min设置最小输入
下拉选择标签
<select>下拉标签
<option>用于设置可选择项
input标签中list属性+id名可以进行默认提示
<datalist id=""> id对应
<option>默认提供一些提示 还是input不限制自由输入
<textarea>输入多行数据时使用
内容划分
| 板块 | 作用 |
|---|---|
| header | 页头设置导航nav |
| main | 主题部分一个页面一般设置一个 |
| aside | 与main相关的推荐 |
| article | 文章正文 零个或者多个 |
| footer | 参考链接版权信息 |
3.总结
开发过程遵守语义化 html传达的是内容 而不是样式。语义化更利于团队开发。html标签和其对应的属性有很多种要多看官网学习，培养一定学习能力。
“其作始也简，其将毕也必巨”。---《庄子·内篇·人间世》
