学习地址：http://www.shangzekai.xyz/2017/05/07/html基础目录/
一、HTML是什么?
1.超文本标记语言（Hypertext Markup Language，HTML）通过标记符号来标记要显示的网页中的内容。
2.其实就是一套规则，浏览器认识的规则。
3.浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。
4.对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。
1.1、HTML写法
< !DOCTYPE html > <!--#告诉浏览器以什么样的规则去解释html，类似于shell的 "#!/bin/bash"-->
<html lang="en"> <!--#lang语言="en"英文。lang是一个属性,en是属性值。-->
<head> <!--#头部-->
<meta charset="UTF-8"> <!--meta：描述源信息，这里表面整个页面是以"UTF-8"字符集解析-->
<title>网页标题</title> <!--网站的标题-->
</head>
<body> <!--#内容-->
文件体
</body>
</html> 单标签闭合：如 <br />、<hr />和<img src=“images/1.jpg” />等
双标签闭合：比如 <div> 和 </div>
二、html常用标签之Meta
<meta>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的
三、排版标识
1.标题部分
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
6种标题效果标签。分别为h1~h6。<h1>字体最大，<h6>字体最小
2.分割线
<html>
<hr>
</html>3.换行 <br>
<html>
<br>
</html>4、换行2 <p>
<p>sudada</p>sudada
5、屏幕滚动(轮播)
<marquee behavior="" direction="left">Hello</marquee>direction #指的是往哪个方向滚动，可以使用"上"下"左"右"
Hello #滚动的内容
四、标签列表
4.1、无序列表
<body>
<ul> # 带属性写法： <ul type="circle">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ul>
</body>效果图：
常用属性解释：
属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)
4.2、有序列表
<body>
<ol> # 带属性写法 <ol type="a">
<li>zhangsan</li>
<li>lisi</li>
<li>wangwu</li>
</ol>
</body>效果图：
常用属性解释：
属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）
属性：start起始编号，默认为1，即由最小编号开始
五、常用标签之a标签
1、语法：<a 属性=“属性值”>标签内容</a>
2、常见的属性：href
接远程目标：通过URL地址链接到远程目标。
链接本地页面：可以通过相对路径或者绝对路径链接本地页面。
相对路径：指相对于当前页面位置的路径
./ ：表示当前页面所在的目录
../ ：表示当前页面所在的上一级目录
绝对路径：绝对路径指当前站点中确切的路径，一般以”/”开始 例如：<a href=“/admin/index.py”>后台首页</a>3、常见例子：
做域名跳转 (类似于office的超链接)
<a href="https://www.baidu.com">跳转到百度</a>
<a href=“http://www.sina.com.cn”>新浪网</a>
# 写法：<a href="跳转的地址">
# 域名前必须写http或者https，否则读取的是当前目录下的文件。跳转到本地文件：
相对路径：<a href="include/login.html">登录页面</a>
绝对路径：<a href="/html/123.html">国内新闻</a>链接到邮箱：
<a href=“mailto:976296751@qq.com”>给我发邮件</a>下载文件：
<a href="/download/winRAR.rar">下载WinRAR</a>
<a href="download/office2007.rar">下载office2007</a>
4、新开一个浏览器窗口打开跳转的页面 target
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>
<a href="https://www.baidu.com" target="_self">跳转到百度</a>
# _blank表示在新窗口中打开目标网页
# _self表示在当前窗口中打开目标网页
六、常用标签之img标签
语法：<img src="URL" alt="规定图像的替代文本"/>
<body>
<img src="DDD.jpg" alt="猫咪"> #如果显示不出来这个图片，那么就显示猫咪这个文字说明
</body> 如图：
img常见的属性用法说明：
| 属性 | 值 | 含义 |
|---|---|---|
| src | 图像URL | 规定图像的URL |
| alt | 字符串 | 规定图像的替代文本 |
| width | px / % | 规定图像的宽 |
| height | px / % | 规定图像的高 |
| border | px | 图像的边框粗细 |
七、html常用标签之div和span元素
1. <div></div>
<div>只是一个块级元素，并无实际的意义. 主要通过CSS为其赋予不同的表现
2. <span></span>
<span>内联行(行内元素),并无实际的意义. 主要通过CSS为其赋予不同的表现
块级元素与行内元素的区别:
块级元素：h1-h6,<hr>,<p>
行内元素：span img
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，如果单独在网页中插入这两个元素，不会对页面产生任何的影响，这两个元素是专门为定义CSS样式而生的。
八、html常用标签之table标签
<body>
<table border="1px">
<tr>
<td>用户名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>效果图：
1.参数
1), <table></table>表示的表格的开始和结束
2), <tr></tr>表示的是表格的一行
3), <td></td>表示的是一个单元数据格
4), <th></th>表示表格标题单元格，且加粗居中显示2.table的常用属性
| 属性 | 值 | 含义 |
|---|---|---|
| width | px或% | 表格的宽度 |
| height | px或% | 表格的高度 |
| border | px | 表格的边框的粗细 |
| align | Left/center/right | 元素的对齐方式 |
3.例子
<body>
<table border="1px">
<tr>
<td>ID</td>
<td>新闻标题</td>
<td>点击量</td>
<td>发布时间</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</table>
</body>效果图：
九、常用标签之form表单元素标签
9.1、基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息。
9.2、表单的工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。
这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。
9.3、常用的输入用户名和密码框：
<body>
<input type="text">
<input type="password">
<input type="submit">
<!--<input type="button" value="普通按钮">--> <!-- #button只是一个普通的按钮不能提交-->
</body>效果图：
9.4、常见的INPUT标签
| type属性值 | 空间名称 | 对应代码 |
|---|---|---|
| text | 单行文本输入框 | <input type="text"/> |
| password | 密码输入框 | <input type="password"/> |
| 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" value=“隐藏按钮”/> |
| file | 文本选择框 | <input type="file"/> |
9.5、常见输入用户名和密码提交，以及后端校验数据
前端代码：
<form action="http://127.0.0.1:8888/index" method="get">
用户名：<input type="text" name="username" placeholder="用户名">
密码：<input type="password" name="pwd" placeholder="密码">
<input type="submit">
<input type="reset" value="重置">
</form>效果图：
关键参数介绍：
form action ：向服务端发送请求，默认已GET的方式请求。可以通过method="post"的方式来定义请求方式。
POST请求方式: POST是通过HTTP协议发送数据到服务端的
GET请求方式: GET是通过浏览器地址栏的方式发送数据到服务端的
后端代码： #需要先安装tornado 方法：pip3 install tornado
#服务端
import tornado.ioloop
import tornado.web
class MainHandler(tornado.web.RequestHandler):
def get(self):
username=self.get_argument('username')
pwd=self.get_argument('pwd')
print(username)
# 这里把拿到的用户名，与数据库里面的用户名做检查，如果在DB里面可以拿到的话那么就登录成功，否则就登录失败！
self.write(username)
self.write("Hello, world this is a GET")
def post(self):
username = self.get_argument('username')
print(username)
self.write('This is a POST')
application = tornado.web.Application([
(r"/index", MainHandler),
])
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()
9.6、表单标记属性
| 属性 | 值 | 含义 |
|---|---|---|
| action | url | 指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码 |
| method | get或post | 将表单数据提交到http服务器的方法，可能值有两个：get和post |
| enctype | application/x-www-form-urlencoded | 指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。 |
9.7、Get和Post提交的区别
Get方式提交：
如果为get，那么所提交的数据集将被作为一个由表单的所有名/值对组成的查询字符串（query string）添加到表单处理器的URL（action属性）的末尾。
比如：http://127.0.0.1:8888/index?username=123&pwd=123
这种方法提交的信息在长度上有一定限制，而且不安全，适合简单的数据查询。
Post方式提交：
如果为post，那么数据集将直接发给表单处理程序，而不是以可见的URL查询字符串的形式。
post方法可以提交更长的数据，并且相对安全一些，传送的数据类型更多一些（不限于ASCII字符），因而适用于数据更复杂的表单
9.8、Input标签测试和练习：
<form action="http://127.0.0.1:8888/index" method="post">
用户名：<input type="text" name="username" placeholder="用户名">
密码：<input type="password" name="pwd" placeholder="密码">
<input type="submit">
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="hidden" value="123123" name="salary"><p> <!--隐藏一个数据"123123"，给它赋值为"salary"，那么在服务端调用的时候就调用这个salary就OK-->
<input type="file"><p>
足球: <input type="checkbox" name="hobby" value="足球" checked> <!--复选框(可以多选),如果要把这么数据提交给服务端的话，需要加name="hobby",value="足球"。那么服务端调用的时候就调用这个hobby就可以拿到"足球"这个值了-->
篮球: <input type="checkbox" name="hobby" value="篮球">
排球: <input type="checkbox" name="hobby" value="排球"><br>
male: <input type="radio" name="gender" value="male"> <!--单选选框(只能选取一个),如果要把这么数据提交给服务端的话，需要加name="gender",value="male"。那么服务端调用的时候就调用这个gender就可以拿到"male"这个值了-->
female：<input type="radio" name="gender" value="female">
</form>
# checked 表示默认选择足球这一列效果图：
9.9、Input标签各个用法需要注意的问题
上传文件控件 file
有“上传文件域”，必须指定MIME类型enctype=“multipart/form-data”>，否则无法上传文件。
上传文件域，只在method=“post”下才有效。
隐藏控件 hidden
<input type=“hidden” name=“nid” value=“234” />
隐藏字段对于用户是不可见的，隐藏字段通常会存储一个默认值，一般用在，修改某条数据时，用来记录数据的id号。
普通按钮 button
<input type=“button” name=“button” value=“普通按钮” />，定义可点击的按钮，但没有任何行为，一般配合JS使用。
十、SELECT下拉列表
10.1、常见的基本结构
<body>
<form action="http://127.0.0.1:8888/index" method="post" enctype="multipart/form-data">
请选择城市：<select name="city" id="city">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
<option value="hz">杭州</option>
</select>
<input type="submit">
</form>
</body>
#默认显示第一列内容"北京"，加上selected="selected"的话，那么第一个显示的内容就是"上海"效果图：
10.1.1、属性说明
multiple : 布尔属性，设置后允许多选，否则只能选择一个
disabled : 禁用该下拉列表
selected : 首次显示时,为选中状态
value : 定义发往服务器的选项值
10.2、TEXTAREA多行文本框
<body>
<form>
<textarea name="question" id="question" cols="30" rows="10"></textarea>
</form>
</body>
# cols 列数
# rows 行数效果图：
10.2.1、属性说明
| 属性 | 属性值 | 说明 |
|---|---|---|
| name | name | 控件名称 |
| rows | number | 设置多行文本框的显示行数（高度） |
| cols | number | 设置多行文本框的显示列数（宽度） |
| disabled | disabled | 布尔属性，设置当前文本框为禁用状态 |
10.3、LABEL表单修饰
<form id="form1" name="form1" method="post" action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</form>说明：
label 元素不会向用户呈现任何特殊效果
<label>标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐，美化表单
十一、小例子：
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
