第五十篇前端之HTML内容

最新推荐文章于 2024-10-01 23:46:18 发布

Laughing@me

最新推荐文章于 2024-10-01 23:46:18 发布

阅读量161

点赞数

分类专栏： web develop 文章标签： html

本文链接：https://blog.csdn.net/qq_45503700/article/details/103980092

版权

web develop 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

心得：每天计划好自己的事情，才不会觉得空，要不然每天会过的很忙碌，且没有什么目标。

一、HTML介绍：

1.HTML概念：
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。

2.请求流程：
浏览器发送请求–HTTP协议–服务器接收请求—服务器返回数据—服务端将数据渲染到浏览器界面

3.声明标签：
文件必须先申明html文件，编码语言

<!DOCTYPE html>
声明为HTML5文档
<html lang="zh-CN">
<head>
中文网页需要使用 <meta charset="utf-8"> 声明编码
  <meta charset="UTF-8">
</head>

4.注释用法:

<!--我是一个注释-->

5.文档结构:

html标签开始标记和结束标记
head标签内定义编码格式，网页的样式，网页介绍之类
body标签为网页显示出来的主体内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First</title>
</head>
<body>
    <p>content</p>
</body>
</html>

6.常用的标签属性：

<p id="p1" name="p_content" style="color:red">content</p>

id :定义标签的唯一ID
class:为html元素定义一个类名，css样式类名
style:添加行内样式

二、常用标签

1. head内标签：
在这里插入图片描述
Meta标签：
针对搜索引擎和更新频度的描述和关键词，提供的信息是用户不可见的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="百度一下">

2. body内标签：

2.1 基本标签：

<body>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行--><br>
<!--水平线--><hr>
</body>

2.2 div标签和span标签：

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别:(是否独占一行)
内联：span,img,a,b,i
块级: div,h1~h6,p,hr,ul,lo,ol

内联标签不能嵌套块级标签
p标签不能包含块级标签，p标签也不能包含p标签。

2.3 img标签：

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

2.4 a标签：

超链接标签
<a href=“www.baidu.com” target="_blank">百度一下

href属性指定目标网页地址：
比如:“www.baidu.com”
django中:"{% url ‘front:book_name’ %}"
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

2.5 特殊符号：
在这里插入图片描述
2.6 列表标签：

无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

2.7 表格标签

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>tom</td>
    <td>readding</td>
  </tr>
  <tr>
    <td>2</td>
    <td>eric</td>
    <td>running</td>
  </tr>
  </tbody>
</table>

属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

2.8 表单标签：

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

表单属性：
action
规定向何处提交表单的地址（URL）（提交页面）。
method
规定在提交表单时所用的 HTTP 方法（默认：GET）。
enctype
规定被提交数据的编码（默认：url-encoded）。
input标签：

input属性：
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type=“button”, “reset”, "submit"时，为按钮上显示的文本内容
type=“text”,“password”,"hidden"时，为输入框的初始值
type=“checkbox”, “radio”, “file”，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
select标签：

下拉框

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
  </select>
</form>

属性说明：
disabled：禁用
value：定义提交时的选项值

label标签：
定义：<label> 标签为 input 元素定义标注（标记）

<label> 标签的 for 属性值应当与相关元素的 id 属性值相

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本标签：

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

实例代码：

   <form action="" method="post">
        <label for="user">用户名</label>
        <input type="text" id="user" name="user"><br>
        <label for="passwd">密码</label>
        <input type="password" id="passwd" name="passwd"><br>
        <input type="date"><br>
        <input id="sex" type="radio" name="sex" value="man">男
        <input id="sex" type="radio" name="sex" value="woman">女
        <input type="checkbox">读书
        <input type="checkbox">跑步
        <input type="checkbox">游泳
        <input type="reset">
        <input type="button">需要JS来绑定事件
        <input type="file">
        <textarea name="text" id="" cols="30" rows="10"></textarea>
        <input type="submit">
        <select name="city" id="city">
            <option value="shanghai">上海</option>
            <option value="beijing">北京</option>
        </select>
    </form>

在这里插入图片描述

通过form表单来上传文件
upload.html 在模板文件中，创建一个form表单，需要特别注意的是，在有文件上传的form表单中，method属性必须为post，而且必须指定它的enctype为"multipart/form-data"，表明不对字符进行编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
<h2>上传文件练习</h2>
<form enctype="multipart/form-data" action="" method="post">
    {% csrf_token %}
    <input type="file" name="f1">
    <input type="submit" value="点击上传">
</form>
</body>
</html>

views.py
设置文件保存路径，并以wb的方式打开存储

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
path=os.path.join(BASE_DIR,'files')

def upload(request):
    if request.method =="POST":
        f1 = request.FILES.get('f1')
        with open(os.path.join(path,f1.name),'wb') as f:
            for i in f1:
                f.write(i)
        return HttpResponse("上传成功")
    return render(request,'upload.html')