前端开发day1

沙沙沙沙沙水啦 發表於 2025-1-19 20:49:00

<h1 id="day1">day1</h1>
<pre><code>目的：开发一个平台（网站）
- 前端开发：HTML、CSS、JavaScript
- Web框架：接收请求并处理
- MySQL数据库：存储数据地方

快速上手：
基于Flask Web框架让你快速搭建一个网站出来。

深入学习：
基于Django框架（主要）
</code></pre>
<h2 id="1快速开发网站">1,快速开发网站</h2>
<pre><code>pip install flask
</code></pre>
<pre><code class="language-py">from flask import Flask

app = Flask(__name__)

# 创建了网址 /show/info 和函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
return "中国联通"

# 直接输入main回车，不用敲代码。
if __name__ == '__main__':
app.run()
</code></pre>
<ul>
<li>控制网页好看与否</li>
</ul>
<pre><code>浏览器可以识别很多标签+数据，例如：

<h1>中国</h1>    ->浏览器看见加大加粗
<span style='color:red;'>联通</span>->浏览器看见字体变红色

如果我们能把浏览器能识别的所有的标签都学会，我们在网站就可以控制页面到底长什么样子。
</code></pre>
<ul>
<li>Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。</li>
<li><code>render_template</code> 是 Flask 框架提供的一个函数，用于将 Python 代码与 HTML 模板相结合，从而生成动态的网页内容。</li>
</ul>
<pre><code class="language-py">from flask import Flask, render_template

app = Flask(__name__)

# 创建了网址 /show/info 和函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
# Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
# 默认：去当前项目目录的templates文件夹中找。
return render_template("index.html")

# 直接输入main回车，不用敲代码。
if __name__ == '__main__':
app.run()

</code></pre>
<h2 id="2浏览器能识别的标签">2,浏览器能识别的标签</h2>
<h3 id="21-编码">2.1 编码</h3>
<pre><code><meta charset="UTF-8">
</code></pre>
<h3 id="22-titlehead">2.2 title（head）</h3>
<pre><code><head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
</code></pre>
<h3 id="23-标题">2.3 标题</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119203841820-1604778156.png" alt="" loading="lazy"></p>
<h3 id="24-div和span">2.4 div和span</h3>
<pre><code class="language-html"><div>
内容
</div>

<span>abdsc</span>
</code></pre>
<ul>
<li>div,一个人独占一整行</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<div>一个人独占一整行</div>
<div>块级标签</div>
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119203913677-1500499538.png" alt="" loading="lazy"></p>
<ul>
<li>span，自己多大占多少。【行内标签、内联标签】</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的联通</title>
</head>
<body>
<span>自己多大占多少</span>
<span>行内标签</span>
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119203936356-1343588390.png" alt="" loading="lazy"></p>
<p>注意：这两个标签比较素 + CSS样式。</p>
<h3 id="练习">练习：</h3>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204009166-23232647.png" alt="" loading="lazy"></p>
<h3 id="25-超链接">2.5 超链接</h3>
<pre><code class="language-html">跳转到其他网站
<a href="https://www.chinaunicom.com/">点击跳转</a>
</code></pre>
<pre><code class="language-html">跳转到自己网站其他的地址
<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">查看更多</a>
</code></pre>
<pre><code class="language-html"># 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>
</code></pre>
<h3 id="26-图片">2.6 图片</h3>
<pre><code class="language-html"><img src="图片地址" />
</code></pre>
<pre><code class="language-html">
<img src="https://www.chinaunicom.com/_nuxt/img/logo.5e80d1e.png" />
</code></pre>
<pre><code class="language-html"> 显示自己的图片：
- 自己项目中创建：static目录，图片要放在static
- 在页面上引入图片
<img src="/static/peiqi.jpg" />
</code></pre>
<p>关于设置图片的高度和宽度</p>
<pre><code class="language-html"><img style="height:100px; width:200px;" src="https://www.chinaunicom.com/_nuxt/img/logo.5e80d1e.png" />
</code></pre>
<pre><code class="language-html"><img src="图片地址" style="height:10%; width:20%;" />
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204111045-850321735.png" alt="" loading="lazy"></p>
<h3 id="小结">小结</h3>
<ul>
<li>学习的标签</li>
</ul>
<pre><code class="language-html"><h1></h1> 用于定义 HTML 文档中的标题，<h1> 到 <h6> 的六个级别的标题，数字越大级别越低。
<div></div> div 是一个块级元素。
<span></span> span 是一个内联元素，用于在文档流中对文本或其他内容进行样式设置而不打断文本流。
<a></a> a 标签（锚点）用于创建超链接。
<img /> img 标签用于嵌入图像。这个标签是自闭合的，不需要结束标签。
</code></pre>
<ul>
<li>划分</li>
</ul>
<pre><code class="language-html">- 块级标签
<h1></h1>
<div></div>
- 行内标签
<span></span>
<a></a>
<img />
</code></pre>
<ul>
<li>嵌套</li>
</ul>
<pre><code class="language-html"><div>
<span>xxx</span>
<img />
<a></a>
</div>
</code></pre>
<p>案例：商品列表</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>商品列表</h1>
# 新的Tab页面打开
<a href="https://www.mi.com/service" target="_blank">
   <img src="/static/a1.jpg" style="width: 150px">
