Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >div标签

div标签

作者头像

鹤川

发布于 2023-03-21 13:40:22

发布于 2023-03-21 13:40:22

1.5K00

代码可运行

举报

文章被收录于专栏：鹤川博客鹤川博客

运行总次数：0

代码可运行

div标签

使用频率非常高的标签，表示 “一块分区”
div是换行的标签
div中可以写内容，也可以写其他标签或div标签

一、代码实战

新建 html 文件 06-div.html，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<htmllang="en">
    <head>
        <metacharset="UTF-8">
        <metahttp-equiv="X-UA-Compatible"content="IE=edge">
        <metaname="viewport"content="width=device-width, initial-scale=1.0">
        <title>Div标签</title>
    </head>
  
    <body>
        <divstyle="width:100px;height:100px; background-color: red;">
        分区1
        </div>

        <div>   
            <div>分区2
                <div>分区22</div>
            </div>
            <span>span标签</span>
        </div>
    
    </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023 年 02 月，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

Javascript的应用

javascript html 程序浏览器

新建 HTML 文件 28-JS.html ，编写下方程序，用浏览器运行看看效果吧。

鹤川

2023/03/21

1810

CSS基本语法

css html class 程序语法

CSS基本语法一、用法一：在HTML标签的style属性中使用 <divstyle="color: red;"> 这是div </div> 二、用法二：通过选择器来使用 1、类选择器。用在标签的 class 属性上 .class_name{ 属性1:值; 属性2:值[值]; } 用法 <divclass="class_name"></div> 2、标签选择器 div{ 属性1:值[值]; } 所有的div都会用上这个样式 3、i

鹤川

2023/03/21

2660

select 后台前端数据语法

选择框<select>标签：主要用于数据的选择，比如说我们常常在一些网站上填写：省份、城市、地区的时候，使用的就是select

鹤川

2023/03/21

1.2K0

javascript css html 布局程序

Html主要用于页面的内容展示，JavaScript主要用于页面元素之间的逻辑处理，Css主要是修饰的作用，比如颜色、位置、大小、效果等等。

鹤川

2023/03/21

1890

盒子模型：padding

html padding width 程序模型

（div）标签与里面的标签的内边距离

鹤川

2023/04/27

4060

setTimeout和setInterval

setinterval settimeout 程序函数语法

新建 html 文件 21-setTimeout.html ，编写下方程序，运行看看效果吧

鹤川

2023/03/21

1.1K0

html markup shift 程序浏览器

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。我们在浏览器中打开的页面都是html页面，里面的内容都是html的标签构成的

鹤川

2023/03/21

1990

如何迅速熟练掌握盒子模型？（学习方法很重要）

前端 css html

----在前面文章冲浪笔记4中仅对盒子模型进行介绍，感兴趣的小伙伴也可以去看看，这篇文章将具体描述，并推荐一个自己觉得好用的记忆方法，喜欢的小伙伴可以收藏🧐常用到的：①居中效果margin: auto;②圆角border-radius: 10px;③三合一边框boder: 10px solid red;----一、概念1、CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它2、组成：content、padding、boder、margin二、记忆方法1、俯视一个完整的篮球场，篮

申小兮

2023/04/07

2550

如何迅速熟练掌握盒子模型？（学习方法很重要）

CSS进阶内容—浮动和定位详解

absolute auto fixed overflow static

当然如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园

秋落雨微凉

2022/10/25

2.3K0

CSS进阶内容—浮动和定位详解

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

梨涡浅笑

2020/10/27

4520

网站 textarea 博客程序数据

新建 html 文件 15-textarea.html ，编写下方程序，运行看看效果吧。

鹤川

2023/03/21

2.2K0

html flex width 布局程序

flex布局一、flex布局案例 display:flex; flex-direction: row;//排序的方向，row代表横向排列，column代表纵向排列 justify-content: center;//排&#x521

鹤川

2023/04/27

1.1K0

HTML基础第六课（冲浪笔记6）

css 前端 html

1、flex-wrap: nowrap; 当内容过多，会自动缩小内容，不会自动换行（默认不换行）

申小兮

2023/04/01

3150

HTML基础第六课（冲浪笔记6）

【移动端网页布局】flex 弹性布局 ③ ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居中对齐 | 平均分配 )

flex width 布局浏览器移动端

justify-content 样式用于设置主轴子元素排列方式 ; 使用该样式前 , 务必先设定主轴方向 ;

韩曙亮

2023/05/07

1.8K0

【移动端网页布局】flex 弹性布局 ③ ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居中对齐 | 平均分配 )

input：checkbox标签

网站 checkbox input 表单语法

新建 html 文件 16-checkbox.html ，编写下方程序，运行看看效果吧

鹤川

2023/03/21

1.1K0

HTML基础第五课（冲浪笔记5）

transform: translate(200px,200px) rotate(45deg) scale(0.5);

申小兮

2022/11/19

2860

HTML基础第五课（冲浪笔记5）

window和document

document window 对象函数浏览器

window和document 都是网页中的JavaScript对象。 window对象：就是这个浏览器的窗口，可以通过window获取宽度、高度、网页跳转 document对象：可以通过函数获取网页中标签，然后通过js操作标签代码实战新建 html 文件 20-window.html，编写下方程序，运行看看效果吧 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equi

鹤川

2023/03/21

6030

JQuery jquerysessionjs插件使用介绍

javascript https 网络安全 jquery

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

授客

2019/08/21

2.5K0

input 后台前端数据语法

input标签网页中的输入框。一、语法介绍 <form> <inputtype="text"name="username"value="qicong"/> </form> 标签 <input> ，主要用于页面数据的填写，然后将数据提交到服务器端。比如我们最长使用的用户名、密码，就是 input 输入框完成的主要写在 form 标签中，通过 form 提交将数据提交到后台属性 name：我们提交数据的时候，后台根据 name 来取前端传过去的数据属性 value：就是用户填写的数据属性 ty

鹤川

2023/03/21

1.3K0

form 表单后端浏览器数据

form 表单 form表单就是填写的单子：比如登录窗口、编辑资料等一般用于数据提交到到后端，然后保存一、form表单的语法 <formaction="/save.do"method="POST"enctype="multipart/form-data"> </form> <form> 表单非常重要，一般用于数据提交到到后端，然后将数据保存到服务器端属性 action，表示我们要提交的网址属性 method，表示我们提交数据的方式，通常有 get 和 post 两种 GET 提交会将数据通过 &

鹤川

2023/03/21

1.5K0

相关推荐

Javascript的应用

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

div标签
- 一、代码实战

加入讨论

的问答专区 >

不叫猫先生0

相关课程

一站式学习中心 >

腾讯云向量数据库-RAG七天入门训练营

向量数据库

腾讯云安灯

💥开发者 MCP广场重磅上线！

精选全网热门MCP server，让你的AI更好用 🚀

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验