python-day49--前端 html

一、列表标签

1.有序列表 <ol>       (order list )

在浏览器中显示包括:padding , 有序排列

       <li>:列表中的每一项.

2.无序列表 <ul>       (unorder list )

在浏览器中显示包括:padding , 实心圆, 有序排列(无序列表指的并不是列表内容是无序的)

无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

    <li>:列表中的每一项.

3.定义列表

在浏览器中显示包括:无padding , 有序排列

    <dt> 列表标题

    <dd> 列表项(数据)

<body>
<!--unorder list-->
<ul>
   <li>222</li>
   <li>111</li>
   <li>333</li>
</ul>

<!--order list-->
<ol>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ol>

<!--define list-->
<dl>
    <!--define title-->
    <dt>河北省</dt>
    <!--define data-->
    <dd>石家庄</dd>
    <dd>天津</dd>
</dl>
</body>

二、form表单(输入框)

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

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

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

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

请求server端方式:

  get请求:数据放在url后面,用?隔开,用& 连接

  post请求:数据放在内部打包请求数据的部分

表单元素

基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息

<input> 系列标签

1.type="text"  文本输入框

<body>
<form action="" method="post">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="text"/></p>

</form>
</body>

2.type="password"   密码输入框

<body>
<form action="" method="post">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>

</form>
</body>

3.type="radio"    单选框

<body>
<form action="" method="post">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" checked/>男<input type="radio"/>女</p>  #checked 默认选择 男

</form>
</body>

问题是可以选两个,怎么解决?

因为男和女他们是一组数据 ,只能选一个,故:

<p>性别:<input type="radio" name="gender">男<input type="radio" name="gender">女 </p>

解决原因是:性别只会传一个键值对,不会传两个,所以加上name 属性后就只能选一个

引出表单的两个属性:

表单在提交数据中 会用键值对的方式来提交,所以向server端发送内容就必须有name和value

  name :作为发送到server端的数据的键,

  value:作为发送到server端的数据的值

表单属性
 name:    表单提交项的键.

           注意和id属性的区别:name属性是和服务器通信时使用的名称;
           而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

                type="button", "reset", "submit" - 定义按钮上的显示的文本

                type="text", "password", "hidden" - 定义输入字段的初始值

                type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

所以以上代码要这样写:

<form action="" method="post">
      <p>姓名:<input type="text" name="username" value="yuan"></p>   #这个value是指定默认的名字,可以不写
      <p>密码:<input type="password" name="password" value="123"></p>    #这个value是指定默认的密码,可以不写
      <p>性别: <input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女 </p>
</form> 

4.type="checkbox"   多选框

<form action="" method="post">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song" checked/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
</form>          #checked 默认选则 唱歌

5.file 提交文件

form表单需要加上属性enctype="multipart/form-data"

上传文件注意两点:

  1 请求方式必须是post

  2 enctype="multipart/form-data"

<body>
<form action="">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song"/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
    <p>头像:<input type="file" name="file_obj"/></p>

</form>
</body>

6.reset 重置按钮

<body>
<form action="">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song"/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
    <p>头像:<input type="file" name="file_obj"/></p>
    <p><input type="reset"/></p>
</form>

当点击重置按钮时,会恢复初始的状态

7.button    空按钮 什么功能都没有

<form action="">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song"/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
    <p>头像:<input type="file" name="file_obj"/></p>
    <p><input type="reset"/></p>
    <p><input type="button"/></p>
    <p><input type="button" value="按钮"/></p>
</form>

8.submit   提交按钮

<form action="">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song"/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
    <p>头像:<input type="file" name="file_obj"/></p>
    <p><input type="reset"/></p>
    <p><input type="button"/></p>
    <p><input type="button" value="按钮"/></p>
    <p><input type="submit"/></p>

</form>
</body>

当点击提交按钮时 会提交数据并恢复初始的状态

9. hidden   隐藏不显示   但是它内部的name 和value 会在点击提交按钮时 一起提交给过去

<form action="">
    <p>姓名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <p>性别:<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p>
    <p>爱好:<input type="checkbox" name=‘hobby‘ value="song"/>唱歌<input type="checkbox" name=‘hobby‘ value="swim"/>游泳<input type="checkbox" name=‘hobby‘ value="Str-Dance"/>街舞</p>
    <p>头像:<input type="file" name="file_obj"/></p>
    <p><input type="reset"/></p>
    <p><input type="button"/></p>
    <p><input type="button" value="按钮"/></p>
    <p><input type="submit"/></p>
    <p><input type="hidden" name="asdasd" value="asdfasd"></p>
</form>

<textarea> 系列标签    文本域(可用做个人简介)

<body>
<form action="">
    个人简介 <br>
    <textarea name="personalinfo" id="" cols="50" rows="20"></textarea>

