专业编程基础技术教程

网站首页 > 基础教程 正文

「Django笔记」Day01-HTML基本知识

ccvgpt 2024-09-11 02:28:36 基础教程 12 ℃

本文为Django技术学习笔记，相关教材为清华大学出版社出版的《Django开发宝典》。

这一节介绍Django开发的前端技术，主要为HTML相关知识点补记。

1.1 初识HTMl

1.1.1 HTML的定义

HTML是用来描述网页的一种语言。

  1. HTML是指超文本标记语言（Hyper Text Markup Language）。
  2. HTML不是一种编程语言，而是一种标记语言（Markup Language）。
  3. 标记语言是一套标记标签（Markup Tag），HTML使用标记标签来描述网页。

1.1.2 HTML标签

HTML标记标签通常被称为HTML标签（HTML Tag）。

「Django笔记」Day01-HTML基本知识

  1. HTML标签是由尖括号括起来的关键词，如<html>。
  2. HTML标签通常是承兑出现的，如<b>和</b>。
  3. 标签对中的第一个标签是开始标签，第二个标签是结束标签；开始标签和接数标签也被称为开放标签和闭合标签。

1.1.3 HTML元素

HTML元素是指开始标签（Start Tag）到接数标签（End Tag）的所有代码。

1.2 走进HTML

1.2.1 HTML编辑器

可以是用专业编辑器来编辑，推荐使用文本编辑器来学习HTML。

1.2.2 HTML标题

HTML标题（Heading）是通过<h1>~<h6>等标签进行定义的。例如：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h2>This is a heading</h2>

1.2.3 HTML段落

HTML段落是通过<p>标签进行定义的。例如：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1.2.4 HTML链接

HTML使用超级链接与网络上的另一个文档相连。几乎在任何一个网页中都能找到超级链接，单击超级链接可以从一张页面跳转到另一张页面。

通过使用<a>标签可以在HTML中创建超级链接，具体有一下两种使用/标签的方式。

1. 通过使用href属性创建指向另一个文档的链接。

1. 通过使用name属性创建文档内的标签。

使用target属性可以定义被超级链接的文档要在何处显示。下面的这行会在新窗口打开文档：

<a href ="http://www.baidu.com/" target = "_blank">百度一下，你就知道</a>

1.2.5 HTML图像

要在页面上显示图像需要使用（src），src是指"source"。源属性的值是图像的URL地址。定义图像的语法是：

< img src = "url" /> //URL指存储图像的位置

1.2.6 HTML表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td是指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

<table border = "1"> 
 <tr> 
 <td>row 1,cell 1</td> 
 <td>row 1,cell 2</td> 
 </tr> 
 <tr> 
 <td>row 2,cell 1</td> 
 <td>row 2,cell 2</td>
 </tr>
</table>

1.2.7 HTML列表

HTML支持有序列表、无序列表和自定义列表。

1）有序列表

无序列表是一个项目的列表，此列表项目使用粗体原点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签，每个列表项始于<li>标签。

<ul> 
<li>Coffee</li>
 <li>Milk</li>
</ul>

2）无序列表

有序列表是一个项目的列表，此列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表始于<li>标签。

<ol> 
<li>Coffee</li> 
<li>Milk</li>
</ol>

3）自定义列表

自定义列表不仅是一个项目的列表，也是项目及其注释的组合。自定义列表以<dl>标签开始，每个自定义列表项以<dt>标签开始，每个自定义列表项的定义以<dd>标签开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd> 
<dt>Milk</dt> 
<dd>White cold drink</dd>
</dl>

1.2.8 HTML表单和输入

1）表单

HTML表单用于收集不同类型的用户输入信息。表单使用表单标签（<form>）定义。

<form>... input 元素...</form>

2）输入

多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下。

（1）文本域（Text Fields）。当用户要在表单中输入字母、数字等内容时，就会用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
Last name: 
<input type="text" name="lastname" />
</form>

（2）单选按钮（Radio Buttons）。当用户需要从若干给定的选择中选取其一时，就会用到单选按钮。主义，只能从中选取其一。

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>

（3）复选框（Checkboxes）。当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" /> I have a bike
<input type="checkbox" name="car" /> I hava a car
</form>

3）表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username:<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

1.2.9 HTML背景

<body>拥有两个配置背景的标签，背景可以是颜色或者图像。

1）背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色，属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor = "#00000">
<body bgcolor = "rgb(0,0,0)">
<body bgcolor = "black">

2）背景（Background）

背景属性将背景设置为图像，属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body backgroud = "clouds.gif">
<body backgroud = "http://www.w3school.com.cn/clouds.gif">

1.2.10 HTML样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下3种方式来插入样式表。

1）外部样式表

当样式需要被应用到很多页面时，外部样式表将是理想的选择。使用外部样式表，用户就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2）内部样式表

当单个文件需要特别样式表时，就可以使用内部样式表。用户可以在head部分通过<style>标签定义内部样式表。

<head> 
<style type="text/css">
body {backgroud-color:red} 
p {margin-left:20px} 
</style>
</head>

3）内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下示例显示出如何改变段落的颜色和左外边距。

<p style="color:red;margin-left:20px">
This is a paragraph
</p>

Tags：

猜你喜欢

最近发表
标签列表