一、HTML简介
1.浅谈WEB服务
WEB的本质其实就是一个socket服务端，其工作流程为：
1）浏览器发送请求（请求通过HTTP/HTTPS协议进行传输）
2）服务端接收请求并做出相应的响应，将相应的HTTP请求的数据发送给浏览器
3）浏览器渲染页面
2.什么是HTML
全称：超文本标记语言（Hypertext Markup Language,HTML）
HTML是一种编辑网页的标记语言，它的本质是浏览器识别和显示HTML文件的规则，开发人员根据这套规则来设计网页，而值得注意的是不同的浏览器对同一个HTML标签有不同的解释，因此存在兼容性问题
网页文件的扩展名：.html或者.htm
HTML发展史参考：
http://www.cnblogs.com/linhaifeng/articles/8973878.html
3.HTML的文档结构<!DOCTYPE html> <!--声明为HTML5文件-->
<html lang="en"> <!--与</html>编辑文档的开始和结束，是HTML页面的根元素，两者之间包含文档的头部（head）和主体(body)--> <head> <!--与</head>定义文档的开头部分，它们之间的内容不会在浏览器的文档窗口显示，包含文档的元（meta）数据--> <meta charset="UTF-8"> <!--声明浏览器使用的编码格式，不一样会乱码--> <title>Title</title> <!--定义网页标题，在浏览器标题栏显示--> </head> <body> <!--与</body>组成文档的主体，是网页显示的主要内容--> </body> </html>
二、HTML应用
1.HTML的格式
1）由文档结构中看出，标签由尖括号包围
2）闭合标签是成对出现的，比如：<body></body>等，第一个标签是开始，第二个标签是结束，结束标签由斜线
3）非闭合标签是单独出现的，比如<br/>等
4）标签内可加入若干个属性也可不加属性
语法：
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
几个重要的属性：
id 定义标签的唯一ID，HTML文档树中唯一
class 为html元素定义一个或多个类名（classname）(CSS样式类名)
style 规定元素的行内样式（CSS样式）
2.<!DOCTYPE>标签
该声明必须位于HTML的第一行，位于HTML标签之前，它声明的不是HTML标签，而是指示浏览器使用哪个HTML版本进行解释和编写HTML语句
3.常用标签
1）Meta标签
定义网页元信息，提供网页的元信息，针对搜索引擎和更新频度的描述和关键字。该标签位于文档的头部，不包含任何内容，所提供的信息是用户不可见的
包含两个属性，分别是http-equiv和name属性，不同的属性又有不同的参数值以实实现不同的网页功能
I）http-equiv属性
相当于文件头的作用，向浏览器传回可用信息，以帮助正确地显示网页的内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值
<!--3秒后跳转到对应的URL，注意引号--> <meta http-equiv="refresh" content="3;URL=https://www.oldboyedu.com"> <!--指定编码格式--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
II）name属性
主要用于描述网页，与之对应的属性值为content，content的只要内容主要是便于搜索引擎查找和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="Python全栈学习">
2）body内常用标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <br/> <!--换行--> <hr> <!--水平线-->
3）div标签和span标签
I）div标签用来定义一个块级标签，并无实际的意义，只要通过CSS样式为其赋予不同的表现
II）span标签用来定义内联（行内）元素，并无实际意义，只要通过CSS样式为其赋予不同的表现
块级标签和行内标签的区别：
块元素是以另起一行开始渲染的元素，行内元素则不需要另起一行。如果单独在网页中插入两个元素。不会对页面产生影响，这两个元素转为CSS样式而生
注意：
标签嵌套中，通常块级元素可以包含内联元素或者某些块级元素，但是内联元素不能包含块级元素，只能包含其它内联元素
p标签不能包含块级标签
4）img标签
<img src="图片的路径" alt="图片加载失败时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
5）a标签
超链接标签，称为：锚
所谓超链接指的是从一个网页指向另一个目标的连接关系，这个目标可以是一个URL也可以是一个网页上的不同的位置，还可以是照片、程序、邮箱地址、文件等
<a href="http://www.taobao.com" target="_blank" >点击跳转到淘宝</a>
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开
I）href属性指定目标网页的地址，该地址可以有以下几种类型：
绝对URL，指向另外一个站点，例如：href="https:baidu.com"
相对站点，指向当前站点中的某个确切的路径，例如：href="index.htm"
锚URL，指向页面中的锚，例如href="#header"
II）target
_blank，表示在新页面中打开目标网页
_set，表示在当前标签中打开目标网页
6）列表标签
I）ul无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
disc，实心圆，默认值
circle，空心圆圈
square，实心方块
none，无样式
II）有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
III）标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
7）表格标签
表格是一个二维数据空间，一个表格由若干单元格组成，一个行有若干单元格组成，单元格可以包含文字、列表、团表单、数字符号，预配置文本和其它的表格等内容
<table boder="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>1801</td>
<td>zh</td>
<td>python全栈</td>
</tr>
<tr>
<td>1802</td>
<td>ch</td>
<td>Go语言</td>
</tr>
</tbody>
</table>
可选属性:
border 表格边框.
cellpadding 内边距
cellspacing 外边距.
width 像素 百分比.（最好通过css来设置长宽）
rowspan 单元格竖跨多少行
colspan 单元格横跨多少列（即合并单元格）
8）form表单标签
I ）表单的作用
表单用于向服务端传输数据用的，从而实现客户端与服务端的交互。表单能够包含input邪系列标签，比如文本字段、复选框、单选框、提交按钮等，还可包含textaera、select等标签
2）表单的属性
属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集） action 规定向何处提交表单的地址（URL）（提交页面） autocomplete 规定浏览器应该自动完成表单（默认：开启） enctype 规定被提交数据的编码（默认：url-encoded） method 规定在提交表单时所用的 HTTP 方法（默认：GET） name 规定识别表单的名称（对于 DOM 使用：document.forms.name） novalidate 规定浏览器不验证表单 target 规定action属性中地址的目标（默认：_self）
9）input标签
input根据设置不同的属性，变化出多种形态
type属性值 表现形式 对应代码 text 单行输入文本 <input type=text" /> password 密码输入框 <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" /> radio 单选框 <input type="radio" /> submit 提交按钮 <input type="submit" value="提交" /> reset 重置按钮 <input type="reset" value="重置" /> button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" />
可选属性:
name，表单提交时的“键”，注意和id的区别
value，表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked，radio和checkbox默认被选中的项
readonly，text和password设置只读
disabled，所有input均适用
10）select标签
用于实现下拉选项
可选属性：
multiple，布尔属性，设置后为多选，否则默认单选
disabled，禁用
selected，默认选中该项
value，定义提交时的选项值
11）label标签
用于为input元素定义标记，label元素不会像用户呈现任何特殊效果，内部的for属性应当与相关元素的id属性值相同
12）textarea多行文本标签
用于设置多行文本输入框
可选属性：
name，名称
rows，行数
cols，列数
disabled，禁用
练习：
提交form表单前先启动服务端
import tornado.ioloop import tornado.web class Main_Handler(tornado.web.RequestHandler): def get(self): user = self.get_argument('user') password = self.get_argument('password') if user == 'zhang' and password == '123': self.write('认证成功') else: self.write('认证失败') def post(self): user = self.get_argument('user',None) password = self.get_argument('password',None) print(user,password) self.write('POST') application = tornado.web.Application([ (r'/index',Main_Handler) ]) if __name__ == '__main__': application.listen(8081) tornado.ioloop.IOLoop.instance().start()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from action="http://127.0.0.1:8081" method="get">
<fieldset>
<legend>注册页面</legend>
<p>
用户名：
<!--type 指定输入的类型：文本、密码等
name 指定提交的内容的key，相当于字典中的key
-->
<input type="text" name="username" placeholder="请输入用户名">
密码：
<input type="password" name="password" placeholder="请输入密码">
</p>
<p>
性别：
<!--radio 单选框-->
<input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label>
<input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label>
</p>
<p>
爱好:
<!--checked 设置默认选项-->
<input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label>
<input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label>
<input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label>
</p>
<p>
城市：
<select name="city" id="" style=" 200px">
<optgroup label="一线城市">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="SZ" selected="selected">深圳</option>
<option value="GZ">广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="JN">济南</option>
<option value="SZ">苏州</option>
<option value="NJ" selected="selected">南京</option>
<option value="CD">成都</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="注册">
<!--<input type="button" value="注册" onclick="alert(123)">-->
<input type="reset" value="重置" >
</p>
</fieldset>
</from>
</body>
</html>
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签。
补充：
1.注释方法
<!--注释内容-->
2.HTML中的特殊字符
空格
版权 © > > < < & & ¥ ¥