「前端与 HTML」｜ 青训营笔记

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

材料

• Visual Studio Code
• Chrome 浏览器

一、重点内容：

1. 前端是什么
2. 技术栈
3. HTML 的概念
4. 语义化
5. 常用的 HTML 标签

二、详细知识点介绍：

1. 前端是什么

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

2. 前端技术栈

3. HTML 的概念

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

4. 常用的 HTML 标签

• 图像

[<img src="images/firefox-icon.png" alt="My test image">]

• 标记文本

<p>段</p>
 <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

<p> 段</p>

• 链接

1. 选择一些文本。

2. 将文本包含在 <a> 元素内，

3. 为此 <a> 元素添加一个 href 属性

4. 把属性的值设置为所需网址：

<a href="https://juejin.cn/post/7122348855525867556">/juejin.cn</a>

4.HTML语法

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

5.语义化是什么?

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

• 有序列表用ol
• 无序列表用ul
• lang属性表示内容所使用的语言

四、课后个人总结：

本章由Web安全引入，编码格式、封装格式、多媒体元素、流媒体协议知识点不容易掌握,老师讲解的深入浅出,令我受益匪浅。

五、引用参考：

课件和 HTML 介绍 - 学习 Web 开发 | MDN (mozilla.org)