前端与HTML|青训营笔记

这是我参与[第五届青训营]伴学笔记创作活动的第1天，和大家分享自己学习《前端与HTML》章节课程的收获。

一、本堂课重点内容

本堂课重点介绍了前端技术栈的整体情况以及HTML的使用方法概述。

二、详细知识点介绍

1.什么是前端？

前端工程师是借助Web技术栈解决多端（PC/移动浏览器/客户端/小程序等）图形人机交互问题的工程师。

2.前端技术栈有哪些？

最基础的三件套是HTML、CSS、JavaScript,其中HTML负责网页内容结构，CSS展示网页样式，JS控制网页行为。

3.前端应该关注哪些问题？

主要是功能，除此之外还要关注美观、兼容、安全、体验、性能等方面的情况。

4.HTML代码的例子

5.HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，比如input、meta
  例如：<meta charset="UTF-8">
• 属性值推荐用双引号包裹
  例如：<img src="photo.jpg">
• 某些属性值可以省略，比如required、readonly

6.列表的类型

有序列表<ol>、无序列表<ul>、定义列表<dl>

7.链接的格式

<a href="此处填写url">

8.输入的形式

提供了许多可选的输入格式，比如输入文本、输入范围、输入数字、输入日期、单项选择、多项选择 、下拉选择、提示选项......

9.引用的方式

• 块级引用/长引用：常用于引用较长的一段话：<blockquote cite=“此处填写url”>
• 短引用：较短的几个字来引用某个作品或章节：<cite>
• 具体的引用，往往较短:<q>
• 引用代码(字体有所区别，等宽字体)：<code>
• 引用多行代码(字体有所区别，等宽字体)：<pre><code>
• 突出重点：<strong>
• 重读的语气：<em>

10.内容的划分

• 页头：<header>
• 导航：<nav>
• 页面主题（一个页面只有一个）：<main>
• 与标题相关的次要内容：<aside>
• 文章（可有可无，可单可多）：<article>
• 页脚：<footer>

11.语义化是什么？

• HTML中的元素、属性以及属性值都拥有某些含义
• 开发者应该遵循语义来编写HTML

12.如何做到语义化？

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

三、课后个人总结

本堂课的知识较基础，在老师的带领下重温了HTML的基本使用方法，同时弥补了自己在引用、内容划分等方面的知识漏洞。