从《解释一切》到 HTML入门笔记01

王海山
316 阅读12分钟


因为这次新冠疫情，宅在家里看了网飞Netflix出的一系列纪录片，由著名媒体集团Vox出品，叫做《Explained》（ 第一季 和 第二季 ），中文翻译为《解释一切》，每一集用大概20分钟左右的时间来来讲述一个当今发生的一个热点知识，精美的剪辑+音乐，让你觉得这20分钟是很值得的。豆瓣上有人评价为“高品质罐装知识养料”，我觉得总结还蛮到位的，能够让你尝到一点甜头，但如果想吃更好的，还是得去吃真正烹饪的食物，其中，看到第二季的第五集《Coding 程式编写》的时候，又一次重新燃起我对于程序语言的学习热情——这一次我一定要坚持下来。


因为是设计师的缘故，一直都想尝试能够把网页开发知识能够掌握下来，对于这个时代的设计师来说，如果不掌握这个知识，那跟少了一只手几乎没什么区别，特别是对于平面设计师而言。在知乎上找怎么学习JavaScript的时候，看到方应杭在讲方法的时候，跟其他人不太不一样，于是就顺藤摸瓜找到了饥人谷，坦白说，他个人对于前端编程语言如何传授给小白，确实有自己的一套，是我见过的网课里，表达能力最好的，有自己的态度，有学习方法，也有幽默感，当然肯定也是有料的，上他的课，就跟面对面聊天似的，不愧是学霸出身。不得不再次引用黄执中的一句话 ：

知识本身不值钱，展示知识的方式才值钱。 

———————————————————————————————————————————

现在进入这次作业的正题


01  HTML是谁发明的


蒂姆·伯纳斯·李（Tim Berners-Lee）于1994年在欧洲核子研究组织CERN工作。照片来自：CERN

HTML是英国一位叫Tim Berners-Lee 的爵士发明的，生于1955年的他，在1984年加入了欧洲核子研究组织（CERN），该研究中心位于瑞士和法国边境的日内瓦附近，是一个相当宜人的地方，在这里可以看到优美的汝拉（Jura）山脉，距离滑雪场也仅十分钟的路程。尽管CERN为雄心勃勃的研究人员提供了许多机会，但它在某些方面却是一个保守的机构，这里的人对互联网本身都是抱有怀疑态度的。

CERN有来自世界各地的数学家，物理学家和理论家，他们使用完全不同的计算机工作，每一台设备之间，并不能直接的访问。所以Tim Berners做的第一个动作就是编写了一个程序，以简化公司内部计算机之间的通信方式，但这依然是本地的，Tim Berners的想象并没有在这里止步。

虽然互联网早在1970年就已经诞生了，但人们只能通过电子邮件和所谓的Usenet，以纯文本形式，在论坛跟其成员进行讨论。当时也有了超链接的概念，但这也局限于在本地进行跳转。他在想，如果可以使用超链接访问其他计算机，如果可以链接世界上所有计算机上的所有信息（信息包含了文档、图像、视频等）会怎么样呢？


1989年3月，Tim Berners坐在霓虹灯照明的办公室里的电脑旁，写一篇叫《Information Management: A Proposal 》的文章，描述他对万维网的构想。他向研究中心提议打造一个通用的互联信息系统，来更好的管理CERN的日常文件，但这项提议并没能通过。可是他没有因此而放弃，转而自己埋头干。幸运是，这个想法得到了上司的支持，尽管上司觉得他的想法有点异想天开，但仍然允许他购买了一台当时最先进的计算机——这台计算机就是那位创建了苹果公司，但因为种种原因，自己出来又新创立了NeXT——史蒂夫·乔布斯（Steve Jobs）新发布的一台NeXT计算机。


1990年10月，他开始在NeXT计算机上开发HTML，URI，HTTP这三种技术，这些技术构成了万维网的基础。首先，要将普通文本转换为包含链接的文本，Berners-Lee定义了“HyperText Markup Language”，简称HTML。然后，如果要让互联网的每一台电脑能够互相访问，就需要遵循统一的标准的协议，于是开发了超文本传输协议（HTTP）。“想要或需要被引用的每个对象都应该有一个明确的地址”，基于这一个原则，他开发了URI，它是“Uniform Resource Identifier”的缩写，翻译为统一资源标志符。

一个完整的URI包含了以下组成部分：

  • 方案名 (http) 
  • 域名 (www.example.com)
  • 路径 (/en/US/partners/index.html)  

如今，URI通常被称为URL，即网址。1990年底，他开发了第一台Web服务器——驻留于互联网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，让全世界浏览，通俗来说就是浏览器。Tim Berners在info.cern.ch上启动了世界上第一个网站来解释他的项目，在那里，可以阅读HTTP，URI和HTML的含义。自此，万维网诞生了。  

