初识前端开发

m0_53944811

已于 2024-06-14 21:54:50 修改

阅读量377

点赞数 4

文章标签： html

于 2024-06-12 13:02:26 首次发布

本文链接：https://blog.csdn.net/m0_53944811/article/details/139623202

版权

目的：开发一个网站

-前端开发：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>

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>