前端---HTML简介

什么是前端？

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

软件开发架构

​ --CS --BS (bs 本质就是cs)

web服务的本质

​ 浏览器窗口输入一个网址敲回车发生那些事

​ 1. 朝着指定的服务端发送请求

​ 2.服务端接收相应的请求

​ 3.服务端返回相应的响应

​ 4.浏览器接收响应 按照特定的规则渲染页面展示给用户看

HTTP协议

​ 超文本传输协议

​ 规定了浏览器与服务端之间数据传输的格式

  • 1，四大特性

    • 1 ，基于请求响应

      ​ 一次请求对应一次响应

    • 2，基于TCP/IP作用于应用层之上的协议

    • 3，无状态

      ​ 不保留客户端的状态，无论你来多少次，我都待你如初恋

    • 4，无连接

      ​ 长连接 websocket（类似于http协议的大补丁） 聊天室相关

  • 2，数据格式

    ​ 请求格式

    ​ - 请求首行（请求方式 协议版本）

    ​ - 请求头（一大堆 k，v 键值对）

    - （ 空 一 行 通知服务器一下不再有请求头）

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

    ​

    ​ 响应状态码

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

    ​ 1XX : 服务端已经成功接收到客户端的数据正在处理 你可以继续提交

    ​ 2XX : 200请求成功 服务端已经返回了你想要的数据

    ​ 3XX : 重定向(原本想访问A但是内部自动给你转到了B上面)

    ​ 4XX : 404请求资源不存在,403你当前不具备请求该资源的条件

    ​ 5XX : 500服务端内部错误 机房卓火了 宕机 爆炸了

    ​ 公司内部可以自己定制自己的响应状态码

请求方式：

  • get请求：

    • 超服务端要资源（获取数据）

      ​ 类似于浏览器窗口输入网址获取页面

  • post请求

    • 朝服务端提交请求

      ​ 类似于登陆注册功能

HTML

​ 超文本标记语言

​ 如果你想让你的页面能够被浏览器识别并且展示出好看的样子 你就必须是写HTML代码

​ 浏览器能够识别的语言非常少

​ HTML/XML CSS JS

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

​ HTML注释：

​ 注释是代码之母

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

​ 补充：由于HTML页面结构比较复杂，那日同比较多，不便于后期的维护 修改通常在写页面的时候 习惯用下面的方式来人为的划分代码区域

  • <!--顶部导航条样式开始-->
		
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
		
<!--左侧菜单栏样式结束-->
HTML文档结构
  • <html>
	<head></head>:head内存放的内容不是给用户看的，是给浏览器去识别做响应操作的
	<body></body>:body内部存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML文档打开方式

  • 1.自动调用浏览器打开
  • 2.手动查找路径后选择浏览器打开

标签分类：

  • 双标签
  • 自闭和标签

head内常用标签

  • title：定义网页标题

style：内部支持直接写css代码

link：引入外部的css文件

script：

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

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

meta：

	name属性

		keywords

		description

什么是URL？

  • URL：统一资源定位符

body内常用标签

基本标签：

  • h1~h6：标题标签
s:删除线
b:加粗
u:下划线
i：斜体
p：独占一行
br：换行
hr：分割线

特殊符号：

  • &nbsp;		空格
<p>a大于b		a &gt; b</p>
<p>a小于b		a &lt; b</p>
<p>a&b		a &amp; b</p>
<p>人民币		&yen;10000000</p>
<p>版权标识		&copy;</p>
<p>注册商标		&reg;</p>

常用标签：

  • div		块级标签
span	行内标签
两个标签没什么特殊意义，主要用来做前期的页面布局
    img 图片标签
  • src
	1.可以写一个网站图片地址
	2.还可以写一个本地图片地址
	3.url（自动朝该url发送get请求要数据）
alt
	当图片加载不出来时，默认展示的提示信息
title
	当鼠标悬浮在图片上时默认展示的提示信息
width, height
	修改一个另外一个会自动等比例缩放
	也可以两个都自定义修改
    🔗链接标签 a 标签
  • href
	1.放一个url
		点击就会跳转到该url所对应的资源
target
	控制是否在当前页跳转
		默认实在当前页跳转
			_self
		新建页面跳转
			_blank
锚点功能
	href不单单可以写url 也可以写另外一个a标签id值
	点击就会跳转到该id值所对应的a标签所在的位置

