这是我参与「第五届青训营」伴学笔记创作活动的第 1 天。

一、本堂课重点内容：

前端概览
- 什么是前端
- 前端的技术栈
- 前端的边界
- 前端的关注点
HTML
- HTML 简介
- 常用标签
- HTML 语义化

二、详细知识点介绍：

前端

前端应该关注哪些方面? 安全、美观、功能、兼容、体验、性能、无障碍
一些工具：
- node.js开发服务器端应用；
- electron、React Native开发客户端应用
- WebRTC在线传输实现多人会议；
- WebGL开发游戏；
- WebASSEMBLY让C++游戏能够在浏览器运行；

HTML语法

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

基本标签

版本： <!doctype html>标签表示HTML的版本；

注释： 

换行： <br>

列表：

无序：

<ul>
	<li>无序列表单元</li>
	<li>无序列表单元</li>
	<li>无序列表单元</li>
</ul>

有序：

<ol>
	<li>有序列表单元</li>
	<li>有序列表单元</li>
	<li>有序列表单元</li>
</ol>

超链接：

页面跳转：

<a href="链接地址">链接文本</a>

新窗口中打开：

<a href="链接地址" target="_blank">链接文本</a>

文本：

标题：<h1>一级标题</h1> …… <h6>六级标题</h6>
段落：

<p>
	普通段落内容
	<em>*斜体段落内容*</em>
	<strong>**加粗段落内容**</strong>
	<cite>*引用来源*</cite>
	<q>*引用内容*</q>
	<code>代码</code>
</p>

引用：

<blockquote cite="来源地址链接">
	<p>
		引用段落内容
	</p>
</blockquote>

代码：

<pre><code>
多行代码
多行代码
</code></pre>

多媒体：

图片：

<img width="宽度" height="高度" src="图片地址链接" alt="图片替代文字"/>

视频：

<audio src="音频地址链接" controls></audio>

视频：

<video src="视频地址链接" controls></video>

输入：

单行文本输入：

<input type="text"/> 
<input type="text" placeholder="占位提示文本"/>

多行文本输入：

<textarea>占位提示文本</textarea>

输入提示：

<input list="xx"/>
<datalist id="xx">
	<option>提示1</option>
	<option>提示2</option>
</datalist>

单选框：

<label>
	<input type="radio" name="选项组名称" id="选项1的id"/> 
	选项1
</label>

<label>
	<input type="radio" name="选项组名称" id="选项2的id"/> 
	选项2
</label>

💡 设定了相同的name后两个单选框才被看做是同一组选项

复选框：

<input type="checkbox"/> 选项1
<input type="checkbox"/> 选项2

下拉选择：

<p>
	<select>
		<option>选项1</option>
		<option>选项2</option>
	</select>
</p>

范围拖动条：

<input type="range"/>

范围数字：

<input type="number" min="" max=""/>

日期选择：

<input type="date" min="2000-01-01"/>

提交按钮：

<input type="submit"/>

文件选择：

<input type="file"/>

语义化

HTML中的元素、属性及属性值都拥有某些含义；

开发者应该遵循语义来编写HTML；

nav标签，包裹导航栏内容
header标签，包裹标题内容
article标签，包裹文章内容
section标签，包裹段落内容
aside标签，包裹侧边栏内容
footer标签，包裹页脚内容

谁在使用我们写的HTML？

开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容

如何做到语义化?

了解每个标签和属性的含义
思考什么标签最适合描述这个内容，不使用可视化工具生成代码

三、课后个人总结：

编写HTML的时候要遵循一定的规范，并且尽可能做到语义化。

前端与HTML ｜ 青训营笔记

一、本堂课重点内容：

二、详细知识点介绍：

前端

HTML语法

基本标签

语义化

三、课后个人总结：

前端与HTML ｜青训营笔记