Python全栈开发之html

html5创建的代码样本

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

</body>
</html>

网页跳转代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <a href="http://www.cnblogs.com/xiaoqianbook/">小钱</a>
</body>
</html>

注释：  <!--  注释的内容  -->

刷新页面

<meta http-equiv="Refresh" content="3"><!-默认3秒刷新页面->

刷新页面跳转

<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com/xiaoqianbook/"><!-默认3秒刷新页面跳转->

关键词

<meta name="keyword" content="小钱,python">

图标

<link rel="shortcut icon" href="图标的地址">

IE兼容

 <meta http-equiv="X-UA-Compatible" content="IE=IE11;IE=IE8;" />

标签分类:
     自闭合标签
     <meta charset="UTF-8">
     主动闭合标签
     <title>小钱</title>

所有标签分为：
         块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
         行内标签： span（白板）

行内标签：无法设置高度，宽度，padding margin
         块级标签：设置高度，宽度，padding margin

标签之间可以嵌套

body标签
     &nbsp;空格

&gt; &lt;添加特殊字符&lt; 相当于 < ,&gt; 相当于 >

<a href="http://www.cnblogs.com/xiaoqianbook/">小钱&lt;a&gt;</a>

p标签，段落

br标签，换行

inport属性

input type=‘text‘ 文本
input type=‘password‘ 密码
input type=‘submit‘  提交按钮
input type=‘button‘ 按钮
input type=‘radio‘  单选框  checked="checked" 默认选中   name属性（name相同则互斥）
input type=‘checkbox‘ - 复选框 checked="checked"，name属性（批量获取数据）
input type=‘file‘  上传文件  依赖form表单的一个属性 enctype="multipart/form-data"
input type=‘rest‘ 重置

<textarea >默认值</textarea> 文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <textarea name="meno" >asdfasdf</textarea>
            <select name="city" size="10" multiple="multiple">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </select>
            <input type="text" name="user" />
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1"  />
            女：<input type="radio" name="gender" value="2" checked="checked"/>
            Alex：<input type="radio" name="gender" value="3"/>
            <p>爱好</p>
            篮球：<input type="checkbox" name="favor"  value="1" />
            足球：<input type="checkbox" name="favor"  value="2" checked="checked" />
            皮球：<input type="checkbox" name="favor"  value="3" />
            台球：<input type="checkbox" name="favor"  value="4" checked="checked"/>
            网球：<input type="checkbox" name="favor"  value="5" />
            <p>技能</p>
            学习：<input type="checkbox" name="skill" checked="checked" />
            写字：<input type="checkbox" name="skill"/>
            <p>上传文件</p>
            <input type="file" name="fname"/>
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

a标签

跳转，锚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的内容</div>
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
</body>
</html>

img 标签

src 图片地址
  alt 无法加载显示
  title 图片说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.cnblogs.com/xiaoqianbook/">
        <img src="1.png" alt="美女" title="大美女" height="100px" width="100px">
    </a>
</body>
</html>

列表

ul  无序列表
     li
ol 有序列表
     li 
dl 列表分层
    dt
    dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <ul>
     <li>小猫</li>
     <li>小狗</li>
     <li>小猪</li>
 </ul>
<ol>
    <li>小猫</li>
     <li>小狗</li>
     <li>小猪</li>
</ol>
<dl>
    <dt>动物</dt>
    <dd>小猫</dd>
    <dt>植物</dt>
    <dd>小花</dd>
</dl>
</body>
</html>

表格

table标签
    thead 表头
            tr 行
            th 列
    tbody 表主体
            tr 行
            td 列
colspan 去行
rowspan 去列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
        <th>表头1</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
</body>
</html>

label 用于点击文件，使得关联的标签获取光标
fieldset
       egend

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<fieldset>
    <legend>登陆</legend>
    <label for = "username">用户名：</label>
    <input id="username" type="text" name="user">
    <br>
    <label for = "pwd">用户名：</label>
    <input id="pwd" type="password" name="pwd">
</fieldset>
</body>
</html>

css

标签选择器

div{ background-color:red; } 
<div > </div>

class选择器

.bd{ background-color:red;  } 
<div class=‘bd‘> </div>

id选择器

#idselect{ background-color:red;  } 
<div id=‘idselect‘ > </div>

关联选择器（空格）

#idselect p{ background-color:red;  } 
<div id=‘idselect‘ >

<p> </p>

</div>

组合选择器（逗号）

input,div,p{ background-color:red;  }

属性选择器

input[type=‘text‘]{ width:100px; height:200px; }

优先级，标签上style优先，编写顺序，就近原则

css样式写在commons.css文件中

<link rel="stylesheet" href="commons.css" />

注释

/* 注释的内容*/

height 高度 百分比
width 宽度 像素，百分比
text-align:ceter  水平方向居中
line-height  垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗

float

让标签浮起来，块级标签也可以堆叠
清除悬浮<div style="clear: both;"></div>

display

display: none; -- 让标签消失
display: inline; 块级标签变行内标签
display: block;行内标签变快级标签
display: inline-block; 块级标签和行内标签都包含 
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin

　

　　

原文地址：https://www.cnblogs.com/xiaoqianbook/p/9066596.html

