初识前端开发

目的 :开发一个网站

-前端开发:html 、css、javaScript

-web框架:接收请求处理

-mysql数据库:存储数据的地方

快速上手:

        基于Flask web框架让你快速搭建一个网站出来

学习:

        基于Django框架

初识HTML

编码方式

<meta charset="UTF-8">

html结构 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

常用标签

1.标题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3></body>
</html>

2.div和span

<div> 内容</div>
<span>adad</span>

- div ,一个标签占一整行 【块级标签】

- span,内容多大占多大 【行级标签、内敛标签】 

3.超链接

-可以跳转到其他网站

-也可以跳转到自己网站的其他地址

<a href="https://www.bilibili.com/">bilibili</a>
<a href="https://www.bilibili.com/v/douga/?spm_id_from=333.1007.0.0">哔哩哔哩动画界面</a>

<a href="/get/news">查看更多</a>

4.显示图片

< img src="图片地址" />

 直接显示别人的地址(防盗链)

<img src="https://cn.bing.com/images/search?view=detailV2&ccid=agDelZtY&id=621D57D2218F2AE421464C32CD27F8430700543A&thid=OIP.agDelZtYARCHk7NE7ymIrQHaEx&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.6a00de959b5801108793b344ef2988ad%3frik%3dOlQAB0P4J80yTA%26riu%3dhttp%253a%252f%252fimg95.699pic.com%252fphoto%252f50070%252f5999.jpg_wh860.jpg%26ehk%3dnUrNDlAkDzUbcZyyRIpSCFDeeTPjyJnuR14jdQ%252fbE2w%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=554&expw=860&q=%e4%b8%96%e7%95%8c%e6%97%85%e6%b8%b8%e8%83%9c%e5%9c%b0&simid=608024751207230408&FORM=IRPRST&ck=AB34823F4C4354033A14752834B143E6&selectedIndex=1&itb=0">

显示自己的图片

<img src="自己图片的地址"> 

显示自己的图片:

        -自己项目中创建的static目录中

        -在页面上引用图片

                <img  src="/static/0.png" /> 

关于设置图片的高度和宽度

 < img src="图片地址"  style="height :100px; width: 200px"/>

划分

-块级标签

 <h1></h1>

<div></div>

-行内标签

<span></span>

<a></a>

<img />

嵌套

<div>

        <span>xxx</span>

        <img/>

        <a></a>

</div> 

5.列表

无序列表

<ul>

        <li>中国移动</li>

        <li>中国联通</li>

        <li>中国电信</li>

</ul> 

 有序列表

<ol>

        <li>中国移动</li>

        <li>中国联通</li>

        <li>中国电信</li>

</ol> 

6.表格

<table>

        <thead>

                 <tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr>

        </thead>

        <tbody>

                  <tr> <td>1</td> <td>张三</td> <td>26</td></tr>

                 <tr> <td> 2</td> <td>李四</td> <td>19</td></tr>

        </tbody>

</table>

7.input系列

<input type="text"/>

<input type="password"/>

<input type="file"/>

<input type="radio" name="n1">男

<input type="radio" name="n1">女

<input type="checkbox">篮球

<input type ="checkbox">足球

<input type ="checkbox">乒乓球

<input type="button" value="提交"> -->普通按钮

<input type = "submit" value="提交"> -->提交按钮

8.下拉框

<select>

         <option>北京</option>

        <option>上海</option>

        <option>重庆</option>

</select>

<select multiple>

         <option>北京</option>

        <option>上海</option>

        <option>重庆</option>

</select>

9.多行文本输入框

<textarea></textarea>

10.表单与提交

<form method="get" action="/xxx/xxx/xxx">

        用户名 :<input type="text" name="uu'/>

        密码:<input type="password" name="pp"/>

        <input type="submit" value="按钮名" >

</form>

初识CSS 

css 专门用来美化标签

-基础css 写简单界面

-模块,调试和修改

快速了解

<img src="..." style="height :100px"/>

<div style="color: red;">中国联通</div>

1.css应用方式

1.在标签上

<img src="..." style="height :100px"/>

<div style="color: red;">中国联通</div>

2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color:red;}</style>
</head>
<body>
<h1 class="c1">用户登录</h1>
</body>
</html>

3.在css文件中定义样式