可是，不是所有人都像Berners-Lee这样的人拥有可以显示页面的NeXT计算机。因此，最好是有一个可以在所有设备上运行的浏览器，一名实习生为Tim Berners开发了“Line-Mode Browser”，在黑色背景上的绿色，一次一行，只能用键盘导航，每个链接都有一个数字，必须输入数字才能跳到该链接。 


1991年8月6日，Tim Berners发表了他的发明的原文，将自己的网站链接到各种互联网论坛，包括“ hypertext.alt”讨论组，超文本爱好者在该论坛中大肆宣传，自此，这项技术被开始推广至全世界。

Tim Berners没有明星魅力，他也并没有像Mark Zuckerberg、Jack Ma那样因为互联网而变得那样富有，即使今天有超过十亿个网站，即使全球所有人都在使用互联网，但几乎没人知道他的名字。甚至是目前的互联网，也已经离他在最开始的设想越来越远，各种zf、各种公司，纷纷因为各种利益设立围墙，这使得这位万维网的发明者在2019年发布了一个计划，叫做 the Contract for the Web，以此希望能够拯救互联网，Microsoft，Google，Twitter和GitHub等超过上百家公司也响应了他的呼吁。在此希望他的愿景早日实现，就如他所说：

我希望网络能够为人类服务。兑现这一诺言还为时不晚。


02  HTML起手应该写什么

html的起手可以通过在Vscode的软件中，输入"!"获得，包含了

  • !DOCTYPE文档类型声明 
  • html标签，需要把属性lang中的"en"值改为"zh-CN"，不同语言环境考虑不同值； 
  • meta标签，字符编码为"UTF-8"，表示面向全人类的字符编码；
  • meta标签，在viewport（浏览器视窗）的属性中加上兼容手机，禁用缩放的属性值；
  • meta标签，网页的兼容性模式设置为IE浏览器需要使用最新内核； 
  • 需要有title标签，标签中的内容将显示浏览器的tab中；

以下为代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" >
    <title>第一个项目</title>
</head>


03  常用的内容分区标签

内容分区元素允许你将文档内容从逻辑上进行组织划分，来为页面内容创建明确的大纲，以便区分各个章节的内容。

  • h1~h6 呈现了六个不同的级别的标题，h1 级别最高，而 h6 级别最低。
  • section 表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。 
  • article 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
  • p 元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，p是块级元素。
  • header用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
  • footer表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
  • main元素呈现了文档的body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。  
  • aside表示旁支内容，元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
  • div是一个通用型的流内容容器。


04  常用的全局属性

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。 我们可以在所有的HTML元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是html5兼容的。

  • class 一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或DOM方法( document.getElementsByClassName)来选择和访问特定的元素。 
  • contenteditable一个枚举属性（enumerated attribute），表示元素是否可被用户编辑。 如果可以，浏览器会调整元素的部件（widget）以允许编辑。 true 或者空字符串，表明元素是可被编辑的； false，表明元素不能被编辑。
  • hidden布尔属性表示该元素尚未或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容。
  • id定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。
  • style含要应用于元素的CSS样式声明。 请注意，建议在单独的文件中定义样式。 该属性和<style>元素主要用于快速样式化，例如用于测试目的。
  • tabindex是整数属性，指示元素是否可以获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置。它可能需要几个值： 负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达; 0 表示元素应通过顺序键盘导航可聚焦和可到达，但其相对顺序由平台约定定义; 正值意味着元素应该可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是tabindex的增加值。如果多个元素共享相同的tabindex，则它们的相对顺序遵循它们在文档中的相对位置。
  • title包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户,但不是必须的。


05  常用的文本内容标签

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。

  • ol+li，有序列表

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>
  • ul+li，无序列表 

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

  • dl+dt+dd，描述列表

<dl>标书列表标题</dl>
<dt>被描述对象</dt>
<dd>描述文字</dd>

  • pre，（preview的缩写）让渲染页面与编辑器保持统一 
  • hr，水平分割线 
  • br，break的缩写，表示内容换行 
  • a，是anchor的缩写，是一个链接标签，加属性 target=“_blank” 新开一页
    <a href="http://www.example.com" target="_blank">点击这里</a>

  • em，表示强调，类似说话的语气，来自emphasis 

  • strong，代表一个具体的内容很重要 
  • code，内容中有代码，需要加上这个标签
  • q，是quote的缩写，表示引用，是内联元素 
  • blockquote是块级引用元素


参考资料


avatar
文章
阅读
粉丝