---恢复内容开始---
python/HTML基础
HTML：
超文本标记（标签）语言 （以<>扩起来的都是标签语言，放入标签里的不仅仅是文本）一套语言规则
浏览器的渲染顺序是从上到下，从左到右
不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）至今已经解决的差不多了
.html或htm 静态网页文件扩展名后缀
标签可以进行嵌套，但是不能进行交叉嵌套
HTML 不是一种编程语言，而是一种标记语言，HTML使用标记标签来描述网页
HTML结构：
:是文件的开始标记和结束标记（包含 了）
:是不能会渲染出的
:之间的文本是可见的网页主题内容
html的标签通常都是成对出现的（单独的是自闭合标签）
html的标签不区分大小写
HTML标签格式：
标签的语法：
<标签名 属性名=‘ 属性值’>内容部分<标签名>
常用标签
<！DOCTYPE> 标签声明文档的最前面的位置，处于标签之前，此标签告知浏览器文档使用哪种解析类型（html或xhtml）
<！DOCTYPE> 标签作用：避免浏览器的怪异模式。
document.compatMode:
1、BackCopat:怪异模式，浏览器使用自己的怪异模式解析渲染页面。
2、CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面
这个属性会被刘拉你识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat
内常用标签：
标签
meta介绍
元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的
meta标签的组成：meta标签共有俩个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
（1）name属性：主要用于描述网页，与只对应的属性值为content，content中的内容主要是便于搜索引起机器人查找信息和分类信息用的。
例如：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keywords" content="IT"> name属性
6 <meta name="description" content="老男孩开的"> name属性
7 <title>Meet</title>
8 <link rel="icon" href="https://www.jd.com/favicon.ico">
9 <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="机车"></a>
13 </body>（2）http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keywords" content="IT">
6 <meta name="description" content="老男孩开的">
7 <title>Meet</title>
8 <link rel="icon" href="https://www.jd.com/favicon.ico">
9 <meta http-equiv="refresh" content="3;http：//www.baidu.com"> 这是一个（跳转，3是几秒后，http：//www.baidu.com 是要跳转到的网址）
10 </head>
11 <body>
12 <a href="http://www.baidu.com"><img src="hello.jpg" width="640" height="413" title="机车"></a>
13 </body>
141 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 是声明浏览的兼容性非meta标签：
1 <title>oldboy</title>
2 <link rel="icon" href="http://www.jd.com/favicon.ico">
3 <link rel="stylesheet" href="css.css">
4 <script src="hello.js"></script>内常用标签
基本标签（块级标签和内联标签）
<hn> n的取值范围是1~6，从小到大，用来比表示标题
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <h1>Meet</h1>
10 <h2>Meet</h2>
11 <h3>Meet</h3>
12 <h4>Meet</h4>
13 <h5>Meet</h5>
14 <h6>Meet</h6>
15
16 </body>
17 </html><p> 段落标签，包裹的内容被换行，并且也上下内容之间有一行空白
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <p>千山鸟飞绝</p>
10 <p>万经人终灭</p>
11 <p>孤舟梭立翁</p>
12 <p>独钓寒江雪</p>
13
14 </body>
15 </html>
<b> <strong>: 加粗标签
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <b>Meet</b>Meet
10
11 </body>
12 </html>
<strike>: 为文字加上一条中线
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <strike>100</strike>
10
11 </body>
12 </html>
<em>: 文字变成斜体
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <em>yuan</em>
10 </body>
11 </html>
<sup>和<sub>: 上角标 和 下角表 以及 换行
1 <!--2<sub>3</sub>-->
2 <!--<br>-->
3 <!--2<sup>3</sup>-->
<hr>:水平线
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7
8 <body>
9 <b>GBY</b>
10 <hr>
11 </body>
12 </html>
<dir>和<span>
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
常用标签：
hn(标题） p（分段，段落） br（强制换行） a标签
标签分类：
1、块级标签 -----block
块级便签独占一行
h1、p、div、
2、内联标签 -----inline
根据内容而定
sub 、 sup、span
图形标签<img>
src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keywords" content="IT">
6 <meta name="description" content="老男孩开的">
7 <title>Meet</title> 网页的标题名称
8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 网页的图片
9 <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href="http://www.baidu.com"><img src="helloo.jpg" alt="出错啦" width="640" height="413" title="机车"></a>
13 </body>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="keywords" content="IT">
6 <meta name="description" content="老男孩开的">
7 <title>Meet</title> 网页的标题名称
8 <link rel="icon" href="https://www.jd.com/favicon.ico"> 网页的图片
9 <meta http-equiv="refresh" content="">
10 </head>
11 <body>
12 <a href="http://www.baidu.com"><img src="hello.jpg" alt="出错啦" width="640" 宽 height="413" 高 title="机车" 悬浮提示 ></a>
13 </body>超链接标签（锚标签）<a></a>
什么是超级链接？ 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上 的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序
1 什么是URL？
2 URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
3 URL举例
4 http://www.sohu.com/stu/intro.html
5 http://222.172.123.33/stu/intro.html
6
7 URL地址由4部分组成
8 第1部分：为协议：http://、ftp://等
9 第2部分：为站点地址：可以是域名或IP地址
10 第3部分：为页面在站点中的目录：stu
11 第4部分：为页面名称，例如 index.html
12 各部分之间用“/”符号隔开。href属性指定目标网页地址。该地址可以有几种类型：
1 <a href="http://www.baidu.com"></a>
2 指向另一个地址
3 <a href="hello.jpg"></a>
4 指向本地文件
5 <a href="#part1"></a>
6 指向本内容中的‘锚’列表标签：
2 无序列表、有序列表、定义列表
3 无序列表： unorder list----ul
4 <ul>
5 <li>111<li>
6 <li>222<li>
7 <li>333<li>
8 </ul>
9 有序列表 : order list----ol
10 <ol>
11 <li>111<li>
12 <li>222<li>
13 <li>333<li>
14 </ol>
15 定义列表:define list ----dl
16
17 <dl>
18 <dt>标题</dt> define title
19 <dd>222<dd> define data
20 <dd>333<dd>
21 </dl>表格标签：<table>
表格概念，表格是一个二维 数据空间，一个表格由若干行租成，一行又有由若干单元格组成，单元格可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容
表格最重要的目的是显示表格类数据，表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表格的基本结构：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>菜单</title>
6 </head>
7 <body>
8
9 <table border="2px" cellpadding="10px" cellspacing="1px">
10 <tr>
11 <th colspan="3" align="center">星期一菜谱</th>
12 </tr>
13 <tr>
14 <td rowspan="2">素菜</td>
15 <td>青草茄子</td>
16 <td>花椒扁豆</td>
17 </tr>
18 <tr>
19 <td>小葱豆腐</td>
20 <td>炒包菜</td>
21 </tr>
22 <tr>
23 <td rowspan="2">荤菜</td>
24 <td>油焖大虾</td>
25 <td>海参鱼翅</td>
26 </tr>
27 <tr>
28 <td><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494917021&di=8e8587c2bbe1f2ea7f6b0b923e411c73&src=http://pic30.photophoto.cn/20140219/0042040275809384_b.jpg" height="300px" width="300px">红烧肉</td>
29 <td>烤全羊</td>
30 </tr>
31 </table>
32
33 </body>
34 </html>表单标签：<form>
功能：表单用于向服务器输出数据，从而实现 用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和label标签
表单属性：
action：表单提交到哪？，一般指向服务器端一个程序，程序接受到表单提交过来的数据（即表单元素值）作相应的处理，比如http：//www.sogou.com/web
method:表单的提交方式post/get默认取值就是get
表单元素
基本概念：
HTML表单时HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是自作动态网站很重要的内容
表单一般用来收集用用户的输入信息
表单工作原理：
访问者在浏览器有表单的网页时，可填写必要的信息，然后按摸个按钮提交。这些信息通过internet传送到服务器上
服务器上专门的程序对这些数据进行处理，如果有错误返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
<input>系列标签
<1>表单类型
form表单需要加上属性enctype='multipart/form-data'
上传文件注意两点：
1.请求方式必须是post
2.enctype='multipart/form-data'
<表单属性>
name：表单提交项的键
注意和ID属性的区别：naem属性是和服务器通信时使用的名称；
而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都好使
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <h1>用户注册</h1>
9 <form action="11.html" method="post">
10 <p>用户名：<input type="text" name="username"></p> #通过type属性 导入文本输入框
11 <p>密 码：<input type="password" name="pasd"></p> #通过type属性 导入密码输入框（输入密码时，不会显示出来）
12 <p>爱 好：篮球<input type="checkbox" name="爱好" value="basktball"> # 通过type属性 导入多选框，在多选框前边添加名称
13 足球<input type="checkbox" name="爱好" value="football">
14 乒乓球<input type="checkbox" name="爱好" value="pingpang"></p>
15 <p>性 别：男<input type="radio" name="sex" value="man">女<input type="radio" name="sex"value="women">其他<input type="radio" name="sex" value="None"></p>
16 #通过typee属性 导入单选框
17
18 <p><input type="file" name="filename"></p> #通过type属性 导入提交文件
19 <p><input type="hidden" name="data" value="22"></p>
20 <!--不显示的对应标签-->
21 <p><input type="button" value="button"></p>
22 <!--只是单纯的按钮-->
23 <p><input type="submit" value="submit"></p>
24
25 </form>
26
27 </body>
28 </html>select标签
<select>下拉标签属性
name：表单提交项的键
size：选项个数
multiple：multiple（在属性和属性值相同时不用写属性值）
<optgroup>为每一项加上分组
<option> 下拉选中的每一项 属性
value：表单提交项的值
selected：selected下拉选默认被选中
1 <select name="province" size="2" multiple>
2 <optgroup label="中国">
3 <option value="hebei" selected>河北省</option>
4 <option value="henan" >河南省</option>
5 <option value="shanxi">陕西省</option>
6 <option value="sanxi">山西省</option>
7 <option value="sichuan">四川省</option>
8
9 </optgroup>
10
11 </select>
<textarea>多行文本框
<form id='form' name='form1' method='post' action=''>
<textarea clas='宽度 rows='高度' name='名称'>
</textarea>
</form>
1 <form action="11.html" method="post">
2 <p>用户名：<input type="text" name="username"></p>
3 <p>密 码：<input type="password" name="pasd"></p>
4 <p>爱 好：篮球<input type="checkbox" name="爱好" value="basktball">
5 足球<input type="checkbox" name="爱好" value="football">
6 乒乓球<input type="checkbox" name="爱好" value="pingpang"></p>
<label>标签
定义：<label>标签为input元素定义标注（标记）
说明：
1、label元素不会像用户呈现热河特殊效果
2、<label>标签的for属性值应当与相关元素的id属性值相同
<form method='post' action=''>
<label for ='uesrnaem'>用户名</label>
<input type='text name='usernaem' id='usernaem' size='20'></form>
1 <label for="username">用户名</label>
2 <input type="text" name="'username" id="username">
<fieldset>标签
<fieldset>
<legend>登录吧</legend>
<input type='text'>
</fieldset>
1 <fieldset>
2 <legend>登录</legend>
3 <input type='text'>
4 </fieldset>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