</form>
</body>

<select>标签

<body>
    <select name="province" id="">
    <option value="hebei">河北</option>
    <option value="henan">河南</option>
    <option value="hunan">湖南</option>
    <option value="hubei">湖北</option>
    <option value="hainan">海南</option>
    <option value="haibei">海北</option>
    </select>

</body>

<body>
    <select name="province" size=‘3‘ id="" multiple>   #size:选项个数 ,multiple = multiple="multiple" 可实现多选
    <option value="hebei">河北</option>
    <option value="henan">河南</option>
    <option value="hunan">湖南</option>
    <option value="hubei">湖北</option>
    <option value="hainan" selected>海南</option>    #selected 默认选择
    <option value="haibei" selected>海北</option>
    </select>

</body>

<label>标签

<body>
<form action="">
    <label for="c1">姓名:</label>
    <input type="text" name="username" id="c1">   #创建id 用与关联

</form>
</body>

三、<div>和<span> 标签   -- 都没有任何的样式,为CSS而生

<div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

四、html 必须要掌握的知识点

时间: 2024-09-29 10:13:12

python-day49--前端 html的相关文章

python和前端之HTML的激情

python写前端需要啥语言? a:HTML → 骨架[类似于创建一个塑料模特],搭建.调整整个页面布局 b:CSS    → 衣服[类似于给塑料模特穿上衣服,不能那么暴露],将整个页面美化 c:JS    → 马达[给模特装一个小马达,这样才能动,才能叫嘛],让页面动起来 1.初识HTML. 基本概念: html为超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色.大小等. 超文本:音频,视频,图片称为超文本. 标记 :<英文单词或者字母>

python为前端提供API

作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from flask import Flask app = Flask(__name__) @app.route("/") def index(): result = { 'status': "200", 'data': 'Hello, world!', } return jso

超多慕课网实战教程破解自学教程百度云盘分享-Python/Java/前端后端/小程序/运维测试/人工智能

以下课程,需要的可以加我微*信:hgh813210,备注你需要的课程 Java企业级电商项目架构演进之路 Tomcat集群与Redis分布式百度云实战分享 前端成长必经之路 基于Storm构建实时热力分布项目实战 Spark Streaming实时流处理项目实战 以慕课网日志分析为例 进入大数据 Spark SQL 的世界 手工测试企业项目实践及面试提升 Webpack + React全栈工程架构项目实战精讲 深度学习之神经网络核心原理与算法 Android应用发展趋势必备武器 热修复与插件化

Python web前端 10 bootstrp

1.媒体查询 <style> *{ margin: 0; padding: 0; } div{ width: 110px; height: 110px; background: yellow; } @media screen and (min-width: 500px) {#在浏览器宽度大于500px的时候,显示下面的布局 div{ width: 200px; height: 200px; background: black; }#这便是媒体查询(响应式布局):根据浏览器显示宽度不一样,展示出

python 之 前端初识 html

html语法代码示例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Login</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 代码第一行为触发浏览器使用说明模式来解析此html文档,

Python 44 前端概述 、三剑客 、常用标签与分类

一:前端概述 前端指的就是页面的设计和给用户带来极高的用户体验 前端开发技术栈分为三大类:HTML .CSS .JavaScript HTML(Hyper Text Markup Language): 1 超文本标记语言 2 负责完成页面的结构 3 文件后缀:start.html v_hint:标注,一些要注意的点("超文本"就 是指页面内可以包含图片,连接,音乐,程序等非文字元素) CSS(Cascading Style Sheet): 1 级联样式表 2 负责页面的风格设计,样式和

python 之 前端开发(盒子模型、页面布局、浮动、定位、z-index、overflow溢出)

11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如果把一个盒子比喻成一个壁挂相片,那么 外边距margin ===== 一个相框与另外一个相框之间的距离 边框border ====== 边框指的就是相框 内边距padding ===== 相片与边框的距离 宽度width/高度height ===== 指定可以存放相片的区域 1.css显示模式:块级

python 之 前端开发( JavaScript变量、数据类型、内置对象、运算符、流程控制、函数)

11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= "egon"; ? // 2. 声明立刻定义 var age = 18; 2.变量名命名规范 1.由字母.数字.下划线.$ 组成,但是不能数字开头,也不能纯数字2.严格区分大小写3.不能包含关键字和保留字(以后升级版本要用的关键字).如: abstract.boolean.byte.char.clas

python django 前端上传图片,后端以二进制流形式保存到数据库

models.py pic = models.BinaryField() html  ajax 上传请求 $('#jbwwtj').click(function(){ var formdata = new FormData(); formdata.append("wwid",$("#jbwwid").val()); formdata.append("jbidtp",$('input[type=radio][name=jbidtp]:checked

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>