0%

再探HTML

把在掘金发布的青训营的笔记迁移上来了,这篇是第一篇笔记,浅浅写了一点自己对HTML的理解

这是我参与青训营的第一天。
之前对HTML和CSS有一定的了解,是通过《head first HTML and CSS》了解的,所以大致知道这俩是干什么的,也知道基本的一些语法,今天在字节青训算是一个再探过程。

讲师是把前端的基本知识讲解了一遍,说了一下前端的要素以及发展前景,同时也介绍了一些开发环境。但是视频本身是只有四十多分钟,尽管HTML作为标记语言确实十分简单,但是这四十多分钟想必对于之前完全没接触过的同学而言,了解到的东西是少之又少。而我通过一本入门书籍浅有了解,大致知道如何书写静态页面,还是觉得涉及到的东西确实很少,不过基础的东西基本上都是涉及到了,有讲标题、段落、链接、图像,也有无序有序列表等,但是几乎都没有很深入去讲。就比如插入图像的位置如果不在HTML目录下,如何回退或是进入某个文件夹获取这个图像;或是比较重要的布尔属性等;抑或是注释,似乎都没有给到一定的解释。

今天看MDN的时候注意到了有一篇页面是用来专门讲<head>里面有什么的,我之前自学的时候也不太明白为什么要单独搞一个<head>标签出来,今天终于有一定的了解了:

  • 其包含的元数据具有重要意义,能够指定字符编码,指定文档主体语言等,应用description标签也能使用户在搜索到该网页但是还没有打开时能看到网页的大致概述信息,因此<head>标签里面的内容是显得十分重要的。

讲师写到的关于input的一些标签值让我觉得值得一记:

<input placeholder:"输入内容">  <!-- 这表示在输入框内预留的字符 -->
<input type="range"> <!-- 这表示一个滑动块(目前不知道作用) -->
<input type="number" min=0 max=10> <!-- 输入数字,最小是0,最大是10 -->
<input type="date" min="2002-03-10" max="2022-7-24"> <!-- 输入日期,最小和最大也标出来了 -->
<textarea>默认文字</textarea> <!-- 这个文本框用于输入多行文字 -->

可惜这里是没有讲提交的HTML操作,不然我们还可以验证关于最小值最大值的一些操作

结构化和语义也是很重要的一块

讲师在PPT中是有提及到关于结构化和语义化

  • 关于结构化:这个的重要性显而易见,如果一个网页不重视结构化,那么给读者展示的东西就是乱七八糟的,读者读不明白,自然对网页的评价也就不高了;同时,如果不重视结构化,开发者自己甚至都会搞不清楚逻辑关系,对于后续的开发自然也是十分不利的
  • 关于语义:这个是便于开发者自己的理解的,当然英语就要好啦。h1~h6其实就是head,即标题,p就是paragraph,也就是段落,img则是image,代表的就是图片…记住这些基本单词自然对于前端开发是有好处的。谁也不愿意去每次翻字典查具体操作是什么

其实说来惭愧,markdown语法我都是初次涉及,其实除了代码量小一点以外,它跟写一个静态HTML网页真的没什么区别,也要注意结构化,也要力求让读者读的舒服顺滑,所以这个笔记也就权当是做了HTML结构化的练习吧。

关于超链接

  • title值用于让鼠标在超链接上悬停时显示大致信息
  • 当需要指定访问文件时,又分为指向当前目录、指向子目录和指向上级目录,分别需要直接指定文件名、进入子文件夹后指定文件名和使用”../“前往上级目录
  • 使用mailto发送电子邮件
  • URL分为绝对URL和静态URL,浏览器会默认加载index.html文件

高阶文字排版

描述列表

描述列表这一内容讲师有浅显的提到一部分,这里我在MDN上面又重新学习了一遍。描述列表使用与其他列表类型不同的闭合标签— <dl>(description list); 此外,每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd>(description definition)。这时<dd>标签里面的内容即为<dt>标签里面内容的解释。

块引用

块引用是用来引用一个段落的内容,可以用cite元素里面用URL指向被引用的资源。块引用的标签是<blockquote>,块引用中同样需要使用<p>标识符去书写引用的文字和语句。

缩略语

使用<abbr>标签和title值来显示一个缩略的单词或是隐藏内容,当鼠标悬停在该内容上显示。


高阶文字排版还有很多内容和标签,这些都需要在后续进一步学习中去掌握和理解,仅靠我做笔记或是看一遍MDN是起不了作用的。

DOM模型

似乎前端进阶版的面试最后一题的简答题考的就是DOM模型的理解,不幸的是本人当时并没有去了解这一模型,但现在看了MDN上面的文档之后应该能对其有一定的认识了。

DOM即文档对象模型,是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射成为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。 通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。即DOM作为一个对象模型,让JS具有编辑创建动态HTML的能力。


今天关于HTML的总结笔记就到这里,作为较为浅显易懂的HTML,其实学习它更多的像学习一本字典,在使用过程中也就慢慢掌握了用法,仅靠死记硬背肯定是学不好前端的啦。