前端基础知识学习——Html、Css、JavaScript语言简介（Background、border、Padding、Marigin、文本属性介绍与使用）（一）

最新推荐文章于 2024-06-23 20:25:37 发布
最新推荐文章于 2024-06-23 20:25:37 发布
阅读量216 收藏 3
点赞数 1
分类专栏： 前端 Html Css 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45496521/article/details/130767020
版权
前端 同时被 3 个专栏收录
16 篇文章 1 订阅
订阅专栏
Html
16 篇文章 1 订阅
订阅专栏
Css
12 篇文章 1 订阅
订阅专栏

文章目录

所需语言

  • Html:与浏览器沟通，起到框架作用 ，该语言需要用尖括号<>声明。
    主要包含以下三类
<!--整体框架-->
   <html>
   <!--头部-->
<head>
</head>
<!--网页主体-->
<body>
</body>
</html>
  • Css:层叠样式表 ，该语言语法为 属性：属性值；
  • JavaScript:行为 ，该语言语法为 属性=“属性值”
    打开.txt文件输入以下代码，另存为后缀为.html文件
<!doctype html>
<html>
<head>
    <!---该网页代码编码格式-->
    <meta charset="utf-8" />
    <title>第一个网页哦</title>
</head>
<body>
    内容-content
    <!--div用来标记形状  style包含各种属性（属性名称：属性值；）这些属性值就是CSS------onclick为JavaScript-->
    <div style="width:200px;height:200px; border:15px solid orange;">AAAA</div>
    <div style="width:200px;height:200px;background:red" ;">BBBB</div>
    <div onclick="this.style.width = '1200px'; this.style.height = '800px';" style="width: 200px; height: 100px; transition: 1s; background: url(https://cn.bing.com//th?id=OHR.SardineBurial_ZH-CN9563091726_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp) " ;"></div>

</body>
</html>

效果图
在这里插入图片描述

常见属性介绍与使用

复合属性：一个属性里面包含多个属性值
#id 代表指定到id

Background 背景

属性举例说明
background- attachment:fixed;背景是否滚动
background - color:red;背景颜色
background Image:url(bg.jpg);背景图
background repeat:no – repeat;背景图是否重复
background image position：centre top;背景图位置
<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <title>常见样式</title>
    <!--background后面 不重复特性，后跟像素时根据像素移动 no-repeat （230px（x轴,可为负数）  100px（y轴））
        repeat-x 沿着x轴重复  repeat-y 沿着y轴重复-->
    <!--复合属性：一个属性多个属性值   fixed 固定-->
    <style>
        #BOX {
            width: 150px;
            height: 150px;
            background: blue url(th.jpg);
        }

        #BOX1 {
            width: 1500px;
            height: 150px;
            background: blue url(icon.gif);
        }

        #BOX2 {
            width: 1500px;
            height: 150px;
            background: blue url(icon.gif) no-repeat;
        }

        #BOX3 {
            width: 1500px;
            height: 150px;
            background: yellow url(icon.gif) no-repeat 230px 100px;
        }

        #BOX4 {
            width: 1500px;
            height: 150px;
            background: red url(icon.gif) repeat-y;
        }

        #BOX5 {
            width: 1500px;
            height: 150px;
            background: pink url(icon.gif) no-repeat center center;
        }

        #body1 {
            width: 2500px;
            height: 2500px;
            background: url(bg.jpg) center top no-repeat gray fixed;
        }
    </style>
</head>
<body id="body1">
    <div id="BOX">BNFSBNN</div>
    <div id="BOX1">BNFSBNN</div>
    <div id="BOX2"></div>
    <div id="BOX3"></div>
    <div id="BOX4"></div>
    <div id="BOX5"></div>
</body>
</html>

效果图
在这里插入图片描述

Border