</a>

<a href="https://www.mi.com/service" target="_blank">
   <img src="/static/a2.png" style="width: 150px">
</a>

<a href="https://www.mi.com/service" target="_blank">
   <img src="/static/a3.jpg" style="width: 150px">
</a>

</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204151668-1908937821.png" alt="" loading="lazy"></p>
<h3 id="27-列表">2.7 列表</h3>
<pre><code class="language-html"> 
<h1>运营商列表</h1>
<ul>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ul>
</code></pre>
<pre><code class="language-html"> 
<h1>运营商列表</h1>
<ol>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ol>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204256890-1362897668.png" alt="" loading="lazy"></p>
<h3 id="28-表格">2.8 表格</h3>
<pre><code class="language-html"> <h1>数据表格</h1>

<table>
   <thead>
   <tr><th>ID</th><th>姓名</th> <th>年龄</th></tr>
   </thead>
   <tbody>
   <tr><td>0</td><td>沛齐</td><td>19</td> </tr>
         <tr><td>1</td><td>吴阳军</td><td>19</td> </tr>
         <tr><td>2</td><td>刘东</td><td>19</td> </tr>
         <tr><td>3</td><td>郭智</td><td>19</td> </tr>
         <tr><td>4</td><td>电摩</td><td>19</td> </tr>
   </tbody>
</table>
</code></pre>
<h3 id="案例">案例</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<table border="1">
   <thead>
         <tr>
            <th>ID</th>
            <th>头像</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>更多信息</th>
            <th>操作</th>
         </tr>
   </thead>

   <tbody>
         <tr>
            <td>1</td>
            <td>
               <img src="/static/1a.jpg" alt="" style="height: 50px">
            </td>
            <td>佩奇</td>
            <td>休息@live.com</td>
            <td>
               <a href="https://www.apple.com.cn/" target="_blank">查看详细</a>
            </td>
            <td>
               编辑删除
            </td>
         </tr>
         <tr>
            <td>2</td>
            <td>
               <img src="/static/1a.jpg" alt="" style="height: 50px">
            </td>
            <td>佩奇</td>
            <td>休息@live.com</td>
            <td>
               <a href="https://www.apple.com.cn/" target="_blank">查看详细</a>
            </td>
            <td>
               编辑删除
            </td>
         </tr>
         <tr>
            <td>3</td>
            <td>
               <img src="/static/1a.jpg" alt="" style="height: 50px">
            </td>
            <td>佩奇</td>
            <td>休息@live.com</td>
            <td>
               <a href="https://www.apple.com.cn/" target="_blank">查看详细</a>
            </td>
            <td>
               编辑删除
            </td>
         </tr>
         <tr>
            <td>4</td>
            <td>
               <img src="/static/1a.jpg" alt="" style="height: 50px">
            </td>
            <td>佩奇</td>
            <td>休息@live.com</td>
            <td>
               <a href="https://www.apple.com.cn/" target="_blank">查看详细</a>
            </td>
            <td>
               编辑删除
            </td>
         </tr>
         <tr>
            <td>5</td>
            <td>
               <img src="/static/1a.jpg" alt="" style="height: 50px">
            </td>
            <td>佩奇</td>
            <td>休息@live.com</td>
            <td>
               <a href="https://www.apple.com.cn/" target="_blank">查看详细</a>
            </td>
            <td>
               编辑删除
            </td>
         </tr>
   </tbody>
</table>
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204325237-278635231.png" alt="" loading="lazy"></p>
<h3 id="29--input系列7个">2.9input系列（7个）</h3>
<pre><code class="language-html"> <h1>输入内容</h1>
<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="checkbox">棒球

