前端学习01

  • 开发
  • 37

1.浏览器能识别的标签

1.1 编码（head）

<meta charset="UTF-8">

1.2 title（head）

<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>

1.3 标题

<!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>

1.4 div和span

<div>内容</div>

<span>asdfa</span>

  • div，一个人占一整行。【块级标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <div>山东蓝翔</div>
    <div>挖掘机哪家强</div>
</body>
</html>

  • span，自己多大占多少。【行内标签、内联标签】

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通</title>
</head>
<body>
    <span>山东蓝翔</span>
    <span>挖掘机哪家强</span>
</body>
</html>

注意：这两个标签比较素 + CSS样式。

1.4.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>

跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

# 当前页面打开
<a href="/get/news">点击跳转</a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转</a>

1.4.6 图片

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

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

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

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

小结

  • 学习的标签

    <h1></h1>
<div></div>
<span></span>
<a></a>
<img />

  • 划分

    - 块级标签
	<h1></h1>
	<div></div>
- 行内标签
	<span></span>
    <a></a>
    <img />

  • 嵌套

    <div>
    <span>xxx</span>
    <img />
    <a></a>
</div>

案例：商品列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>商品列表</h1>

<a href="https://www.mi.com/redmiwatch2" target="_blank">
    <img src="/static/a1.jpeg" style="width: 150px">
</a>

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

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

</body>
</html>

2.4.7 列表

<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>

<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

1.4.8 表格

<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

1.4.9 input系列（7个）

<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="提交">  -->提交表单

1.4.10 下拉框

<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

1.4.11 多行文本

<textarea></textarea>

案例：用户注册

<!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">男
    <input type="radio">女
</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>
        <option>刷抖音</option>
    </select>
</div>

<div>
    备注：<textarea></textarea>
</div>

<div>
    <input type="button" value="button按钮">
    <input type="submit" value="submit按钮">
</div>
</body>
</html>

案例：用户注册

  • 新创建项目

  • 创建Flask代码

    from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/register', methods=['GET', "POST"])
def register():
    if request.method == "GET":
        return render_template('register.html')

    else:
        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()

  • 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>

案例：登录()

见代码示例。

页面上的数据，想要提交到后台：

  • form标签包裹要提交的数据的标签。
    • 提交方式：method="get"
    • 提交的地址：action="/xxx/xxx/xx"
    • 在form标签里面必须有一个submit标签。
  • 在form里面的一些标签：input/select/textarea
    • 一定要写name属性 <input type="text" name="uu"/>

2.CSS样式

css，专门用来“美化”标签。

  • 基础CSS，写简单页面 & 看懂 & 改。
  • 模块，调整和修改。

2.1 快速了解

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

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

2.2 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>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>
3.写到文件中（*）
.c1{
   
    height:100px;
}

.c2{
   
    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>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3.3 选择器

  • ID选择器

    #c1{
     
    
}

<div id='c1'></div>

  • 类选择器（最多）

    .c1{
     
    
}

<div clss='c1'></div>

  • 标签选择器

    div{
     
    
}

<div>xxx</div>

  • 属性选择器

    input[type='text']{
     
	border: 1px solid red;
}
.v1[xx="456"]{
     
	color: gold;
}

    <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>

  • 后代选择器

    .yy li{
     
    color: pink;
}
.yy > a{
     
    color: dodgerblue;
}

    <div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

关于选择器：

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

2.4 样式

1. 高度和宽度
.c1{
   
    height: 300px;
    width: 500px;
}

注意事项：

  • 宽度，支持百分比。
  • 行内标签：默认无效
  • 块级标签：默认有效（霸道，右侧区域空白，也不给你占用）
2. 块级和行内标签
  • 块级
  • 行内
  • css样式：标签 -> display:inline-block

示例：行内&块级特性

<!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>

示例：块级和行内标签的设置

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

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

注意：块级 + 块级&行内。

3.字体设置
  • 颜色
  • 大小
  • 加粗
  • 字体格式
<!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>
4.文字对齐方式
<!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>
5.浮动
<!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>
6.内边距

内边距，我自己的内部设置一点距离。

<!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>

<!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;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</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 10px 5px 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>
7.外边距

外边距，我与别人加点距离。

<!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>
阅读全部

相关推荐

  1. 前端学习01

    2024-02-06 20:20:03       38 阅读

  2. 前端学习03

    2024-02-06 20:20:03       43 阅读

  3. 前端学习02

    2024-02-06 20:20:03       46 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-06 20:20:03       98 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-06 20:20:03       106 阅读

  9. 在Django里面运行非项目文件

    2024-02-06 20:20:03       87 阅读

  19. Python语言-面向对象

    2024-02-06 20:20:03       96 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-02-06 20:20:03       91 阅读

热门阅读

  1. 简单的Udp服务器

    2024-02-06 20:20:03       48 阅读

  10. LeetCode--55

    2024-02-06 20:20:03       55 阅读

  13. 【RK3399 Android10, 支持温控风扇】

    2024-02-06 20:20:03       38 阅读

  28. iview 页面中判断溢出才使用Tooltip组件

    2024-02-06 20:20:03       54 阅读

  29. 【python】用keyboard进行键盘监控

    2024-02-06 20:20:03       47 阅读