html基础知识
HTTP相关知识补充
http知识概要
http协议补充:
GET\POST请求方式差异：
1、传送方式：get通过地址栏传输，post通过报文传输
2、传送长度：get参数有长度限制（受限于url长度），而post无限制
3、GET和POST还有一个重大区别，
简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包
长的说：
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）
4、建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
URL格式：
协议 / 域名 / 路径 / 参数
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=alex
补充http协议：
请求协议
浏览器 -----------------------------------------------> 服务器
<-----------------------------------------------
响应协议
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=alex
http之请求协议格式：
第一种 GET方式
GET /s?a=1&b=2 HTTP/1.1 # 请求首行 （/s 是路径,问号以后的是参数数据）
看 01 请求头.png # 请求头
空行 # 空行
None # 请求体 （get请求没有请求体）
第二种 POST方式
POST /s HTTP/1.1 # 请求首行 （/s 是路径）
看 01 请求头.png # 请求头
空行 # 空行
a=1&b=2 # 请求体
http之响应协议格式：
HTTP/1.1 200 OK # 响应首行
看 01 响应头.png # 响应头
html页面字符串 # 响应体
GET请求示例
# 请求首行
GET / HTTP/1.1
# 请求头
Host: 127.0.0.1:8899
Connection: keep-alive
Cache-Control: max-age=0
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.26 Safari/537.36
Upgrade-Insecure-Requests: 1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
# 空行
\r\n
# 请求体（无请求体）
POST请求示例
# 请求首行
POST / HTTP/1.1
# 请求头
Host: 127.0.0.1:8899
Connection: keep-alive
Content-Length: 17
Cache-Control: max-age=0
Origin: http://localhost:63342
Upgrade-Insecure-Requests: 1
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Referer: http://localhost:63342/.html?_ijt=tg0k7v9jag2hm67q5ss7lan9ap
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
# 空行
\r\n
# 请求体
user=alnk&pwd=123
响应头
请求头
服务器返回数据
模拟服务器响应浏览器请求
package main
import (
"fmt"
"io/ioutil"
"net/http"
)
func f1(w http.ResponseWriter, r *http.Request) {
defer r.Body.Close()
fmt.Println("客户端发送:", r)
//fmt.Println("客户端发送:", r.FormValue("user"))
//fmt.Println("客户端发送:", r.FormValue("pwd"))
b, err := ioutil.ReadFile("./06jd.html")
if err != nil {
w.Write([]byte(fmt.Sprintf("%v\n", err)))
}
w.Write(b)
}
func main() {
http.HandleFunc("/", f1)
http.ListenAndServe(":8899", nil)
}
06jd.html
<a href="http://www.baidu.com">click</a>
<h1> welcome to </h1>
<img src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg" />
HTML
概要
一、html标签格式:
标签名：h1
标签属性：href
标签文本：tom
<h1>tom</h1> 闭合标签
<img src='href'> 自闭合标签
标签分为两类
1 块级标签
h1-h6标签，p标签，div标签
特点
独占一行
可设置长宽
2 内联标签
b标签，strong标签，i标签，span标签，img标签，a标签，input标签
特点
只占文本内容
不能设置长宽
块级标签可以嵌套块级标签和内联标签
内联标签只能嵌套内联标签
注意：P标签只能嵌套内联标签
html常见概念
<!-- 头部，声明使用html标准模式，记得加上防止掉坑 -->
<!-- 标准模式、怪异模式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 头部信息 -->
<!-- 编码 UTF-8，不然中文会乱码 -->
<meta charset="UTF-8">
<!-- 标题 -->
<title>我是标题</title>
</head>
<body>
<!-- 内容信息 -->
<h1>我是内容</h1>
</body>
</html>
head常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 编码 -->
<meta charset="UTF-8">
<!-- 标题 -->
<title>Title</title>
<!-- 关键词 搜索使用 百度 竞价排名 -->
<!-- 关键词 -->
<meta name="keywords" content="IT培训">
<!-- 描述 -->
<meta name="" content="我是描述的内容">
<!-- ICON -->
<link rel="icon" href="//img11.360buyimg.com/jdphoto/s80x80_jfs/t27847/91/107794072/6854/14716732/5b850ecaN644d2983.png">
<!-- 链接 CSS 代码 -->
<link rel="stylesheet" href="css.css">
<!-- 链接 js 代码 -->
<script src="vue.js"></script>
</head>
<body>
</body>
</html>
body常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签学习</title>
</head>
<body>
<!-- a标签锚功能 -->
<div id="tips">我是一个锚点</div>
<!-- hr标签：渲染一条红线-->
<hr>
<!-- h系列标签：标题标签 -->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<hr>
<h3>咏鹅</h3>
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨青波。
<hr>
<!-- p标签：段落文本标签 -->
<h3>咏鹅</h3>
<p>鹅鹅鹅，</p>
<p>曲项向天歌。</p>
<p>白毛浮绿水，</p>
<p>红掌拨青波。</p>
<hr>
<!-- br标签：换行标签-->
<h3>咏鹅</h3>
鹅鹅鹅，<br>
曲项向天歌。<br>
白毛浮绿水，<br>
红掌拨青波。<br>
<hr>
<!-- b标签：变粗 -->
<b>tom</b>
<!-- strong标签：变粗，这个常用 -->
<strong>tom</strong>
<!--i标签：斜体-->
<!--em标签：斜体-->
<i>tom</i>
<em>tom</em>
<!--u标签：下划线-->
<u>tom</u>
<br>
<!--strike标签：中横线标签-->
<strike>100$</strike> 9.9$
<!-- 特殊符号 -->
<div>空 格</div>
<div><</div>
<div>></div>
<hr>
<!--
img标签，属性
src: 要显示图片的路径
alt: 图片没有加载成功时的提示
title: 鼠标悬浮时的提示信息
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
-->
<img width=300px
height="200"
src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg"
alt="风景图片"
title="风景"
>
<hr>
<!--
a标签：超链接
href属性指定目标网页地址。该地址可以有几种类型：
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
相对 URL - 指当前站点中确切的路径（href="index.htm"）
锚 URL - 指向页面中的锚（href="#top"）
-->
<a href="http://www.baidu.com">click</a>
<a href="http://www.baidu.com" target="_blank">打开新窗口</a>
<!-- 锚 -->
<a href="#tips">锚</a>
<hr>
<!--
列表标签
<ul>: 无序列表 （最常用）
[type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<li>:列表中的每一项
<ol>: 有序列表
<li>:列表中的每一项
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
-->
<ul type="disc">
<li>alex</li>
<li>egon</li>
<li>wu</li>
</ul>
<ol start="50">
<li>alex</li>
<li>egon</li>
<li>wu</li>
</ol>
<dl>
<dt>广东省</dt>
<dd>广州</dd>
<dd>深圳</dd>
<dd>惠州</dd>
</dl>
<hr>
</body>
</html>
body常用标签-表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
table表格标签
<thead> 表头
<tr>: table row 行
<th>: table head cell 表头数据
<tbody> 表格内容
<tr>: table row 行
<td>: table data cell 表格数据
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行（即合并单元格）竖向合并
colspan: 单元格横跨多少列（即合并单元格）横向合并
-->
<table border="1px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>王武</td>
<td>23</td>
<td>男</td>
</tr>
</tbody>
</table>
<hr>
<!--合并单元格-->
<table border="1px">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td colspan="2">23 男</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>王武</td>
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>
表格标签练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" bordercolor="red" cellspacing="0">
<thead>
<tr>
<caption>课程表</caption>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">休息</th>
</tr>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>计算机</td>
<td>休息</td>
</tr>
</tbody>
</table>
<hr>
</body>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8899" method="post">
<!-- value 默认值 -->
<p>姓名：<input type="text" name="user" value="alnk"></p>
<p>
<lable for="111">姓名:</lable>
<!-- placeholder 提示语 -->
<input type="text" name="user" placeholder="请输入姓名" id="111">
</p>
<!-- required 必须填写字段 -->
<p>密码：<input type="password" name="pwd" placeholder="请输入密码" required="required"></p>
<p>爱好:
<!-- 多选框 -->
<!-- checked="checked" 默认选中 -->
篮球<input checked="checked" type="checkbox" name="hobby" value="lanqiu">
足球<input type="checkbox" name="hobby" value="zuqiu">
双色球<input type="checkbox" name="hobby" value="shuangseqiu">
</p>
<p>性别：
<!-- 互斥框 -->
男<input type="radio" name="sex" value="male">
女<input type="radio" name="sex" value="female">
</p>
<!-- 重置按钮 -->
<p><input type="reset"></p>
<!-- 上传文件按钮 -->
<p><input type="file"></p>
<!-- 隐藏标签，用途：浏览器偷偷的给服务器发送一些信息，用户无感知，页面无显示 例如token等 -->
<p><input type="hidden" name="token" value="asufqr123sdafa53"></p>
<!-- 配合js使用，和div有点相似 -->
<p><input type="button" value="按钮" onclick="alert(123)"></p>
<!-- 文本框 -->
<p>个人简介<br>
<textarea name="jieshao" cols="30" rows="10" maxlength="5"></textarea>
</p>
<!-- 下拉框 -->
<!-- selected="selected" 默认选中 -->
<select name="pro" size="3" multiple="multiple">
<option value="heibei">河北省</option>
<option selected="selected" value="hunansheng">湖南省</option>
<option selected value="hubeishegn">湖北省</option>
</select>
<!-- 提交，会触发一个事件 -->
<p><input type="submit" ></p>
</form>
</body>
</html>
form表单与web服务器交互练习
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<form action="http://127.0.0.1:8899" method="post">
<p>账号: <input type="text" name="user"></p>
<p>密码: <input type="password" name="pwd"></p>
<p> <input type="submit"></p>
</form>
</body>
</html>
服务端
package main
import (
"fmt"
// "io/ioutil"
"net/http"
)
func f1(w http.ResponseWriter, r *http.Request) {
defer r.Body.Close()
fmt.Println("客户端发送:", r)
fmt.Println("客户端发送:", r.FormValue("user"))
fmt.Println("客户端发送:", r.FormValue("pwd"))
// b, err := ioutil.ReadFile("./06jd.html")
// if err != nil {
// w.Write([]byte(fmt.Sprintf("%v\n", err)))
// }
// w.Write(b)
}
func main() {
http.HandleFunc("/", f1)
http.ListenAndServe(":8899", nil)
}
// 服务端运行方式
// go run main.go
客户端请求
服务端结果
客户端发送: &{POST / HTTP/1.1 1 1 map[Accept:[text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9] Accept-Encoding:[gzip, te, br] Accept-Language:[zh-CN,zh;q=0.9] Cache-Control:[max-age=0] Connection:[keep-alive] Content-Length:[17] Content-Type:[application/x-www-form-urlencoded] Origin:[http://localhost:63342] Referer:[http://localhost:63342/] Sec-Ch-Ua:[" Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"] Sec-Ch-Ua-Mobile:[?0] Sec-Fetch-Dest:[document] Sec-Fetch-Mode:[navigate] Sec-Fetch-Site:[cross-site] Sec-Fetch-User:[?1] Upgrade-Insecure-Requests:[1] User-Agent:[Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36]] 0xc0000ce440 <nil> 17 [] false 127.0.0.1:8899 map[] map[] <nil> map[] 127.0.0.1:50084 / <nil> <nil> <nil> 0xc0000ce480}
客户端发送: alnk
客户端发送: 123
html常见布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML常见布局</title>
</head>
<body>
<div id="container" style="width:500px;margin:0px;" >
<!-- 标题 -->
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<!-- 侧边栏 -->
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<!-- 内容 -->
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里
</div>
<!-- 底部 -->
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权
</div>
</div>
</body>
</html>
转载请注明出处哟~
https://www.cnblogs.com/lichengguo