<input type="button" value="提交">
<input type="submit" value="提交">
</code></pre>
<h3 id="210-下拉框">2.10 下拉框</h3>
<p>单选下拉菜单 (<code><select></code>)</p>
<p>多选下拉菜单 (<code><select multiple></code>)</p>
<pre><code class="language-html"> <h1>下拉框</h1>
<select>
   <option>北京</option>
   <option>上海</option>
   <option>深圳</option>
</select>
<select multiple>
   <option>北京</option>
   <option>上海</option>
   <option>深圳</option>
</select>
</code></pre>
<h3 id="211-多行文本">2.11 多行文本</h3>
<p>用于创建多行文本输入控件，允许用户输入和编辑大量文本。</p>
<pre><code><textarea></textarea>
</code></pre>
<h3 id="案例用户注册">案例：用户注册</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>
用户名:<input type="text"/>
</div>
<div>
密码:<input type="password"/>
</div>
<div>
性别:
<input type="radio" name="n">男
<input type="radio" name="n">女
</div>
<div>
爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
</div>

<div>
城市:
<select>
   <option>北京</option>
   <option>上海</option>
   <option>深圳</option>
</select>
</div>

<div>
擅长领域:
<select multiple>
   <option>追剧</option>
   <option>刷抖音</option>
   <option>打游戏</option>
</select>
</div>

<div>
备注:<textarea></textarea>
</div>

<div>
<input type="button" value="button按钮">
<input type="submit" value="submit按钮">
</div>
</body>
</html>
</code></pre>
<h3 id="知识点回顾和补充">知识点回顾和补充</h3>
<p>1.网站请求的流程</p>
<pre><code>1 用户发起请求:输入URL 用户在浏览器地址栏输入一个 URL 或者点击一个链接。
2 DNS 解析:查找域名对应的IP地址浏览器首先需要将用户输入的域名（例如 www.example.com）转换成服务器的 IP 地址。
3 建立 TCP 连接:三次握手一旦获得了服务器的 IP 地址，浏览器会尝试与服务器建立 TCP 连接。

4 发送 HTTP/HTTPS 请求:创建并发送请求 TCP 连接建立后，浏览器会构建一个 HTTP 或 HTTPS 请求，并将其发送到服务器。请求中包含了请求的方法（如 GET、POST 等）。

5 服务器处理请求:接收并解析请求,生成响应内容。

6 返回 HTTP/HTTPS 响应: 构建并发送响应：服务器将响应打包成 HTTP 或 HTTPS 响应格式，其中包括状态行（表示请求结果的状态码）、响应头（提供有关响应的信息，如内容类型、长度等）和响应体（实际的数据，如 HTML 文档、JSON 数据等）。

7 浏览器接收并解析响应:浏览器接收到响应后，会检查状态码以确认请求是否成功。如果是成功的响应，浏览器会下载资源。下载完毕后，浏览器会解析这些资源并构建 DOM 树，然后应用样式规则、执行 JavaScript 代码，最终渲染出完整的网页(渲染页面)供用户查看。
8 关闭连接:一旦所有数据交换完成，浏览器和服务器之间的 TCP 连接通常会被关闭。
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204444698-1222907029.png" alt="" loading="lazy"></p>
<p>2.一大堆的标签</p>
<pre><code>h/div/span/a/img/ul/li/table/input/textarea/select
</code></pre>
<p>3.网络请求</p>
<ul>
<li>
<p>在浏览器的URL中写入地址，点击回车，访问。</p>
<p>浏览器会发送数据过去，本质上发送的是字符串：</p>
</li>
</ul>
<pre><code class="language-html">
GET 请求：主要用于获取数据，所有参数都包含在 URL 中，没有请求体。

"GET \explore HTTP\1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n..."


</code></pre>
<pre><code class="language-html">
POST 请求：通常用于提交数据，数据被放在请求体中，支持更大的数据量，并且可以隐藏敏感信息（虽然仍应加密传输）。

"POST \explore HTTP\1.1\r\nhost:...\r\nuser-agent\r\nContent-Type\r\nContent-Length\r\n数据..."


