前端基础和HTML

前端基础和HTML

1、什么是前端

任何与用户直接打交道的操作界面都可以称之为是一个前端

  • 电脑显示界面
  • 手机界面
  • Ipad

2、web服务的本质

浏览器窗口输入一个网址回车进入做了哪些事：

  1. 朝着指定的服务端发送请求
  2. 服务端接收请求
  3. 服务端返回响应
  4. 浏览器接收响应按照特定的规则渲染展示给用户

3、HTTP协议

超文本传输协议（HTTP协议）：规定了浏览器与服务端之间数据的传输格式

HTTP/1.x 有连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷。

HTTP/2 通过多路复用、二进制流、Header 压缩等等技术，极大地提高了性能,http2会慢慢取代HTTP/1.x 而被广泛采用。

1、四大特性

  1. 基于请求响应：一次请求一次响应
  2. 基于TCP/IP作用域应用层之上的协议
  3. 无状态
    1. 不保留客户端的状态
    2. 无论来多少次都待你如初见
    3. 可以用cookie session token ...来保留状态
  4. 无连接：长链接：websocket（类似于HTTP协议的大补丁）聊天室相关

2、数据格式

  1. 请求格式

    • 请求首行（请求方式，协议版本）

    • 请求头（一大堆k, v 键值对）

    • 空行

    • 请求体（携带的数据 并不是一直都有，有时候可能是空的，取决于你的请求方式）

  2. 响应格式

    • 响应首行（响应状态码）
    • 响应头（一大堆k, v 键值对）
    • 空行
    • 响应体（浏览器展示给用户看的数据）

3、响应状态码

​ 用数字来表示一大堆提示信息

  • 1XX：服务端已经接收到客户端的信息，正在处理，你可以继续提交
  • 2XX：200请求成功，服务端已经返回了数据
  • 3XX：重定向（原本想访问A的内部自动转到B上面）
  • 4XX：404请求资源不存在，403不具备请求该资源的条件
  • 5XX：500服务端内部的错误， 机房问题

4、请求方式

1、get请求

​ 朝服务端要资源（获取数据），类似于浏览器窗口输入输入网址获取数据

2、post请求

​ 朝服务端提交数据（提交数据），类似于登录注册功能

5、HTML

超文本标记语言

让你的页面被浏览器打开展示的更加好看

浏览器能识别的语言：HTML / XML，CSS，JS

XML也可以书写前端页面，主要用于odoo框架，书写企业内部管理软件（ERP）

书写HTML标签的时候，只需要写标签的名字+tab键会自动补全，emmet插件

1、HTML注释

​ 注释是代码之母

单行注释：<!--单行-->
多行注释:<!--
			多行注释1
			多行注释2
			-->

由于HTML页面结构比较复杂，内容比较多，不便于后期维护，通常在写页面的时候习惯用下面的方式来划分代码区域

<!--顶部导航条样式开始-->
		
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
		
<!--左侧菜单栏样式结束-->

2、HTML文档结构

<html>
    <head>
        head里面放的是给浏览器去识别做相应的操作
    </head>
    <body>
        body里面放的内容是浏览器展示给用户看到的页面
    </body>
</html>

3、HTML文档打开方式

  1. pycharm自动调用浏览器打开
  2. 手动找到路径之后选择浏览器打开

4、标签的分类

分类1：

  1. 双标签
  2. 自闭和标签

分类2：

  1. 块级标签：独占一行，h1~h6 p br div
    1. 块级标签内部可以嵌套任意的块级标签和行内标签
    2. 特例：p标签内部只能嵌套行内标签，不能嵌套块级标签，不符合规范
  2. 行内标签：u s i b span
    1. 自身文本多大就占多大
    2. 行内标签内部不能嵌套块级标签和行内标签

5、head内常用标签

​ title：定义网页标题

​ style：内部支持直接写CSS代码

​ link：引入外部的css文件

​ script：1. 内部可以直接编写js代码

​ 2. 可以通过src 属性引用外部js代码

​ meta：

​ meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2、name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="百度搜索，你一切想知道的">

url：统一资源定位符

6、body常用标签

展示给用户看见的页面

1、基本标签

h1~h6：标题标签

s：删除线

b：加粗

u：下划线

i：斜体

br：换行

hr：分割线

p：独占一行

<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<s>文本内容</s>
<b>文本内容</b>
<u>文本内容</u>
<i>文本内容</i>
<hr>
<p>文本内容1</p>
<br>
<p>文本内容2</p>
</body>

2、特殊符号

&nbsp;&nbsp;&nbsp;&nbsp;4个空格（有几个空格写几个&nbsp;)
<p>a大于b a&gt; b</p>
<p>a小于b a&lt; b</p>
<p>a&b a&amp; b</p>
<p>人民币 &yen; 100000000</p>
<p>版权注册 &copy; </p>
<p>注册商标 &reg; </p>

3、常用标签

1、div 块级标签，span行内标签，本身没有特殊意义，但经常使用，用作前期的页面布局

2、img 图片标签

​ 1、src

​ 可以写一个网站的图片地址

​ 可以写本地的图片地址

​ url（自动向url发送的get请求要数据）

​ 2、alt：当图片加载不出来的时候默认展示的提示信息

​ 3、title：当鼠标悬浮在图片上面的时候，展示的信息

​ 4、width、height 修改一个另一个也会等比例缩放，保证图片不失真，如果两个都修改可能会图片失真

3、a 链接标签

