Web前端学习：一

news/2024/4/26 11:25:20/文章来源:https://blog.csdn.net/weixin_45097269/article/details/129177068

编辑器的基础使用

编辑器推荐使用：
HBuilderx（免费+中文）（建议使用）
在这里插入图片描述

Sublime（免费+英文）
在这里插入图片描述
Sublime中文设置方法，下载语言插件：
1、进入Sublime后，Shift+Ctrl+P，在查找框中输入Install
2、在搜到的列表中选择安装程序包控件Install Package Control
3、安装成功后有提示
4、Shift+Ctrl+P，在查找框中输入Install package
5、确定后会弹出新的选项框，搜索Chinese，选择ChineseLocalizations
6、稍等后会自动设置中文，此时可以在帮助-Language中设置其他语言

Sublime编译器基本使用

1、创建新项目Ctrl + n
2、保存项目Ctrl + s，另存为Ctrl + shift+ n
（保存时后缀为html）
3、右下角要选择格式为HTML

制作HTML页面

二：基本标签：html，head，body，title

HTML里面的所有东西，都叫标签
分两种，不用闭合，需要闭合
<标签名>
<标签名></标签名>

<!doctype html>文档头，从此开始为HTML代码
<html>人<head>头部标签-脑袋（名字，信息等）<title>文件在页面上的显示的名字</title></head><body>身体（网页中的内容）</body>
</html>

具体展示：
在这里插入图片描述
在这里插入图片描述

三：标签DIV

大部分网站通过div标签构成
特性：
一行一行，带有换行效果
在这里插入图片描述
在这里插入图片描述

四：标签img，属性src

网页=文字+视频+图片
img：image缩写，插入图片，在网页上显示图片，不需要闭合
需要让img标签和图片有关联：
放入属性，src：地址属性

<img src='XXX.jpg'>

<!DOCTYPE html>
<html>
<head><title>Ai</title>
</head>
<body><div>我叫Ai，爱好听音乐</div><div>打游戏，看电影</div><div>三十年河东三十年河西</div><img src='image/1.jpg'><img src="image/2.jpg">
</body>
</html>

在这里插入图片描述

五：标签a，属性href，target

页面跳转：

<a href="这里写链接地址">我要打开XX页面</a>

原页面不关闭，打开新页面进行跳转：

<a href="https://www.baidu.com/" target="_blank">打开百度</a>

制作点击图片跳转：

<a href="这里写链接地址"><img src="xxx">
</a>

具体代码如下：

<!DOCTYPE html>
<html>
<head><title>Ai</title>
</head>
<body><div>跳转链接</div><a href="https://www.baidu.com/">打开百度</a><a href="https://www.douyin.com/" target="_blank">新页面打开抖音</a><a href="1-5 a标签，href属性 - 副本.html">跳转到副本</a><a href="https://www.baidu.com/"><img src="image/1.jpg"></a>
</body>
</html>

在这里插入图片描述

六：无序列表标签ul，li

ul是列表，li是项
ul中可以有无数个li，li中可以放任意内容
正规情况，ui下第一层只能是li

<!DOCTYPE html>
<html>
<head><title>Ai</title>
</head>
<body><ul><li>我叫AI</li><li>我喜欢自由</li><li>哈哈哈</li><li><a href="https://www.baidu.com/" target="_blank"><img src="image/1.jpg"></a></li></ul>
</body>
</html>

七：有序列表标签ol，li

用法同ul一致，默认数字标注1~~n

<!DOCTYPE html>
<html>
<head><title>Ai</title>
</head>
<body><ul><li>我叫AI</li><li>我喜欢自由</li><li>哈哈哈</li></ul><ol><li>我叫AI</li><li>我喜欢自由</li><li>哈哈哈</li></ol>
</body>
</html>

在这里插入图片描述

八：Sublime编辑器的初始化快捷键的编辑

Tools（工具）— 插件开发—新建代码片段
把第三行的内容 替换成你要输出的快捷内容

下方修改：
随便写
用tab键可以快速把上面的内容输出的快捷按键
写什么 -> tab

九：标签p