</code></pre>
<ul>
<li>
<p>浏览器向后端发送请求时</p>
<ul>
<li>
<p>GET请求</p>
<ul>
<li>
<p>现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。</p>
<p><strong>数据拼接在 URL 上</strong>：当使用 <code>GET</code> 方法时，所有要传递的数据都会作为查询参数附加到 URL 的末尾，格式为 <code>?key1=value1&key2=value2...</code>。</p>
</li>
<li>
<pre><code>https://www.sogou.com/web?query=安卓&age=19&name=xx
</code></pre>
<p>注意：GET请求数据会在URL中体现。数据直接显示在 URL 中，因此不适合用于发送敏感信息（如密码）</p>
</li>
</ul>
</li>
<li>
<p>POST请求【表单提交】</p>
<ul>
<li>现象：提交数据不在URL中而是在请求体中。</li>
</ul>
<p>    <strong>数据位于请求体中</strong>：与 <code>GET</code> 不同，<code>POST</code> 请求的数据包含在请求体里，而不是附加到 URL 上。这使得它可以携带更大量的数据，并且数据对用户不可见。</p>
<ul>
<li><strong>安全性</strong>：对于涉及敏感数据的操作，始终优先使用 <code>POST</code> 并确保通过 HTTPS 进行加密传输。</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="案例用户注册-1">案例：用户注册</h3>
<ul>
<li>
<p>新创建项目</p>
</li>
<li>
<p>创建Flask代码</p>
</li>
<li>
<p>页面上的数据，想要提交到后台：</p>
<ul>
<li>
<p>form标签包裹要提交的数据的标签。<code><form action="提交地址" method="请求方式get/post"></code></p>
</li>
<li>
<p>在form标签里面必须有一个submit(提交)标签。<code><input type="submit" value="submit按钮"></code></p>
</li>
<li>
<p>在form里面的一些标签：input/select/textarea。</p>
</li>
<li>
<p>一定要写name属性 <code><input type="text" name="username"/></code></p>
</li>
</ul>
</li>
</ul>
<p>表单 (<code><form></code>) ：是网页中用于收集用户输入的一种机制。通过定义一个 <code><form></code>元素，可以将多个输入控件（如文本框、按钮、选择列表等）组合在一起，指定这些数据如何被提交到服务器进行处理。</p>
<pre><code><form action="提交地址" method="请求方式get/post">

用户名：<input type="text"id="username" name="username"/>
         <input type="submit" value="submit按钮">
</form>
</code></pre>
<p>Py代码</p>
<p>通过method的不同选择不同的get或post请求</p>
<pre><code class="language-py">@app.route('/register', methods=['GET', "POST"])
def register():
# 接收用户通过GET形式发送过来的数据
if request.method == "GET":
   return render_template('register.html')

else:
   # 接收用户通过GET形式发送过来的数据
   user = request.form.get("user")
   pwd = request.form.get("pwd")
   gender = request.form.get("gender")
   hobby_list = request.form.getlist("hobby")
   city = request.form.get("city")
   skill_list = request.form.getlist("skill")
   more = request.form.get("more")
   print(user, pwd, gender, hobby_list, city, skill_list, more)
   # 将用户信息写入文件中实现注册、写入到excel中实现注册、写入数据库中实现注册

   # 2.给用户再返回结果
   return "注册成功"

if __name__ == '__main__':
app.run()
</code></pre>
<p>HTML代码：</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>

<form method="post" action="/register">
<div>
   用户名：<input type="text" name="user"/>
</div>
<div>
   密码：<input type="password" name="pwd"/>
</div>
<div>
   性别：
   <input type="radio" name="gender" value="1">男
   <input type="radio" name="gender" value="2">女
</div>
<div>
   爱好：
   <input type="checkbox" name="hobby" value="10">篮球
   <input type="checkbox" name="hobby" value="20">足球
   <input type="checkbox" name="hobby" value="30">乒乓球
   <input type="checkbox" name="hobby" value="40">棒球
</div>

<div>
   城市：
   <select name="city">
         <option value="bj">北京</option>
         <option value="sh">上海</option>
         <option value="sz">深圳</option>
   </select>
</div>

<div>
   擅长领域：
   <select name="skill" multiple>
         <option value="100">吃饭</option>
         <option value="101">睡觉</option>
         <option value="102">打球</option>
   </select>
</div>

<div>
   备注：<textarea name="more"></textarea>
</div>

<input type="submit" value="submit按钮">
</form>

</body>
</html>

</code></pre>
<h3 id="总结">总结</h3>
<ol>
<li>
<p>称呼HTML标签</p>
<pre><code>- 浏览器能够识别的标签（不专业）
- HTML标签。