属性名称举例
border-top-width:1 px;
border-bottom-width: :1 px;
border-right-width:1 px;
border-left-width:1 px;
border-top-style:dotted ;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:solid;
border-top-color:green;
border-right-color:green;
border-bottom-color:green;
border-left-color:green;
<!DOCTYPE html>
<html  >
<head>
    <meta charset="utf-8" />
    <title>常见样式border</title>
    <!--solid实线  dashed虚线  dotted点线(IE6不兼容) -->
    <style>
        #box {
            width: 180px;
            height: 50px;
            border: 10px solid red;
        }

        #box1 {
            width: 180px;
            height: 40px;
            border: 10px dashed red;
        }

        #box2 {
            width: 180px;
            height: 40px;
            border: 10px dotted red;
        }
        #box3 {
            width: 180px;
            height: 40px;
            border-top: 100px dotted red;
            border-right: 100px dotted pink;
            border-bottom: 100px dotted green;
            border-left: 100px dotted yellow;
        }
        #box4 {
            width: 0px;
            height: 0px;
            border-top: 100px solid white;
            border-right: 100px solid pink;
            border-bottom: 100px solid green;
            border-left: 100px solid yellow;
        }
    </style>
</head>
<body>
    <div id="box">border展示</div>
    <div id="box1">border展示</div>
    <div id="box2">border展示</div>
    <div id="box3">border展示</div>
    <div id="box4"></div>
</body>
</html>

效果图
在这里插入图片描述

Padding 内边距

相当于厚度，或是

属性举例
Padding top:30px
Padding-right:30px
Padding-bottom:30px
Padding-left:30px

或是 Padding: 内边距 =》 Padding: 30px
或是 Padding: top right bottom left =》 Padding: 20px 20px 20px 20px;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--padding加在div外部大小上-->
    <style>
        #box {
            width: 400px;
            height: 300px;
            border: 1px solid green;
            padding-top: 20px;
        }
        #box1 {
            width: 400px;
            height: 300px;
            border: 1px solid green;
            padding: 20px 20px 20px 20px;
        }
    </style>
</head>
<body>
    <div id="box">时的那份感觉啊高二啊是包含淖尔结果i哦给你i阿松高频你弄颁发
     的博埃皮i就发噶破鞥啊然后拿圣伯纳不能覅送吧送吧i飞机杯司法及好哦i和你博纳哦视频编辑</div>
    <div id="box1">昂i啊noir能够IP就懊恼够爱内容i你看农夫民工竟是那你减肥给i建瓯市JFK吉欧杰佛界jojoba口水口服感觉</div>
</body>
</html>

效果图
在这里插入图片描述

marigin 外边距

  • 临近两个物体上下边距会叠压。
  • 父子级包含的时候子级的marign-top会传递给父级；内边距替代外边距。
  • 外边距复合 ：marign:top right bottom left;
  • auto 居中
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" /> 
    <title>margin</title>
    <style>
        #box {
            width: 500px;
            height: 300px;
            background: blue;
            margin-bottom: 20px; 
        }

        #box1 {
            width: 500px;
            height: 300px;
            background: yellow;
            margin-top: 20px;
        }

        #box2 {
            width: 50px;
            height: 30px;
            background: blue;
            margin: 20px 20px 20px 20px;
        }

        #box3 {
            width: 500px;
            height: 300px;
            background: blue; 
        }
        #box4 {
            width: 300px;
            height: 100px;
            background: yellow;
            margin-top: 30px;
        }
        #box5 {
            width: 500px;
            height: 300px;
            background: pink;
            padding-top:100px;
        }
        
        #box6 {
            width: 500px;
            height: 300px;
            background: pink;
            margin-left: auto;
            margin-right:auto;
        }
        
    </style>
</head>
<body>
    <div id="box">
        时的那份感觉啊高二啊是包含淖尔结果i哦给你i阿松高频你弄颁发
        的博埃皮i就发噶破鞥啊然后拿圣伯纳不能覅送吧送吧i飞机杯司法及好哦i和你博纳哦视频编辑
    </div>
    <div id="box1">昂i啊noir能够IP就懊恼够爱内容i你看农夫民工竟是那你减肥给i建瓯市JFK吉欧杰佛界jojoba口水口服感觉</div>
    <div id="box2"></div> 
    <div id="box3">
        <div id="box4">型性格</div>
    </div>

    <div id="box5">
        <div id="box4">型性格</div>
    </div>
    <div id="box6">处在最中间位置</div>
