[前端、HTTP协议、HTML标签]什么是前端任何与用户直接打交道的操作界面都可以称之为前端比如:电脑界面 手机界面 平板界面什么是后端后端类似于幕后操作者(一堆让人头皮发麻的代码)不直接跟用户打交道为什...
[前端、HTTP协议、HTML标签]
什么是前端
为什么学前端
前端学习历程
软件开发架构
浏览器窗口输入网址回车发生了几件事
HTTP协议
HTML介绍
Htyper Text Markup Language 即超文本标记语言。
超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染页面给用户看，这个规则就是HTML。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
html固定的文档结构组织，标准模板：
HTML标签
Head内常用标签
常用标签
Meta标签
非meta标签
body内常用标签
body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面意思就可以理解被标记的内容是用来做什么的
基本标签
特殊符号
HTML特殊符号对照表
div 块级标签
- 独占一行
- 块级标签能够嵌套块儿级标签和行内标签
- p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
- 块级标签能够设置长宽
sqan 行内标签
- 自身内容有多的就占多大
- 行内标签不能设置长宽
注：块级标签可以设置长宽，行内标签不能设置长宽
h标题标签
标记内容为一个标题，全称headline
p段落标签
- 段落标签. 标记内容为一个段落，包裹的内容被换行.并且也上下内容之间有一行空白.全称paragraph
img标签
- 行级标签，用来显示图片，全称image
a标签
-
超链接标签(锚标签)，全称anchor
-
超链接标签是超文本文件的精髓，可以控制页面与页面之间的跳转
页内锚点
(仅做参考，测试一定要多行演示)
列表标签
-
标记一堆数据是一个整体/列表
-
html中列表标签分为三种
table表格标签
-
标记一段数据为表格
-
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据
表的基本结构：
表格标签：
<tr>：表格的数据行，table row <td>：显示表格内容的单元格，table data cell <th>：表头名称单元格,与<td>不同在于文字采用加粗居中的形式显示，table head cell <caption>：表格的标题 <thead>：表格头部，使结构更加分明 <tbody>：表格主体部分，使结构更加分明 <tfoot>:表格尾部
表格属性:
- border: 表格边框.（默认情况下这个属性的值为0，所以看不到边框）
- cellpadding：内边距.
- cellspacing：外边距.
- width：像素 百分比.（最好通过css来设置长宽）
- rowspan：单元格竖跨多少行
- colspan：单元格横跨多少列（即合并单元格）
- align：水平对齐方式
- bgcolor：背景颜色
练习:（原生的表格标签很丑，后续都是使用框架封装好的，很好看）
form表单标签
- 表单用于向服务器传输数据，从而实现用户与Web服务器的交互
- 表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
- 表单还可以包含textarea、select、fieldset和 label标签。
表单属性
HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中。
属性：action、method、enctype
action 表单要提交的后端路径地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后端就知道如何处理这些数据了）。
method 提交数据的方法，默认是get方式提交。
get方式提交数据:
1.提交的键值对.放在地址栏中url后面.
2.安全性相对较差.
3.对提交内容的长度有限制.
post方式提交数据:
1.提交的键值对不在地址栏.
2.安全性相对较高.
3.对提交内容的长度理论上无限制.
enctype 对表单数据进行编码，默认都是要编码的。
表单元素
value: 表单提交项的值
针对用户选择的标签，用户不需要输入内容，但是你需要提前给标签添加内容value值
对于不同的输入类型，value 属性的用法也不同：
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值
表单演示：（注册功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="inp1">用户名:</label>
<input id="inp1" type="text" name="username" placeholder="请输入您的用户名">
</p>
<p>
密码:
<input type="password" name="password" value="123" disabled>
</p>
<p>
爱好：
<input type="checkbox" name="hobbies" value="打篮球">打篮球
<input type="checkbox" name="hobbies" value="踢足球" checked>踢足球
<input type="checkbox" name="hobbies" value="羽毛球" checked>羽毛球
</p>
<p>
性别：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女" checked>女
<input type="radio" name="gender" value="保密">保密
</p>
<p>
出生日期：
<input type="date" name="bitrh">
</p>
<p>
邮箱：
<input type="email" name="email">
</p>
<p>
手机号
<input type="number" name="phone">
</p>
<p>
头像
<input type="file" name="myfile.png" multiple>
</p>
<p>
<textarea name="comment" id="" cols="50" rows="20" style="resize: none">
</textarea>
</p>
<p>
<select name="addr" size="5" multiple>
<optgroup label="一线城市">
<option value="深圳">深圳</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州" selected>广州</option>
</optgroup>
<optgroup label="二线城市">
<option value="宁波">宁波</option>
<option value="昆明">昆明</option>
<option value="厦门">厦门</option>
<option value="济南" selected>济南</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="注册">
<input type="button" value="按钮" onclick="alert(123)">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