什么是是HTML？超文本传输语言（与浏览器搭配）。浏览器能够识别这些标签，并根据它们来解析和显示网页内容。
HTTP（HyperText Transfer Protocol）负责在 Web 上传输这些文档的协议。
</code></pre>
</li>
<li>
<p>HTML标签（默认格式样式、以后通过手段可以修改）</p>
</li>
<li>
<p>HTML标签与编程语言无关</p>
<p>但它经常与其他编程语言一起使用，以构建动态网站和应用程序。以下是一些常见组合：</p>
<ul>
<li>java + HTML</li>
<li>c# + HTML</li>
<li>php + HTML</li>
<li>python + HTML- Python 可以与 Flask、Django 等框架一起使用，编写后端逻辑并渲染 HTML 模板。</li>
</ul>
</li>
<li>
<p>提醒：HTML标签比较多，标签还有很多很多，不必逐一学会。</p>
<p>重点学习常用标签：确实，HTML 标签种类繁多，但并不是所有标签都需要掌握。作为初学者，应该重点关注那些最常用的标签，比如：</p>
</li>
</ol>
<pre><code class="language-html">文档结构标签：<html>, <head>, <body>, <header>, <footer>, <nav>, <article>, <section>
文本内容标签：<h1> 到 <h6>, <p>, <span>, <div>, <pre>, <code>
链接和图像：<a>, <img>
表单元素：<form>, <input>, <textarea>, <button>, <select>, <option>
列表：<ul>, <ol>, <li>
表格：<table>, <tr>, <th>, <td>
多媒体：<video>, <audio>
元数据：<meta>, <title>, <link>
</code></pre>
<h2 id="3css样式">3,css样式</h2>
<p>css，专门用来“美化”标签。</p>
<ul>
<li>基础CSS，写简单页面 & 看懂 & 改。</li>
<li>模块，调整和修改。</li>
</ul>
<h3 id="31快速了解">3.1快速了解</h3>
<pre><code class="language-html"><img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>
</code></pre>
<h3 id="32-css应用方式">3.2 CSS应用方式</h3>
<ol>
<li>在标签上</li>
</ol>
<pre><code class="language-html"><img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>
</code></pre>
<p>2.在head标签中写style标签（*）</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         color:red;
   }
</style>
</head>
<body>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>
</code></pre>
<p> 3.写到文件中（*）</p>
<pre><code class="language-html">
.c1{
height:100px;
}

.c2{
color:red;
}
</code></pre>
<pre><code class="language-html"><!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>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
</body>
</html>
</code></pre>
<h4 id="案例flask中的应用登录注册">案例：flask中的应用（登录注册）</h4>
<pre><code class="language-html">
.xx{
color: green;
}
</code></pre>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/commons.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
<form method="post" action="/register">
<div>
   用户名：<input type="text" name="user"/>
</div>
<div>
   密码：<input type="password" name="pwd"/>
</div>
<div>
   性别：
   <input type="radio" name="gender" value="1">男
   <input type="radio" name="gender" value="2">女
</div>
<div>
   爱好：
   <input type="checkbox" name="hobby" value="10">篮球
   <input type="checkbox" name="hobby" value="20">足球
   <input type="checkbox" name="hobby" value="30">乒乓球
   <input type="checkbox" name="hobby" value="40">棒球
</div>

<div>
   城市：
   <select name="city">
         <option value="bj">北京</option>
         <option value="sh">上海</option>
         <option value="sz">深圳</option>
   </select>
</div>

<div>
   擅长领域：
   <select name="skill" multiple>
         <option value="100">吃饭</option>
         <option value="101">睡觉</option>
         <option value="102">打球</option>
   </select>
</div>

<div>
   备注：<textarea name="more"></textarea>
</div>

<input type="submit" value="submit按钮">
</form>

</body>
</html>
</code></pre>
<h4 id="问题用flask框架开发不方便">问题：用Flask框架开发不方便</h4>
<ul>
<li>
<p>每次都需要重启</p>
</li>
<li>
<p>规定有些文件必须要放在特定的文件夹</p>
</li>
<li>
<p>新创建一个页面</p>
<ul>
<li>函数</li>
<li>HTML文件</li>
</ul>
<p>有没有一种方式，可以让我快速的编写前端的代码并查看效果呢，最后再讲页面集成到Flask中。</p>
<p>Pycharm为我们提供了一种非常便捷开发前端页面的工具。</p>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204537592-969954761.png" alt="" loading="lazy"></p>
</li>
</ul>
<h4 id="使用-css-的三种方式">使用 CSS 的三种方式</h4>
<p>1.<strong>内联样式</strong>：直接在 HTML 标签中使用 <code>style</code> 属性定义样式。</p>
<pre><code><p style="color: blue; font-size: 20px;">这是一个段落。</p>
</code></pre>
<p>2.<strong>内部样式表</strong>：将 CSS 规则放在 HTML 文档的 <code><head></code> 部分内的 <code><style></code> 标签中。</p>
<pre><code><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         color: brown;
   }
   .c2{
         height: 50px;
   }
