2. HTML格式模板基础，以及网络请求概述

NH4NO3nice

已于 2022-08-20 10:50:36 修改

阅读量2.4k

点赞数 1

分类专栏： # HTML基础语法 Django网页开发文章标签： html 前端 javascript

于 2022-08-20 09:35:03 首次发布

本文链接：https://blog.csdn.net/NH4NO3nice/article/details/126435803

版权

Django网页开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

HTML基础语法

2 篇文章 0 订阅

订阅专栏

文章目录

HTML格式模板基础
网络请求

HTML格式模板基础

html文件中的内容能被网页识别，显示为可读的内容，类似于markdown，有一定的语法。

1. HTML文件编码和标题

编码格式和标题都放在HTML文件中的<head> </head>当中

<head>
    <meta charset="UTF-8">  # 文件的编码格式
    <title>国奖答辩</title>  # 设置网页标题
</head>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imYVYJGa-1660957746802)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814092249129.png)]$

2. 用于给用户展示的标签

2.1 HTML标题

除编码格式和标题放在<head> </head>当中外，其他的放在<body></body>里面；

在HTML文件中，标题由<hx></hx>包裹，x表示几级标题；

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-upK4uhx3-1660957746804)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814093530045.png)]$

2.2 块标签div

<div></div> 中的内容会独占一行

<body>
	<div>尊敬的各位评委</div>
    <div>尊敬的各位老师</div>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jGHObGv-1660957746804)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814093757450.png)]$

2.3 行内标签span

<span></span> 中的内容自己有多大占多大；

若两个<span></span> 分行写，则在显示的时候会默认在中间以一个空格隔开；

<body>
    <span>尊敬的各位评委</span>
    <span>尊敬的各位老师</span>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZFCT3uDW-1660957746805)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814094231531.png)]$

但若两个<span></span> 写在同一行，则在显示的时候会连在一起，即使在html里面手动加了空格；

  ```html
  <body>
      <span style="color:red">尊敬的各位评委</span><span>尊敬的各位老师</span>
  </body>
  ```

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JVoZ8aT-1660957746805)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814094452301.png)]$

2.4 HTML超链接

<!-- 跳转到其他网站 -->
<a href='完整网址'>点击跳转</a>
<!-- 示例 -->
<a href='https://www.baidu.com/'>点击跳转</a>

<!-- 跳转到自己的网站 -->
<a href='完整网址 or 简写'>点击跳转</a>
<!-- 示例 -->
<a href='http://127.0.0.1:8000/2/'>点击跳转</a>
<a href='/2/'>点击跳转</a>

<!-- 当前页面打开 -->
<a href='完整网址'>点击跳转</a>

<!-- 在新的页面打开 -->
<a href='完整网址' target='_blank'>点击跳转</a>

2.5 HTML图片

<!-- 自闭合标签，不需要以</imag>结尾-->
<img src='图片地址'/>

<!-- 直接显示别人的图片地址 -->
<img src='https://pic1.zhimg.com/v2-da68dbc29b8ec0865e17b6ccba5eca5c_1440w.jpg?source=172ae18b'/>

<!-- 显示自己的图片：
	- 在自己的项目目录My_first_web/app01下面创建：static目录，将图片放在里面  -->
<img src='自己图片的地址' />

可以对图片指定大小，若只指定长或宽，则自动根据比例调整另一个

<!-- 指定图片长宽都为100像素 -->
<img style='height: 100px; width: 100px;' src='图片地址' />
<!-- 指定图片长款为原图的百分比 -->
<img style='height: 10%; width: 10%;' src='图片地址' />

标签之前可以进行嵌套

<!-- 在链接标签中嵌套图片，实现点击图片跳转 -->
<body>
    <div>
        <span>adsda</span>
        <a href="https://zhuanlan.zhihu.com/p/546216255" target="_blank">
            <img src='/static/1.jpg' />
        </a>
    </div>
</body>