用于写文字/段落，自带段落间距，上下有留白，换行
一般用于新闻等特别多的文字

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Web学习</title></head><body><p>天倾流火，地海翻覆，人潮惊骇。遮天蔽日的黑色膜翼展开，密密麻麻挂满着死去生物的白色躯骸。神话里的皇帝终将归来!届时，万物寂灭，末世终焉。</p><p>这是地狱中的魔王们相互撕咬。铁剑和利爪撕裂空气，留下霜冻和火焰的痕迹，血液刚刚飞溅出来，就被高温化作血红色的蒸汽，冲击波在长长的走廊上来来去去，早已没有任何完整的玻璃，连这座建筑物都摇摇欲坠。</p><p>天若流火</p><div>天倾流火，地海翻覆，人潮惊骇。遮天蔽日的黑色膜翼展开，密密麻麻挂满着死去生物的白色躯骸。神话里的皇帝终将归来!届时，万物寂灭，末世终焉。</div><div>这是地狱中的魔王们相互撕咬。铁剑和利爪撕裂空气，留下霜冻和火焰的痕迹，血液刚刚飞溅出来，就被高温化作血红色的蒸汽，冲击波在长长的走廊上来来去去，早已没有任何完整的玻璃，连这座建筑物都摇摇欲坠。</div><div>天若流火</div></body>
</html>

在这里插入图片描述

十：标签input，type

插件
type=‘input类型’
eg：text：默认，文本
password：密码
radio：单选框
CheckBox：复选框
color：颜色

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><div>用户名：<input type="text"/></div><div>密  码：<input type="password"/></div><div>复选框1：<input type="checkbox"/></div><div>复选框2：<input type="checkbox"/></div><div>复选框3：<input type="checkbox"/></div><div>单选框1：<input type="radio"/></div><div>颜色：<input type="color"/></div></body>
</html>

在这里插入图片描述

十一：标签button

按钮插件
方法一：<button>按钮1</button>
方法二：<input type="button" value="按钮二"/>
在这里插入图片描述

十二：CSS-标签选择器

前端三大件：
1、HTML ---- 各种标签
2、CSS ---- 对标签的形容，样式
3、JavaScript ---- 利用脚本进行控制

标签：style：<style></style>
通过style中的各种选择器控制元素；
标签选择器：把所有同样的标签都赋予这个样式

<style>
选择器{样式：样式值；样式：样式值}
</style>

div{
width:200PX;//PX:基本单位，像素
height:200PX;
background:red;//背景色
}

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Web学习----CSS</title><style>div{width: 200px;height: 200px;background: blueviolet;}</style></head><body><div>哈喽</div></body>
</html>

在这里插入图片描述

十三：CSS引入方式

CSS，基于HTML样式
优先级区分，就近原则：
行内式 > 内嵌式 > 外链式
代码至上而下执行

1、内嵌式（同12）
2、外联式：
在外写个css文件：

div{height: 200px;width: 200px;background: yellow;
}

在html中调用：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/css2.css"></head><body><div></div></body>
</html>

3、行内式：

<html><head><meta charset="utf-8"><title></title></head><body><div style="width: 200px;height: 200px;background: green;"></div></body>
</html>

十四：CSS基本选择器

1、标签选择器
2、id选择器：
唯一的标签
权重最高
3、；类选择器class：
用的多，没有唯一性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{width: 200px;height: 200px;background: green;}#AA{width: 200px;height: 200px;background: blueviolet;}.BB{width: 200px;height: 200px;background: red;}</style></head><body><div id="AA"></div><div class="BB"></div><div></div></body>
</html>

十五：CSS选择器深入

后代选择器：
选择标签下面的内容进行修饰，更精准的选择元素
选择器越精准，权重越高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div p{background: peachpuff;}.Myclass p{background: violet;}.Myclass .NB p{background: darkcyan;}.Myclass .NB p{background: darkcyan;}.Myclass .NB #a{background: red;}#a{background: black;}</style></head><body><div><p>努力自律</p></div><div class="Myclass"><p>今天天气不错</p><p>今天心情不错</p><div class="NB"><p>哈哈哈哈</p><p id="a">啦啦啦啦啦</p></div></div></body>
</html>