</style>
</head>
</code></pre>
<p>3.<strong>外部样式表</strong>：创建一个或多个 <code>.css</code> 文件，然后通过 <code><link></code> 标签将其链接到 HTML 文档中。</p>
<pre><code><head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/commons.css">
</head>
</code></pre>
<h3 id="33-选择器">3.3 选择器</h3>
<ul>
<li>
<p><strong>ID选择器</strong>通过 <code>#</code> 和 ID 名称匹配具有唯一 <code>id</code> 属性的元素。</p>
<pre><code class="language-css">#c1{

}

<div id='c1'></div>
</code></pre>
</li>
<li>
<p><strong>类选择器</strong>（最多）通过 <code>.</code> 和类名匹配带有特定 <code>class</code> 属性的元素。</p>
<pre><code class="language-css">.c1{

}

<div class='c1'></div>
</code></pre>
</li>
<li>
<p>标签选择器/ <strong>元素选择器</strong>：基于 HTML 标签名称选择元素。</p>
<pre><code class="language-css">div{

}

<div>这是一个 div。</div>
</code></pre>
</li>
<li>
<p><strong>属性选择器</strong></p>
<p>根据元素的属性及其值来选择元素。它可以非常精确地定位特定类型的元素。</p>
<pre><code class="language-css">input{
border: 1px solid red;
}
.v1{
color: gold;
}
</code></pre>
<pre><code class="language-html"><input type="text">
<input type="password">

<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>


</code></pre>
</li>
<li>
<p><strong>后代选择器</strong> 选择作为某个元素后代的所有元素。</p>
<pre><code class="language-css">.yy li{
color: pink;
}

.yy > a{
color: dodgerblue;
}


</code></pre>
<pre><code class="language-html"><div class="yy">
<a>百度</a>
<div>
   <a>谷歌</a>
</div>
<ul>
   <li>美国</li>
   <li>日本</li>
   <li>韩国</li>
</ul>
</div>
</code></pre>
</li>
<li>
<p><strong>伪类选择器</strong>：针对元素的特定状态进行选择，例如鼠标悬停 (<code>:hover</code>) 或焦点 (<code>:focus</code>)</p>
<pre><code class="language-css">a:hover {
color: orange;
}
</code></pre>
<pre><code class="language-html"><a href="#">链接文本</a>
</code></pre>
<p>常见伪类：</p>
<pre><code class="language-html">常见伪类：
:link 和 :visited：分别应用于未访问和已访问的链接。
:hover：当用户将鼠标悬停在元素上时应用。
:active：当元素被激活（如点击按钮时）时应用。
:focus：当元素获得焦点时应用，通常用于表单控件。
:nth-child() 和 :nth-of-type()：用于选择特定位置的兄弟元素。
::before 和 ::after：用于在元素内容之前或之后插入生成的内容。
</code></pre>
<p>关于选择器：</p>
<p>多：类选择器、标签选择器、后代选择器<br>
少：属性选择器、ID选择器</p>
</li>
</ul>
<p>关于多个样式 & 覆盖的问题：</p>
<p><strong>CSS 层叠顺序</strong></p>
<pre><code class="language-html">用户代理样式（浏览器默认样式） < 用户自定义样式 < 外部样式表 < 内部样式表 < 内联样式。

优先级:
- ID 选择器 (#id) > 类选择器（.class）、属性选择器 ()、伪类 (:hover) > 类型选择器（tag）、伪元素 (::before, ::after)

- 组合使用的选择器将累加其各个部分的特异性。
</code></pre>
<p>关于多个样式 & 覆盖的问题：</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         color: red;
         border: 1px solid red;
   }
   .c2{
         font-size: 28px;
         color: green;
   }
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>

</code></pre>
<p>补充：下面的不要覆盖我。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         color: red !important;
         border: 1px solid red;
   }
   .c2{
         font-size: 28px;
         color: green;
   }
</style>
</head>
<body>
<div class="c1 c2">中国联通</div>
</body>
</html>

</code></pre>
<h3 id="34-样式">3.4 样式</h3>
<h4 id="1-高度和宽度">1. 高度和宽度</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
height: 300px;
width: 500px;
}
</style>
</head>
<body>
<div class="c1">中国</div>
<div>联通</div>
</body>
</html>
</code></pre>
<p>注意事项：</p>
<ul>
<li>宽度，支持百分比。</li>
<li>行内标签：默认无效</li>
<li>块级标签：默认有效（霸道，右侧区域空白，也不给你占用）</li>
</ul>
<h4 id="2-块级和行内标签">2. 块级和行内标签</h4>
<ul>
<li>块级</li>
<li>行内</li>
<li>css样式：标签    <code>display:inline-block</code></li>
</ul>
<p>    希望某个元素既有行内元素的特性（如不独占一行），又具备块级元素的某些特性（如能够设置宽度和高度）。这时可以使用 CSS 的 <code>display: inline-block</code> 属性。</p>
<p>示例：行内&块级特性</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         display: inline-block;

         height: 100px;
         width: 300px;
         border: 1px solid red;
   }