​ 1、href ：放一个url会自动跳转到该url所对应的资源

​ 2、target ：控制是否在当前页跳转，默认是在当前页跳转（_self）新建页面跳转 _ balnk

​ 3、锚点功能 ：href不单单可以写url也可以写另一个a标签id值，点击该id值所对应的a标签所在的位置

<body>
<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=748160848,4000382317&fm=173&app=49&f=JPEG?w=450&h=338&s=D5832FF5A997D8CEC391E559030040F3" alt="这是一张小区图片" title="小区" width="500xp">
<a href="https://www.mzitu.com" id="d1" target="_blank">点击进入</a>
<p>111</p>
<a href="#d1">回到id是d1的位置</a>
</body>

标签应该具备的属性：

​ 1、id属性：类似于身份证号，用来唯一标识HTML中的某一个标签，在同一个HTML中id值不能相同

​ 2、class属性：类似于面向对象的继承，直接引用别的类的样式

4、列表标签

无序列表（较多）：

ul li ：只要页面上出现了比较有规则的排列文本基本上都可以用无序列表来实现

有序列表：

ol li

标题列表：

dl dt 标题 dd内容

<ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
</ul>
<ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表2</li>
</ol>
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
</dl>

5、表格标签

展示网站数据的时候，一般情况下可以使用表格标签

表格标签，先写结构，再写数据

一个tr就是一行

th和td之分：th加粗，td不加粗，表头一般用th，内容一般用td

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）
<table border="5"> <!-- border将表格加上线框，外部线宽是5-->
    <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>性别</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Mr沈</td>
            <td>123</td>
            <td>male</td>
        </tr>
        <tr>
            <td>Vicky</td>
            <td>123</td>
            <td>female</td>
        </tr>
    </tbody>
</table>

6、表单标签

form标签：获取用户输入，并且将数据打包发送给后端

关键性的属性参数：

action参数：用来控制数据提交的路径（到底朝哪个后端服务器提交数据）

​ 三种写法：

​ 1、不写 ，默认就是朝当前该页面所在的地址提交数据

​ 2、全路径（https://www.baidu.com）

​ 3、只写路径后缀（/index/)

method参数：用来控制数据的提交（get / post）路径

​ form表单默认是get请求 method = 'get'，可以指定post请求 method = 'post'

get请求能够携带参数，但参数的携带方式是直接跟在url后面的url?xxx=ooo&yyy=bbb&lll=ccc

特点：1、数据全是明文。2、数据大小有限制。3、get请求不应该携带隐私信息

enctype参数：用来控制数据提交时的编码格式

​ 默认form表单是不能直接发送文件的，将给默认值改为enctype = 'url_encoded' 改为 enctype = 'formdata' 就可以发送文件

1、input：获取用户输入，该标签是一个行内标签

label通常是配合input一起使用的
for用来填写对应的input标签id值
点击label标签内的内容 会自动让对应的input标签 聚焦

<form action="">
    <!--    label是格式规范使用，不写也没关系-->
    <p><label for="d1">用户名：<input type="text" id="d1" name="username"></label></p>
    <p><label for="d2">密码：<input type="password" id="d2" name="password"></label></p>
    <p><label for="d3">生日：<input type="date" id="d3" name="date"></label></p>
    <p><label for="">性别：
        男：<input type="radio" name="sex">
        女：<input type="radio" name="sex" checked>
    </label></p>
    <p><label for="">爱好：
        篮球：<input type="checkbox" name="hobby">
        乒乓球：<input type="checkbox" name="hobby">
        羽毛球：<input type="checkbox" name="hobby">
        高尔夫：<input type="checkbox" name="hobby">
    </label></p>
    <p>省份：<select name="province" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广东</option>
    </select></p>
<!--    mutiple 可以让多选-->
    <p>老师：<select name="" id="" multiple>
        <option value="" selected>tank</option>
        <option value="">sean</option>
<!--        设置默认值 在value后加一个selected-->
        <option value="" selected>Jason</option>
    </select></p>
<!--    textarea多行文本-->
    <p>个人简介：<label for=""><textarea name="" id="" cols="30" rows="10"></textarea></label></p>
    <p>个人简历：<input type="file" value="上传文件"></p>
<!--    提交数据-->
    <input type="submit" value="提交按钮1">
    <button>提交按钮2</button>
<!--    普通按钮，没有任何效果-->
    <p><input type="button" value="普通按钮"></p>
<!--    重置按钮-->
    <input type="reset" value="重置">
</form>

属性说明:

  • name：表单提交时的“键”，提交给服务端相当于字典中的key

  • value：获取用户输入的标签，存放用户输入的，相当于字典中的value

  • checked：radio和checkbox默认被选中的项

    默认选种 checked="checked"

    当标签的属性名和属性值相同的时候 可以只写属性名	
女<input type="radio" name="gender" 				  checked="checked">
简写
女<input type="radio" name="gender" checked>

  • 给input设置默认：直接在input中value加属性值

  • placeholder：给input框加提示信息， placeholder='用户名'

  • readonly：text和password设置只读

  • disabled：禁用

能够触发form表单提交数据的按钮

<input type="submit">
可以通过value属性来指定按钮文本内容
<input type="submit" value="注册">
<button>点我</button>

2、select：下拉框

默认是单选的可以加一个multiple改成多选

设置在value后selected为默认选择

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用
posted @ 2019-12-26 00:19  Mr沈  阅读(278)  评论(0)  编辑  收藏  举报