2.6 HTML列表

2.6.1 无序标签

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

2.6.2 有序标签

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cVWKDjx2-1660957746806)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814105826116.png)]$

2.7 HTML表格

注意表头和表身的些许区别，表示行，表示表头内容，表示表格内容

<table border="1">  <!--  “创建”表格，border="1"默认加上边框 -->
  <thead>  # 设置表头信息
  	  <!-- <tr></tr>是每行需要的，中间写表头内容  -->
      <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>12</td> </tr>
      <tr> <td>12</td> <td>王麻子</td> <td>29</td> </tr>
      <tr> <td>13</td> <td>孙五</td> <td>16</td> </tr>
  </tbody>
</table>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqQDxsZp-1660957746807)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814111326476.png)]$

3. 用于用户输入信息的标签

3.1 input系列

<input type='text' />  <!-- 文本框 -->

<input type='password' />  <!-- 密码框，用户输入用*掩盖 -->

<input type='file'>  <!-- 文件选择框 -->

<!-- 单选框，保持name相同 -->
<input type='radio' name='sex'>男  <!-- 选择选项 -->
<input type='radio' name='sex'>女  <!-- 选择选项 -->

<!-- 复选框 -->
<input type='checkbox'>乒乒球
<input type='checkbox'>篮球
<input type='checkbox'>羽毛球

<!-- 按钮 -->
<input type='button' value='提交'>  <!-- 普通按钮 -->
<input type='submit' value='提交'>  <!-- 可以提交表单 -->

3.2 下拉框

<!-- 单选下拉框 -->
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>成都</option>
</select>

<!-- 多选下拉框 -->
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>成都</option>
</select>

3.3 多行文本

<textarea rows='3'> </textarea>  <!-- 默认显示3行，但仍可手动调节 -->

3.4 案里<用户注册>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h1>用户注册</h1>
	<!-- 文本框 -->
    <div>
        账号：<input type="text" />
    </div>
    
	<!-- 密码框 -->
    <div>
        密码：<input type="password" />
    </div>
    
	<!-- 单选框 -->
    <div>
        性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
    </div>
    
	<!-- 多选框 -->
    <div>
        爱好：
            <input type="checkbox">篮球
            <input type="checkbox">乒乒球
            <input type="checkbox">足球
            <input type="checkbox">羽毛球
            <input type="checkbox">棒球
    </div>
    
    <!-- 下拉菜单 -->
    <div>
        城市：
            <select>
                <option>北京</option>
                <option>南京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
            </select>
    </div>
	
    <!-- 多行文本 -->
    <div>
        备注：
        <textarea rows="1"></textarea>
    </div>
    
	<!-- 按键 -->
    <div>
        <input type="button" value="注册">
    </div>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gJxc9kci-1660957746808)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814143724788.png)]$

网络请求

在浏览器的URL中写入地址，点击回车，访问。

浏览器会发生数据过去，本质上发送的为字符串
"GET /explore http...."
"POST /explore heep...."

浏览器先后端发送请求时：
- GET请求（数据体现在URL上）【URL方法/表单提交都可发GET请求】
  - 现象：如GET请求、跳转都是GET请求，向后台传入的数据会拼接在URL上
```
# 网址为前面的https://www.sogou.com/web
# 向后台传入的数据用&连接拼接在后面 quary/age/name
# 网址与数据用？连接 
https://www.sogou.com/web?query=安卓&age=19&name=xx..
```
- POST请求（数据隐藏在请求体中）【仅表单提交可发POST请求】
  - 现象：提交的数据不体现在URL中而是放在请求体中

案例（用户注册，并提交数据）

提交表单

<!-- 将想要提交的用户编辑框放到<form> </form>当中，在<form> </form>当中需要放入按键（not button, is submit），
button仅仅只是普通的按键，而submit是用于提交表单的 -->
<form method="GET" action="/1/">
    <div>
        账号：<input type="text" />
    </div>

    <div>
        密码：<input type="password" />
    </div>

    <div>
        <input type="submit" value="注册">
    </div>