群组选择器：
多内容选择，有通用样式即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.a1,.a2,div,div p{background: darkgoldenrod;}</style></head><body><div><p>dadadadadadaddaad</p></div><div>afhakbiadkafvka</div><div class="a1">今天感觉不错</div><p class="a1">今天感觉不错</p><p class="a1">今天感觉不错</p><p class="a1">今天感觉不错</p><p class="a1">今天感觉不错</p><p class="a2">今天感觉不错</p><p class="a2">今天感觉不错</p><p class="a2">今天感觉不错</p><p class="a2">今天感觉不错</p></body>
</html>

十六：属性：外边距及浮动样式

浮动：float
主要作用：让元素横着开始排列
float：left–从左往右
float：right–从有往左

外边距：margin
当前元素距离外边的边距，上下左右4个
margin-top/bottom/left/right
缩写方法：
1、margin：上px 右px 下px 左px
2、margin：上px 左右px 下px
3、margin：上下 左右
4、margin：上下左右一样

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.My{width: 200px;height: 200px;background:red;float:left}.mar{margin-right:20px;margin-top:30px;}.mmm{margin:100px 50px 50px 50px}</style></head><body><div class="My mar">1</div><div class="My mmm">2</div></body>
</html>

十七：内边距padding

padding内边距：
使用margin修改外边距，原元素大小不变
使用padding修改内边距，元素增加相应大小
其他与外边距一致

十八：块状元素与行内元素及熟悉拓展

所有html元素分为3大类，两类常用+可变元素
1、块状元素：div，p
支持宽高 margin，padding
weight宽度默认100%（一整行）
2、行内元素：span（最基本行内元素）
不支持宽高
宽高随着内容变化而变化

十九：元素深入，border属性-边框

嵌套问题：
块状元素可以随意嵌套
行内元素只能嵌套行内元素

边框border：
占元素大小，往外长
缩写样式：

border:10px solid black

border：大小 实线 颜色；
实线-solid 虚线-dashed

非缩写：
border-width：
border-color：
border-style：
border-top-color：
border-left-width：
border-right-style：
border-bottom-color：

二十：背景样式的缩写/非缩写

background背景
background-color：背景颜色
background-image：url（）背景图片，默认平铺
background-size：**px **px背景图大小
background-repeat：背景图平铺
background-repeat：no-repeat不平铺
background-repeat：repeat-y竖着平铺，纵坐标
background-repeat：repeat-x横着平铺，横坐标
background-position:10px 30px;背景坐标（两个参数，第一个X轴，第二个y轴，第二个默认center）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_73585.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

wait/notify方法 等待唤醒机制

wait/notify方法 等待唤醒机制

线程正在运行&#xff0c;调用这个线程的wait()方法&#xff0c;这个线程就会进入一个集合进行等待(这个集合的线程不会争抢cpu)&#xff0c;此时线程的状态就是waiting 当有线程调用notify()方法的时候&#xff0c;就会从集合中挑选一个线程进入到排队队列里面 notifyAll就是…
阅读更多...
【样式】轮播图样式 uview 版本 : “2.0.31“

【样式】轮播图样式 uview 版本 : “2.0.31“

