前端基础之HTML
一、什么是Html
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
最基本的HTML文档：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档。
<html></html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head></head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title></title>定义了网页标题，在浏览器标题栏显示。
<body></body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">
二、标签格式及注释
- HTML标签是由尖括号包裹的关键字，如<html>, <div>等
- HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线
- 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="a.jpg" />
- 标签里面可以有若干属性，也可以不带属性（重要属性：id，定义标签的唯一ID。class：为html元素定义一个或多个类名（classname）(CSS样式类名)。style：规定元素的行内样式（CSS样式））
#注释 <!--注释代码内容-->
三、常用标签
3.1、head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
<!--3秒后自动刷新--> <meta http-equiv="Refresh" Content=3> <!--3秒后跳转到对应的网址--> <meta http-equiv="refresh" content="3;URL=https://www.baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!--关键字xxxx，用于搜索--> <meta name="keywords" content="xxxx"> <!--站点描述信息xxxx--> <meta name="description" content="xxxx"> <!--站点图标--> <link rel="shortcut icon" href="/image/f.ico">
meta标签提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词，其位于文档的头部，不包含任何内容，提供的信息是用户不可见的。其组成包含两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能
3.2、body内常用标签
3.2.1、基本标签及特殊字符
#基本标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <!--标题标签h1-h6--> <h1></h1> <!--换行--> <br> <!--水平线--> <hr>
特殊字符：
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
3.2.2、div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现
块级标签与行内标签的区别：
所谓块级标签，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
注意：
- 通常块级标签可以包含内联标签或某些块级标签，但内联标签不能包含块级标签，它只能包含其它内联标签
- p标签不能包含块级标签，p标签也不能包含p标签
3.2.3、img标签和a标签
#img标签 <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> #a标签 <a href="http://www.baidu.com" target="_blank" >百度</a> #href属性指定目标网页地址。该地址可以有几种类型： #绝对URL - 指向另一个站点（比如 href="http://www.jd.com） #相对URL - 指当前站点中确切的路径（href="index.htm"） #锚URL - 指向页面中的锚（href="#top"） #target： #_blank表示在新标签页中打开目标网页 #_self表示在当前标签页中打开目标网页（默认）
3.2.3、列表与表格
#列表 #1、无序列表 <ul type="disc"> <li>1</li> <li>2</li> </ul> #type属性：disc（实心圆，默认值）、circle（空心圆）、square（实心方块、none（无样式） #2、有序数字列表 <ol type="1" start="2"> <li>第一</li> <li>第二</li> </ol> #type属性：（1排序 ，默认值）（A 大写字母排序）（a 小写字母排序）（Ⅰ大写罗马字符排序）（ⅰ小写罗马字符排序） start：从几开始排序 #3标题列表（分层） <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
#表格
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jump</td>
<td>crazy</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>crazy</td>
<td>jump</td>
</tr>
<tr>
<td colspan="2">crazyjump</td>
</tr>
</tbody>
</table>
#属性:
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行(向下)
colspan: 单元格横跨多少列（向左）
3.2.4、form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互。表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等，表单还可以包含textarea、select、fieldset和 label标签。
表单属性：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）（POST） |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| novalidate | 规定浏览器不验证表单 |
| target | 规定 action 属性中地址的目标（默认：_self） |
input标签
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date/time | 日期/时间输入框 | <input type="date" /><input type ="time"> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" />（checked默认选中） |
| radio | 单选框 | <input type="radio" /> （name相同互斥） |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
补充： id:标签的id name：表单提交时的“键” value：表单提交时对应项的值 checked：radio和checkbox默认被选中的项 readonly：text和password设置只读 disabled：所有input均适用 placeholder="请输入你的用户名" ：提示输入
select标签（下拉框）
<select name="xxx" size="10" multiple="multiple">
<option value="bj" selected="selected">北京</option>
<option>上海</option>
<optgroup label="南京">
<option>玄武</option>
<option>鼓楼</option>
</optgroup>
</select>
#属性说明：
multiple：设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
label标签
<label> 标签为 input 元素定义标注
说明：label 标签不会向用户呈现任何特殊效果。label 标签的 for 属性值应当与相关元素的 id 属性值相同
<label for="username">用户名</label> <input type="text" id="username" name="username">
textarea标签（多行文本）
<textarea name="name" id="1" cols="10" rows="10"> 默认内容 </textarea> name：名称 rows：行数 cols：列数 disabled：禁用
3.2.5、补充上传文件
<form action="/home/index" method="PST" enctype="multipart/form-data">
<input type="file" name="filename">
</form>
if request.FILES:
filename = request.FILES["filename"].name
with open(filename, 'wb') as f:
for chunk in request.FILES['file'].chunks():
f.write(chunk)
