首页 > 其他分享> > 【2022.8.22】前端开发（1）

【2022.8.22】前端开发（1）

2022-08-22 23:33:13 作者：互联网

学习内容概要

前段简介
HTTP超文本传输协议
HTML简介
head内常见标签
body内常见标签

内容详细

前段简介

1.前段与后端的本质
- 前段：与用户直接打交道的操作界面都可以称之为是前段
- 后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序
前段核心基础
- HTML
  - 网页的骨架
- CSS
  - 网页的样式
- JS
  - 网页的动态

超文本传输协议前戏

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开始

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