重识前端（前端与HTML）| 青训营笔记

Rona南柯一梦
135 阅读6分钟

重识前端（前端与HTML）| 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天，今天所总结的笔记是本次青训营课程前端方向的第一节课，讲师为赵文博老师。

本节课的课程介绍如下：本节课程围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开，层层解析前端技术栈的构成，以及作为前端最为基础的技术 - HTML 基础语法和基本功能，在实际研发过程中如何做到 HTML 语义化。带我们了解HTML高效的编程原理。

课程重点为：前端工作的定义，前端技术栈拆解与分析，HTML作用解析，HTML语义化

本节课我在第四届青训营前端场基础班学过一次，写好并发布了相应的笔记，但我任务，高质量的内容是常看常新的，所以在几个月过后的现在，再学习这节课，也有了一些新的体会。

一、前端有关概念

什么是前端

一句话总结：前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师

具体体现在：

  • 解决GUI（图形界面下的）人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • Web技术栈

前端技术栈

分为三个层，也就是我们常说的学习前端必备三件套：

  • HTML （内容）负责页面结构、元素，是最基础的
  • CSS （样式）负责页面样式
  • JavaScript （行为）负责页面交互的动态效果 这三者都是运行在浏览器内，浏览器再通过http协议和服务器进行通信，最后渲染成我们看到的页面

前端应该关注哪些方面？

下面图片写的很直观了，其中最核心的是功能

image.png

前端的边界？

随着科技的发展，前端早已远远超出了页面这一个简单的范畴

下面介绍了一些拓展前端开发会用到的网站：

image.png

前端开发环境

如下图：

image.png

二、介绍HTML

HTML是什么？

一种超文本标记语言

image.png

DOM树

由HTML代码解析而来（可以通过右键检查，打开浏览器的调试工具，更加清晰地查看DOM树）

image.png

HTML语法

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

三、一些常用的HTML标签

标题

<h1>~<h6>，其中h1表示字体最大的标题（一级标题），h6表示字体最小的标题（六级标题）。

列表

有三类标签 ，分别为有序列表<ol>、无序列表<ul>、定义列表<dl>。 <dt>表示标题，<dd>表示内容，两者是一个多对多的关系。

image.png

链接

<a>，<a>标签中有两个属性，分别为href和target。href属性规定链接指向的页面URL；target属性规定在何处打开链接文档。

image.png

多媒体

<img>：图像标签，src表示图片的URL地址，alt表示替换文本属性，用于在图片加载失败的时候显示。

<audio>：音频标签，src表示音频源URL，control属性显示播放控件。

<video>：视频标签，src表示视频源URL，control属性显示播放控件。

image.png

输入

使用input，具体实现如下图：

image.png

image.png

image.png

文本类标签

块级引用：<blockquote>，cite属性表示引用文本来源。

短引用：<cite>、<q>，区别是，<cite>一般表示引用作品名字，<q>表示引用作品内容。

代码：<code>,可以输入短代码，也可以输入长代码。使用多行代码时需在前面配合<pre>使用。

强调：<strong>、<em>，<strong>强调事件重要，<em>强调语气。

image.png

image.png

四、内容整体划分

header：页头，logo，导航

main：页面主体部分

aside：页面内容相关

article：文章正文（也可以没有）

footer:页尾，参考链接，版权信息

image.png

五、有关语义化

语义化是什么？

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

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

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

谁在使用我们写的HTML

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

注意：无障碍性！

语义化的好处

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

总体原则：传达内容，而不是样式！

如何做到语义化？

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

六、自己的总结和思考

初次接触前端，我了解到本次课程所讲的HTML这个板块是学习前端最基础的一个步骤，听完并总结完老师的这门课，我知道这还远远不够，我还需要在课后看MDN的文档，深入了解HTML这个板块。

以上是我在初次听完这节课后写的笔记，现增添了一些新的感悟和见解：

  1. 我认为学习前端的HTML，需要大概了解HTML的语法结构，在看到相对应的代码时，能搞清楚大概框架。
  2. 但我觉得，HTML所有的标签和属性，不需要全部都烂熟于心，在进行一个项目的时候，如果遇到了不太熟悉的标签和属性，我们可以通过查阅MDN上的HTML参考，以及其他一些参考资料来解决疑惑，我认为学习HTML，重要的不是死记硬背一些东西，而是学会应用。
  3. 做一个项目应该以终为始，站在未来的视角来看现在，这节课所涉及到的前端应该关注哪些方面我应该引起高度重视：功能，安全，美观，体验，兼容，性能，无障碍。
  4. 在学习本次青训营课程的时候，我也应该从目的出发，带着目的去学习，学习的过程中抓住课程的重点，再在课后去延伸。
  5. 明天我将继续学习前端三件套里的CSS，课程介绍里有提到：CSS作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。相信学习明天的课程，会让我对前端有更深的理解和感悟。
avatar
文章
阅读
粉丝