| Python全栈开发【html】 |
本节内容：
- html相关概念
- html标签
- form标签
- 补充
| html相关概念 |
html是 htyper text markup language 即超文本标记语言，超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，而标记语言:即标记（标签）构成的语言。
网页相当于HTML文档，由浏览器解析，用来展示的，静态网页即静态的资源，如xxx.html，动态网页是html代码是由某种开发语言根据用户请求动态生成的。
什么是标签:
- 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.
- 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
- 标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
- 有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <img />
- 标签可以嵌套.但是不能交叉嵌套.
标签的属性:
- 通常是以键值对形式出现的. 例如 name="alex"
- 属性只能出现在开始标签 或 自闭和标签中.
- 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
- 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly
块级标签和内联标签
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素的特点
① 总是在新行上开始；
② 高度，行高以及外边距和内边距都可控制；
③ 宽度缺省是它的容器的100%，除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline元素的特点
① 和其他元素都在一行上；
② 高，行高及外边距和内边距不可改变；
③ 宽度就是它的文字或图片的宽度，不可改变
④ 内联元素只能容纳文本或者其他内联元素
对行内元素，需要注意如下
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
下面来看一下html文档书
| html标签 |
1、head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<head>
<meta charset="UTF-8">
<meta name="keywords" content="搜索引擎根据这里面的东西">
<meta name="description" content="网页的描述信息">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> # 2秒后重定向到某网站
<title>web</title>
<link rel="icon" href="http://www.jd.com/favicon.ico"> # 网页图标
<link rel="stylesheet" href="mycss.css"> # 外部css文件
</head>
2、body标签
body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）
基本标签
<h1>~<h6> 标题标签.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
style="text-indent: 2em"可以设置样式为首行缩进两个字符。
<blockquote></blockquote>可以用来设置整个段落的缩进。
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<u>: 文字下方加下划线.
<em> <i>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角标.
<br>:换行.
<hr>:水平线.
<div>
块级标签。块级标签常用于布局，行级标签常用语显示内容。
div的显示通常使用id或class来标识。id为唯一的标签标识，class为标签的类标识。
div的大小是由内容来决定的，默认情况下，高度由内容的高度决定，宽度适应屏幕。
可以容纳其他元素，是一个容器。
<span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8" >
<title>ocean</title>
<!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> -->
<link rel="icon" href="http://www.jd.com/favicon.ico">
</head>
<body>
hello world hello word2
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3><h4>hello world</h4><h5>hello world</h5>
<h6>hello world</h6>
<h2>咏鹅</h2>
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>
鹅鹅鹅</br>
曲项向天歌</br>
白毛浮绿水</br>
红掌拨清波</br>
<strong>飞流直下三千尺</strong>
<b>飞流直下三千尺</b>
<strike>hello </strike>
<em style="background-color: firebrick">斜体</em>
3<sub>2</sub>
3<sup>2</sup>
<hr>
<h1 style="color: green; background-color: aquamarine;height: 100px; 100px">hello h1</h1>
<div style="color: green; background-color: aquamarine;height: 100px; 50%;font-size: 40px;text-align: center">hello</div>
<span style="background-color: rebeccapurple">hell span</span>
<h2 style="background-color: rebeccapurple;">h2h2h2h2h2hh</h2><p style="background-color:yellow">ppppppp</p>
块级标签 内联标签
too<hello
too>hello
©®
<dvi>
<p>hello</p>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</dvi>
<span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</span>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: red" id="abc">顶部</div> <!--<img src="a.jpg" alt="" title = '点我啊'>--> <a href="http://www.xiaohuar.com" target="_blank"> <img src="a.jpg" alt="" title = '点我啊'width="200"> </a> <ul> <a href="http://www.baidu.com"> <li>百度</li> </a> <a href="http://www.jd.com"> <li>京东</li> </a> <a href="http://www.taobao.com"> <li>淘宝</li> </a> </ul> <ol> <li>有序列表11</li> <li>有序列表22</li> </ol> <dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> </dl> <p style="background: red"> hello </p> <a href="#abc">返回顶部</a> </body> </html>
| form标签 |
表单用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label 元素。
1.表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get（信封）
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2.表单元素
<input> type:
text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
在表单提交一定要明确表单中name和value具体值的是什么
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都好使.
3、<select> 下拉选标签属性：
name:表单提交项的键.
size：选项个数
multiple：multiple
<option> 下拉选中的每一项 属性：value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组
4、<textarea> 文本域 name:表单提交项的键. cols:文本域默认有多少列 rows:文本域默认有多少行
5、<label>
<label for="www">姓名</label>
<input id="www" type="text">
6、<fieldset>
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="">注册页面</h1> <form action="http://127.0.0.1:8080/index" method="" enctype="multipart/form-data"> <p>用户名:<input type="text" name="username" placeholder="用户名" disabled="disabled"></p> <p>密码:<input type="password" name="pwd" placeholder="密码"></p> <p>爱好: 音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p> <p>性别: 男<input type="radio" name="gender"> 女<input type="radio" name="gender" ></p> <p><input type="submit" value="OK"></p> <p><input type="button" value="button"></p> <p><input type="reset" value="重置"></p> <p><input type="file" name="put"></p> 省<select name="province" > <optgroup label="山东省"> <option value="shandong">济南市</option> <option value="shanxi">青岛市</option> <option value="hebei">潍坊市</option> <option value="henan">德州市</option> </optgroup> <optgroup label="北京市"> <option value="shandong">海淀区</option> <option value="shanxi">朝阳区</option> <option value="hebei">昌平区</option> <option value="henan">西城区</option> </optgroup> </select> <p> 简介<textarea name="desc" id="" cols="30" rows="10"></textarea> </p> <label for="www">姓名</label> <input type="text" id="www"> </form> </body> <table border="1px" cellpadding="10px" cellspacing="5px"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>ocean</td> <td>18</td> <td>男</td> </tr> <tr> <td rowspan="2">ocean</td> <td>18</td> <td>男</td> </tr> <tr> <td>18</td> <td>男</td> </tr> </table> </html>
表单属性 HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。 属性：action、method、enctype action 表单要提交的地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后台就知道如何处理这些数据了）。 method 提交的方法，默认是get方式提交。 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制. post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制. enctype 对表单数据进行编码，默认都是要编码的。格式为：application/x-www-form-urlencoded（表单默认的编码格式，表单发送前对所有字符进行编码。编码规则：空格转换为“+”号，特殊符号转换为ASC HEX值）。提交普通的文本内容到服务器就可以采用这种默认的编码方式。当你需要提交的是一个文件时，编码就需要采用另一种格式：multipart/form-data（不对字符编码，文件上传时使用）。text/plain（是一种纯文本编码，空格转换为“+”号，但是不对特殊字符进行编码）。 表单元素 <input> type 属性： text 文本框输入（默认text文本框类型）。 autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用） disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容） password 密码框。（以下属性text和password共有） size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位） maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击 readonly 只读. placeholder 框内预置内容(灰色)，写上内容时才消失 radio 单选按钮。属性： name（将name的值设置为相同值，才表示一组数据，才能实现单选功能） value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号） checked（是否被选中的状态） checkbox 复选框。 name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器） value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号） checked（是否被选中的状态） file 文件域，上传文件（不同的浏览器表现形式不同） submit 提交按钮。用于提交表单。 reset 重置按钮。清空表单的输入，恢复到表单默认的状态。 button 普通按钮。一般结合javascript使用。 image 图片按钮，用来提交表单，与submit是一样的效果。 src（图片路径） hidden 隐藏字段。 value（隐藏的内容） color 颜色标签。value指定颜色值（采用#十六进制数表示）。 date 日期。value值指定默认的日期，格式为****-**-**（年月日）。 datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。 number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。 range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。 week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。 <textarea> 文本域标签。默认表现形式是可以输入很多行文本的文本框。 name （表单提交项的key） cols（设置文本域宽度） rows（设置文本域高度，即行数） <select> 下拉框标签。使用时要结合<option>子标签一起使用。 name:表单提交项的key size：选项个数 multiple：多选 <option> 下拉选中的每一项 value（表单提交项的值） selected（selected下拉选默认被选中） <optgroup>为每一项加上分组 <label> 把元素与文本结合起来 友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。 这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可） <label for="name">姓名</label> <input id="name" type="text"> <fieldset> 对表单中的相关元素进行分组 <fieldset> <legend>温馨提示</legend> <div align="middle">不要忘记点赞哦 ==</div> </fieldset> value: 表单提交项的值 对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值
| 补充 |
1、border-collapse: collapse;如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
2、border-spacing: 5px; border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）
3、caption 元素定义表格标题，caption 标签必须紧随 table 标签之后
4、clear:both，在左右两侧均不允许浮动元素。
5、 <input type="radio" name="gender" value="male" checked> Male checked会默认选上
6、<option value="fiat" selected>Fiat</option> selected默认被选上的