HTML学习笔记_列表区块与布局

最新推荐文章于 2024-07-19 14:16:42 发布
最新推荐文章于 2024-07-19 14:16:42 发布
阅读量114 收藏
点赞数
分类专栏： HTML 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43876758/article/details/107968535
版权
前端 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
HTML
12 篇文章 0 订阅
订阅专栏

要做行动的巨人
学习前端知识的同时，梳理知识，也便于以后查找
tags：html、列表

文章目录

HTML 列表

html有有序、无序和定义列表三种。
成员都使用<li>标签

有序

  1. 适合各项目之间存在顺序关系的情况。
  2. 列表项项使用数字来标记
  3. 使用<ol>标签

demo

<ol>
        
<li>Java</li>
        
<li>JS/li>
        
</ol>

无序

  1. 无序列表是使用粗体圆点（典型的小黑圆圈）进行标记。
  2. 适合成员之间无级别顺序关系的情况。
  3. 使用 <ul> 标签

demo

<ul>
        
<li>张三</li>
        
<li>Tom</li>
        
</ul>

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 在<dl> 标签开始。每个自定义列表项以 <dt>开始。每个自定义列表项的定义以<dd> 开始。

自定义列表中的一个术语名，可以对应多重定义，或者多个术语名对应同一个定义。如果只有也术语名或者只有定义也是可行的。也就是说 <dt>与 <dd> 在其中数量不限、对应关系不限。

demo

<dl>
        
<dt>Java</dt>
        
<dd>- SE</dd>
<dd>- EE</dd>
<dd>- ME</dd>
        
<dt>C++</dt>
        
<dd>- C</dd>
        
</dl>

显示：

Java
- SE
- EE
- ME
C++
- C

HTML列表更多

  1. W3C
  2. 菜鸟教程

HTML 区块

关键词：div、span

通过<div> 和 <span>将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML div 元素

div 标签可以把文档分割为独立的、不同的部分。
HTML<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。

div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

HTML span 与元素

HTML span>元素是内联元素，可用作文本的容器

<span>元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

demo

<span>demo

 <p>我有一双

 <span style="color:gold">金色</span> 的

<span style="font-size:50px">滑板鞋</span>和 

<span style="color:blue">时尚</span></p>

运行截图：
这是一个span标签dmeo

HTML <div> demo

<div style="color:#001111">

  <h3>这是一个在 div 元素中的标题。</h3>

  <p>这是一个在 div 元素中的文本。</p>

</div>

<p>这是一些文本。</p>

运行截图：
这是一个div标签demo

HTML布局

网页布局对改善网站的外观非常重要。
要慎重

所有的 HTML 元素本质上都是一些小矩形块。

有三个重要的属性控制每个HTML元素的布局：padding(内边距)、margin(外边距)、border(边框)。

padding属性

元素的 padding 控制元素与其边框 border 之间的距离。

  • 增大方块的 padding时, 它将增加元素内容和元素边框之间的距离。
示例
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
}

.green-box {
background-color: green;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box" >padding</h5>
</div>

运行截图

在这里插入图片描述

margin布局页面标签

元素的 margin （外边距）控制元素 border （边框）和周围元素实际所占空间的距离

示例
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
margin: 20px;
}

.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

运行截图

在这里插入图片描述

使用负值设置页面元素的margin属性

如果将一个元素的 margin 设置为负值，则元素将会变大。

尝试将 margin设置为负值，如红方块
把 green-box 的 margin 设置为 -15px，以使它将父容器(黄方块)的横向宽度填充。

设置之后，绿方块就覆盖住了父容器(黄方块)

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding: 20px;
margin: -15px;
}

.green-box {
background-color: green;
padding: 20px;
margin: -15px;
}
</style>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

不同方向padding设置不同的值

有时你将需要自定义一个元素，使它的每一个边具有不同的 padding。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left属性来控制元素四个方向的 padding。

示例
设置的 green-box class的顶部和左侧具有 40px 的 padding，而底部和右侧则是 20px。

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

