前端-HTML丨青训营笔记

前端阿小白
186 阅读7分钟

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

今日内容

主要就是重新学习了一下前端和HTML。说实话，在没上课以前，我认为前端三大件里面HTML是最简单的，在上课后才发现自己对于HTML很多的一些底层概念都不太熟悉，下面分为两部分去讲讲今天学习的感悟。

第一部分：前端

前端的话，主要是给新入门的同学介绍了一下什么是前端，然后前端的技术栈有哪些，在做前端项目时需要注意的点，可优化的点在哪。

介绍前端

前端指的是网站的前台部分，然后前端开发顾名思义就是这些内容和页面中代码的实现，前端工程师就是指利用web前端开发技术栈开发网页并利用图形交互优化网页的工程师（狭义并且易懂的说法）

前端技术栈

    前端的基本技术栈主要有三个（俗称三大件）：HTML、CSS、JavaScript

其中HTML负责页面的结构编写，CSS负责页面的美化，JavaScript则是负责页面的交互（也叫行为） 通俗点说，HTML就是人的骨架，CSS就是人的衣服，Javascript就是人的行为。 另外，一定的网络协议也需要去学习，例如http、tcp等

前端的项目注意点

    这里看到课上一张图囊括得很全面，所以直接给兄弟姐妹们上图了

Snipaste_2022-07-24_18-34-30.png

开发环境和编译器

emm，我个人认为开发环境的话是选用Chrome优先，当然也可以选择Microsoft Edge，都是很不错的开发环境。编译器的话强推Visual Studio Code，新手入门简单上手，熟练了之后还有很多插件可以提高开发效率，当然如果出去工作可能还是要熟悉WebStorm。

    至此前端介绍就差不多结束了，下面进入第二部分:HTML

HTML

HTML部分的课，主要说了HTML定义，DOM树定义，HTML基础语法，HTML基础标签以及一些代码的规范性问题。

HTML定义

HTML：全称 HyperText Markup Language 中文为超文本标记语言

超文本：意为不限于文本，可以用图片、链接等放入到网页中

标记语言：用成对的标签来显示元素，例如:<h1>M<h1>，意为一级标题。但在整个HTML语言中，也存在单标签，例如img、br等。

DOM树

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

Snipaste_2022-07-24_18-51-22.png

首先看到的是<!doctype html>,此段代码说明文档的解析类型为HTML5（作用）

<meta>标签->源数据标签，描述数据的数据

  • 常用属性

    • charset：定义字符编码方式；
    • name：页面信息的简要说明；常用值有keywords、description、viewport（主要用于移动端，定义设备屏幕上用来显示网页的区域）；
    • http-equiv：给http头部添加一些信息，如设置网页到期时间、设置cookie
    • 其它自定义meta信息；

下面显著颜色的标签作用如下：

  • <html>：HTML 页面的根元素
  • <head>：包含了文档的元（meta）数据
  • <title>：文档标题
  • <body>：可见的页面内容
  • <h1>：一级标题
  • <p>：段落内容

编译器上的补充标签

  1. <link>

    • 常用属性

      • shortcut icon：指定页面标题旁的logo
      • stylesheet：链接到样式表
      • alternate stylesheet：可替换的样式表，不是所有浏览器都支持

<script>

用来引入外部脚本文件；

  • 分类

    • <script>：立即下载脚本文件，下载完后立即执行，其会阻塞dom解析；
    • <script defer>：立即下载脚本文件，这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded (en-US) 事件前执行。；
    • <script async>：对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。
    • 以上为笔试后搜集学习的知识，如有不足或缺漏，可以在评论区补充

最后呢，DOM树就是把上述的HTML结构转变成树结构，下图展示给大家看

Snipaste_2022-07-24_18-57-00.png

HTML基础语法

这部分内容不是很多，就老师主要讲讲写标签的一些注意事项

  1. 推荐标签和属性使用小写来编写（虽然不分大小写）。
  2. 空标签不用闭合，例如input等。
  3. 属性值推荐用双引号包裹。
  4. 属性值省略（如required和rendonly）[ps：这部分我个人很少碰见，留个注意点就行]

差不多就这样，这节我个人认为还得多练，多错了就知道语法规范了（手动滑稽）

HTML基础标签

1、标题

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

2、列表

列表有三种，分别是有序列表、无序列表和自定义列表

有序列表标签：<ol>、<li>

无序列表标签：<ul>、<li>

自定义列表标签：<dl>、<dd>、<dt>

等级排序<dl> > <dt> > <dd>

3、链接

链接就是a标签，标签样式为<a></a>

此节主要是说说a标签的两个属性，分别为href和target。href属性规定链接指向的页面URL。target属性规定在何处打开链接文档。

target的属性值如下：

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

4、多媒体

多媒体标签分为三个：<img>、<audio>、<video>，分别为图像标签、音频标签、影像标签。

其中都有src属性，src表示的是图像音频影像的URL

音频和影像还有control属性，意为播放控件

5、输入

<input>

以下为input的属性

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

type：范围[range]、数字[number]、多选框[checkbox]、单选框[radio]

min/max：最大值最小值[type="number"]、日历[type=“date”]

textarea ：文本域

6、表单的一些输入

<!-- 复选框 -->
<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>America</option> 
<option>France</option> 
<option>Korea</option>
</datalist>

7、引用and强调

  • 块级引用<blockquote>，会将文本居中，属性为cite，作用为指向文本来源。
  • 短引用<cite> <q>，cite一般引用的是作品的名字，而q引用的是作品内容。
  • 代码引用<code>，code在引用多行是需要搭配<pre>使用。
  • 强调<strong> <em>，strong一般是强调事情的重要性，而em是强调语气。

内容划分

此部分主要是对页面进行分区，话不多说，上图

Snipaste_2022-07-24_19-40-41.png

需要注意的是，一般一个页面只有一个main标签！

代码规范

为什么要使用HTML语义化

  1. 便于开发者修改、维护页面；
  2. 便于浏览器展示页面；
  3. 便于搜索引擎提取关键词、排序；
  4. 便于屏幕阅读器等识别（给盲人读页面内容） 使用语义化标签有利于理解和SEO优化；让人和机器都更能读懂你；

语义化标签

区块语义标签：

  • <header>
  • <nav>
  • <article>
  • <section>
  • <aside>
  • <footer>

分组类语义标签

  • <figure>：包裹被独立引用的内容：图表、插图、代码等
  • <figcaption>：对应<figure>的说明文字；
  • <blockquote>：块级引用元素，cite属性指定来源url；
  • <dl>、<dt>、<dd>：用于描述一组键值对，通常用于元数据、术语定义等场景；

文本类语义标签

  • <cite>：通常用于作品的标题；
  • <time>：用于包围时间、日期，通过指定datatime属性设置和文本对应的时间日期；
  • <address>：联系信息；
  • <mark>：在引用中使用，表示需要引起注意；
  • <code>：代码片段；
  • <small>：免责声明、注意事项；

最后注意，在HTML中只表达你要表达的内容，不要表达样式（各司其职原则）

第一天笔记结束，如果你也从头看到现在，那么先感谢你的阅读，顺便不妨给我点个赞吧~

avatar
文章
阅读
粉丝