.c1{height: 100px;color: red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href=".\common.css">
</head>
<body>
<h1 class="c1">用户登录</h1>
</body>
</html>

2.选择器

-ID选择器

#c1{

}

<div id="c1"></div>

-类选择器(最多)

.c1{

}

<div class='c1' ></div>

-标签选择器

div{

}

<div>xxx</div>

-属性选择器

input [type='text' ]{

        border:1px solid red;

}

.v1[ xx="123"]{

        color:gold;

}

<input type="text">

<input type="password">

<div class="v1" xx="123">a</div>

<div class="v1" xx="456">b</div>

-后代选择器

 .yy li{

        color: pink;

}

.yy > a{

        color: blue;

}

<div class="yy"><a>百度</a><div><a>谷歌</a></div><ul><li>中国</li><li>美国</li><li>苏联</li></ul></div>

3.样式

1.高度和宽度

height : 300px

width : 500px

注意事项:

·宽度 支持百分比

·行内标签:默认无效

·块级标签:默认有效

 2.字体设置

-颜色

-大小

-加粗

-字体

-水平居中

-垂直居中

color : green;

font-size: 50px;

font-weight:600;

font-family:Microsoft Yahei;

text-align : center

line-height: 59px

 

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

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

相关文章

Java 集合框架:ArrayList 的介绍、使用、原理与源码解析

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 013 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

刷代码随想录有感(106):动态规划——分割等和子集(01背包问题)

题干&#xff1a; 代码&#xff1a; class Solution { public:bool canPartition(vector<int>& nums) {int sum 0;for(int i : nums){sum i;}if(sum % 2 ! 0)return false;int target sum / 2;vector<int>dp(10001, 0);for(int i 0; i < nums.size(); …

Windows11和Ubuntu22双系统安装指南

一、需求描述 台式机电脑&#xff0c;已有Windows11操作系统&#xff0c;想要安装Ubuntu22系统&#xff08;版本任意&#xff09;。其中Windows安装在Nvme固态上&#xff0c;Ubuntu安装在Sata固态上&#xff0c;双盘双系统。开机时使用Grub控制进入哪个系统&#xff0c;效果图…

java(kotlin) ai框架djl

DJL&#xff08;Deep Java Library&#xff09;是一个开源的深度学习框架&#xff0c;由AWS推出&#xff0c;DJL支持多种深度学习后端&#xff0c;包括但不限于&#xff1a; MXNet&#xff1a;由Apache软件基金会支持的开源深度学习框架。 PyTorch&#xff1a;广泛使用的开源机…

Python进阶:从函数到文件的编程艺术!!!

第二章&#xff1a;Python进阶 模块概述 函数是一段可重复使用的代码块&#xff0c;它接受输入参数并返回一个结果。函数可以用于执行特定的任务、计算结果、修改数据等&#xff0c;使得代码更具模块化和可重用性。 模块是一组相关函数、类和变量的集合&#xff0c;它们被封…

第 2 章:Spring Framework 中的 IoC 容器

控制反转&#xff08;Inversion of Control&#xff0c;IoC&#xff09;与 面向切面编程&#xff08;Aspect Oriented Programming&#xff0c;AOP&#xff09;是 Spring Framework 中最重要的两个概念&#xff0c;本章会着重介绍前者&#xff0c;内容包括 IoC 容器以及容器中 …

Yum安装LAMP

查看当前80端口是否被占用 ss -tulanp | grep 80查询httpd是否在yum源中 yum info httpd安装httpd yum -y install httpd启动httpd服务&#xff0c;设置开机自启 systemctl enable httpd --now systemctl start httpd查看当前进程 ps aux | grep httpd查看当前IP&#xff…

【机器学习】大模型环境下的应用:计算机视觉的探索与实践

引言 随着数据量的爆炸性增长和计算能力的提升&#xff0c;机器学习&#xff08;Machine Learning&#xff0c;ML&#xff09;在计算机视觉&#xff08;Computer Vision&#xff0c;CV&#xff09;领域的应用日益广泛。特别是大模型&#xff08;Large Models&#xff09;如深度…

【Qt 6.3 基础教程 03】第一个Qt应用:Hello World

文章目录 前言创建项目编写代码main.cppmainwindow.cpp 编译和运行结果和调试扩展你的应用总结 前言 Qt编程之旅的第一个里程碑通常是构建一个简单的"Hello World"应用程序。在这个教程中&#xff0c;我们将指导你如何创建一个基本的Qt应用程序&#xff0c;它将显示…

