Django入门教程

前言

第一章: django快速入门

第二章: django MTV架构

第三章: django视图

第四章: django模板

第五章: django模型

第六章: django后台管理系统

第七章: 项目实战-简易的博客系统

第八章:django表单

第九章:django用户认证系统

第十章:django中的会话

第十一章:django安全

第十二章:django性能优化

第十三章:django实用工具

首页 > Django入门教程 > 第四章: django模板 > 4.1节: 超文本标记语言-HTML

4.1节: 超文本标记语言-HTML

薯条老师 2020-07-19 16:38:22 232920 0

编辑 收藏

广州番禺Python, Java小班周末班培训

薯条老师在广州做Python和Java的小班培训,一个班最多10人,学员的平均就业薪资有11K不在广州的同学可以报名线上直播班,跟线下小班的同学们同步学习。培训的课程有Python爬虫,Python后端开发,Python办公自动化,Python大数据分析,Python量化投资,Python机器学习,Java中高级后端开发。授课详情请点击:http://chipscoco.com/?cate=6

4.1.1 HTML与网页

在django的MTV架构中,将业务层(视图)与表现层(模板)进行分离,更容易对项目进行扩展和维护。在团队开发中,视图层的代码逻辑由Python工程师进行负责,而将html页面的设计工作交给前端工程师,如果将页面的定义全部耦合在视图层,那么在团队协作中很难进行分工合作。

django中的模板基于HTML,HTML是一种简单易学的文本标记语言,通过一系列标签将内容组织成具备层次结构的文档。

HTML的英文全称为“Hyper Text Markup Language”,中文释义为超文本标记语言。我们打开浏览器上网时,访问的每一个网页都是由HTML定义的。可以这么说,一张网页对应一个HTML文件。

 4.1.2 HTML中的标签

HTML是一种简单易学的标记语言,通过一系列标签将内容组织成具备层次结构的结构化文档。HTML使用<>符号将标签名括起来,每一个标签名表示一个特定的语义。比如p标签表示网页的一个段落,img标签表示网页的一张图片,a标签表示网页的一个超链接。HTML规范中,标签名必须使用小写的形式。HTML中的标签必须关闭,标签关闭有两种形式:

(1)单独成对的标签 

(2)在<>内部使用/符号来进行关闭。

单独成对的标签是指<标签></标签>的形式,在标签内部进行关闭的形式则为:<标签/>。HTML中的标签可包含0个或多个属性值对,语法形式为:name="value",属性值对以空格符号进行分隔,以HTML中的<p>标签为例:

<p id="python" class="language">python是一种简单易学的语言</p>

在HTML规范中,id用来定义唯一的属性,一个网页中只能存在一个唯一的id值。 而class定义的是同一类的属性,页面中的标签可以定义多个相同的class。HTML中的标签名,标签的关闭形式,标签的属性定义都有一套标准的规范,学习HTML主要是学习HTML中的标签及其语义。

 4.1.3 HTML的总体结构

HTML文件最外围的标签为<html>。

代码实例:

<html>
</html>

在<html>内部,按其组成结构又可分为HTML head,HTML body,分别对应于<head>标签,<body>标,类似于人体的头部,身体结构。

 代码实例:

<html>
<!-- head标签类似于人体的头部 -->
<head>
</head>
 
<!-- body标签类似于人体的身体 -->
<body>
</body>

</html>

head标签用来定义文档的属性,而body标签用来组织网页的主体内容。head标签内的常用子标签:

标签名

 

标签关闭形式

标签的常用属性

描述

title

<title></title>


定义HTML文件的标题

link

<link />

(1) rel:用于设置对象和链接目的间的关系,常用的属性值为"stylehseet",表示一个样式表

(2) href:指定外部文件的路径

(3) type:指定外部样式文件的类型

定义了当前html文件所需使用的外部文件,通常用来链接css文件,链接的文件在href属性中进行定义。

meta

<meta />

(1) http-equiv:定义http的请求头部

(2) content:指定mime类型

