重讲前端与HTML | 青训营笔记

Victor252
449 阅读5分钟

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

前端与HTML

大家好，这里是CV小达人vic，今天给大家带来青训营第一天前端与HTML课程的全部内容笔记。废话不多说，下面上干货。

0D1E185D.gif

前端相关概念

我把第一部分总结为前端相关概念，分为如下几个内容：1. 什么是前端；2. 前端的相关技术栈；3. 前端应该关注的方面。

什么是前端

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

前端技术栈

分为三层，最基础的为HTML，负责页面的结构；CSS负责页面的样式；JavaScript负责页面的行为。

前端应该关注的方面

这部分直接看截图就行，没啥好说的。

screenshot-20220724-102525.png

HTML

HTML的部分分为五个部分，分别为：1. HTML的定义；2. DOM树；3. HTML语法；4. HTML标签；5. 代码规范思想。

HTML的定义

定义： HTML --> 超文本标记语言（Hyper Text Markup Language）

超文本：顾名思义就是指超越文本，也就是指图片、链接、标题、表格等。

标记语言：使用标签表示各种各样的元素。HTML的标签一般是成对出现的，如：<h1></h1>等。也有不成对的标签，如<img src="photo.jpg" />，其中，src是属性名，"photo.jpg"表示属性值。

DOM树

讲这个概念首先讲一下什么是DOM，DOM的全名是文档对象模型（Document Object Model），其将文档作为一个树形结构，树的每个节点表示一个HTML标签。

下面结合课上的图片进行讲解，课上使用的HTML示例如下：

screenshot-20220724-114033.png

对这个示例中的结构进行分析：

其中，<!doctype html>标签的作用是声明文档的解析类型，从而避免浏览器使用不恰当的模式来解析渲染页面。<head>标签里面的内容不会在浏览器中显示，一般用来存放页面的元数据，里面可以使用的标签为link、meta、script、style、title。<body>标签里面包含文档中用户可见的所有内容，由于里面的标签太多，所以在此处不进行介绍。

将这个结构转换为树结构，即为DOM树。如下图所示：

screenshot-20220724-115800.png

HTML语法

这部分与其说是语法，我倒更觉得是一些建议。内容如下：

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

在这里贴上一些我个人对于这部分的理解与心得：

  1. 标签和属性使用小写，这样的好处主要是看着舒服，不费劲；
  2. 空标签相关，在这里我建议使用这种写法--<img scr="picture" />，这样的好处是在实际开发中更加方便找到对应的标签。
  3. 属性值推荐使用双引号包裹：有时候我们会在JS中进行DOM操作，这样不容易引发错误。
  4. 属性值省略，没什么好说的。

常用HTML标签

标题

<h1>~<h6>，h1表示字体最大的标题，h6表示字体最小的标题。

列表

列表分为三种，分别为有序列表<ol>、无序列表<ul>、定义列表<dl>。<ol>与<ul>中的每一项为<li>，定义列表是项目及其注释的组合，<dt>表示标题，<dd>表示内容，是一个多对多的关系。

链接

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

target的属性值如下：

  • _blank：在新窗口中载入目标文档；
  • _self（默认值）：响应显示在当前窗口中；
  • _parent：响应显示在父框架中；
  • _top：响应在当前窗口打开并替换当前的整个框架页

多媒体

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

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

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

输入

input：输入

<!-- 常规的输入框，其中，placeholder中的属性值表示提示信息 -->
<input placeholder="请输入用户名" />
<!-- 范围组件 -->
<input type="range" />
<!-- 数字控件 -->
<input type="number" min="1" max="10" />
<!-- 日期控件 -->
<input type="date" min="2018-02-10" />
<!-- 多行文本框 -->
<textarea>Hey</textarea>

<!-- 复选框 -->
<p>
  <label><input type="checkbox" />苹果</label>
  <label><input type="checkbox" />香蕉</label>
</p>

<!-- 单选框 -->
<p>
  <label><input type="radio" name="sport" />足球</label>
  <label><input type="radio" name="sport" />篮球</label>
</p>

<!-- 选项菜单 -->
<p>
  <select>
    <option>苹果</option>
    <option>香蕉</option>
    <option>梨子</option>
  </select>
</p>

<!-- 表单 -->
<input list="countries" />
<datalist id="countries">
  <option>China</option>
  <option>Japen</option>
  <option>South Korea</option>
</datalist>

文本类标签

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

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

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

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

内容划分标签

参见下图即可：

screenshot-20220724-110205.png

一般来说一个页面中只应该有一个 main 元素。

代码规范思想

使用HTML标签需要遵循语义化。

语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义；
  • 开发者应该遵循语义来编写HTML，如：
    • 有序列表用 ol；无序列表用 ul
    • lang属性表示页面使用的语言

为什么要使用HTML语义化

  1. 便于开发者修改、维护页面；
  2. 便于浏览器展示页面；
  3. 便于搜索引擎提取关键词、排序；
  4. 便于屏幕阅读器等识别（给盲人读页面内容）。

代码规范

在HTML中只表达内容，不要进行样式设置。（各司其职原则，即：HTML、CSS、JS 三者各司其职。）

如何做到语义化

  1. 了解每个标签及其属性的含义；
  2. 思考什么标签最适合描述这个内容；
  3. 不使用可视化工具生成代码。

写在最后

最后，贴上MDN的文档链接，写这篇笔记的时候也同时翻阅了这个文档。 MDN文档链接

avatar
文章
阅读
粉丝