这是我参与「第五届青训营 」伴学笔记创作活动的第1天
一、本堂课重点内容
- 前端的介绍及理解
- 介绍了HTML概念、结构以及语法要求
- 终点学习了HTML中的各种标签
- 介绍了标签语义化的定义、重要性，以及如何做到标签语义化
二、详细知识点介绍
2.1前端介绍
2.1.1什么是前端？
一句话总结：前端工程师是使用web技术栈解决多端图形界面用户交互问题的工程师
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端小程序
- VR/AR等
- Web技术栈
2.1.2前端技术栈的构成
2.1.3前端应该关注什么？
- 功能、美观、兼容、性能、安全、体验、无障碍
2.1.4前端的边界
2.1.5开发环境
2.2HTML介绍
2.2.1什么是HTML？
Hypertext Markup Language
- Hypertext：超文本，包括图片、标题、链接、表格等。
- Markup Language：标记语言
2.2.2DOM树
2.2.3HTML整体结构
<!doctype html>:标记了当前使用的html文件是什么样的html版本<html>:根标签<head>:放一些页面的元数据，页面需要的信息但不需要直接呈现给用户的，如页面标题、页面编码<body>:需要呈现给用户的内容
2.2.4HTML语法
- 标签不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐使用双引号包裹
- 某些属性值可以省略，比如required、readonly
2.3.HTML标签
2.3.1标题h1-h6和p元素
<h1>这是h1</h1>
<p>这是我参加青训营的第一天，希望在这里可以有所收获</p>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
2.3.2列表标签
- 有序列表
<ol>
<h2>世界电影票房排行榜</h2>
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
世界电影票房排行榜
- 阿凡达
- 泰坦尼克号
- 复仇者联盟
- 无序列表
<ul>
<h2>购物清单</h2>
<ul>
<li>🍇</li>
<li>🍉</li>
<li>🍎</li>
</ul>
购物清单
- 🍇
- 🍉
- 🍎
- 定义列表
<dl>
<h2>霸王别姬</h2>
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
<dt>主演：</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期：</dt>
<dd>1993-01-01</dd>
</dl>
霸王别姬
- 导演：
- 陈凯歌
- 主演：
- 张国荣
- 张丰毅
- 巩俐
- 上映日期：
- 1993-01-01
2.3.3网页链接
<a href="https://www.bytedance.com/">
字节跳动官网
</a>
<a href="https://www.bytedance.com/" target="_blank">
字节跳动官网
</a>
2.3.4图片链接
<img
src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54aca57fe90e49769d64c84392a10f91~tplv-k3u1fbpfcp-zoom-1.image"
alt="Metal movable type"
width="400"
/>
2.3.5音频链接
<audio
src="/assets/music.ogg"
controls
></audio>
2.3.6视频链接
<video
src="/assets/video.mp4"
controls
></video>
controls表示给一个默认的空间
2.3.7输入
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>
<p>
<label><input type="checkbox" />🍎</label>
<label><input type="checkbox" checked />🍏</label>
</p>
<p>
<label><input type="radio" name="sport" />⚽</label>
<label><input type="radio" name="sport" />🏀</label>
</p>
<p>
<select>
<option>🥑</option>
<option>🥩</option>
<option>🥓</option>
</select>
</p>
<input list="countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
- placeholder表示一个占位符
- type属性
- 属性值为range，会出现一个滑动条；
- 属性值为number，可以输入指定范围内的数字；
- 属性值为date，可以输入日期；
- 属性值为checkbox，可以实现选多个选项
- 属性值为radio，可以实现多选一，通过name属性实现互斥关系
- select元素：选项较多时，实现下拉选择
- list属性：指定可选的提示选项
2.4标签语义化
2.4.1什么是语义化
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
2.4.2谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
2.4.3语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
2.4.4如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
3.总结
前端是通过web或应用程序实现图形交互并呈现给用户的过程。HTML是一种超文本标记语言，通过一系列标签，实现对文本、图片、链接、表格、音频、视频的说明。要想学习好前端，一定要学习好HTML，夯实基础，脚踏实地。
