网页基础-python学习34

2019-12-27 本文已影响0人郭俊未来学院

网页基础

网页头和网页体

事实上，HTML文档的基本是由【网页头】和【网页体】组成的：

网页基本结构

HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了【网页头】，<body>元素代表了【网页体】，这是最基本的网页结构。

HTML文档和网页的内容一定是一一对应的。只是，【网页头】的内容不会被直接呈现在浏览器里的网页正文中，而【网页体】的内容是会直接显示在网页正文中的。来具体看看：

【网页头】中的编码是没办法在网页中直接被看到的，标签页的内容也不属于网页的正文。

而<body>元素中，即【网页体】，就是那些你能看到的显示在网页中的内容了。

属性：

HTML的属性和Python中的属性不是一个东西，不要搞混；

HTML标签可以通过设置【属性】来为HTML元素描述更多的信息。

这行代码给<h1>元素添加了一个style属性，属性中的内容规定了这行文字的颜色。

属性知识点

style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。

在上面的代码中，style属性添加在了<h1>的开始标签中，因为属性通常都是在HTML元素的开始标签中设置的。

<style>元素的内容，是对.book的具体描述，比如float: left;，而/*控制元素浮动*/是对代码的注释。

其实这是一段对网页布局的描述。你看上面代码，在大括号内部写的就是一条条的样式规定。代码的注释中有每个具体样式的意思，你可以和下面的图片对照着看：

链接：

在HTML中，链接一般都由<a>标签定义，href属性用于规定指向页面的URL；

除了style和href，HTML中还有两个很常用的属性，即class与id。

如上面代码：一个是网页头里的.book；一个是网页体里的<div class="book">。

其实.对应class，所以.book代表class book。因此，网页头中的.book和网页体中的class="book"是有联系的。

在网页头里面，定义了class属性，属性值为"book"，然后下面一长串代码是对这个class属性的描述；接着再在网页体中调用，所以看到了<div class="book">。

这种方法，在建筑设计中同样也会用到。比如，建筑师会做门表图，规定好每一种门的详细尺寸和样式，然后给每个门都起个名字，比如 D1，D2，D3……

在建筑图纸中，一个门可以在平面中使用多次。同样的，在HTML中，class属性也可以被多次利用。

你会看到，<div class="book"> 在源代码中出现了三次，与此对应，网页中也有三个一样的块。

网页头的<style>元素中定义了.book的样式，因此，凡是class="book"的元素都会继承它的样式。

假如想在这个页面中多加一些书籍的介绍，只要在网页体中增加一些class="book" 的div元素就好了。

id属性和class属性的用法类似，给元素定义id和class的目的都是为了查找、定位元素，或者为元素设置样式。

但id属性用于标识唯一的元素，而class用于标识一系列的元素。id就像是学生的学生证号码，每个人都是唯一的；而学生们可以属于同一个班级，班级就像class。

属性总结：

属性总结