标签应该具备的属性

  1. id属性：类似于身份证号 用来唯一标识当前html页面中的某一个标签

    ​ 在同一个html页面中，id值不能重复

    1. class 属性：类似于面向对象的继承

    ​ 直接引用别的类的样式

列表标签

  • 无序列表（用的比较多）
	ul
		li    （ul套li）
		只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
---------------------------
		<p>无序列表</p>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
有序列表
	ol
		li
---------------------------
		<p>有序列表</p>
        <ol type="i">
            <li>哈哈哈</li>
            <li>呵呵呵</li>
            <li>嘿嘿嘿</li>
        </ol>
标题列表
	dl
		dt 标题
		dd 内容
---------------------------
		<p>标题列表</p>
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        </dl>

表格标签（* * * * * )

  • 展示网站数据的时候 一般情况下可以使用表格标签
<table>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
</table>
写表格标签  先写结构 然后写数据

一个tr就是一行
th和tr之分  一个加粗一个不加粗
通常情况下表头用th， 表单内容用td

表单标签（* * * * * * ）

  • form标签

    获取用户输入（输入，选择， 上传文件......）并且将数据打包发送给后端

  • action参数

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

    ​ 三种写法：

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

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

     		3. ​	只写路径后缀 （/index/）

  • method

    控制提交方式

    form表单默认是get请求， method=‘get’

    可以指定post请求， method=‘post’

  • enctype

    控制的数据提交的编码格式

    默认情况下form表单是不能直接发送文件的

    如果你要发送文件 必须将该参数由默认的urlencoded改为formdata

  • 获取用户输入 input标签 该标签是一个行内标签

input 类似于前端的变形金刚

type属性
	text		普通文本
	password	密文
	date		日期
	radio		多选一
	checkbox	多选多
		默认选择	checked=”checked“
		当标签的属性名和属性值相同的时候，可以指写属性名
		女<input type="radio" name="gender" checked="checked">
		简写
		女<input type="radio" name="gender" checked>
	reset		重置
	button		普通按钮
	submit		出发form表单提交动作
	file		获取文件
	
select标签  下拉框
	一个个选项就是一个个option标签
	默认是单选
	可以加一个multiple改成多选
		<select name="" id="" multiple>
            <option value="">新垣结衣</option>
            <option value="">明老师</option>
        </select>
        
    如何让option标签默认选中
    	加selected=”selected“
		<select name="" id="" multiple>
            <option value="" selected="selected">新垣结衣</option>
            <option value="">明老师</option>
            <option value="" selected>嫖老师</option>
            <option value="">波老师</option>
        </select>
        
textarea标签		获取大段文本

label通常是配合input一起使用的
	for用来填写对应的input标签id值
	点击label标签内的内容  会自动让对应的input标签  聚焦
	
能够触发form表单提交数据的按钮（* * * * * * ）
	<input type="submit">
        可以通过value属性来指定按钮文本内容
        <input type="submit" value="注册">
    <button>点我</button>
    
input 获取到的用户输入就类似于字典的value
input 中的name属性就类似于字典的key

注意事项
    1.获取用户输入的标签 都是用value属性来存放用户的输入
        获取用户输入的标签都应该有name属性  就类似于字典的key
        value属性就类似于字典的value
    2.如何给input设置默认
    	可以直接给input标签加value属性
    3.input框如何设置提示信息
    	username:<input type="text" value="jason" placeholder="用户名">
    	
Flask框架
		pip3 install Flask

	get请求能够携带参数 但是参数的携带方式是直接跟在url后面的
		url?xxx=ooo&yyy=bbb&lll=ccc
		特点:
			1.数据全是明文
			2.数据大小有限制   大概应该可能在4KB左右吧...
			3.get请求不应该携带隐私信息
			
<form action="http://127.0.0.1:5000/">,在html文件中添加框架的地址，可以进行连接

标签的分类：

​ 1，块儿级标签

​ 独占一行 h1~h6 p br hr div

​ 块儿级标签内部可以嵌套任意的块儿级标签和行内标签

​ 特例：p虽然是块儿级标签， 但是他的内部只能嵌套行内标签 不能嵌套块儿级标签

​ 如果嵌套了 没有问题 只是不符合html语法规范

​ 2， 行内标签 u s i b span

​ 自身文本多大 就占多大

​ 行内标签内部不能嵌套块级标签和行内标签ssV

posted @ 2019-12-26 20:24  猫-园  阅读(183)  评论(0)  编辑  收藏  举报