</body>
</html>

效果图
在这里插入图片描述

盒模型

在这里插入图片描述

  • 盒子大小=border+padding+width/height
  • 盒子宽度=左border+左padding+width+右padding+右border
  • 盒子高度=上border+上padding+height+下padding+下border

文本设置

属性说明举例
font-size文字大小，一般为偶数16px;
font-family字体（中文默认宋体）宋体,Arial;
color文字颜色 （英文、rgb、十六进制）#961939;或rgb（89,25,20）;或
line-height行高30px;
color文字颜色#961939;
text-align文字对齐方式center;
text-indent首行缩进字数2em;或-2em;（em代表一个字）
font-weight文字着重bold;
font-style文字倾斜normal ;
font-weight文字着重bold;
letter-spacing字母间距2px;
word-spacing单词间距5px;（以空格为解析单位）
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #box {width:500px;height:300px;border:1px solid black;
              margin:90px auto;
              font-size:16px;
              font-family:宋体,Arial;
              color:#961939;
              line-height:30px; 
              text-align:center;
              text-indent:2em;
              font-weight:bold;
              font-style:normal ;
              text-decoration:underline;
              letter-spacing:2px;
              word-spacing:5px;
        }
    </style>
</head>
<body>
    <div id="box">内容内容内容内 google 容内 sun 容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</body>
</html>

效果图
在这里插入图片描述