时间： 2024-10-08 22:14:39

Python全栈开发之html的相关文章

Python全栈开发之21、django

http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5246483.html http://www.cnblogs.com/yuanchenqi/articles/5786089.html 基本配置 一 常用命令 django-admin startproject sitename python manage.py runserver 0.0.0.0 python

Python全栈开发之17、tornado和web基础知识

一.web基础知识 学习web框架之前,先来看一下web基础知识,首先要明白其本质就是socket,用户对应一个socket客户端,但是如果从socket开始开发web应用程序那么效率太了,正确的做法是底层socket处理代码由专门的服务器软件实现,而对于真实开发中的python web程序来说也是一般会分为两部分:服务器程序和应用程序.服务器程序负责对socket服务器进行封装,并在请求到来时,先经过web服务器,对请求的各种数据进行整理封装.之后web服务器将封装好的数据传递给应用程序,应用

Python全栈开发之Django基础

[TOC] No.1 MVC&MTV MVC M全拼为Model,主要封装对数据库层的访问,对数据库中的数据进行增.删.改.查操作 V全拼为View,用于封装结果,生成页面展示的html内容 C全拼为Controller,用于接收请求,处理业务逻辑,与Model和View交互,返回结果 MTV M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理 V全拼为View,与MVC中的C功能相同,接收请求,进行业务处理,返回应答 T全拼为Template,与MVC中的V功能相同,负

Python全栈开发之Django进阶

No.1 静态文件处理 项目中CSS.JS.图片都属于静态文件,一般会将静态文件存到一个单独目录中,便于管理,在HTML页面调用时,需要指定静态文件的路径,Django提供了一种解析静态文件的机制,文件可以放在项目目录下,也可以放在应用目录下 在mysite/setting.py设置文件的物理路径 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] 在static目录下创建css.js.

Python全栈开发之9、面向对象、元类以及单例

前面一系列博文讲解的都是面向过程的编程,如今是时候来一波面向对象的讲解了 一.简介 面向对象编程是一种编程方式,使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用.类就是一个模板,模板里可以包含多个方法(函数),方法里实现各种各样的功能,,对象则是根据模板创建的实例,通过实例,对象可以执行类中的方法,每个对象都拥有相同的方法,但各自的数据可能不同. 二.类.对象和方法 在Python中,定义类是通过class关键字,class后面紧接着是类名,类名通常

Python全栈开发之8、装饰器详解

一文让你彻底明白Python装饰器原理,从此面试工作再也不怕了. 一.装饰器 装饰器可以使函数执行前和执行后分别执行其他的附加功能,这种在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator),装饰器的功能非常强大,但是理解起来有些困难,因此我尽量用最简单的例子一步步的说明这个原理. 1.不带参数的装饰器 假设我定义了一个函数f,想要在不改变原来函数定义的情况下,在函数运行前打印出start,函数运行后打印出end,要实现这样一个功能该怎么实现?看下面如何用一个简单的装饰器来实现

Python全栈开发之12、html

从今天开始,本系列的文章会开始讲前端,从htnl,css,js等,关于python基础的知识可以看我前面的博文,至于python web框架的知识会在前端学习完后开始更新. 一.html相关概念 html是 htyper text markup language 即超文本标记语言,超文本就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素,而标记语言:即标记(标签)构成的语言. 网页相当于HTML文档,由浏览器解析,用来展示的,静态网页即静态的资源,如xxx.html,动态网页是html代

Python全栈开发之5、几种常见的排序算法以及collections模块提供的数据结构

在面试中,经常会遇到一些考排序算法的题,在这里,我就简单了列举了几种最常见的排序算法供大家学习,说不定以后哪天面试正好用上,文章后半段则介绍一下collections模块,因为这个模块相对于python提供的基本数据结构(list,tuple,dict)不被人们所熟悉,但是如果你对他们了解的话,用起来也是非常方便高效的. 排序算法 一.冒泡排序(BubbleSort) 步骤: 比较相邻的元素,如果第一个比第二个大,就交换他们两个. 循环一遍后,最大的数就“浮”到了列表最后的位置. 将剩下的数再次

Python全栈开发之10、网络编程

网络编程就是如何在程序中实现两台计算机的通信,而两台计算机间的通信其实就是两个进程间的通信,进程间的通信主要通过socket(套接字)来描述ip地址(主机)和端口(进程)来实现的,因此我们学习网络编程,必须学习socket 一.socket socket模块是针对 服务器端 和 客户端Socket 进行[打开][读写][关闭],一个完整的套接字模型图如下图所示 在python中读写操作调用的函数有些不一样,下面我们来看一下一个完整的socket(TCP)在服务端和客户端的实现 # server.

Python全栈开发之 Mysql (一)

一: 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库别说我们在写程序的时候创建的database就是一个数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQL Server等 ? 他们均是一个软件,但是都有2个主要的功能 1.将数据保存到文件或内存 2.接受待定的命令,然后对文件进行相应的操作如果有了以上软件,无须自己再去创建文件和文件夹,而是直接传递 命令 给上述软件,让其来进行文件操作,他们统称为数据库管理系统(DBM