一、p和h
菜鸟突发奇想看了一下h1，h2，h3相当于p标签的什么？
h1 = 加粗+32px h2 = 加粗+24px h3 = 加粗+18.5px
你们可以在自己的浏览器运行看看：
<!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>
<h1>我的第一个标题</h1>
<p style="font-size:32px"><b>我的第一个标题</b></p>
<h2>我的第二个标题</h2>
<p style="font-size:24px"><b>我的第二个标题</b></p>
<h3>我的第三个标题</h3>
<p style="font-size:18.5px"><b>我的第三个标题</b></p>
</body>
</html>
注意：
二、网页的内容
-
标签 DOCTYPE 声明了文档类型，< !DOCTYPE html> 声明为 HTML5 文档，< !DOCTYPE>声明位于位于HTML文档中的第一行，处于 < html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。DOCTYPE 是“document type”的缩写。它是 HTML 中用来区分标准模式和怪异模式的声明，用来告知浏览器使用标准模式渲染页面
详见：2021 肯特面试题1
-
标签 < html> 与 < /html> 描述了文档类型
-
标签 < body> 与 < /body> 为可视化网页内容
网页的结构：
html
当你去f12后去查看< html>标签时，会发现：
html[Attributes Style] {
-webkit-locale: "en";
}
html {
display: block;
}
菜鸟以前还没深究这是什么？
-webkit-locale是html标签中的lang属性，及向搜索引擎表示该页面是html语言，并且语言为英文的网站。上面的例子中 "lang" 的意思就是“ daolanguage ”（语言），而“ en ”即表示english。
lang详见： 2024年了，你还不知道css 伪类 / 伪元素 选择器？
body
当你f12后去查看< body>标签时，会发现：
body {
display: block;
margin: 8px;
}
反正菜鸟发现body的margin应该默认为8px，因为goole和firefox都是8px。当然，我们并不能保证每个浏览器都这么好，所以还是自己用css样式修改吧！
这里其实涉及到浏览器源码：源码中goole等浏览器会把一些样式写好，统称为：浏览器默认样式！
head
当你f12后去查看< head>标签时，会发现：
head {
display: none;
}
很明显，你可以在element.style里面为head添加 display:block; 然后为title也添加 display:block; 你会发现，head里面的title可以显示了，而且可以没有默认的8px的边距，甚至可以改变其颜色、大小...
meta也是默认 display:none; 但是修改成了block也没用，因为其不符合成对规则(标签成对出现，当然也有不用可以省略的)，如果你给其加上< /meta>，呃，，，加不上去。
如果在head里面添加了文字，那么head会自动结束，文字以下部分会在浏览器中被归为body，所以添加的文字就相当于是添加到body，自然可以显示！
更多head知识点，详见：html 的头部标签你真的熟悉吗？
element.style
那么问题来了，这个element.style是什么？
这个element.style是内联样式或者是js改写代码之后所留下的，这里（浏览器里）是空的，自然就是浏览器让我们可以直接修改内联样式或者是js改写代码，好让我们看效果的。
有时候这个东西也是一个很麻烦的，那就是当你引用组件的时候，有的组件为了防止bug而真的用js写样式（醉了），而你要改也会破坏掉组件，这时候只能在自己的样式里添加 !important来解决了！
