前端基础和HTML

时间 2020-07-30

标签前端基础 html 栏目 HTML 繁體版

原文原文链接

前端基础和HTML

一、什么是前端

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

电脑显示界面
手机界面
Ipad

二、web服务的本质

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

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

三、HTTP协议

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

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

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

一、四大特性

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

二、数据格式

请求格式浏览器
- 请求首行（请求方式，协议版本）安全
- 请求头（一大堆k, v 键值对）服务器
- 空行websocket
- 请求体（携带的数据并非一直都有，有时候多是空的，取决于你的请求方式）cookie
响应格式
- 响应首行（响应状态码）
- 响应头（一大堆k, v 键值对）
- 空行
- 响应体（浏览器展现给用户看的数据）

三、响应状态码

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

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

四、请求方式

一、get请求

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

二、post请求

朝服务端提交数据（提交数据），相似于登陆注册功能

五、HTML

超文本标记语言

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

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

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

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

一、HTML注释

注释是代码之母

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

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

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

二、HTML文档结构

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

三、HTML文档打开方式

pycharm自动调用浏览器打开
手动找到路径以后选择浏览器打开

四、标签的分类

分类1：

双标签
自闭和标签

分类2：

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

五、head内经常使用标签

title：定义网页标题

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

link：引入外部的css文件

script：1. 内部能够直接编写js代码

2. 能够经过src 属性引用外部js代码

meta：

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

一、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">

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

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

url：统一资源定位符

六、body经常使用标签

展现给用户看见的页面

一、基本标签

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>

二、特殊符号

&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>

三、经常使用标签

一、div 块级标签，span行内标签，自己没有特殊意义，但常用，用做前期的页面布局

二、img 图片标签

一、src

能够写一个网站的图片地址

能够写本地的图片地址

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

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

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

四、width、height 修改一个另外一个也会等比例缩放，保证图片不失真，若是两个都修改可能会图片失真

三、a 连接标签

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

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

三、锚点功能：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>

标签应该具有的属性：

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

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

四、列表标签

无序列表（较多）：

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>

五、表格标签

展现网站数据的时候，通常状况下可使用表格标签

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

一个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>

六、表单标签

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

关键性的属性参数：

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

三种写法：

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

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

三、只写路径后缀（/index/)

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

form表单默认是get请求 method = 'get'，能够指定post请求 method = 'post'

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

特色：一、数据全是明文。二、数据大小有限制。三、get请求不该该携带隐私信息

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

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

一、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>

二、select：下拉框

默认是单选的能够加一个multiple改为多选

设置在value后selected为默认选择

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用