进击のpython

*****

前端学习——body标签


关于前面的都是大部分的标签内容

但是就像衣服一样,除了要有,还要放到适当的位置

我们先来看看一下网页的布局:

就可以看出来,网页都是一块一块的,而像这种分块的操作,就像是一个盒子一个盒子的紧凑拼接

那我们这节讲的就是用来拼凑的盒子——div&span


div&span

在网页制作中,我们可以把一些独立的逻辑部分划分出来,放在一个div标签中

这个<div>标签的作用就相当于一个容器,把我们想要的内容给装起来

div的意思是division “分割”的意思,span的意思是“范围、跨度”

首先,在使用div标签的使用,我们要确定哪儿是逻辑部分?

它是页面上相互关联的一组元素。如网页中农的独立的栏目板块,就是一个典型的逻辑部分

就像图中用红线框出的部分就是一个逻辑部分,那么我们就可以使用<div>标签作为容器

写个代码例子吧:

<div>
<div>
<h2>热门学科</h2>
<ul>
<li>python</li>
<li>web前端</li>
<li>linux</li>
<li>go</li>
</ul>
</div>
<div>
<h2>学科排名</h2>
<ol>
<li>web前端</li>
<li>python</li>
<li>go</li>
<li>linux</li>
</ol>
</div>
</div>

你会发现没什么区别,那是因为这现在只是个盒子,等到将他套上小装饰,它的作用就出来了!


其实你发现我有好多属性都没有写,比如textarea的对字数的限制啊,对行数的限制啊

图片对大小的控制啊,等比例缩放啊

... ....

没说的有很多!为什么?一是这些属性不碰到特定的情况理解不上去,碰到了就指定会跟你说

二是,里面有一些是关于CSS的相关知识,既然是html那么就是html,纯粹的html!

而这最主要的第三点,就是想让你,自己去百度上查阅一下相关的资料

自主学习,总比别人嚼碎了喂你要记得清楚!


*****
*****

前端学习(六):body标签(四)的更多相关文章

  1. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  2. 大前端学习笔记整理【四】LESS基础

    第一次接触CSS预编译,然后对比后发现其实less的上手容易度确实比sass高不少,再加上公司项目也是使用的less.所以想想还是根据网上的各种教程,整理出来了一些比较基础的.而且比较能让我们这种初学 ...

  3. 前端学习(一) body标签(下)

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  4. Linux网络编程学习(六) ----- 管道(第四章)

    1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...

  5. 前端学习(四):body标签(二)

    进击のpython ***** 前端学习--body标签 接着上一节,我们看一下还有没有什么网址 果不其然,在看到新闻类的网址的时候 我们发现还有许多的不一样的东西! 使用ul,添加新闻信息列表 这个 ...

  6. 前端学习 第四弹: HTML(一)

    前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...

  7. 前端学习笔记之HTML body内常用标签

    阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...

  8. 前端学习(十四):CSS布局

    进击のpython ***** 前端学习--CSS布局 每个模块的相关央视就算是进本上都完成了,但是,这些模块想放在不同的位置 横着放,竖着放,斜着放... ... 想怎么放怎么放 那就用到了今天要说 ...

  9. 前端学习 第六弹: javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

随机推荐

  1. LeetCode57. 插入区间

    对于新插入的区间newInterval,原区间列表intervals可以分为三个部分: 左边与newInterval不重合的区间,这些区间直接加入结果数组中: 中间与newInterval重合的区间, ...

  2. JavaScript基础对象创建模式之命名空间(Namespace)模式(022)

    JavaScript中的创建对象的基本方法有字面声明(Object Literal)和构造函数两种,但JavaScript并没有特别的语法来表示如命名空间.模块.包.私有属性.静态属性等等面向对象程序 ...

  3. CenterOS的安装配置(配图解)

    CenterOS的安装配置 一.    配置虚拟机 打开Virtual Machine(虚拟机),点击create new virtual machine 进入新建虚拟机向导页面,选择[Custom( ...

  4. 阿里云Linux CentOS8.1 64位服务器安装LNMP(Linux+Nginx+MySQL+PHP) 并发调试之调试工具ab(apache bench)

    ab 测试工具,全称是 apache bench ,是 Apache 提供的一款测试工具,具有简单易上手的特点,在测试 Web 服务时非常实用. ab 可以在 Windows 系统中使用,也可以在 L ...

  5. VS2017配置PCL1.9.1 for win10

    安装链接 https://www.jianshu.com/p/463f54c91ab7 1.9.1 安装包下载 官网路径: https://github.com/PointCloudLibrary/p ...

  6. String为什么要设置成Final类型

    ---今天面试碰到个这样的问题:String在设计的时候为什么要设计成final的  当时回答的是String功能已经很丰富了,不需要对其进行扩展,所有巴拉巴拉. 现在来正确看看为什么定义成final ...

  7. 2020阿里巴巴官方最新Redis开发规范!

    本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明. 键值设计 命令使用 客户端使用 相关工具 通过本文的介绍可以减少使用Redis过程带来的问题. 一.键值设计 1.key名设计 ...

  8. 「JLOI2015」城池攻占 可并堆

    传送门 分析 如果直接暴力枚举的话肯定会超时 我们可以从下往上遍历,维护一个小根堆 每次到达一个节点把战败的骑士扔出去 剩下的再继续向上合并,注意要维护一下其实的战斗力 可以像线段树那样用一个lazy ...

  9. 合并两个有序链表(剑指offer-16)

    题目描述输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 解答方法1:递归 /* public class ListNode { int val; List ...

  10. python入门008

    目录 一.for循环 作用:for循环是因为在循环取值(即遍历值)时for循环比while循环的使用更为简洁 1.for循环语法: 2.应用案例: 注意:break 与 continue也可以用于fo ...