![在这里插入图片描述](https://img-blog.csdnimg.cn/6cd568ce932b4ea7ae52f10365979680.png html <view class"addSwiperdiv"><image src"/static/66.png" mode"aspectFill" class"titleimg"></image><view c…
阅读更多...
VC++ 解决dll库动态库加载失败问题（调用LoadLibrary加载失败）（附源码）

VC++ 解决dll库动态库加载失败问题（调用LoadLibrary加载失败）（附源码）

目录 1、动态加载dll库去调用库中的函数 1.1、调用系统dll库中未公开的接口 1.2、调用控件库中的注册接口向系统中注册该控件 2、LoadLibrary动态加载dll库失败的场景 2.1、自制安装包中遇到的LoadLibrary加载dll库失败问题 2.2、主程序底层模块调用LoadLibrary加载dll库…
阅读更多...
秒杀测试案例 Java Redis Mysql

秒杀测试案例 Java Redis Mysql

基于redis和MySQL乐观锁实现秒杀优惠券场景&#xff0c;一人一单。MySQL乐观锁改良控制不出现超卖和少卖问题&#xff0c;使用redisson分布式锁在用户维度加锁控制一人一单。 源码&#xff1a;https://github.com/hanhanhanxu/SeckillTest 文中图片看不清的地方可以鼠标右键-&…
阅读更多...
谷歌外推留痕，谷歌搜索留痕快速收录怎么做出来的？

谷歌外推留痕，谷歌搜索留痕快速收录怎么做出来的？

本文主要分享谷歌搜索留痕的收录效果是怎么做的&#xff0c;让你对谷歌留痕技术有一个全面的了解。 本文由光算创作&#xff0c;有可能会被修改和剽窃&#xff0c;我们佛系对待这样的行为吧。 谷歌搜索留痕快速收录怎么做出来的&#xff1f; 答案是&#xff1a;通过谷歌蜘蛛…
阅读更多...
C语言-结构体对齐

C语言-结构体对齐

详细说明参考博客 (1条消息) C语言结构体对齐&#xff0c;超详细&#xff0c;超易懂_haozigegie的博客-CSDN博客 (1条消息) #pragma pack详解_OuJiang2021的博客-CSDN博客_#pragma pack 以下个人理解总结 出现结构体对齐考虑的根本原因就是&#xff1a;【数据存取执行效率】…
阅读更多...
Openwrt中动态IPV6 防火墙的正确设置方法

Openwrt中动态IPV6 防火墙的正确设置方法

环境&#xff1a;光猫桥接公网IPV6 问题&#xff1a;动态IPV6地址不知道怎么设置防火墙 解决办法&#xff1a;模糊匹配前缀&#xff0c;特定后缀 背景&#xff1a;将家中光猫桥接后&#xff0c;获得了公网的IPV6地址&#xff0c;可以从外部用IPV6访问家中的设备&#xff0c;但I…
阅读更多...
【AI写作】 机器人流程自动化 介绍 - Robotic Process Automation (RPA) Introduction

【AI写作】 机器人流程自动化 介绍 - Robotic Process Automation (RPA) Introduction

写一篇文章介绍RPA技术，未来的发展。使用markdown格式，有3级索引，超过3000字。 某位大师说过的： 任何行业、任何部门都有大量的场景，涉及重复、有规则逻辑的工作，都可以用 RPA 开发一个软件机器人帮助完成。 文章目录 机器人过程自动化（RPA）简介RPA的定义RPA的好处Robo…
阅读更多...
【centos7下部署mongodb】

【centos7下部署mongodb】

一.安装环境 CentOS7MongoDB4.0.13正式版。 二.下载MongoDB 1.1 官网下载地址&#xff1a;https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.13.tgz 1.2 将压缩包通过xftp上传到服务器/opt目录&#xff0c;然后解压、改名 三. 配置环境变量及配置文件 3.1配置系…
阅读更多...
有限差分法求解不可压NS方程

有限差分法求解不可压NS方程

网上关于有限差分法解NS方程的程序实现不尽完备&#xff0c;这里是一些补充注解 现有的优秀资料 理论向 【1】如何从物理意义上理解NS方程&#xff1f; - 知乎 【2】NS方程数值解法&#xff1a;投影法的简单应用 - 知乎 【3】[计算流体力学] NS 方程的速度压力法差分格式_…
阅读更多...
pytorch1.2.0+python3.6

pytorch1.2.0+python3.6

一、说明 pytorch1.2.0python3.6CUDA10.0cudnn7.4.1.5 二、步骤 在conda中创建一个新的虚拟环境 查看一下自己的所有环境 激活虚拟环境 conda activate torch1.2.0 关于cuda和cudnn 1、查看自己电脑系统是10.2版本 http://链接&#xff1a;https://pan.baidu.com/s/1v5cN6…
阅读更多...
自学前端，你必须要掌握的3种定时任务

自学前端，你必须要掌握的3种定时任务

当你看到这篇博客的时候&#xff0c;一定会和狗哥结下不解之缘&#xff0c;因为狗哥的博客里不仅仅有代码&#xff0c;还有很多代码之外的东西&#xff0c;如果你可以看到最底部&#xff0c;看到投票环节&#xff0c;我相信你一定感觉到了&#xff0c;狗哥的真诚&#xff0c;狗…
阅读更多...
DateTimeParseException

DateTimeParseException

前端请求为字符串的时间格式2023-02-16 19:19:51&#xff0c;服务端用LocalDateTime类型接收时报解析异常java.time.format.DateTimeParseException: Text 2023-02-16 19:19:51 could not be parsed at index 10方法一&#xff1a;JsonFormat(shape Shape.STRING, pattern &q…
阅读更多...
Redis 主从复制-服务器搭建【薪火相传/哨兵模式】

Redis 主从复制-服务器搭建【薪火相传/哨兵模式】

Redis 安装参考文章&#xff1a;Centos7 安装并启动 Redis-6.2.6 注意&#xff1a;本篇文章操作&#xff0c;不能在 静态IP地址 下操作&#xff0c;必须是 动态IP地址&#xff0c;否则最后主从服务器配置不成功&#xff01; 管道符查看所有redis进程&#xff1a;ps -ef|grep re…
阅读更多...
Linux-＞父子进程初识和进程状态

Linux-＞父子进程初识和进程状态

目录 前言&#xff1a; 1. 父子进程创建 2. 进程状态 R(running)状态&#xff1a; S(sleep)状态&#xff1a; D(disk sleep)状态&#xff1a; T(stopped)状态&#xff1a; X(dead)和Z(zombie)状态&#xff1a; 孤儿进程&#xff1a; 前言&#xff1a; 本篇主要讲解关…
阅读更多...
同事每天早下班，原来是用了这8个开发工具

同事每天早下班，原来是用了这8个开发工具

引言 工欲善其事必先利其器&#xff0c;说的就是工匠要想更加高效的做事情&#xff0c;就得先将工具变得锋利。那么对于程序员来说同样也是如此&#xff0c;如果要想每天早点下班&#xff0c;就必须借助于一些开发工具来提高自己的工作效率&#xff0c;今天慕枫就给大家总结一…
阅读更多...
365智能云打印怎么样？365小票无线订单打印机好用吗？

365智能云打印怎么样？365小票无线订单打印机好用吗？

365智能云打印怎么样&#xff1f;365智能云打印是有赞官方首推的订单小票打印机&#xff0c;荣获2016年有赞最佳硬件服务商。可以实现远程云打印&#xff0c;无需连接电脑&#xff0c;只需通过GPRS流量或者WIFI即可连接&#xff0c;不受地理位置和距离限制。365小票无线订单打印…
阅读更多...
关于高并发场景和进程线程协程的一些总结

关于高并发场景和进程线程协程的一些总结

1、IO复用和线程池哪个好&#xff1f;应用场景&#xff1f; IO复用就是一个线程处理多个客户端连接。如果自己实现的话&#xff0c;就是要不断轮询每个客户端连接&#xff0c;看看有没有事件发生&#xff08;数据到达&#xff09;&#xff0c;即使可以用非阻塞的read函数&…
阅读更多...
Python编写GUI界面，实现小说下载器

Python编写GUI界面，实现小说下载器

嗨害大家好鸭&#xff01;我是小熊猫~思路一、数据来源分析二. 代码实现步骤代码实现一、单章小说下载二、整本小说下载三、多线程采集四、采集排行榜所有小说五、搜索小说功能六、GUI界面<center>**&#x1f447;问题解答 源码获取 技术交流 抱团学习请联系&#x1f…
阅读更多...
金仓数据库安装

金仓数据库安装

一、麒麟操作系统安装金仓数据库 操作系统 DISTRIB_IDKylin DISTRIB_RELEASEV10 DISTRIB_CODENAMEjuniper 按照安装文档的步骤安装&#xff0c;记得记住设置的数据库的用户名、密码 二、window安装连接数据库的工具软件 三、jdbc连接数据库 &#xff08;1&#xff09;连接工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业