前端与HTML｜青训营笔记

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

一、本堂课重点内容：

前端工作的定义
前端技术栈拆解与分析
HTML 作用解析
HTML 语义化

二、详细知识点介绍：

A、前端的概念与技术

1、前端：使用web技术栈，解决多端解决图形界面（GUI）下人机交互的问题。

2、前端技术栈（三板块）：
·HTML（内容）
·CSS（样式）
·JavaScript（行为）
以上三者与网络协议构成了前端技术栈。

3、前端关注的重点：功能、美观、无障碍、安全、性能、兼容、体验......

4、前端的边界：
·nodejs——服务器端
·electron——客户端
·web rtc——P2P在线传输
·webgl——3D游戏
·webassem——将其他语言的代码转换为浏览器可解读的代码
前端的发展很快，技术也在不断更新。

5、开发环境：浏览器+编辑器

B、HTML

1、HTML：HyperText Markup Language——超文本标签语言

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

3、标签
·标题标签h1～h6：六级标题从大到小
·列表标签：有序列表由数字表示<ol> <li>a</li> <li>b</li> </ol>
无序列表由黑点表示<ul> <li>a</li> <li>b</li> </ul>
定义列表dt和dd是一个多对多的关系 <dl> <dt>属性</dt> <dd>属性值</dd> </dl>

4、链接
<a href = “超链接的引用地址”> 网址名称 </a>
<a href = “超链接的引用地址”> target = "_blank" 网址名称 </a>
加上target属性点击链接则新开一个页面而不是替换原有页面
<img src = "图片的url" alt = "替代文本" width = "图片的宽度" />
<audio src = "音频的url" controls></audio> //controls表示浏览器默认的音频控制按钮
<video src = "视频的url" controls></video> //controls表示浏览器默认的视频控制按钮

5、输入和选择 ·输入
<input placeholder = "请输入用户名">
//placeholder表示占位符，当用户没输入内容的时候显示的内容
<input type = "range"> //输入范围
<input type = "number" min = "1" max = "10"> //输入从1-10的数字
<input type = "date" min = "2018-02-10"> //输入日期
<textarea> Hey </textarea> //输入框
·选择
//选多项
<label><input type = "checkbox" /> 选项1 </label>
<label><input type = "checkbox" /> 选项2 </label>
//radio选单项，name相同的选项之间呈互斥关系
<label><input type = "radio" name="sport"/> 选项1 </label>
<label><input type = "radio" name="sport"/> 选项2 </label>
//下拉选项
<select> <option> 选项1 </option> <option> 选项2 </option> <option> 选项3 </option> </select>
//提示选项
<input list="countries" /> <detalist id = "countries"> <option>Greece</option> <option>United Kingdom</option> </detalist>

6、文本标签
·引用标签
//快捷引用
<blockquote cite="文字来源url"> <p>文本内容</p> </blockquote>
//cite和q标签都表示短引用，但是cite通常表示一个章节或名称，q通常表示具体的内容
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
<p>在<cite>第一章</cite>，我们讲过<q>字符串是不可变量</q>。</p>

//code标签表示代码，如果要表示较长的代码在外面包裹pre

<p><code>const</code>声明创建一个只读的常量</p> <pre><code> const add = (a,b) => a + b; const multiply = (a,b) => a * b; </code></pre>

7、强调标签
//strong标签强调东西的重要与紧急，em标签表示语气上的强调
<p>在投资之前，<strong>一定要做风险评估</strong>。</p>
<p>Cats <em> are </em> cute animals.</p>

8、内容划分
·常见内容划分模式

9、HTML的语义化
·HTML中的元素、属性及属性值都拥有某些含义
·开发者应该遵循语义来编写HTML
有序列表用ol；无序列表用ul;lang属性表示内容所使用的语言等
·好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性
·怎么做：了解每个标签和属性的含义；思考什么标签最适合描述这个内容；不使用可视化工具生成代码

10、HTML的使用
开发者-修改、维护页面
浏览器-展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容（对于正常人的特殊情况下的使用也很有帮助）

三、课后个人总结：

在本章中了解相应的HTML标签及其应用场景还是较为困难的，原因来自于标签种类繁多并且许多相近标签之间存在细微的差别，需要我们在实际开发中尤为注意
HTML所注重的应该是页面的内容，相关的样式主要在CSS中学习，相关的行为在JS中学习

四、引用参考：

前端与HTML青训营课程