教程归类:第23章、HTML基础学习

HTML所有标签的用法及示例(第4节)


1、head内常用标签

网页的head头部标签是SEO优化的重要部分,它可以帮助搜索引擎更好地理解该网页的内容。以下是head头部标签的示例代码:

动手练一练:

<!DOCTYPE html>
<html>
    <!--head头部.用来完成一个网页的相关设置-->
    <head>
        <!--汉字编码-->
        <meta charset="UTF-8">
        <!--网页标题-->
        <title>网页标题内容...
......

阅读全文

HTML+CSS网页布局之浮动布局(第5节)


在HTML网页当中,我们可以实现各种布局效果,一个网页有了清晰的布局之后才可以让复杂而多元的信息变得非常清晰、一目了然。网页布局是前端开发中的重要部分,它决定了网页的整体结构和用户界面的呈现方式。

在网页布局中,<div>分区标签常用于页面布局时对区块的划分,它相当于一个大的容器,可以容纳段落、表格、无序列表、有序列表等块级标签。

1、网页布局的基本组成部分

如上图所示,网页布局通常包括以下几个基本组成部分:

头部区域‌:位于网页的顶部,用于设置网页标题或显示logo。

菜单导航区域‌:包含链接,引导用户浏览其他页面。

内容区域‌:根据设备类型(移动端、平板设备、PC...

......

阅读全文

HTML+CSS网页布局之position定位布局(第6节)


在网页设计中,布局是网页制作的基础。默认情况下,HTML标签都在标准文档流中呈现和展示,如果是块级标签(如div、p等)会独占一行,而行内标签(如span、a等)则会按照标签在HTML中的书写顺序依次排列,不会自动进行换行,并且可以与其他行内标签共享一行。上一节,我们已经详细介绍了可以通过浮动布局脱离标准文档流,但是,浮动布局只有一种排版方式,就是水平排版,它只能设置某个容器在父容器内左对齐或者右对齐。

在复杂的网页布局中,我们可能需要精确控制HTML标签在页面中的位置,position定位布局正是为了解决这一问题而设计的。position定位布局可以实现标签在页面中的精确位置控制。通过...

......

阅读全文