网页结构+盒模型

时间 2019-11-18

标签网页结构模型栏目 HTML 繁體版

原文原文链接

HTML是个什么鬼？css

前端开发人员要想和浏览器沟通，就要用到浏览器才可以识别的语言（HTML超文本标记语言），因此他是一门浏览器可以识别的语言。是一种由标签组成的超文本标记语言，而非编程语言。一个html文档就是一个网页。html

什么是html标签呢？前端

HTML标记标签一般被称为HEML标签，他是由尖括号组成的关键词如<html>。通常状况下标签是成对出现的，第一个开始，第二个结束，好比<html></html>。标签必须闭合，单标签加“/”闭合；编程

Html文档 = 网页？浏览器

答案是确定的，html文档用来描述网页，文档中包含html标签。可是在浏览器中是不会显示html标签的，而是用标签来解释页面的内容。编程语言

网页主题的解读spa

<!doctype html> <!--定义文档的类型为html-->

<html> <!--定义html文档-->

　　<head>

　　　　<title></title> <!--定义文档的标题-->

　　</head>

　　<body> <--!定义文档的主题-->　

　　</body>

</html>

什么是CSS样式？code

Cascading style sheets:层叠样式表，其语法由两部分组成，选择器 + 一条及多条声明。htm

例如 blog

div { width:100px; height:200px; background-color:green;}

div就是选择器 width:100px就是声明 width是属性 100px是值

行内样式与内部样式

<div style="width:100px;height:100px;background:red;">这是行内样式</div>
#写在单个标签里

!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
div{width:100px;height:100px;background:red;}
#内部样式，他是写在style标签里面的，能够写多条。
</style>
<div></div> 
</body>
</html>

盒模型

盒模型也叫css框模型。其中元素框中心的是实际的内容，直接包围内容的是内边距。

内边距呈现了元素的背景。

内边距的边缘是边框。

边框之外是外边距，外边距默认是透明的所以不会遮挡其后面的任何元素。