标签：请求 22 标签 HTML 2022.8 块儿 前端开发 服务端 属性
学习内容概要
- 前段简介
- HTTP超文本传输协议
- HTML简介
- head内常见标签
- body内常见标签
内容详细
前段简介
-
1.前段与后端的本质
- 前段：与用户直接打交道的操作界面都可以称之为是前段
- 后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
-
前段核心基础
- HTML
- 网页的骨架
- CSS
- 网页的样式
- JS
- 网页的动态
- HTML
超文本传输协议前戏
- 1.首先可以手写一个服务端程序
- 2.使用浏览器充当客户端
- 3.浏览器端无法直接展示服务端的响应数据
- 4.由于浏览器需要兼容很多服务端软件 为了实现无障碍的沟通 设定了一些协议来规范沟通的问题
- HTTP协议、FTP协议、HTTPS协议
HTTP协议
-
1.四大特性
-
（1）基于请求响应（客户端请求后服务端才会回复）
-
（2）基于TCP/IP协议之上作用于应用层的协议
-
（3）无状态（没有记忆状态 每次交互都是全新的一次 ）
-
（4）无连接/短连接（每次交互后 就切断了所有的联系）
-
-
2.数据格式
- 1.请求数据格式
- (1)请求首行（请求方式：协议方式及版本（很多））
- (2)请求头（一大堆K：V 键值对）
- (3)换行
- (4)请求体（携带一些敏感的数据（密码 身份证号等）不是所有的请求都有请求体的）
- 2.响应数据格式
- (1)响应首行（响应状态码）
- (2)响应头（一大堆K: V 键值对）
- (3)换行
- (4)响应体（一般情况下就是浏览器要展示给用户看的数据）
- 3.响应状态码
- 利用数字来表示一些复杂的情况说明（类似于暗号）
- 1xx：显示时间较短 表示服务端已经接收到你的请求正在处理 你可以继续提交或等待
- 2xx：（常见的200 ok）服务端给出了相应响应
- 3xx：重定向
- 4xx：403 请求不符合条件（无权限或者没有登陆） 404 请求资源不存在
- 5xx：服务端内部错误
- 有些公司也会自定义状态码：一般情况下从10000开始
- 1.请求数据格式
HTML简介
-
1.理解：超文本标记语言
- 是所有的浏览器展示的页面必备的语言！
-
2.浏览器展示的页面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
-
3.HTML没有任何的逻辑 所写即所得
-
4.HTML注释语法表示
-
5.HTML文件结构
<html><!--所有的代码都必须写在html标签内部--> <head> <!--head内的数据一般都不是给用户看的 可以装饰body里的代码等 --> </head> <body> <!--boby内的数据就是浏览器展示给用户看的--> </body> </html> -
6.HTML标签的分类
1.单标签（自闭和标签） <img/> 2.双标签 <a></a> -
7.HTML代码抒写：是不讲究缩进的
head内常见标签
| 标签 | 含义 |
|---|---|
| title | 控制标签页小标题 |
| style | 内部支持编写CSS |
| link | 引入外部CSS文件 |
| script | 内部支持编写JS代码 也可以通过src属性引入外部JS文件 |
| meta | 通过内部属性的不同可以有很多功能 |
meta实例：
<meta name="keywords" content="可以填写一些关键字 用来提升网页被搜索的概率"
<meta name="description" content="填写一些网页的介绍 展示用户看的"
body内基本标签
| 标签 | 含义 |
|---|---|
| h1~h6 | 标题标签 |
| p | 段落标签 |
| hr | 水平分割线 |
| br | 换行符 |
| u | 下换线 |
| i | 斜体 |
| s | 删除线 |
| b | 加粗 |
- 注意：一种样式 可能存在多种标签可以实现（不是固定的）
块儿级标签与行内标签
1.块儿级标签 h1~h6 p hr br
一行标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大
body内基本符号
| 符号 | 含义 |
|---|---|
| | 空格 |
| > | 大于号 |
| < | 小于号 |
| & | & |
| ¥ | ￥ |
| ® | 注册 |
| © | 版权 |
body内布局标签
| div | span |
|---|---|
| 块儿级标签 | 行内标签 |
- 1.块儿级标签本来是一标签独占一行的 但是可以通过CSS调整为不独占一行
- 2.标签之前很多时候可以嵌套
- （1）块儿级标签可以嵌套任何类型的标签
- （2）p标签虽然是块儿级标签 但是不能嵌套块儿级标签
- （3）行内标签只能嵌套行内标签
body内常见标签
-
1.a标签：链接标签
-
href ： （1） 可以填写网址 点击自动跳转
（2） href还可以填写其他标签的id值 实现锚点功能
-
-
target：（1）可以控制是否新建页面跳转
-
2.img标签：图片标签
标签 含义 src 填写图片地址（网络地址 本地地址） title 鼠标悬浮在图片上就会有提示信息显示 alt 图片加载失败的提示信息 height 调整图片的高度（宽度自动等比例缩放） width 调整图片的宽度（高度自动等比例缩放） - 注意：上述调整图片的宽度和高度 同时调整可能会失帧
标签两大重要属性
- 1.下面的两个属性都是用来快速定位需要操作的标签
1.id属性（一对一管理）
类似于身份证号 再同一个HTML页面上 id值不能重复
2.class属性（一对多管理）
类似于分组 多个标签可以拥有相同的class值
列表标签
-
1.无序列表
<ul type="square"> <li>第一名</li> <li>第二名</li> <li>第三名</li> </ul> type属性： disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式） 总结：页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表 -
2.有序列表
<ol type="1" start="1"> <li>第一名</li> <li>第二名</li> <li>第三名</li> </ol> type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马 总结：type可以选择用什么语言数字 start控制起始位置 -
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dt>标题3</dt> <dd>内容2</dd> </dl>
表格标签
<table>
<thead>
<tr>
<th>num</th>
<th>name</th>
<th>pwd</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>make</td>
<td>666</td>
</tr>
</tbody>
</table>
表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birthday:<input type="date"></p>
<p>email:<input type="email"></p>
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>GF:
<select name="" id="" multiple>
<option value="">小明</option>
<option value="">小波</option>
<option value="">小冲</option>
<option value="">小黄</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
标签：请求,22,标签,HTML,2022.8,块儿,前端开发,服务端,属性 来源： https://www.cnblogs.com/55wym/p/16614636.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。