python前端代码_python前端HTML

超文本标记语言(Hypertext Markup Language, HTML)

是一种用于创建网页的标记语言,不是一种编程语言,没有逻辑的

HTML基础文档结构

#声明为HTML5文档

#是文档的开始标记和结束的标记,lang设置浏览器语言

#定义了网页标题,在浏览器标题栏显示,charset声明编码,否则会出现乱码

网页标题　　#定义了网页标题,在浏览器标题栏显示

标签的语法

内容部分标签名>

定义网页标题定义内部样式表定义JS代码或引入外部JS文件引入外部样式表文件 定义网页原信息

标签分类

块级标签(行级标签):

h1-h6, p, div, table, ol, ul, form,

内联标签(行内标签):

a, img, span, strong, select, input

基本标签(块级标签和内联标签)

不加标签的纯文字也是可以在body中写的加粗

斜体

下划线

删除

标题1

标题2

标题3

标题4

标题5

标题6

---

#就是单独个一个水平线

Meta标签两个属性分别是http-equiv属性和name属性

http-equiv属性:

#如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行

#edge是微软的一个全新的浏览器,其实就是告诉IE浏览器

name属性: #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的#SEO就是做这个的

#是对这个文档的描述

a标签(超链接标签)

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序

href属性指定目标网页地址,该地址可以有几种类型

绝对URL- 指向另一个站点(href="http://www.jd.com)

相对URL - 指当前站点中确切的路径(href="index.htm")

锚URL- 指向页面中的锚(href="#top")

target:

_blank表示在新标签页中打开目标网页

_self表示在当前标签页中打开目标网页顶点......回到顶部

#跳转一个新标签页

管理系统

#title 鼠标放上去之后显示出来的提示语(连接到图片)

连接到指定文件

img标签

src的路径又分为两种:网上的一个图片路径和本地的一个相对图片路径#本地图片

#网络图片

p段落标签：包裹的文字自成一个段落，此段落自带行间距

黄山落叶松叶落山黄

上海自来水来自海上

山西运煤车煤运西山

div标签：除了换行什么都没有

西湖垂柳丝柳锤西湖

黄山落叶松叶落山黄

span标签：无任何效果,一行输出

西湖垂柳丝柳锤西湖

黄山落叶松叶落山黄

table标签：自带换行

tr: 定义table标签里的一行

td: 定义tr标签里的一个单元格

border="1"给表格加边框

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列(即合并单元格)

caption: 表格的标题

表格标题

a	b	c	j
d		e		f	h	m

列表标签

ul无序列表

type属性:

disc (实心圆点,默认值)

circle(空心圆圈)

square(实心方块)

none(无样式)

ol有序列表

type属性: start是从数字几开始1数字列表,默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

dl标题列表(就像大纲一样,有一个层级效果)

通过dt定义一级元素

通过dd定义二级元素

• a
• b

11. c
12. d

标题1

内容1

标题2

内容2

form表单

功能：

表单用于向服务器传输数据,从而实现用户与Web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等

表单还可以包含textarea、select、fieldset和 label标签

表单属性

属性描述

accept-charset

规定在被提交表单中使用的字符集(默认：页面字符集)。

action

规定向何处提交表单的地址(URL)(提交页面)。

autocomplete

规定浏览器应该自动完成表单(默认：开启)。

enctype

规定被提交数据的编码(默认：url-encoded)。

method

规定在提交表单时所用的 HTTP 方法(默认：GET)。

name

规定识别表单的名称(对于 DOM 使用：document.forms.name)。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标(默认：_self)

input

元素会根据不同的type属性,变化为多种形态

type属性值表现形式对应代码

text

单行输入文本

password

密码输入框(不显示明文)

date

日期输入框

checkbox

复选框

radio

单选框

submit

提交按钮

#发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新

reset

重置按钮

 #页面不会刷新，将所有输入的内容清空

button

普通按钮

hidden

隐藏输入框

file

文本选择框

(等学了form表单之后再学这个)

属性说明:

name：表单提交时的'键',注意和id的区别

value：表单提交时对应项的值

type="button", "reset", "submit"时,为按钮上显示的文本年内容

type="text","password","hidden"时,为输入框的初始值

type="checkbox", "radio", "file",为输入相关联的值

checked：radio和checkbox默认被选中的项

readonly：text和password设置只读

disabled：所有input均适用

select标签

属性说明：

multiple：布尔属性，设置后为多选下拉框，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

label标签

定义：标签为 input 元素定义标注(标记),如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签

说明：

label 元素不会向用户呈现任何特殊效果.但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容 标签的 for属性值应当与相关元素的 id 属性值相同。

extarea多行文本

属性说明：

name：名称

rows：行数#相当于文本框高度设置

cols：列数 #相当于文本框长度设置

disabled：禁用

用户名

密码

选项1

选项2

选项3

选项4

选项1选项2

选项1选项2选项3