自动化技术如何影响企业数据分析的发展

当今时代&#xff0c;企业普遍面临着转型的压力&#xff0c;这些挑战主要源于在科技和市场的双重压力下如何实现增长。当前&#xff0c;企业发展的趋势是紧追自动化的浪潮&#xff0c;并通过优化预算管理流程&#xff0c;推进系统和数据分析的现代化。在这一过程中&#xff0c;…

LoRA用于高效微调的基本原理

Using LoRA for efficient fine-tuning: Fundamental principles — ROCm Blogs (amd.com) 大型语言模型的低秩适配&#xff08;LoRA&#xff09;用于解决微调大型语言模型&#xff08;LLMs&#xff09;的挑战。GPT和Llama等拥有数十亿参数的模型&#xff0c;特定任务或领域的微…

怎样搭建serveru ftp个人服务器

首先说说什么是ftp&#xff1f; FTP协议是专门针对在两个系统之间传输大的文件这种应用开发出来的&#xff0c;它是TCP/IP协议的一部分。FTP的意思就是文件传输协议&#xff0c;用来管理TCP/IP网络上大型文件的快速传输。FTP早也是在Unix上开发出来的&#xff0c;并且很长一段…

Vue54-浏览器的本地存储webStorage

一、本地存储localStorage的作用 二、本地存储的代码实现 2-1、存储数据 注意&#xff1a; localStorage是window上的函数&#xff0c;所以&#xff0c;可以把window.localStorage直接写成localStorage&#xff08;直接调用&#xff01;&#xff09; 默认调了p.toString()方…

curl命令行发送post/get请求

文章目录 curl概述post请求get请求 curl概述 curl 是一个命令行实用程序&#xff0c;允许用户创建网络请求curl 在Windows、 Linux 和 Mac 上皆可使用 post请求 一个简单的 POST 请求 -X&#xff1a;指定与远程服务器通信时将使用哪种 HTTP 请求方法 curl -X POST http://ex…

中小企业使用CRM系统的优势有哪些

中小企业如何在竞争激烈的市场中脱颖而出&#xff1f;除了优秀的产品和服务&#xff0c;一个高效的管理工具也是必不可少的。而客户关系管理&#xff08;CRM&#xff09;系统正是这样一个能帮助企业提升客户体验、优化内部管理流程的重要工具。接下来&#xff0c;让我们一起探讨…

【Android面试八股文】Java的泛型中super 和 extends 有什么区别?

文章目录 Java的泛型中super 和 extends 有什么区别?这道题想考察什么?考察的知识点考生应该如何回答一、 extends二、super三、PECS原则3.1 解释 PECS 原则3.2 PECS原则的总结3.3 PECS原则的应用场景Java的泛型中super 和 extends 有什么区别? 这道题想考察什么? 掌握PE…

主流框架选择:React、Angular、Vue的详细比较

目前前端小伙伴经常使用三种广泛使用的开发框架&#xff1a;React、Angular、Vue - 来设计网站 Reactjs&#xff1a;效率和多功能性而闻名 Angularjs&#xff1a;创建复杂的应用程序提供了完整的解决方案&#xff0c;紧凑且易于使用的框架 Vuejs&#xff1a;注重灵活性和可重用…

Prometheus之图形化界面grafana与服务发现

前言 上一篇文章中我们介绍了Prometheus的组件&#xff0c;监控作用&#xff0c;部署方式&#xff0c;以及如何通过在客户机安装exporter再添加监控项的操作。 但是不免会发现原生的Prometheus的图像化界面对于监控数据并不能其他很好的展示效果。所以本次我们将介绍一…

Cookie-SameSite属性 前端请求不带cookie的问题解决方案

最近遇到了前端请求后端不带cookie的问题&#xff0c; 请求时header里面就是没有cookie 查看响应应该是这个问题 SameSite是一个cookie属性&#xff0c;用于控制浏览器是否在跨站点请求中发送cookie。它有三个可能的值&#xff1a; 1. Strict&#xff08;严格模式&#xff09…

ubuntu安装和应用以及要点难点

Ubuntu是一个基于Linux的免费开源操作系统,它以桌面应用为主,但同样适用于服务器和其他特定用途。以下是关于Ubuntu的详细介绍: 起源与名称: Ubuntu的名称来源于非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,体现了非洲传统的…