前端0×01

最新推荐文章于 2024-10-16 21:35:12 发布
最新推荐文章于 2024-10-16 21:35:12 发布
阅读量907 收藏 18
点赞数 19
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55121503/article/details/141173844
版权

盒模型

  • 了解和模型概念及其作用
  • 掌握div和span标签用法

盒模型是HTML中，重要的一种模型，所有的元素（标签）都可以看做是一个盒子，拥有外边距，边框，内边距，内容。

  • margin
  • border
  • padding
  • content

居中，相对与父元素居中，是相对的概念。在父元素中设置居中属性，作用于子元素。

<div>标签

<div>块级，与父元素同宽。

<span>标签

<span>内联元素，与子元素同宽。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
 <body>
<span style="background-color: #ff6600;">我是span，行内元素</span>
<div style="background-color: #ff6600;">我是div，块级元素</div>
</body>

表格

表格是一种非常"强"的结构，要求非常严格。

  • 每一行有相同的列数（单元格），每一列有相同的列数（单元格）
  • 同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行的等高

<table>标签

  • 可以使用 border 属性指定表格的宽度
  • 可以使用 width  属性指定表格的宽度，单位是px
  • 可以使用 height 属性指定表格的高度，单位是px

<tr>  标签

表格中有多少行，就需要写多少个 <tr> 标签

<td> 标签

每一行中有多少个单元格，就需要写多少个<td>标签

单元格的高度，默认情况下与内容的宽度相同。

默认情况下，单元格中内容都是左对齐的，可以使用text-align来控制内容对齐方式。

<table border="2">

<tr>

<td>1.1</td>

<td>1.2</td>

<td>1.3</td>

</tr>

<tr>

<td>2.1</td>

<td>2.2</td>

<td>2.3</td>

</tr>

<tr>

<td>3.1</td>

<td>3.2</td>

<td>3.3</td>

</tr>

</table>

跨列表格

rowspan

<table border='2' width='50%' >

<tr>

<td rowspan = "2" >语文</td>

<td>小明</td>

<td>66</td>

</tr>

<tr>

<td>小红</td>

<td>98</td>

</tr>

<tr>

<td rowspan = "2">数学</td>

<td>小明</td>

<td>100</td>

</tr>

<tr>

<td>小红</td>

<td>79</td>

</tr>

</table>

跨行表格

colspan

<table border='2' >

<tr>

<td colspan="2">学生成绩</td>

</tr>

<tr>

<td>语文</td>

<td>89</td>

</tr>

<tr>

<td>数学</td>

<td>94</td>

</tr>

</table>