(3) charset:指定网页的字符编码

定义html文档的元信息,例如网页的字符编码。

script

<script> </script>

(1)src:指定外部脚本文件的路径

定义了当前html文件使用的脚本,通常用来链接javascript文件。链接的文件在src属性中进行定义。

body标签内的常用子标签:

body中的子标签按其是否独占一行,又可分为块级标签和行级标签,块级标签会自动换行,行级标签与其它标签出现在同一行。

标签名

 

标签关闭形式

标签的常用属性

语义描述

h

<h1></h1>


块级标签,html定义了从h1到h6的标签,用来定义内容的标题,h后面的数字越大显示的字体越小

p

<p></p>


块级标签,标记当前内容为一个段落

div

<div></div>


块级标签,使用div标签用来将html文档分隔为多个分区

form

<form></form>

(1) action: 指定提交的服务器路径

(2) method:指定http请求方法,主要为get和post。

块级标签,定义html表单,用户在html表单中进行输入

ul

<ul>

</ul>


块级标签,使用ul来定义一个无序的列表,ul标签内部使用li标签来标记列表的内容

input

<input />

(1) type:表示输入框的类型,常用的类型为

text,password,button,submit,分别表示文本输入框,密码输入框,按钮框,提交框。

(2) name:输入值的别名,在后端代码中通过name来对输入值进行引用

行级标签,对应于表单中的输入框

a

<a />

(1) href:指定链接的url

行级标签,标记一个超链接,在href属性中指定其它页面的url

img

<img />

(1) src: 指定图片文件的路径

(2) width: 指定图片的宽度

(3) height: 指定图片的高度

行级标签,标记一张图片,在img标签内的src属性中定义图片的路径

br

<br/>


行级标签,在当前位置处添加一个换行符

 html中的标签可以相互嵌套,例如在div中嵌套div,在ul中嵌套div:

<!-- 在div中嵌套div -->
<div>
    <div>
    </div>
</div>
 
<!-- 在ul中嵌套div -->
<ul>
<li>
  <div>
  </div>
</li>
</ul>

标签的布局及嵌套,应根据其常规语义来合理地使用,而不是毫无逻辑的乱用。现在根据以上知识,来定义一个简单的HTML文件:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <title>轻松学会Django</title>
</head>
 
    <body>
    <div  id="header">
<div id="logo">
<a href="http://chipscoco.com/"><img src="logo.png" ></a>
</div>
   </div>
                        
   <div id="main">
   <p class="article">
在django的MTV架构中,将业务层(视图)与表现层(模板)进行分离,更容易对项目进行扩展和维护。<br/>
在团队开发中,视图层的代码逻辑由Python工程师进行负责,而将html页面的设计工作交给前端工程师,
如果将页面的定义全部耦合在视图层,那么在团队协作中很难进行分工合作。<br/>
 </p>
 </div>
</body>
</html>

使用浏览器打开HTML文件,浏览器会自动对文件进行解析,并按HTML标签组织的层次结构来进行内容的展现。现在同学们将上文中的HTML代码写入记事本中,命名为chipscoco.html,并确保文件所在目录有一个logo.png的图片文件。用浏览器打开chipscoco.html时,可以看到以下网页:

 image.png

4.1.4 最具实力的小班培训

薯条老师在广州做Python和Java的小班培训,一个班最多10人。不在广州的同学可以报名线上直播班,跟线下小班的同学们同步学习。打算参加小班培训的同学,必须遵守薯条老师的学习安排,认真做作业和项目。把知识学好,学扎实,那么找到一份高薪的工作就是很简单的一件事。

(1) Python后端工程师高薪就业班,月薪11K-18K,免费领取课程大纲
(2) Python爬虫工程师高薪就业班,年薪十五万,包拿Offer
(3) 数据分析高薪就业班,月薪11K-15K, 免费领取课程大纲
(4)
Python大数据挖掘,量化投资就业班,月薪12K-25K,免费领取课程大纲

扫码免费领取Python学习资料:




欢迎 发表评论: