前端知识与基础应用#2-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端知识与基础应用#2。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

标签的分类

关于标签我们可以分为：

单标签：img, br hr

双标签：a，h,div

按照属性可分为：

块儿标签（自己独自占一行）：h1-h6, p,div

行内（内联）标签（自身多大就占多少）：a, span,u,i,b

当我们输入h标签和a标签时可以看到

前端知识与基础应用#2,前端

我们所输入的结果是这样的，其实这就是块儿标签和行内标签的区别前端知识与基础应用#2,前端

div标签和span标签

div和span标签单独拿出来是没有任何意义的，主要的作用是页面布局，在布局当中

div的作用是占位置布局

span是文本布局

标签的嵌套

标签之间是可以互相嵌套的，块儿级元素是可以嵌套所有的标签，要注意的是p标签不能嵌套块儿级元素，但是可以嵌套行内元素

行内元素只能嵌套行内元素，不能嵌套块儿级元素

针对前端来说不会轻易的报错，如果我们写的不对，只会没有对应的效果

例：

我们以小米商城为例：在小米商城中可以发现这些都是使用div用来占位的，而span是文本占位

并且使用了标签的嵌套。

前端知识与基础应用#2,前端

img标签

关键字 src

img标签是展示图片的，如果width设置了width=“500px” height=“200”，如果不一致则会出现变形失真，所以一般情况下只写一个就行。

当图片损坏时，在alt中填写内容时会发现

我们也可以不使用外链，使用本地的图片

这样就出来了

当地址文件不在当前文件夹内时，我们可以使用

如果在上一级时，也可以使用

总结：src：

1. 可以使用外链的地址

2。可以使用本地的地址

title：
鼠标悬浮的时候显示的内容(是所有标签都要的)
width: 图片的宽度
height：图片的高度

alt：当图片不存在的时候，显示的内容

a标签

关键字 href

target 后面如果是_self 自己直接跳转到页面了，但是如果是_blank 则会新建页面然后跳转

前端知识与基础应用#2,前端

标签自带的两种属性

id 值：一个文本中只能有唯一的id值，id值不能重复

class 值：一个标签可以有多个class值，一个class值可以被多个标签使用

当我们使用标签c1来找，可以找到d1，d3 和d4.想要使用id值，必须使用#查找

想要使用class值时使用点（.查找）

<div id="d1" class="c1"></div>
<div id="d2" class="c2"></div>
<div id="d3" class="c1 c2 c3"></div>
<div id="d4" class="c1"></div>

列表

关键字<ul>

无序列表

<body>
<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

</body>
可以更改上面的符号
<body>
<ul type="circle">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

</body>
type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

有序列表

关键字：<ol><ol>

区别就是加上了序号，使用type可以更改
<ol type="I">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ol>
type属性：

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

标题列表

关键字<dl>

  </ol>
  <dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
  </dl>
</body>

表格

添加多行数据：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
  <thead>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>age</th>
    <th>gender</th>
    <th>salary</th>
  </tr>

  </thead>

  <tbody>
  <tr>
    <td>1</td>
    <td>kiki</td>
    <td>21</td>
    <td>female</td>
    <td>22222</td>
  </tr>
   <tr>
    <td>2</td>
    <td>kiki1</td>
    <td>22</td>
    <td>male</td>
    <td>12222</td>
  </tr> <tr>
    <td>3</td>
    <td>lll</td>
    <td>25</td>
    <td>female</td>
    <td>22242</td>
  </tr>

  </tbody>
</table>

</body>
</html>
加上边框结果<table 属性>

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

form表单标签

input加上属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
<!--  使用div或p都可以-->
  <div>
<!--    <lable for=""></lable>点击后直接选中填写，绑定id值-->
    <label for="1">
      账号:<input type="text" id="1">
    </label>

  </div>
  <div>
    <label for="2">
<!--      type=password：所填密码使用密文显示-->
      密码：<input type="password" id="2">
    </label>
    <p>
      <label for="3">
<!--      type=date：表示日期-->
      日期：<input type="date" id="3">
    </label>
    </p>
    <p>
      <lable>
        这是按钮：<input type="button" value="普通按钮">
      </lable>
    </p>
    <p>
<!--      添加复选(多选)-->
      <input type="checkbox"> 读书
      <input type="checkbox"> 游戏
      <input type="checkbox"> 足球

    </p>
    <p>
<!--      添加单选，需要id一致-->
     <input type="radio" name="gender" /> 男
     <input type="radio" name="gender" /> 女
     <input type="radio" name="gender" /> 未知
    </p>
    <p>
      <input type="submit" value="登录">
      <input type="reset">
<!--      选择单个文件-->
<!--      <input type="file">-->
<!--      选择多个文件-->
        <input type="file"multiple>
    </p>
    <p>
      <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">安徽</option>
      </select>
    </p>

  </div>

</form>
</body>
</html>

结果：

前端知识与基础应用#2,前端

<input> 元素会根据不同的 type 属性，变化为多种形态

前端知识与基础应用#2,前端

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值

- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值

checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

<p>
      <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">安徽</option>
      </select>
    </p>

属性：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

验证form表单朝后端提交数据

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index">

  <div>
后端：
from flask import Flask,request
app = Flask(__name__)

#路由：网络的路径
@app.route('/index',methods=['GET','POST'])    # 默认情况下只允许get提交加上methods=['GET', 'POST']
def index():
    print('sasas')
    print(request.form)    # 接受post提交过来的数据
    print(request.files)   # 接受文件的
    return'index'
app.run(
<form action="">
   action: 填写的是后端提交的地址

这里你写什么地址就朝这个地址提交数据，应该填写后端的地址
1. 什么都不写：朝当前地址提交
2. 全写：http://127.0.0.1:5000/index/ 朝这个地址提交
3. 只写后缀
   /index/-------->IP:PORT/index

后端的结果就是所填的内容

form表单要想把数据提交到后端，每一个标签都要有一个name属性

name的属性值就是提交到后端数据的key值，用户输入的内容就是value值

针对于复选框、单选框标签都应该有一个value属性，用于区别前端用户选择的哪个选项

1. 请求方式必须是post
2. 数据编码方式：
   1. application/x-www-form-urlencoded
2. multipart/form-data
3. json

3. 编码方式必须是multipart/form-data才能提交问价
4. urlencoded只能够提交不是文件的数据，form-data是可以提交普通数据和文件数据
5. urlencoded形式的数据长什么样子：
   username=&password=&date=&hidden=123&myfile=&city=

6. form-data编码格式的数据：
   username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件数据
"""对于form-data提交的数据，后端还是在form里面去普通数据，而在files里面去文件数据"""
7. form表单不能够提交json数据
8. 如果想提交json格式的数据：Ajax技术、第三方的api工具postman文章来源地址https://www.toymoban.com/news/detail-734120.html