</form>

注意：在Django中提交以POST请求提交form表单时，需要添加一句{% csrf_token %}

<form method="POST">
    {% csrf_token %}
    <input type="text" name="user" placeholder="用户名">
    <input type="password" name="pwd" placeholder="密码">
    <input type="submit" value="提交">
</form>

<form> </form>中的参数method为指定用什么方式提交表单，action为指定转到的地址(/1/ 第一个斜杠表示退出到跟目录)，并且用户提交的数据也返回给该地址;

<img 在这里插入图片描述

前面提到GET请求会将数据拼接到URL中，但是从上图的URL中看？后面并没有跟上数据，这是因为在input标签中缺省name参数。

传递数据

<div>
账号：<input type="text" name='text'/>
</div>

<div>
密码：<input type="password" name='password' />
</div>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkJSOD2V-1660957746809)(C:\Users\NH4NO3nice\AppData\Roaming\Typora\typora-user-images\image-20220814154009283.png)]$

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

form标签包裹想要提交数据的标签
- 提交方式：method=‘GET’/‘POST’
- 提交到的地址：action=‘/xxx/xxx’（应该为自己的网址，后面可以在这个地址获取提交的数据）
- 在form标签中必须有一个submit标签

在form里面的标签（input、select、textarea）需要注意

在标签当中，一定要指定数据名字name，不然后面返回的数据不知道是什么；

对于单选框、多选框、下拉菜单还需要指定每个选项的值，注意”男“、”女“、”篮球“这些不是选项的值，仅仅只是在网页中显示，便于用户理解；

<!-- 单选框 -->
<div>
    性别：
    <input type="radio" name="sex" value='1'>男  
    <!-- 想后台返回选择结果时，需要有value参数，指定每个选项的值，‘男’仅仅是在网页中显示，并不是这个选项的值-->
    <input type="radio" name="sex" value='2'>女
</div>

<!-- 多选框 -->
<div>
    爱好：
    <input type="checkbox" name='hobby' value='lq'>篮球
    <input type="checkbox" name='hobby' value='ppq'>乒乒球
    <input type="checkbox" name='hobby' value='zq'>足球
    <input type="checkbox" name='hobby' value='ymq'>羽毛球
    <input type="checkbox" name='hobby' value='bq'>棒球
</div>

<!-- 下拉菜单 -->
<div>
    城市：
    <select name='city'>
        <option value='bj'>北京</option>
        <option value='nj'>南京</option>
        <option value='sh'>上海</option>
        <option value='gz'>广州</option>
        <option value='sz'>深圳</option>
    </select>
</div>

<!-- 多行文本 -->
<div>
    备注：
    <textarea rows="1" name='more'></textarea>
</div>
 <div>
        城市：
        <select name='city'>
            <option value='bj'>北京</option>
            <option value='nj'>南京</option>
            <option value='sh'>上海</option>
            <option value='gz'>广州</option>
            <option value='sz'>深圳</option>
        </select>
    </div>

<!-- 多行文本 -->
<div>
    备注：
    <textarea rows="1" name='more'></textarea>
</div>

NH4NO3nice

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2. HTML格式模板基础，以及网络请求概述

对于单选框、多选框、下拉菜单还需要指定每个选项的值，注意”男“、”女“、”篮球“这些不是选项的值，仅仅只是在网页中显示，便于用户理解；html文件中的内容能被网页识别，显示为可读的内容，类似于markdown，有一定的语法。写在同一行，则在显示的时候会连在一起，即使在html里面手动加了空格；现象：如GET请求、跳转都是GET请求，向后台传入的数据会拼接在URL上。在标签当中，一定要指定数据名字name，不然后面返回的数据不知道是什么；注意表头和表身的些许区别，表示行，表示表头内容，表示表格内容。
复制链接

扫一扫