正文前:
- 前端是和用户直接交互的界面的称呼。
- web是基于B/S,本质上是基于C/S。为什么用一个浏览器,可以访问百度,访问博客园....等等服务器?因为都遵循着HTTP协议
HTTP协议
? HTTP协议全称叫超文本传输协议。规定了浏览器与服务端之间数据传输的格式。
一、四大特性
- 基于请求响应。一次请求对应一次响应
- 基于TCP/IP作用于应用层上的协议
- 无状态,不保留客户端的状态。(cookies,session,token来源)
- 无连接(长连接 websocket---类似于http协议的大补丁)
二、数据格式
1.请求格式:
- 请求首行(请求方式、请求url、协议版本、)
- 请求头(key=value键值对)
- 请求体(get请求无请求体)
2.响应格式:
- 响应首行(状态码)
- 响应头(key=value键值对)
- 响应体(存放浏览器对用户展示的数据)
3.响应状态码
用数字来表示响应的状态。
1XX:服务端已经成功接收到客户端的数据正在处理
2XX:200请求成功。
3XX:重定向
4XX:404请求资源不存在,403不具备请求该资源的条件
5XX:500服务端内部错误。
HTML语言
html全称是超文本标记语言,是浏览器的语言,浏览器可以通过识别html语言将数据加以渲染,然后对用户进行展示。
从这个角度看,浏览器之所以能访问各个服务器得到数据,是因为在遵循HTTP协议的前提下,各个服务器都通过html的语言格式返回数据,让浏览器能够正确的渲染数据。
一、html注释:
二、html文档结构
<html>
<header>
<!--存放给浏览器看的内容-->
</header>
<body>
<!--真正的数据-->
</body>
</html>
三、标签的分类
1.按标签数量
- 双标签
- 自闭合标签
2.按标签所占区
- 块级标签 h1~h6 p br hr div
- 行内标签 u s i b span
四、header中常用的标签
- title:定义网页的标题
- style:内部支持直接写css代码
- link:引入外部的css文件
- script:内部可以直接编写js代码,可以通过src属性引用外部js代码。
- meta:name属性。keywords,decription
五、body内常用的标签
1.基本标签
- h1~h6:标题标签
- s:删除线 strikethrough
- b:加粗 bold
- u:下划线 underline
- i: 斜体 italic
- p: 段落 paragraph
- br:换行 break
- hr: Horizontal rule 水平线
2.特殊符号
& &
> >
< <
® ?
©?
¥ ¥
空格
3.常用标签
div 块级标签和span 行内标签本身没有任何特殊意义,但用的频率很高。可以用来做前期的页面布局。
标签应该具备的属性
1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签在同一个html页面中 id值不能重复
2.class属性:类似于面向对象的继承直接引用别的类的样式
----------------------------------------------------
<img> 自闭合标签
src:
1.可以写url
2.可以写本地的图片地址
alt:当图片加载失败时默认展示的提示信息
title:当鼠标悬浮在图片上的时候展示的信息
width,height: 修改图片的大小,只修改一个时自动缩放图片。
---------------------------------------------------
<a></a> achor 双标签
href:
放一个url,点击自动跳转。
target:
控制是否在当前页跳转: _self,_blank
锚点功能:
href可以填写另一个标签的id值。如#aaa
----------------------------------------------------
<ul> unorder list 双标签 无序列表
<li> list item
在页面上实现规则排列的文本,可以用无序列表实现。
</li>
</ul>
----------------------------------------------------
<ol> order list 双标签 排序列表
<li> list item
</li>
</ol>
----------------------------------------------------
<dl> Definition List 标题列表
<dt> Definition Term
标题
</dt>
<dd> Definition Description
内容
</dd>
</dl>
------------------------------------------------------
<table> 表格标签(******)
<thead> 表头
<tr> 表行
<th> 表头名
</th>
</tr>
</thead>
<tbody>
<tr>
<td> 单元格数据
</td>
</tr>
</tbody>
</table>
tr---table row
th---table header cell
td----table data cell
---------------------------------------------------------
<form> 表单标签(*******) POST提交数据的标签块。
</form>
参数:
aciton:数据的提交的路径。1.不写默认当前地址。2.全路径(https://www.baidu.com)3.只写路径后缀/index/
*************************************************
<input> 自闭合标签
type:
text
password
radio
checkbox
date
reset
button
submit
file
*************************************************
<textarea> 获取大段文本
</textarea>
*************************************************
<select> 下拉框标签
<option></option>
</select>
参数:
selected
multiple
原文地址:https://www.cnblogs.com/Ghostant/p/12100149.html
时间: 2024-10-07 22:57:48