前端与 HTML | 青训营笔记

小熊饼干的小新
86 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天，今天的学习主题是围绕 “前端与HTML”

一、 课程内容

  • 前端

1. 什么是前端？

2. 前端技术栈

3. 前端的边界

4. 开发环境

  • HTML

1. HTML是什么？

2. DOM树

3. HTML语法（常用的HTML语法）

4. 语义化

二、 课程准备

1. 安装浏览器

安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等，我使用的是最新版的 Chrome 浏览器。

2. 安装编辑器

要进行前端开发，编辑器必不可少，我使用的是 Visual Studio code,也可以使用其他编辑器，比如codepen、JS Bin等，用得顺手就行。

3. 提前预习HTML基础知识

可以在一些学习平台寻找有关HTML的知识，先预习。

三、 课程详细内容介绍

  • 前端

1. 什么是前端？

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

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的过程。

2. 前端技术栈

前端主要由HTML（内容）、CSS（样式）、JvaSCript（行为）这三个技术栈组成，当然还有其他技术栈，不过这三个是主要的。

image.png

浏览器通过网络协议与服务器端进行通信，浏览器获取到前端的HTML、CSS、JS代码，并渲染到浏览器页面。

当然前端开发时要注意页面的美观、安全，版本兼容性、性能问题以及用户的体验、无障碍等方面，给用户打造一个舒适的页面环境。

image.png

3. 前端的边界

前端的边界是没有边界, 前端的技术迭代是很快的，可以做很多广，所以我们需要不断地去学习、去探索。

image.png

4. 开发环境

浏览器： IE/Edge、Chrome、Firefox、Safari...

编辑器： VSCode、Vim、WebStorm...

  • HTML

1. HTML是什么？

HTML的英文全称是Hyper Text Markup Language，即超文本标记语言。

  • Hyper Text：超文本、超链接、图片、标题、表格
  • Markup Language：标记语言（<h1>文章标题</h1>）

2. DOM树

DOM 是 Document Object Model（文档对象模型）的缩写。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。

image.png

3. HTML语法（常用的HTML语法）

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

h1、h2、h3、h4、h5、h6

代码：

image.png

网页显示：

image.png

可以看出标题h1~h6中，数字越大标题字号越小。

  • [列表]

有序列表：

ol>li

image.png

页面显示：

image.png 无序列表：

ul>li

image.png

页面显示：

image.png

自定义列表：

dl>dt+dd

image.png

页面显示：

image.png

  • [链接]

a

href：跳转链接

target：打开新的标签页（_blank)

image.png

页面显示：

image.png

  • [图片、录音、视频]

img

src:  获取图片的地址。

alt:  给出了图像的备选文本，供图像无法显示时采用。

image.png

页面显示：

image.png

audio

image.png

页面显示：

image.png video

image.png

页面显示：

image.png

  • [输入]

input

plcaeholder：用户未输入，默认显示

type：范围（range）、数字（number）、多选框（checkbox）、单选框（radio）...

min/max：数字（number）、日期（date）...

image.png

页面显示：

image.png

  • [表单]

textarea

image.png

页面显示：

image.png

内容划分：

header：定义文档的头部。

nav：定义导航。

main：指定文档的主体内容。

article：定义文章、内容。

aside：定义页面内容之外的内容。

footer：定义文档或节的页脚。

image.png

4. 语义化

语义化是什么？

是指合理HTML标记以及其特有的属性去格式化文档内容

  • HTML 中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

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

谁在使用我们写的HTML？

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键字、排序
  • 屏幕阅读器：给盲人读页面内容

语义化的好处：

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

传达内容，而不是样式。

如何做到语义化？

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

四、课后个人总结

今天学习了前端与HTML的知识，之前也接触过所以学起来还算轻松，写完笔记也算是查漏补缺，巩固了基础，复习了一遍基础的知识点，对于往后开发提供了便捷，更熟悉开发的格式与语法，再接再厉！

avatar
文章
阅读
粉丝