前端与 HTML | 青训营笔记

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

课程内容

一、前端概览

• 什么是前端
• 前端的技术栈
• 前端的边界
• 前端的关注点

二、HTML

• HTML简介
• 常用标签
• HTML语义化

一、前端概览

• 使用web技术栈解决多端图形用户界面交互问题
• 关注方面：功能 性能 美观 兼容 体验 安全 无障碍

前端技术栈:

• HTML（内容）
• CSS9（样式）
• JS（行为）

二、HTML

超文本标记语言（HyperText Markup Language）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

HTML元素：

1. 开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或者开始起作用。
2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

常用标签：

1. 标题：

<h1>-<h6>

2. 文本：

<p>常规段落

<block quote>长引用
<cite>短引用

<q>引用具体内容
<code>引用代码

<strong>/<em>强调

3. 列表：

<ol>有序列表
<ul>无序列表
<dl>定义列表: <dt>属性名<dl>属性值（多对多）

4. 链接：
通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。 该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示。

<img src="images.png" alt="My test image" />

超文本引用（ hypertext reference）href为属性值，设置为所需网址。

<a href="https://...">Text</a>

5. 输入：
type表示输入类型：

常见页面结构：

语义化：

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

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

三、课程小结

本节课对html有了初步的认识，掌握了一些基础语法和标签，理解了HTML语义化的含义和优点，明白前端传达内容而不是样式。