.green-box {
background-color: green;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 20px;
padding-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

运行截图：

在这里插入图片描述

为不同方向margin设置不同的值

有时你将需要自定义一个元素，使它的每一个边具有不同的 margin。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 属性来控制元素四个方向的margin。

示例
设置的 green-box class的顶部和左侧具有 40px 的 margin，而底部和右侧则是 20px。

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: red;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

.green-box {
background-color: green;
margin-top: 40px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 20px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

运行截图：

在这里插入图片描述

CSS中padding简写

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，还可以集中起来指定它们，如下所示：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

示例
使用顺时针表示法，给".green-box" class在其顶部和左侧具有 40px 的 padding，而底部和右侧具有 20px 的 padding。

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}

.red-box {
background-color: red;
padding: 20px 40px 20px 40px;
}

.green-box {
background-color: green;
padding: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

运行截图：
在这里插入图片描述

CSS中margin简写

用 margin 再试一次。

除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，如下所示：

margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：

顶部、右侧、底部、左侧，简称：上右下左。

示例
使用 顺时针表示法 ，给 “green-box” class 的元素在其顶部和左侧具有 40px 的 margin，而底部和右侧具有 20px 的 margin。

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}

.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}

.green-box {
background-color: green;
margin: 40px 20px 20px 40px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box green-box">padding</h5>
</div>

运行截图：

在这里插入图片描述

CSS继承Body元素样式

<style>
body {
background-color: black;
color: green;
font-family: Monospace;
}

</style>
<h1>Hello World</h1>

运行截图：
在这里插入图片描述

CSS样式的继承

每一个 HTML 页面都有一个 body 元素。

我们可以证明body元素的存在，将其 background-color 设置为黑色。

<!-- 这是完整的代码 -->
<style>
body {
  background-color: black;
}
</style>

运行截图：

提高效率

  1. 使用CSS
  2. 使用模板，减少时间花费

demo

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:800px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:700px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © w3cschool.cn</div>

</div>
 
</body>
</html>

运行截图：
这是一个页面布局demo

–END–

愚者的自白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JQuery学习笔记day11】HTML 布局
01-08
布局 网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 布局标签 标签 描述 定义文档区块，块级(block-level) 定义 span，用来组合文档中的行内元素。 网站布局 大多数网站会把内容安排...
html学习日记6_网站.rar
01-05
这个压缩包"html学习日记6_网站.rar"很可能是某位学习者在第六阶段关于构建网站的学习记录，其中可能包含了HTML代码示例、笔记或者小项目。"pre_html_04"这个文件名可能是指预HTML的第四个部分，暗示了这是一个关于...
HTML学习笔记--区块
PRCORANGE的博客
07-23 108
HTML 区块元素 大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table> HTML 内联元素 内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img> HTML 元素 <div> 标签可以把文档分割为独立的、不同的部分。如果与 CSS 一同使用，<div&g
新手学习HTML笔记（三）区块布局与表单
Ho1aAs‘s Blog
07-03 623
导航 ·新手学习HTML笔记（一）标签_简单网页的结构解析 ·新手学习HTML笔记（二）表格与列表 文章目录导航1.区块布局举个例子：区块容器2.表单一.表单常用属性二.表单子标签①.结构属性标签Ⅰ.label定义label捆绑对象Ⅱ.fieldset定义fieldset标题②.功能标签Ⅰ.输入域输入域常用属性输入type类型Ⅱ.文本框文本框常用属性Ⅲ.下拉菜单选项分组Ⅳ.按钮按钮属性按钮type属性完 整理自菜鸟教程,便于复习和查阅 ->原教程传送门<- 1.区块布局 HTML元素被定义为
HTML学习笔记
CTIA_OPEN的博客
04-19 957
HTML入门笔记
HTML学习笔记02(列表,区块,布局,表单,框架)
数据攻城狮的博客
04-26 194
文章目录1.列表1.1无序列表1.2有序列表1.3自定义列表2.区块3.布局4.表单5.框架 1.列表 1.1无序列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
前端开发与html学习笔记
我的个人博客
04-20 1201
前端开发：也叫做web前端开发，它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发互联网产品：指网站为满足用户需求而创建的用于运营的功能及服务，百度搜索、淘宝、QQ、微博、网易邮箱等都是互联网产品互联网产品开发流程前端开发技术：前端工程师参照产品的效果图来开发页面(也可叫界面)，效果图是由UI设计师用Photoshop(少量设计师用firework)来设计的，为了方便与UI设计师对接工作，前端需要掌握一些Photoshop的技能，Photoshop还可以辅助页面开发。
HTML 学习笔记之进阶三
diaobusi的博客
07-09 99
dl>
HTML5学习笔记
m0_55584065的博客
03-21 1034
1 简介 html文件有他自己的格式要求，在这里，我会简单的介绍一下目前常用的文本格式，仅作参考，初学者仅需了解大致上的结构即可，想要详细了解的朋友可以自行搜索 <!DOCTYPE html> // 声明文件，告知计算机这是 html5 类型 <html lang="en"> // html5 文件均以标签<html>开始，以标签</html>结束
HTML学习笔记（网页布局）
weixin_47878443的博客
02-11 463
HTML网页布局：1.传统的DIC+CSS布局。2.HTML5语义化标签+CSS3布局。3.响应式布局
HTML学习笔记[Web开发]
Jenlibein的博客
07-19 1026
本文为学习笔记，参考w3c，菜鸟，Mozilla，尚硅谷等文章编写。
bookstrap学习笔记
02-23
### Bookstrap学习笔记知识点概述 #### 一、Bookstrap概览 - **移动设备优先**：Bookstrap的设计理念强调从移动设备开始构建网站，再逐渐扩展到桌面版本。这意味着开发者首先考虑的是如何使内容在手机等小屏设备上...
html学习笔记（含标签单词解释）
01-03
本学习笔记旨在详细介绍HTML的基本概念、常用标签及其英文单词解释，帮助初学者更好地理解和运用HTML。 一、HTML基本结构 HTML文档通常以`<!DOCTYPE html>`开头，声明当前文档为HTML5标准。接着是`<html>`标签，它...
HML学习笔记
10-21
这份“HML学习笔记”旨在为初学者提供全面而详细的HTML入门指导。 HTML是一种标记语言，通过在文本中插入特定的标签，来告诉浏览器如何显示内容。例如，`<h1>`标签表示一级标题，`<p>`标签表示段落，`<a>`标签用于...
开发教程文档.docx
08-14
1. Java简介 Java是一门由Sun Microsystems公司于1995年推出的高级编程语言。它具有跨平台的特性，能够在多种操作系统（如Windows、Mac OS和各种Unix版本）上运行。Java的最大特点是“一次编写，到处运行”，这得益于Java虚拟机（JVM）的存在。 2. 环境搭建 在开始Java编程之前，需要先搭建开发环境。你需要安装Java开发工具包（JDK）和一个集成开发环境（IDE），比如IntelliJ IDEA或Eclipse。JDK是Java开发的核心，包括了编译器和标准类库，而IDE则为你提供了一个方便的开发界面。 3. 基本语法 学习Java的第一步是掌握它的基本语法。你需要了解如何定义变量、使用基本数据类型、控制程序流程（如条件语句和循环语句）以及如何定义和使用函数。这些基础知识是编写任何Java程序的基础。 java public class HelloWorld { public static void main(String[] args) { System.out.println("Hello, World!
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
08-14
全球车载支付服务行业总体规模、主要企业国内外市场占有率及排名（2024版）.docx
【独家首发】基于斑点鬣狗优化算法SHO-GMDH的锂电池寿命SOC估计算法研究Matlab实现.rar
最新发布
08-14
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
鲸发卡v11.61发卡系统源码-开心修复版
08-14
鲸发卡系统在发卡圈几乎人人皆知，市面最好发卡系统之一，操作简单界面操作通俗易懂，系统主页UI已进行更换，非市面烂大街首页！ 我们替换了三套最新版模板，详情请看下面图片，市面上所谓的11.61版本就是这，只是改了版本号，新增三套模板。 非常重要的一点是，我们发现此模板使用后，首页首次加在有点慢，原因是首页美化代码的原因，其他页面基本正常，有能力的可以吧图片等资源文件上传到oss等第三方平台 含4套PC端首页模板，含4套手机端首页模板（3套与PC端相同） 修复功能 1、短链接生成，重置 2、客户端新版本UI 3、邀请码无限重复生成(以前的版本后台不?关闭，现在可以了)
HTML学习笔记：常见错误与修复
“html学习笔记，包括html，javascript，css的学习与工作经验总结，更新至2013-6-15。” 在HTML、JavaScript和CSS的学习过程中，了解并掌握常见的问题和解决方案是至关重要的。这份学习笔记主要涵盖了这些方面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值