美文网首页
网页基础-python学习34

网页基础-python学习34

作者: 郭俊未来学院 | 来源:发表于2019-12-27 23:07 被阅读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属性也可以被多次利用。

    如何用呢?查看这个网站,URL是:https://localprod.pandateacher.com/python-manuscript/crawler-html/spider-men4.0.html

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

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

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

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

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

    属性总结:

    属性总结

    相关文章

      网友评论

          本文标题:网页基础-python学习34

          本文链接:https://www.haomeiwen.com/subject/jeohoctx.html