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

前端与HTML课堂笔记

本堂课重点内容：

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

1.什么是前端

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

2.前端的技术栈

HTML（内容）+CSS（样式）+JS（行为）

3.前端的边界

后端：可以使用node.js去开发
客户端：可以使用react、vue去开发
3D游戏：WebRTC
把C++或者其他语言编译到浏览器中运行:WebGL
总之,前端在互联网行业的发展是迅速的，涉及的领域也是十分广泛

4.前端的关注点

美观
功能
安全
无障碍
性能

5.HTML简介

HTML英文全称: HyperText Markup Language
HyperText: 意思为超文本,包含了图片、标题、链接、表格
Markup Language: 意思为标记语言，也就是标签例如:<h1>标题</h1>

6.常用标签

首先我们要知道:在 HTML 中有两种重要元素类别，块级元素和内联元素。

块级元素块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>。（MDN文档）
常用块级标签:div、ul、ol、li、dl、dt、dd、p、table、tbody、thead、th、tr、form、address、caption（标题）、h1-h6、hr（水平线)
口诀:三大列表和表格、六大标题和表单、段落地址要分块
常用行内标签:input、img、em、strong、br、a

7.HTML语义化

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语言编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用语言

语义化作用

有利于开发者修改和维护页面
有利于浏览器识别，更好地展示页面
有利于搜索引擎优化，也就是SEO，能够更好提取关键词、排序
屏幕阅读器-给盲人读页面内容

如何做到语义化

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

补充知识

em元素和i元素

共同点：都会对文字斜体化，视觉是一样的
不同点：

em是表示内容着重。（语气）（重读）
i元素是表示从正常文字重区分出来的文本。例如：外来词、人物、一个词语的定义

例子：
一个 <em> 的例子可能是："Just do it already!"，或："We had to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。
一个<i> 的例子可能是："The Queen Mary sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是："The word the is an article"。（MDN文档）

标签不区分大小写

<title>、<TITLE>、<Title>、<TiTlE>都是可以的

空元素

定义:一个空元素（empty element）可能是 HTML、SVG，或者 MathML 里的一个不能存在子节点（例如内嵌的元素或者元素内的文本）的元素
空元素有: input、br(换行)、hr(水平分割线)、img、link、meta

!DOCTYPE html

<!DOCTYPE html>: 声明文档类型。声明用何种HTML版本去解析代码

HTML中的空白

无论你在 HTML 元素的内容中使用多少空格 (包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

   <P>你好啊</p>
   等价于
   <P>你    好
   啊</p>

标题 title和h1标签

<title>是为文档添加标题，用于表示是整个HTML文档的标题
<h1>是为为body添加标题,用来标记页面内容的标题(新闻摘要、故事名称等等)

三大列表

无序列表

  <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ul>

2. 有序列表

  <ol>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ol>

描述列表元素

  <dl>
    <dt>电源:</dt>
    <dd>红海</dd>
    <dt>主演:</dt>
    <dd>小米</dd>
    <dt>上映时间</dt>
    <dd>2022</dd>
  </dl>

斜体、粗体、下划线

<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

i标签展示效果:hello
b标签展示效果:hello
u标签展示效果:hello (此处在编译器上是有下划线的)

（MDN文档）

本文若有不足之处，欢迎改正。

前端与 HTML | 青训营笔记