《HTML 入门笔记 1》

一、万维网 WWW 的组成

WWW = URL + HTTP + HTML

WWW由以上三种技术组成。全称是World Wide Web 就是万维网，中文直译：向世界一样大的网

二、万维网的历史

蒂莫西·约翰·伯纳斯-李爵士，OM KBE FRS FREng FRSA FBCS（英语：Sir Timothy John Berners-Lee，1955 年 6 月 8 日－），昵称为蒂姆·伯纳斯-李（英语：Tim Berners-Lee），英国计算机科学家。他是万维网的发明者。1990 年 12 月 25 日，他成功利用互联网实现了超文本传输协议客户端与服务器的第一次通讯。

伯纳斯-李是万维网联盟的主席，为关注万维网发展而创办的组织。他也是万维网基金会的创办人。伯纳斯-李还是麻省理工学院计算机科学及人工智能实验室创办主席及高级研究员。同时，伯纳斯-李是网页科学研究倡议会的总监。最后，他是麻省理工学院集体智能中心咨询委员会成员。2011 年，他被任命为福特基金会的董事会成员。

2004 年，英女皇伊丽莎白二世向伯纳斯-李颁发大英帝国爵级司令勋章。2009 年 4 月，他获选为美国国家科学院外籍院士。他被《时代》杂志列为时代 100 人：本世纪最重要的人物。在 2012 年夏季奥林匹克运动会开幕典礼上，他获得了“万维网发明者”的美誉。伯纳斯-李本人也参与了开幕典礼，在一台 NeXT 计算机前工作。他在 Twitter 上发表消息说：“这是给所有人的”，体育馆内的液晶显示器光管随即显示出文字来。2017 年，他因“发明了万维网、第一个浏览器和使得万维网得以扩展的基础协议及算法”而获得 2016 年度的图灵奖。

———————————————摘自维基百科--Tim Berners-Lee

三、HTML 代码的起手式

<!DOCTYPE html> <!-- 文档类型 -->
<html lang="en">    <!-- 文档的语言为en -->
  <head>
    <meta charset="UTF-8" />    <!-- 文档的编码方式：UTF-8（万国码） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <!-- 设置可视化窗口，还有文档的宽度等 -->
    <title>Document</title> <!-- 文档的标题 -->
  </head>
  <body>
    
  </body>
</html>

个人在初学前期喜欢使用Vscode这个编辑器,适合初学者，轻量级的编辑器，支持多种插件扩展。以上代码直接在Vscode中按 ! 即可全部显示。

四、HTML常用的文章/书的层级标签(后续更新)

点击标签查看其含义和用法

1、头部标签 -- <header></header>

2、主要内容标签 -- <main></main>

3、旁支内容标签 -- <aside></aside>

4、脚（尾）部标签 -- <footer></footer>

5、标题标签 -- <h1></h1>~<h6></h6>

6、章节标签 -- <section></section>

7、文章标签 -- <article></article>

8、段落标签 -- <p></p>

9、块级盒子（划分）标签 -- <div></div>

五、所有标签都有的全局属性(常见--后续更新)

1、类名 -- class

2、设置标签元素是否可被编辑 -- contenteditable

3、对元素进行隐藏 -- hidden

4、规定HTML元素的唯一id -- id

5、元素的行内样式属性 -- style

6、键盘使用tab进行导航时 -- tabindex

7、提示显示出完整的内容(常用于省略或解释含义时) -- title

六、常用的内容标签

1、ol+li (ordered list + list item)--有序列表ol

<ol>
    <li>唱</li>
    <li>跳</li>
    <li>rap</li>
    <li>篮球</li>
</ol>

2、ul+li (unordered list+list item)--无序列表ul

<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打代码</li>
</ul>

3、dl+dt+dd (d:descriptiton t:term l:list)--描述列表(自定义列表)dl

<dl>
    <dt>明星</dt>
    <dd>迪丽热巴</dd>
</dl>

4、pre 定义预格式化的文本，被<pre></pre>包裹的元素中的文本信息会保留空格和换行符等，字体为等宽字体

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

结果为

此例演示如何使用 pre 标签

对空行和空格

进行控制

5、<code></code>表示为一段代码文本

<code>
    var i=1;
    console.log(i);
</code>

6、<hr>表示为一条水平分割线--单标签

<hr>

7、<br>使文本换行--单标签

<br>

8、<em></em>加强语气，强调（默认字体为斜体）

<em>
    这是一段被强调的话
</em>

9、<strong></strong>加强语气，强调（默认为加粗字体）

<strong>
    这是一段被加粗强调的话
</strong>

10、<blockquote></blockquote>定义一个块级的引用

<blockquote>
    这是一段块级的引用
</blockquote>

11、<quote></qoute>定义一个行内的引用

<quote>
    这是一段行内引用--与blockquote类似
</quote>

12、<a></a>链接标签

<a href='http://www.baidu.com'>这是百度的链接<a>

HTML入门