</style>
</head>
<body>
<span class="c1">中国</span>

<span class="c1">联通</span>

<span class="c1">联通</span>

<span class="c1">联通</span>
</body>
</html>
</code></pre>
<p>示例：块级和行内标签的设置</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .inline-div {
         display: inline;
   }
   .block-span {
         display: block;
   }
</style>
</head>
<body>
<div class="inline-div">中国</div> 
<span class="block-span">联通</span>
</body>
</html>
</code></pre>
<p>注意：块级 + 块级&行内。</p>
<h4 id="3-字体设置">3. 字体设置</h4>
<ul>
<li>颜色</li>
<li>大小</li>
<li>加粗</li>
<li>字体格式</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         color: #00FF7F;
         font-size: 58px;
         font-weight: 600;
         font-family: Microsoft Yahei;
   }
</style>
</head>
<body>
<div class="c1">中国联通</div>
<div>中国移动</div>
</body>
</html>
</code></pre>
<h4 id="4-文字对齐方式">4. 文字对齐方式</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .c1{
         height: 59px;
         width: 300px;
         border: 1px solid red;

         text-align: center; /* 水平方向居中 */
         line-height: 59px; /* 垂直方向居中 */
   }
</style>
</head>
<body>
<div class="c1">佩奇</div>
</body>
</html>
</code></pre>
<h4 id="5-浮动">5. 浮动</h4>
<p>1.使用了 <code>float: right</code> 来使一个 <code><span></code> 元素浮动到其父容器的右侧</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
   <span>左边</span>
   <span style="float: right">右边</span>
</div>
</body>
</html>
</code></pre>
<p>div默认块级标签独占一行（霸道），如果浮动起来，就不一样了。</p>
<p>2.展示了如何使用 <code>float: left</code> 创建一个多列布局：</p>
<p> 每个 <code>.item</code> 都被设置为左浮动，它们会在同一行上排列，直到没有足够的空间为止，然后自动换行到下一行。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .item{
         float: left;
         width: 280px;
         height: 170px;
         border: 1px solid red;
   }
</style>
</head>
<body>
<div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
</div>
</body>
</html>
</code></pre>
<p>如果你让标签浮动起来之后，就会脱离文档流。</p>
<ol start="3">
<li><strong>脱离文档流与清除浮动</strong></li>
</ol>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .item {
         float: left;
         width: 280px;
         height: 170px;
         border: 1px solid red;
   }
</style>
</head>
<body>
<div style="background-color: dodgerblue">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div style="clear: both;"></div>
</div>
<div>你好呀</div>
</body>
</html>


</code></pre>
<h4 id="6内边距padding">6.内边距（<code>padding</code>）</h4>
<p>用于设置元素内容与其边框之间的空间的属性。可以让元素内部的内容与边框保持一定的距离。</p>
<pre><code class="language-html">
padding: 10px 20px 30px 40px;
</code></pre>
<pre><code class="language-html">
padding-top：设置顶部内边距。
padding-right：设置右侧内边距。
padding-bottom：设置底部内边距。
padding-left：设置左侧内边距。
</code></pre>
<pre><code class="language-html">

像素 (px)：固定宽度，不受其他因素影响。
百分比 (%)：相对于父元素的宽度（水平方向）或高度（垂直方向）。注意，垂直方向的百分比是基于父元素的宽度计算的。
相对长度单位 (em, rem)：根据字体大小计算，em 相对于当前元素的字体大小，而 rem 相对于根元素 (html) 的字体大小。
</code></pre>
<p>内边距，我自己的内部设置一点距离。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .outer {
         border: 1px solid red;
         height: 200px;
         width: 200px;

         padding-top: 20px;
         padding-left: 20px;
         padding-right: 20px;
         padding-bottom: 20px;
   }
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
   小朋友你是否有很多问号
</div>
</div>
</body>
</html>
</code></pre>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
   .outer {
         border: 1px solid red;
         height: 200px;
         width: 200px;
/*可以单独用padding上、右、下、左内边距都会是20px;*/
         padding: 20px;
         /*或设置不同的内边距: padding: 20px 10px 5px 20px;*/

   }