〃KIяItò°
关注
前端样式-卡片01
Anolzo
03-19 3376
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
前端最全面试题
吴小迪的博客
05-04 15万+
今天给朋友们分享一到三年前端最全的面试题。 JS基础题： JS的数据类型有哪些？ 答案见：JS数据类型详解 如何判断JS变量的数据类型？ typeof() instanceof constructor toString typeof求解的可能值有哪些？ “number” “string” “boolean” “undefined” “object” “symbol” “function”...
前端入门 01：基础入门
Naisu的各种笔记
09-30 2467
文章目录目的开发工具基础说明简单示例相关拓展第三方库与框架打包成APP后端开发总结题外话 目的 这些年硬件性能越来越好，HTML5、CSS3、ES6等新特性被越来越广泛的支持，前端开发变得越来越火。它简单易上手、效果华丽、跨平台，用作用户界面开发是非常合适的。这篇文章将先介绍一些入门的基础内容，文中涉及的代码等只做演示使用，不用搞懂，后面会另外介绍。 开发工具 前端开发对工具要求很低，有个浏览器和记事本就可以了，当然实际上不到万不得已不推荐这么干。 先说浏览器，浏览器一般用苹果设备上自带的浏览器、chrom
前端兼容 适配
pika___chew的博客
04-20 1328
问题描述： ios端打开h5页面后，从a页面跳转到b页面，然后再返回a页面之后，发现a页面没有刷新。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。**替换字符串： **new Date(“2023-01-01 00:00:00”).replace(/-/g, “/”);解决办法： 改用“/”分割，例如：new Date(‘2023/01/01 00:00:00’)
前端实现一键复制
muxi229的博客
03-19 2235
clipboard实现一键复制
前端css定位
qq_39218045的博客
09-01 2034
绝对定位是相对于整个浏览器窗口进行定位，它是脱离文档流的，不受周围环境影响。相对定位是相对于之前盒子出生点去进行位置描述，该定位会受到周围环境影响。：在主轴上均匀分布，首个项目放在起始位置，末尾项目放在末尾位。：默认值，如果项目未设置固定的侧轴尺寸，则会拉伸以填满容器。：在主轴上均匀分布，包括首个项目和末尾项目两侧的空间。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。定位要结合位置描述属性去进行使用才会产生效果。
前端面试八股文（超详细）
热门推荐
m0_50861631的博客
03-06 15万+
JavaScript \1. Promise 的理解 Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。 一、Promise是什么？ Promise是最早
JavaWeb开发-01-前端基础知识
wangjh11234的博客
05-22 1196
JavaWeb开发-01-前端基础知识
前端Cookie基础知识
weixin_45092437的博客
02-28 1万+
​Cookie（也称为Web Cookie、浏览器Cookie等等）是服务器发送到用户浏览器并保存在本地的一小块数据，该数据通常是用户账号相关的信息，不同浏览器对Cookie的数量和大小限制不同，但一般来说，单域名下设置的cookie不能超过30个，单条cookie的大小不能超过4kb。如果Cookie超出浏览器限制，则会被浏览器忽略，不被保存。而且Cookie可以设置过期时间，到达过期时间后，浏览器就会把Cookie清除掉。​
从零开始：前端架构师的基础建设和架构设计之路
程序边界
12-16 8749
前端架构师是现代软件开发中的重要角色。他们需要具备扎实的前端技术基础，以及良好的基础建设和架构设计能力。通过合理的基础建设和架构设计，我们可以构建出稳定、高效、可扩展的前端系统，提高用户体验，提升团队的整体技术水平。快速发展的红利、优胜劣汰的挑战、与生俱来的混乱、同混乱抗衡的规范……这些都是前端从业者无法逃避的现状。有人说，做好业务支撑是活在当下，而做好技术基建是活好未来。当业务量到达一定量级时，成为“规范制定者”，成为“思考者”，像“架构师”一样思考问题，才能最终成为“优胜者”。
前端练习01-前端-HTML（表格）
03-25
"前端练习01-前端-HTML（表格）"的目标是让你熟悉如何使用HTML创建、设计和控制表格。 HTML表格由几个主要的标签组成，包括`<table>`，`<tr>`，`<th>`和`<td>`。`<table>`是表格的容器，`<tr>`代表表格行，`<th>`...
trans 翻译前端
01-30
下载链接： ...迅雷网盘：...百度网盘：链接: https://pan.baidu.com/s/1eFz3-HJCy0cqwL_RSIPj0A 提取码: cte6 Gitee：https://gitee.com/gfdgd-xi/trans-translation-front-end
一个人的旅行网站前端模板UD0.zip
08-31
"一个人的旅行网站前端模板UD0.zip"是一个用于构建个人旅行网站的前端代码库，它包含了一系列精心设计的HTML、CSS和图标资源，适合开发者进行二次开发，以创建具有专业外观和良好用户体验的在线旅行平台。...
华为od 面试八股文_前端_01_含答案
MISAYAONE的博客
03-24 1615
华为od 面试八股文_前端_01_含答案
Layout 布局组件快速搭建
最新发布
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
10-16 2139
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
JavaWeb 20.前端工程化
m0_73983707的博客
10-13 333
前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。
【前端】Bootstrap：响应式布局与工具类
2303_80346267的博客
10-13 950
Bootstrap 作为一个强大的前端框架，不仅为开发者提供了丰富的组件，还内置了强大的响应式设计工具。这些工具使得网页能够适应不同设备的屏幕尺寸，无论是桌面、平板，还是手机，网页都能呈现最佳的用户体验。本文将详细介绍 Bootstrap 的响应式设计理念以及与之相关的工具类。
06_实现watch
qq_53109172的博客
10-16 1124
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 438
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端学习01-07图像地图
05-27
好的，您想了解关于前端学习中的图像地图的内容是吗？那我来简单介绍一下。 图像地图是一种在网页上使用图片作为链接的方法。通过在图片上设置热点区域，用户可以通过点击图片上的不同区域来访问不同的链接。当用户点击图片上的某个区域时，浏览器会根据该区域的链接信息跳转到相应的页面。 在HTML中，可以使用`<map>`和`<area>`标签来创建图像地图。`<map>`标签定义了图像地图的名称和区域，而`<area>`标签则定义了每个热点区域的形状、坐标和链接。 下面是一个简单的图像地图示例： ```html <img src="example.jpg" usemap="#example"> <map name="example"> <area shape="rect" coords="0,0,50,50" href="page1.html"> <area shape="circle" coords="75,75,25" href="page2.html"> <area shape="poly" coords="100,0,150,50,100,100" href="page3.html"> </map> ``` 在这个示例中，我们首先使用`<img>`标签来显示图片，然后使用`usemap`属性指定该图片使用的地图名称。接着，使用`<map>`标签来定义地图的名称为`example`。最后，我们使用`<area>`标签定义了三个热点区域，分别是一个矩形、一个圆形和一个多边形，并且指定了每个区域的坐标和链接。 希望这个简单的介绍能够帮助您理解图像地图的基本概念。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值