~小先生~
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
signature=9357ba213647505b8240e6d7d6ce48bf,life-game/yarn.lock at master · soouup/life-game · GitHub...
weixin_39685836的博客
05-29 5万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.8.3":version "7.8.3"resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tg...
使用 HTML、CSS 和 JavaScript 创建图像滑块
11-20
在本文中，我们将深入探讨如何利用 HTML、CSS 和 JavaScript 创建一个功能完备的图像滑块。图像滑块是网页设计中常用的一种元素，它能够以动态的方式展示多张图片，增加用户体验。 首先，HTML 结构是构建滑块的基础...
div入门之盒子模型，边界margin,填充padding,框边border
u011333814的专栏
02-03 3295
一个div分为边界，框边，还有内部，内部有内容到边框的距离padding
BBED的前世今生-编译安装BBED环境并修改数据块损坏测试
congjiong8459的博客
07-21 261
修改数据库数据块损坏通常使用的方法是RMAN修复和BBED修复，在没有RMAN备份的情况下，牢靠的掌握使用BBED工具是一项必备技能了。 BBED 全称是 block browser and editor,在oracle 7 ...
CSS 学习 -- margin
qq_45050686的博客
07-11 646
margin
Android中marigin和padding的区别
OR的博客
10-16 1277
图解margin、padding、border属性 W3C组织建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对象包括段落、列表、标题、图片及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)和外边距(margin)。对于初学者，经常会搞不清margin，background-color、backgrou
web前端期末大作业 ——电影主题介绍 你好，李焕英 ——html+css+javascript网页设计实例
热门推荐
HTML网页设计
09-26 1万+
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。...
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 5198
Html+Css+JavaScript基础知识点
JavaWeb基础4——HTML,JavaScript&CSS
vincewm的博客
07-24 9241
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
前端面试必备之CSS3的新特性
12-02
CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 element1~element2: 选择前面有element1元素的每个element2元素。 [attribute^=value]: 选择某元素attribute属性是以value开头的...
javascript实现的样式表(CSS) 格式整理与压缩
12-08
样式表(CSS) 格式整理与压缩 html,body,form,fieldset,textarea { height:100%; margin:0; padding:0; border:0; font-size:10pt; background:#eee; } form { margin:0 1%; overflow:hidden; } legend { line-...
浅析JavaScript中的CSS属性及命名规范
10-26
在JavaScript中操作CSS属性时，需要注意一些转换规则和命名规范，因为JavaScript的语法与CSS的语法在处理属性名称上存在差异。以下是对标题和描述中提及的JavaScript中的CSS属性及命名规范的详细解析： 首先，当...
网页设计与制作(HTML+CSS).docx
11-14
网页设计与制作涉及到HTML（超文本标记语言）和CSS（层叠样式表）两个核心概念。HTML用于构建网页的基本结构，而CSS则负责网页的外观和布局。 1. HTML标记用于定义元素样式：在HTML中，`<style>`标记用于在文档头部...
【CSS in Depth2精译】1.2 继承~1.3 特殊值
PeacefulWinter的博客
06-20 801
本文介绍了CSS样式设置的另一种方式——继承，以及与样式重置密切相关的四个常见关键字：inherit、initial、unset 以及 revert。通过具体示例对这些知识点进行了详细说明。
【web1】标签，css，js
最新发布
OpenBMC开发
06-23 1739
File-New-Project-Static Web，右击New-HTMLFile。 1.2 文本标签：字体属性 1.3 a标签：anchor(锚) 超链接 1.4 列表标签：list (嵌套) 1.6 标签分类：div，span 1.7 表格标签：快捷键，table(嵌套) 1.8 合并单元格：rowspan=“2” 百度服务器不会理你。 2.4 css属性：背景/文本/字体/边框/浮动/展示 如下7是接着6后面，看浏览器窗口大小，动态调整。
有路网轮播图css实战
douyh的专栏
06-19 285
有路网轮播图css实战
CSS实现文字上下滚动、间歇滚动和无限滚动
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-19 337
主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果
CSS从入门到精通——动画:简单的小动画
m0_73614626的博客
06-16 548
为了完成本关任务，你需要掌握：1.创建动画，2.绑定元素。来创建一个动画，然后把这个动画绑定到一个元素上就有效果了。本关任务：用 CSS3 实现简单的小动画。根据提示，在右侧编辑器补充代码，实现当。为了方便评测， CSS 都是需要以分号。创建一个动画，这个动画表示字体会从。
css记录：三维变化之transform-style
计算机图形学
06-19 433
是 CSS 3D 转换中的一个重要属性，它定义了嵌套元素如何在 3D 空间中呈现。当你对一个元素应用 3D 转换（如rotateX()rotateY()rotateZ()等）时，这个元素的子元素默认会在 2D 平面上进行转换，而不是在 3D 空间中。属性允许我们改变这种行为，使得子元素也能在 3D 空间中进行转换。
在前端请使用HTML、CSS和JavaScript创建一个用户登录界面login.html文件
06-09
好的，我可以为您提供一个简单的登录界面的HTML、CSS和JavaScript实现。请将以下代码保存为login.html文件并在浏览器中打开查看效果。 ```html <!DOCTYPE html> <html> <head> <title>Login</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } form { background-color: #fff; border: 1px solid #ccc; padding: 20px; margin: 50px auto; max-width: 400px; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); border-radius: 5px; } h1 { margin-top: 0; text-align: center; } input[type="text"], input[type="password"] { display: block; margin: 10px 0; padding: 10px; width: 100%; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; font-family: Arial, sans-serif; } input[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-family: Arial, sans-serif; } input[type="submit"]:hover { background-color: #3e8e41; } </style> </head> <body> <form> <h1>Login</h1> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Login"> </form> </body> </html> ``` 这个登录界面使用了HTML、CSS和JavaScript来实现，其中HTML用于页面结构，CSS用于样式设计，JavaScript用于表单验证。界面包含一个标题、两个输入框（用户名和密码）和一个登录按钮。当用户点击登录按钮时，JavaScript将会检查输入框中的值是否为空，如果为空则弹出提示框，否则将会提交表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值