</style>
</head>
<body>
<div class="outer">
<div style="background-color: gold;">听妈妈的话</div>
<div>
   小朋友你是否有很多问号
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="7外边距margin">7.外边距(<code>Margin</code>）</h4>
<p>外边距，我与别人加点距离。</p>
<p><code>margin</code> 属性可以接受一个或多个值来分别设置四个方向上的外边距：</p>
<pre><code class="language-html">margin: 10px;
/* 按顺时针顺序依次为上、右、下、左。*/
margin: 10px 20px 30px 40px;
</code></pre>
<p><code>margin</code> 属性可以使用多种单位：</p>
<ul>
<li><strong>像素 (<code>px</code>)</strong>：固定宽度，不受其他因素影响。</li>
<li><strong>百分比 (<code>%</code>)</strong>：相对于父元素的宽度（水平方向）或高度（垂直方向）。注意，垂直方向的百分比是基于父元素的宽度计算的。</li>
<li><strong>相对长度单位 (<code>em</code>, <code>rem</code>)</strong>：根据字体大小计算，<code>em</code> 相对于当前元素的字体大小，而 <code>rem</code> 相对于根元素 (<code>html</code>) 的字体大小。</li>
<li><strong>自动 (<code>auto</code>)</strong>：让浏览器根据需要自动调整外边距，常用于居中对齐块级元素。</li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>
</code></pre>
<h3 id="案例小米商场">案例：小米商场</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
      /* 清除 body 标签默认的外边距 */
   body {

         margin: 0;/* 默认情况下，body 元素会有一定的外边距，这里将其设置为 0，使页面内容紧贴浏览器窗口边缘 */
   }

   .header {
         background: #333;
   }
      /* 定义容器的宽度和居中对齐 */
   .container {
         width: 1226px;
         margin: 0 auto;/* 上下外边距为 0，左右外边距自动调整，使容器在父元素内水平居中 */
   }
      /* 使用浮动布局来排列菜单和账户链接，实现两侧对齐 */
   .header .menu {
         float: left; /* 将菜单项左浮动，使其靠左对齐 */
         color: white;
   }

   .header .account {
         float: right;/* 将账户链接右浮动，使其靠右对齐 */
         color: white;
   }

   .header a {
         color: #b0b0b0;
         line-height: 40px;
         display: inline-block; /* 将链接设置为行内块级元素，允许设置宽度和高度，并且可以与其他行内元素在同一行内流动 */
         font-size: 12px;
         margin-right: 10px;/* 右边距设置为 10px，使链接之间有一定的间距 */
   }
</style>
</head>
<body>

<div class="header">
<div class="container">
   <div class="menu">
         <a>小米商城</a>
         <a>MIUI</a>
         <a>云服务</a>
         <a>有品</a>
         <a>开放平台</a>
   </div>
   <div class="account">
         <a>登录</a>
         <a>注册</a>
         <a>消息通知</a>
   </div>
      
   <div style="clear: both"></div>
</div>
</div>

</body>
</html>
</code></pre>
<h2 id="总结-1">总结</h2>
<ul>
<li>
<p>body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？</p>
<pre><code class="language-html">body{
margin: 0;
}
</code></pre>
</li>
<li>
<p>内容居中</p>
<ul>
<li>
<p>文本居中，文本会在这个区域中居中。</p>
<pre><code class="language-html"><div style="width: 200px; text-align: center;">武沛齐</div>
</code></pre>
</li>
<li>
<p>区域居中，首先自己要有宽度 + <code>margin-left:auto;margin-right:auto</code></p>
<pre><code class="language-html">.container{
width: 980px;
margin: 0 auto;/*一般auto自动调整左右外边距*/
}

<div class="container">
adfasdf
</div>
</code></pre>
</li>
</ul>
</li>
<li>
<p>父亲没有高度或没有宽度，会被孩子的高度或宽度支撑起来。</p>
</li>
<li>
<p>如果存在浮动，一定记得加入。加在和浮动的兄弟节点下面：</p>
<pre><code class="language-html"> <div style="background-color: dodgerblue">
   <div class="item"></div>
   <div class="item"></div>
   <div style="clear: both;"></div>
</div>
</code></pre>
</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204725273-138045929.png" alt="" loading="lazy"></p>
<ul>
<li>如果想要用别人的样式。</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202501/3582730-20250119204738208-812590176.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/LYcnbky/p/18679950

頁: [1]

琼殿技术论坛's Archiver

前端开发day1