重学前端 h多大 / 网页内容(html,body,head)/ element.style(第一天)

文章目录

  • 一、p和h
    • 注意:
  • 二、网页的内容
    • html
    • body
    • head
    • element.style

一、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>Documenttitle>
	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>

注意:

重学前端 h多大 / 网页内容(html,body,head)/ element.style(第一天)_第1张图片

二、网页的内容

  • 标签 DOCTYPE 声明了文档类型,< !DOCTYPE html> 声明为 HTML5 文档,< !DOCTYPE>声明位于位于HTML文档中的第一行,处于 < html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。DOCTYPE 是“document type”的缩写。它是 HTML 中用来区分标准模式和怪异模式的声明,用来告知浏览器使用标准模式渲染页面
    重学前端 h多大 / 网页内容(html,body,head)/ element.style(第一天)_第2张图片
    详见:2021 肯特面试题1

  • 标签 < html> 与 < /html> 描述了文档类型

  • 标签 < body> 与 < /body> 为可视化网页内容

网页的结构:
重学前端 h多大 / 网页内容(html,body,head)/ element.style(第一天)_第3张图片

html

当你去f12后去查看< html>标签时,会发现:

html[Attributes Style] {
    -webkit-locale: "en";
}

html {
    display: block;
}

菜鸟以前还没深究这是什么?

-webkit-locale是html标签中的lang属性,及向搜索引擎表示该页面是html语言,并且语言为英文的网站。上面的例子中 “lang” 的意思就是“ daolanguage ”(语言),而“ en ”即表示english。

lang详见:
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,自然可以显示!
重学前端 h多大 / 网页内容(html,body,head)/ element.style(第一天)_第4张图片
更多head知识点,详见:
重学前端 详解头部(title base link style meta script/noscript)(第三天)

element.style

那么问题来了,这个element.style是什么?

这个element.style是内联样式或者是js改写代码之后所留下的,这里(浏览器里)是空的,自然就是浏览器让我们可以直接修改内联样式或者是js改写代码,好让我们看效果的。

有时候这个东西也是一个很麻烦的,那就是当你引用组件的时候,有的组件为了防止bug而真的用js写样式(醉了),而你要改也会破坏掉组件,这时候只能在自己的样式里添加 !important来解决了!

具体见:浅析被element.style所覆盖的样式

你可能感兴趣的:(重学前端1,HTML,html,element.style,html页面内容详解,DOCTYPE详解,html浏览器详解)