前端知识
Noseparte 2020-06-28
前端知识
web服务的本质：
基于B/S网络架构，浏览器和服务端的交互
浏览器发送请求，服务端接收请求，服务端响应请求，服务端吧HTML文件内容发给浏览器，浏览器渲染页面
发送请求通过OSI网络七层模型：应用层，表示层，会话层，传输层，网络层，数据链路层，物理层
一、HTML介绍
html是超文本标记语言，用于创建网页的标记语言
本质是浏览器能识别的规则，不过容易出现浏览器的兼容问题导致渲染效果不同
网页文件的拓展名：.html或htm
注：html不是编程语言，只是一种标记语言；标记语言是不存在逻辑的
1、html文档结构
html文件的创建：
? 在pycharm中创建html文件，找到html文件直接创建
? 在其它编译软件中创建html文件，和在pycharm中类似
? 手动创建就先先创建一个.txt文件，然后把文件后缀名改成.html文件，然后在文件中写入固定格式
1.<!DOCTYPE html>声明文件为html5文档 2.<html></html>是文档的开始标记和结束标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body） 3.<head></head>定义了HTML文档的开头部分，他们之间的内容不会在浏览器的窗口直接显示。包含了文档的元（meta）数据，配置信息等，是给浏览器的用的，用户看到的直接效果是body里面写的。 4.<title></title>定义了网页标题，在浏览器的标题栏显示。 5.<body></body>之间的文本是可见的网页主体内容
注：在中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。有些网站的默认编码是gbk，所以把utf-8改成gbk即可
2、html标签格式
html的标签格式是严格封闭的
html的标签是成对出现的
全封闭标签
标签的开始是尖括号<>加关键字
标签的结尾是尖括号和斜杠</>加关键字
例：<p></p>、<div></div>
这种标签叫全封闭标签
自封闭标签
只有单独的前面部分
例：<img>、<hr>、<br>
全封闭标签还有另一种写法，就是在前半部分的>前面加一个斜杠
例：<span />3、html常用标签
<title></title>：定义网页标题 <style></style>：定义内部样式 <script></script>：引入js代码或引入外部js文件 <link />：引入外部样式文件 <meta/>：定义网页原信息
meta标签的三个参数
name="keywords"：搜索关键字
name="description"：显示栏后面的介绍内容
http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"：在2秒后页面自动跳转到百度
<meta name="keywords" content="30期"> <meta name="description" content="体彩"> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
4、浏览器的内核
浏览器内核：
浏览器 内核
IE trident
chrome blink
? 火狐 gecko
Safari webkit
注：浏览器内核是浏览器采用的渲染引擎，宣言引擎决定了浏览器如何显示网页内容以及页面的格式信息。渲染引擎也是兼容性问题出现的根本原因
5、body内常用的标签
（1）块级标签（行外标签）：块级标签单独用页面一快空间，单独占用一行空间可设置宽度和高度
（2）内联标签（行内标签）：内敛标签不会单独占用一块空间，不能单独占用一行空间无法设置宽度和高度
内联标签
<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）特殊字符
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权标识符（） | © |
| 注册（?） | ® |
（4）div标签：div标签是块级标签，通过块级标签可以对块以极快内的元素进行样式的修改与设定
（5）span标签：span标签是内联标签，可进行针对段落的微调与设定
但要注意div与span使用时的嵌套关系，div内可多层嵌套使用div，也可使用span，但是span内不能嵌套span或者div等块级标签
（6）img标签：超链接标签；所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
<a href="http://www.oldboyedu.com" target="_blank" >点我</a> _blank：表示以新页面打开链接 _self：表示在当前标签页中打开目标网页
（7）列表
? 无序列表
? type属性：
? disc（实心圆点，默认值）
? circle（空心圆圈）
? square（实心方块）
? none（无样式）
? 有序列表
? type属性：start是从数字几开始
? 1数字列表，默认值
? A 大写字母
? a 小写字母
? Ⅰ大写罗马
? ⅰ小写罗马
无序列表 <ul type="disc"> <li></li> </ul> 有序列表 <ol> <li></li> </ol> 标题列表 <dl> <dt></dt> <dd></dd> </dl>
（8）表格
? 表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
? 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
? 表格的基本结构：
<table border=‘1‘>
<thead> #标题部分
<tr> #一行
<th></th> #一个单元格,自动加粗
</tr>
</thead>
<tbody> #内容部分
<tr> #一行
<td></td> #一个单元格
</tr>
</tbody>
</table>? 属性:
? border: 表格边框.
? cellpadding: 内边距 （内边框和内容的距离）
? cellspacing: 外边距.（内外边框的距离）
? width: 像素 百分比.（最好通过css来设置长宽）
? rowspan: 单元格竖跨多少行
? colspan: 单元格横跨多少列（即合并单元格）
（9）input标签
| type属性 | 表现形式 | 代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框（不显示明文） | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" name=‘x‘ /> |
| radio | 单选框 | <input type="radio" name=‘x‘ /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新 |
| reset | 重置按钮 | <input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空 |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> （等学了form表单之后再学这个） |
? 属性说明:
? 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标签
<select name="city" id="city">
<option value="1"></option>
<option selected="selected" value="2"></option> #默认选中，当属性和值相同时，可以简写一个selected就行了
</select>? 属性说明：
? multiple：布尔属性，设置后为多选下拉框，否则默认单选
? disabled：禁用
? selected：默认选中该项
? value：定义提交时的选项值
（11）label标签
定义： 标签为 input 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。
? 说明：label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容;<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<label for="username">用户名</label> # 只能是id属性 <input type="text" id="username" name="username">
（12）textarea多行文本
? 可设置是否允许手动拉伸：resize: none;
<textarea name="memo" id="memo" cols="30" rows="10"> </textarea>
? 属性说明：
? name：名称
? rows：行数 #相当于文本框高度设置
? cols：列数 #相当于文本框长度设置
? disabled：禁用
? maxlength：显示字符数，例如：maxlength=‘10‘ 最多输入十个字符
