一、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.htmlhttp://222.172.123.33/stu/intro.htmlURL地址由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.ioloopimport tornado.webclass 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="width: 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中的特殊字符
空格 ???
版权 ???©> ?????>< ?????<& ?????&￥ ?????¥
前端-HTML
原文地址：https://www.cnblogs.com/mdzzbojo/p/9130714.html