当前位置：首页 > news >正文

做网站可以用python么网站排名优化客服

news 2025/7/8 19:26:24

做网站可以用python么,网站排名优化客服,wordpress模板+免费,免费建购物网站目录引言一、html基础模板内容二、html文档流三、html 标签1.块级元素2.行内元素3.功能性元素4.标签嵌套四、html编码习惯五、总结引言本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不…

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。

有关html的详细介绍，请参考：HTML 基础

一、html基础模板内容

<!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><div>块级元素</div><span>行内元素</span><span>行内元素</span>
</body>
</html>

当使用vscode编辑器时，在新建了html文件后，输入英文符号 !，会提示！，按下tab键即可初始化一个html基础代码。
在这里插入图片描述
在学习前端初期阶段你不需要关心这个模板文件里的大部分内容，只需要关注你的编写区域

前端页面所展示的内容都会编写在 body 标签中，你所编写的内容也都会使用标签包裹起来，就像如下代码：

    <div>块级元素</div><span>行内元素</span><span>行内元素</span>

二、html文档流

简单来说，可以把网页理解为word文档。你在html中编写的页面内容会像文档一样从左至右、从上至下填充到文档流中，并逐行排布。每一行的高度由当前行最高的那个元素决定。

三、html 标签

标签的作用其实是把你填写在文档流的内容进行区域划分，方便后期管理，比如动态插入、设置样式等。

在业界执行了html5标准之后，现在有大量可供选择的语义化标签。对于初学者而言，你不需要按部就班的每样都了解一下，后期用的不多的类型都会逐渐遗忘。不需要投入太多精力在区分这些标签的含义以及熟悉其内置的样式。建议在入门前端半年到一年后，根据自身需求去选择性使用语义化标签。

语义化标签的优缺点：

优势点：
- 自带样式，可以更快速的构建页面。
- 代码结构更加清晰，易读性更高，有利于团队开发。
- 有利于搜索引擎SEO优化。
缺点：
- 语义化标签均赋予了特定的默认样式，在项目开发时仍然需要对样式进行复写，以满足UI设计稿。对初学者快速上手实际项目不够友好。

根据标签占据文档流位置的特征作为划分，我们将html标签分为 块级元素 和 行内元素 两类。

首先明确一个概念，在不考虑标签元素层级提升的情况下，默认所有的页面标签元素都在一张平面容器中（默认指代body标签）。每次添加一个标签元素，就会往平面容器中推入该元素，就像是word文档一样，自左而右、自上而下的方向堆放。

1.块级元素

不论设置了该元素多少宽度，都会独占一行（除了一些特殊情况，本篇不做展开），之后的块级元素或行内元素只能排在下一行，自上而下排列。

这里不推荐使用除了 div 之外的任何块级元素标签，这个观点可能不太合适, 仅供大家批判讨论。

我清楚大佬们都更推荐使用语义化标签。但是相信我，真的在开发的时候只会觉得div更好用，没有什么会比在一张白纸上画画更爽的事情了。

在你有更多的开发经验之后还是建议去了解一下例如：p、h系列标签、aside、article、section、footer、header等标签。会对你未来的开发技能提升有所帮助。

2.行内元素

当宽度不超过平面容器的总宽度，则放在当前行的最左侧。下一个行内元素紧挨着依次向右排列，当前行的行内元素宽度总和大于平面容器的总宽度时，最后一个元素默认出现在下一行继续重复如上排列方式。

这里不推荐使用除了 span 之外的任何行内元素标签，理由同块级元素。

在你有更多的开发经验之后还是建议去了解一下例如：b、i、u、del、sub、sup等标签。会对你未来的开发技能提升有所帮助。

3.功能性元素

之前推荐的块级元素标签：div 和行内元素标签：span。这两个标签都有一个特点是无任何特殊属性，仅仅作为包裹内容的元素，根据自身占据文档流位置的特性，能够在没有css介入的情况下，大体上将页面内容进行规整。

除此还有一些功能性的元素标签，例如：img、input等。
他们各自拥有一定的特性：

img: 将项目相对路径的图片地址或者公网可访问的图片链接填入标签src属性，即可将图片插入文档流。从占据文档流位置的特征来划分，属于行内元素。
举例:

    <div><span>图片：</span><img style="width: 100px" src="./logo.png" alt="logo" /></div>

在这里插入图片描述

input: 可以通过修改标签type属性，用作输入文本、上传文件等。从占据文档流位置的特征来划分，属于行内元素。
举例：

    <div><span>输入文本：</span><input type="text" /></div><div style="margin-top: 50px"><span>上传附件：</span><input type="file" /></div>

在这里插入图片描述

除此之外还有其他特殊功能标签：iframe 、video 、canvas 等。暂时接触不到，可以入门后自行探索研究。

4.标签嵌套

这里可以将页面理解为一个容器（前文提到了平面容器），我们编写的页面元素作为子元素按照文档流规则填充进入容器中（一般指代body标签）。我们可以将某一个编写的页面元素抽象理解为一个子容器（同样是平面容器），它的内部同样按照文档流的规则填充孙子元素。理论上可以无限嵌套，但都要遵守文档流规则。

继续去想象，随着孙子元素越来越多，他会将子容器越撑越大，那么子容器会在页面中占据更多的位置但依然遵守文档流规则。无论子元素承载多少孙子元素，他对于父元素都是表现为一个整体。稍微理解一下这里的抽象关系。

至此你可以随意发挥，编写标签元素并去嵌套他们。

// 用div作为子元素，包裹span和img两个孙子元素
// div整体作为一个子元素插入body标签中。<div><span>图片：</span><img style="width: 100px" src="./logo.png" alt="logo" /></div>

在这里插入图片描述

四、html编码习惯

在这里强调一点，不论是html、css、js或是其他编程语言，我都建议优先编辑注释伪代码，进而补充实际代码。

通过注释的形式先将页面整体结构划分清楚。
进而根据实际需求填写页面元素。
在学习了组件化开发思想后，使用例如vue、react等前端框架进行项目开发时，可以依据划分好的页面结构结合项目需求，封装为组件。使各部分独立维护、互不影响，同时页面结构更加清晰。

举一个表单填写的例子：

先写注释

<body><!-- 表单头部 --><!-- 表单主体 --><!-- 表单底部按钮 --></body>

再补充代码

<!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><!-- 表单头部 --><div class="title"><img style="width: 30px" src="./logo.png" alt="logo" /><span>表单标题</span></div><!-- 表单主体 --><div class="container"><div><span>输入1：</span><input type="text" /></div><div><span>输入2：</span><input type="text" /></div><div><span>附件：</span><input type="file" /></div></div><!-- 表单底部按钮 --><div class="footer"><button>取消</button><button>确认</button></div></body>
</html>