HTML是谁发明的？

Tim Berners-Lee（李爵士）

在世界互联网诞生以来，人们一直都是以、收发电子邮件、使用IRC的方式进行着网络之间的交流，其过程非常不方便。而李爵士在1990年发明的WWW（万维网）解决了人们不能随意的网上冲浪这一问题。他写出了世界上第一个浏览器和服务器，又用自己写的浏览器访问了自己的服务器。到了我们这边就可以输入一个网址就看到相关网页，其他部分都由HTTP来搞定。可以说，李爵士是我们前端开发的祖师爷。

怎样写HTML

HTML起手式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以上是绝大多数情况下HTML的起手式

!DOCTYPE html 是我们的文档类型，它告诉了浏览器以HTML的形式来解析这个文件
html lang="en"是我们的HTML标签，en代表着这个页面是英文，同时也是网页翻译参考语言的依据
head标签下的内容是我们在浏览器看不到的元素，一般我们把不需要给别人看的内容写在这里（例如：meta charset="UTF-8"代表着字符编码为UTF-8，这是不需要给浏览者看的）
meta name="viewport" content="width=device-width, initial-scale=1.0" / 这句话可以防止页面缩放，理解为必须抄的一段代码
title>Document</title 里面写的是网页标题

常用的章节标签

章节标签我们一般来表示文章的层级关系，我们常用到的章节标签大概有以下11个

h1~h6标签是标题标签，通常会加粗加黑
section标签是章节标签，一般新开一个章节的时候用此标签表示
article是文章标签，用法和章节标签类似
p是段落标签，一般需要另起一个段落时候用
header是顶部标签，通常我们看网页的顶部广告都是在这个标签里写的
footer是脚部标签，通常写版权声明之类的内容
main标签是主要内容标签，通常我们将网页重点要给浏览者看的内容用此标签标记
aside标签是旁支内容标签，和主要标签对应，网页的辅助不重要内容用此标签标记
div标签是划分标签，我们想要把几个内容划分开来的时候可以用此标签来划分

常用的全局属性

HTML只有标签是不行的，我们要为有需要的标签设置全局属性

class属性的作用是给标签分类，作用就是给标签一个标记。在head标签里可以为标记为class属性内容设置想要的字体、颜色等
contenteditable属性加在标签内时，可以让标签内容变得可以在网页中编辑
hidde属性可以让标签内的内容不可见，我们如果有写在body标签内的内容不想让浏览者看到时，可以使用这个标签
id属性和class属性功能一样，但是id属性具有唯一性，而且这个属性有错误时编辑器不会报错，所以我个人及其不推荐使用这个属性
style属性里面可以直接写内容，效果和 head里面style属性是完全一样的。要注意的是：标签内的style属性优先级要高于head里面的style属性
tabindex用来控制tab键的顺序的，例如标签内写tabindex=1来表示按下tab键选中该标签内的内容，以此类推。数字可以不连贯，0是最后访问。-1是永远不访问
title用来显示提示内容，用法是标签内写title=xxxxx，页面内鼠标移到该标签就会显示title内容

常用的内容标签

章节标签一般我们用作层级划分，除此之外还有内容标签，内容标签通常用来写出内容与内容之间的差别

ol+li指的是有顺序的列表，ol是母层级。里面只能包含li层级，内容必须写到li里面
ul+li是没有顺序的列表，用法和ol相同
dl+dt+dd是描述列表，输入dl+tab就把三个层级都写出来了。dt指的是描述对象，dd是描述内容
pre标签表示保留空格和换行内容。HTML一般不会为我们保留空格或换行，如需保留这些内容，用pre标签包裹住需要保留空格的内容即可
code标签表示内容等宽。例如：i和w的字母宽度不同，为了方便观看，我们可以用code标签让这两个字母等宽（注：仅限英文）
hr是分割线，写的时候就一个标签，没有/hr
br是回车的意思，内容里加个
就会换行
a标签是超链接，用法是 a href="http://xxxxxx" target="_blank"来表示在新窗口打开XXX页面
em标签是强调的意思，字体默认样式是斜体，可以改
strong标签是重点的意思，把重点内容加strong标签默认样式加粗，可以改
quote是引用的意思，引用的内容写在里面，默认字体并没有变化，但是加上这个标签以后可以为此内容更改属性样式
blockquote是换行引用，标签前面可以写内容，之后引用内容自动换行

HTML入门笔记