前端基础-01HTML基础

01 前端介绍

web应用程序

浏览器向应用程序发起网络请求，基于http协议，

应用程序基于http协议响应一个字符串，

那么这样的应用程序就是web应用程序

web请求：客户端发请求，让浏览器渲染成好看的页面（排版、布局）

前端三剑客

HTML 构成页面元素

CSS 元素渲染和布局 渲染：让HTML好看，做修饰布局：放在什么位置

JS 构成动态事件 相当于皮影戏的操手

轮播图：隔几秒切换。通过JS代码实现

悬浮事件

点击事件

VUE

输入框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
</body>
</html>

页面布局

第一行head

跳转超链接标签

分块布局

02 http协议特点

概述

没有逻辑，所见即所得

HTML超文本标记语言
HTML 不是一种编程语言，没有逻辑：循环判断...
HTML文件是由浏览器解释运行的，浏览器充当的就是一个解释器

浏览器：基于域名，组装符合http协议的字符串
服务器：解析参数，返回给客户端浏览器文本
浏览器：把拿到的文件解释渲染
都是由浏览器运行出显示效果

HTML，即超文本标记语言（HyperText Markup Language ]），由SGML (标准通用标记语言) 发展而来，也叫web页面。扩展名是 .html 或是 .htm 。

HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。

HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。

http协议

两端：浏览器和服务器

http协议特点：
    1 基于TCP协议
        对应用层数据格式做限定
    2基于请求响应，先有请求再有响应
    3 短连接
        断网仍然可以看到。本质是把字符串接到本地

问题1 客户端没发请求能否收到数据？

数据发生更新，必须再发请求，再次接收才能更新
服务端永远不能推送给客户端数据。
与Web.socket区分

问题2 刷新页面是否有变化？

页面发生变化了
刷新再次发送请求 响应。

问题3 为甚么要短连接？

conn 一直存在，需要维持连接状态，占用服务器资源。
无连接
新版本中改进用短连接，因为，断开需要再三次连接（三次握手也占用资源）

http是前端和后端的桥梁

03 http请求协议格式

http协议格式

             遵循http协议请求格式
浏览器 ---------------请求-----------------> 应用程序（server）
      <--------------响应------------------
             遵循http协议响应格式

基于socket

请求和响应的字符串，内容较多

http协议请求格式：三部分

请求方式请求路径和参数协议 # 请求首行

"""
get  /s?wd=yuan   HTTP/1.1
key1:value1  # 请求头 浏览器跟服务器说的小秘密
key2:value2
key3:value3
\r\n\r\n
请求体(POST数据)
"""

请求头

Accept: 当前浏览器能接受什么协议
Accept-Encoding：当前浏览器能支持的压缩方式。如果要用压缩，用gzip
User-Agent：浏览器告诉服务器一些基本信息用

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, deflate, br
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

请求方式：get post

携带数据区别
根据不同的请求方式，放在不同的位置
get：请求数据放在请求路径后面，以?作为分割
post：请求数据放在请求体中

URL: IP:端口/路径?参数
根据路径信息，决定返回的信息
https://www.baidu.com/s?wd=zhutao2014

浏览器控制台

network 记录网络请求日志
    最上边的路径
    request 请求
    response 响应

扩展知识

爬虫：无论是浏览器发送还是程序发送请求，都基于http协议
正常浏览器发送有user-agent，程序发送请求没有user-agent
反爬，第一步请求头是否携带user-agent

get和post请求本质区别

post请求：登录一般用POST
get请求：请求信息就挂在路径上了。暴露信息

get把数据放在path路径，post更安全
get请求，地址栏有上限
get请求，没有请求体

POST请求

https://www.baidu.com/s?wd=zhutao2014

"""
post /s HTTP/1.1 #请求首行
key1：value1 #请求头
key1：value1 #请求头
key1：value1 #请求头

user=zhutao2014&pawd=123 （请求体 post请求数据）
user=zhutao2014&pawd=123
"""

点击按钮发生了什么？

点击按钮？是post还是get
由标签特性决定的
取决于服务器端开发人员决定

浏览器
    1用户通过浏览器发送
    2浏览器根据用户的请求组装字符串，
    3由标签决定post和get（点击按钮，post或get请求的页面已经加载到浏览器）
    4 发送给服务端
服务器：
    1 拿到数据，拆分

请求首行
    get请求由标签决定
    路径名：/s
    协议 HTTP/1.1
请求头 k1/v1,k2/v2 ...

浏览器组装数据

服务器：拆开
    拆分分别取出路径和参数
    通过参数,查数据库
    拼装成响应格式

04 http响应协议格式

服务器给浏览器发送

http响应格式

响应协议  状态吗 解释文
"""
HTTP/1.1 200 ok    # 响应首行
key1:value1         # 响应头
key2:value2
key3:value3

响应体
"""

响应状态码

2开头 正常
3开头 重定向
4开头 客户端请求问题
5开头 服务端问题

响应体

Response Headers
HTTP/1.1 200 OK
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Server: BWS/1.1

请求报文构成

响应报文构成

示例

package main

import (
   "fmt"
   "net"
)

func main() {
   listen, err := net.Listen("tcp", "127.0.0.1:8888")
   if err != nil {
      fmt.Println("listen err:", err)
      return
   }

   for true {
      conn, _ := listen.Accept()
      data := make([]byte, 1024)
      n, _ := conn.Read(data)
      if n == 0 {
         break
      }

      fmt.Println("---", string(data[:n]))

      res := "HTTP/1.1 200 OK\r\n\r\nhello"
      n2, _ := conn.Write([]byte(res))
      fmt.Printf("---res:%v n2:%v\n", res, n2)
      err := conn.Close()
      if err != nil {
         return
      }
   }
}

conn 客户端的套接字对象
执行到conn已经完成三次握手

服务端：1接收请求数据
2接收后打印
对接收的data做拆分，逻辑处理等操作

测试1不符合http规范

将res返回数据，设置为不符合http协议规范

      fmt.Println("---", string(data[:n]))

      res := "hello"
      conn.Write([]byte(res))
      conn.Close()
   }
}

浏览器不能解析响应的报文，报响应无效

打印的请求信息

--- GET / HTTP/1.1
Host: 127.0.0.1:8888
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36
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
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

测试2 符合http规范

修改添加响应头，响应体，符合浏览器可解析的响应格式

       res := "HTTP/1.1 200 OK\r\n\r\nhello"
      conn.Write([]byte(res))
      //n2, _ := conn.Write([]byte(res))
      //fmt.Printf("---res:%v n2:%v\n", res, n2)
      conn.Close()
   }
}

显示结果

web框架的好处

web框架，在原有的基础上，用别人写好的接口
不用写底层的socket实现

服务器如何知道请求数据里的格式？

通过请求头content-type:json

content-type: text/html; charset=utf-8

ajax请求期待内容由ajax决定的。

请求头

拿到请求体中的键值用户名密码等

"""
post /s HTTP/1.1 #请求首行
key1:value1 #请求头
key2:value2 #请求头
key3:value3 #请求头
content-type:json

{"user":"yuan","pwd":123}
#user=yuan&pwd=123
"""

urlencoded格式

x-www-form-urlencoded 格式   user=yuan&pwd=123
json格式,响应体也可以其他格式 {"user":"yuan","pwd":123}

05 web开发流程

标题标签<h1>

增加<h1></h1>标签

       fmt.Println("---", string(data[:n]))

      res := "HTTP/1.1 200 OK\r\n\r\n<h1>hello</h1>"
      conn.Write([]byte(res))
      //n2, _ := conn.Write([]byte(res))
      //fmt.Printf("---res:%v n2:%v\n", res, n2)
      conn.Close()
   }
}

浏览器认识<h1>
    一级标题 标签

图片标签<img src=’’>

       res := "HTTP/1.1 200 OK\r\n\r\n<h1>hello</h1><img src='https://www.baidu.com/img/flexible/logo/pc/result.png'>"
      conn.Write([]byte(res))
      //n2, _ := conn.Write([]byte(res))
      //fmt.Printf("---res:%v n2:%v\n", res, n2)
      conn.Close()
   }
}

从文件读取

新增ndex.html

index.html内存放标签格式的文本

D:\GoWork\src\gitee.com\zhutao2014\s9练习\day09\demo\server\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <h1>hello</h1>
    <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'>
</body>
</html>

注意修改working directory

修改main.go

D:\GoWork\src\gitee.com\zhutao2014\s9练习\day09\demo\server\main.go

package main

import (
   "fmt"
   "io/ioutil"
   "net"
)

func main() {
   listen, err := net.Listen("tcp", "127.0.0.1:8888")
   if err != nil {
      fmt.Println("listen err:", err)
      return
   }

   for true {
      conn, _ := listen.Accept()
      data := make([]byte, 1024)
      n, _ := conn.Read(data)
      if n == 0 {
         break
      }

      fmt.Println("---", string(data[:n]))

      file,_:=ioutil.ReadFile("index.html")
      res := "HTTP/1.1 200 OK\r\n\r\n"+string(file)
      conn.Write([]byte(res))
      //n2, _ := conn.Write([]byte(res))
      //fmt.Printf("---res:%v n2:%v\n", res, n2)
      conn.Close()
   }
}

效果展示

修改html内容

访问有1个还是3个welcome？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <h1>hello</h1>
    <h1>hello</h1>
    <img src='https://www.baidu.com/img/flexible/logo/pc/result.png'>
</body>
</html>

不重启，直接再发起请求

执行流程：每次都会重新读取 html文件内容

可通过ide自带的插件，直接打开

下午06 html的标准结构和语法

浏览器是个解释器

按照默认的结构

F12 开发者模式

network网络请求日志
Response 响应体内容
elements 响应体的详细内容

<!DOCTYPE html>

声明当前浏览器用什么模式渲染元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text">
    <h1>hello</h1>
    <h1>hello</h1>
</body>
</html>

<html> 根标签

<head> 功能标签

<body> 页面展示的内容

窗口的内容

head

title

<title>ZHUTAO2014</title>

link标签导入文件

<head>
    <meta charset="UTF-8">
    <title>ZHUTAO2014</title>
    <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/>
</head>

下午07 基本标签

标题标签<h1>

<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

注释 Ctrl+/

文本默认处理机制

浏览器渲染时，无论遇到多少个空格和换行符都会处理成一个空格

<body>
hello user1
hello user2
hello user3
</body>

换行标签<br>

<body>
自嘲诗<br>
本身后山人<br>
偶做前堂客<br>
醉舞经阁半卷书<br>
坐井说天阔<br>
</body>

段落标签<p>

行间有间隔

<body>
自嘲诗<br>
本身后山人<br>
偶做前堂客<br>
醉舞经阁半卷书<br>
坐井说天阔<br>

<p>自嘲诗</p>
<p>本身后山人</p>
<p>偶做前堂客</p>
<p>醉舞经阁半卷书</p>
<p>坐井说天阔</p>
</body>

块级标签：

1独占1行
2可设置长宽

h1-h6标签
br标签
p标签

rain <p>rain</p>

看到什么效果？

内联标签

1 按内容占宽
2 不可以设置长宽

标签<b> </strong> 内联标签

变斜<em> <i>

user <b>user1</b> <strong>user1</strong>
<em>user2</em> <i>user2</i>

基本嵌套规则：

块级标签可以嵌套块级和内联标签

内联标签只能嵌套内联标签

user <b>user1</b> <strong>user1</strong>
<em>user2</em> <i>user2</i>
<b><i>user3</i></b>

html特殊符号

https://tool.chinaz.com/Tools/htmlchar.aspx

空格

5个空格

user <b>user1</b> <strong>user1</strong>
<em>user2</em> <i>user2</i>     α
<b><i>user3</i></b>

课间练习

块级标签

<h1></h1>

<br>

<p> </p>

<body>
<h1>一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
自嘲诗<br>
本是后山人<br>
偶作前堂客<br>
醉舞经阁半卷书<br>
坐井说天阔<br>

<p>自嘲诗</p>
<p>本是后山人</p>
偶<p>作前堂客</p>
</body>

打印结果

内联标签

<b> </b>

<strong> </strong>

<em> </em>

<i> </i>

yuan yuan
<b>yuan</b>
<strong>yuan</strong>
<em>yuan</em>
<i>yuam</i>

下午08 div和span标签

<div>
<span>
<hr>

标签<div>块级标签

1 没有样式（配合css做布局使用的）

先有html，涉及到复杂样式用css

会在原有基础上，再做样式

用p标签还有默认间隙需处理

标签<span> 内联标签

什么样式都没有

div整行都显示背景
span 只有文字背景

<head>
    <meta charset="UTF-8">
    <title>ZHUTAO2014</title>
    <style>
        #i1{
            font-size: 32px;
            font-weight: 900;
            font-style: italic;
            color: red;
            
        }
        #i2{
            background-color: red;
        }
    </style>
</head>

<body>
<div id="i1">div</div>
<span id="i2">span</span>
</body>

为什么用div多于span

div是块级的，可以嵌套块级的
span内联的只能嵌套内联的 所以用的相对少

下午09 超链接标签

超链接标签

　　自带点击事件，会让浏览器向href对应的路径发送一个请求信息

<a href=""></a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" title="baidu">百度</a>

直接通过域名可以访问，记不住
点击搜索超链接，向服务器发起一个请求

<a target="_blank" class="cate_menu_lk" href="//shouji.jd.com/">手机</a>

<a>标签

默认发送http get请求

preview预览

title 悬浮属性

<a href="http://www.baidu.com" title="baidu">百度</a>

鼠标悬浮上去，可以看到baidu

target 覆盖或弹窗属性

　　_self 拿回的请求结果，覆盖掉当前标签

<a href="http://www.baidu.com" title="baidu" target="_self">百度</a>

　　_blank 弹出新窗口

<a href="http://www.baidu.com" title="baidu" target="_blank">百度</a>

放入图片

<a href="http://www.baidu.com" title="baidu" target="_blank">百度</a>
<a href="https://www.jd.com"><img src="https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png">京东</a>

<a href=""><img src="" alt="加载失败时展示"></a>

为什么在一行？

1 img标签 内联标签
2 a标签   内联标签

本地跳转

<body>
<a href="index002.html">index002</a>
<a href="index003.html">index003</a>
</body>

默认点击覆盖

<a href="index002.html" target="_self">index002</a>

下午10 image标签

自闭合标签

src

alt 加载失败时展示

title

<img src="http://www.baidu.com/test.png" alt="加载失败" title="图片">

宽度和高度

（很少用，一般用css的）

<img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="图片">

点击图片跳转可以配合a标签使用

<a><img src="" alt="加载失败"></a>

<a href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下">百度一下</a>

css
　　1找标签
　　2做渲染

id标签选择器

通过嵌套span标签，

text-decoration: none; 去掉下划线

<style>
    a {
        text-decoration: none;
    }
    #i1 span {
        color: gray;
    }
</style>

<a id="i1" href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下"><span>百度一下</span></a>
<a id="i2" href="http://www.baidu.com"><img width="100" height="35" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="加载失败" title="百度1下"><span>百度一下</span></a>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            text-decoration: none;
        }
        #i1 span{
            color:gray;
        }
    </style>
</head>
<body>
<a id="i1" href="http://www.jd.com"><img width="200" height="80" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<span>百度</span>
</a>
<a href="http://www.jd.com"><img width="200" height="100" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"><span>百度</span></a>
</body>
</html>

下午11 列表标签-块级标签

ul 无序列表

type属性

<ul> 无序列表

<li></li> 块级标签使用

<ul type="square">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>

panding内间距

<ol> 有序列表

<ol>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ol>

下午12 table表格标签

示例1

tr table row 行
td 单元格

<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
</table>

示例2

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
</table>

tr 块级标签

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
</table>

表格

<table border="1">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>部门</td>
    </tr>
    <tr>
        <td>User01</td>
        <td>18</td>
        <td>开发</td>
    </tr>
    <tr>
        <td>User02</td>
        <td>20</td>
        <td>测试</td>
    </tr>
</table>

th 第一行标题

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>部门</th>
    </tr>
    <tr>
        <td>User01</td>
        <td>18</td>
        <td>开发</td>
    </tr>
    <tr>
        <td>User02</td>
        <td>20</td>
        <td>测试</td>
    </tr>
</table>

合并单元格 rowspan

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>部门</th>
    </tr>
    <tr>
        <td>User01</td>
        <td>18</td>
        <td rowspan="2">开发部</td>
    </tr>
    <tr>
        <td>User02</td>
        <td>20</td>
    </tr>
</table>

合并行 colspan

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>部门</th>
    </tr>
    <tr>
        <td>User01</td>
        <td>18</td>
        <td rowspan="2">开发部</td>
    </tr>
    <tr>
        <td colspan="2">User02</td>
    </tr>
</table>

可省略<thead>

可省略<tbody>

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>部门</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>User01</td>
            <td>18</td>
            <td rowspan="2">开发部</td>
        </tr>
        <tr>
            <td colspan="2">User02</td>
        </tr>
    </tbody>
</table>

下午 13 表单标签

最重要最难理解

类似于a标签，向服务器发请求了

请求方式 get post
向服务器发送请求形式
    1 地址栏：输入url，         get请求
    2 超链接a标签 打包请求发送    get请求
    3 form表单 可以是get或post
        登录、注册
    4 ajax

form表单是一个整体标签
　　两大标签

input 输入框内联标签

text类型

password类型

<body>
<h3>注册页面</h3>
<form action="">
    <p>姓名 <input type="text"></p>
    <p>密码 <input type="password"></p>
</form>
</body>

input中重要的两个属性

submit类型

具有默认事件，会把输入的内容给服务器发送过去

<body>
<h3>注册页面</h3>
<form action="">
    <p>姓名 <input type="text"></p>
    <p>密码 <input type="password"></p>
    <p><input type="submit"></p>
</form>
</body>

怎么发的？发到哪儿了？

点击按钮，浏览器发起http请求

基于点击行为，组合符合http格式的请求

请求方式，

action 请求地址

method 请求方式，默认get

<body>
<h3>注册页面</h3>
<form action="http://127.0.0.1:8888" method="post">
    <p>姓名 <input type="text"></p>
    <p>密码 <input type="password"></p>
    <p><input type="submit"></p>
</form>
</body>

默认url-encoded格式，没有键？

点击会覆盖
POST / HTTP/1.1
Host: 127.0.0.1:8888
Connection: keep-alive
Content-Length: 0

构建数据时，没有name属性

添加name属性

修改默认值

<body>
<h3>注册页面</h3>
<form action="http://127.0.0.1:8888" method="post">
    <p>姓名 <input type="text" name="user" value="root"></p>
    <p>密码 <input type="password" name="pwd"></p>
    <p><input type="submit"></p>
</form>
</body>

核心点没有name属性，组不成键值对

下午14

input 日期型data

格式：月份和日期01和02的0不能省

<body>
<h3>注册页面</h3>
<form action="http://127.0.0.1:8888" method="post">
    <p>姓名 <input type="text" name="user" value="root"></p>
    <p>密码 <input type="password" name="pwd"></p>
    <p>生日 <input type="date" name="brith" value="2006-01-02"></p>
    <p><input type="submit"></p>
</form>
</body>

复选框

    <p>爱好：
        蓝球<input type="checkbox">
        足球<input type="checkbox">
        双色球<input type="checkbox">
    </p>
    <p><input type="submit"></p>
</form>

浏览器：勾选是发送；不勾选不发送

<body>
<h3>注册页面</h3>
<form action="http://127.0.0.1:8888" method="post">
    <p>姓名 <input type="text" name="user" value="root"></p>
    <p>密码 <input type="password" name="pwd"></p>
    <p>生日 <input type="date" name="brith" value="2006-01-02"></p>
    <p>爱好：
        蓝球<input type="checkbox" name="hobby" value="lanqiu">
        足球<input type="checkbox" name="hobby" value="zuqiu">
        双色球<input type="checkbox" name="hobby" value="shuangseqiu">
    </p>
    <p><input type="submit"></p>
</form>
</body>

user=user&pwd=123&brith=2006-01-02&hobby=lanqiu&hobby=shuangseqiu

问题？？

使用一样的键，说明有联系，不是必须使用一样的键。

hobby1=lanqiu&hobby3=shuangseqiu

单选框

添加关联，键一样

<p>性别
    男<input type="radio" name="gender" value="male">
    女<input type="radio" name="gender" value="female">
    其他<input type="radio" name="gender" value="qita">
</p>

user=root&pwd=&brith=2006-01-02&gender=male

file 键值对

form表单不支持放json

文件格式改为multipart/form-data

urlencoded

浏览器打包格式默认urlencoded

select标签

<p>籍贯
    <select>
        <option value="">山东</option>
        <option value="">山西</option>
        <option value="">北京</option>
    </select>
</p>

name放在select的地方

option选项

<p>籍贯
    <select name="province">
        <option value="shandong">山东</option>
        <option value="shanxi">山西</option>
        <option value="beijing">北京</option>
    </select>
</p>

user=root&pwd=&brith=2006-01-02&province=shanxi

默认是山西设置

<p>籍贯
    <select name="province">
        <option value="shandong">山东</option>
        <option value="shanxi" selected>山西</option>
        <option value="beijing">北京</option>
    </select>
</p>

默认值

蓝球<input type="checkbox" name="hobby" value="lanqiu" checked="checked">

属性名和属性值是一样的，可以简写

蓝球<input type="checkbox" name="hobby" value="lanqiu" checked>

单选框默认值

男<input type="radio" name="gender" value="male" checked="checked">

多行文本框

<p>
    <textarea name="jianjie" id="" cols="50" rows="8"></textarea>
</p>

提交后，服务器显示内容

user=root&pwd=&brith=2006-01-02&hobby=lanqiu&gender=male&province=shanxi&jianjie=%E7%AE%80%E4%BB%8B

placeholder

提醒显示，不是值本身

<p>
    <textarea placeholder="个人简介" name="jianjie" id="" cols="50" rows="8"></textarea>
</p>

回顾

form
<input type=”text” name=”user”>
<input type=”password” name=”user”>
date name brith
checkbox
redio
submit
select 下拉标签
textarea

拥有事件的标签

<p><input type="submit"></p>

label标签

注意for=”user”中user对应的是id中的id=”user”

<p><label for="user">姓名</label>
    <input id="user" type="text" name="user"></p>
<p>密码 <input type="password" name="pwd"></p>
<p>生日 <input type="date" name="brith" value="2006-01-02"></p>

点击姓名，直接就选中input框

作业，练习页面复盘

css初试

<style>
[type="text"]{
    width:200px;
    height: 30px;
}
</style>

css初试2

<style>
[type="text"]{
    width:200px;
    height: 30px;
}
[type="checkbox"],[type="redio"]{
    width: 40px;
    height: 40px;
}
</style>

posted @ 2022-03-13 22:58 澐湮阅读(52) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

澐湮

前端基础-01HTML基础

01 前端介绍

web应用程序

前端三剑客

输入框示例

页面布局

02 http协议特点

概述

http协议

问题1 客户端没发请求能否收到数据？

问题2 刷新页面是否有变化？

问题3 为甚么要短连接？

03 http请求协议格式

http协议格式

http协议请求格式：三部分

请求头

请求方式：get post

浏览器控制台

扩展知识

get和post请求本质区别

POST请求

点击按钮发生了什么？

04 http响应协议格式

http响应格式

响应状态码

请求报文构成

响应报文构成

示例

测试1不符合http规范

测试2 符合http规范

修改添加响应头，响应体，符合浏览器可解析的响应格式

显示结果

web框架的好处

服务器如何知道请求数据里的格式？

请求头

urlencoded格式

05 web开发流程

标题标签<h1>

图片标签<img src=’’>

从文件读取

新增ndex.html

注意修改working directory

修改main.go

修改html内容

不重启，直接再发起请求

下午06 html的标准结构和语法

<!DOCTYPE html>

<html> 根标签

<head> 功能标签

<body> 页面展示的内容

head

meta

title

link标签 导入文件

标签：

闭合标签

自闭和标签

标签可以加属性

标签可以嵌套

html不区分大小写

总结

下午07 基本标签

标题标签<h1>

文本默认处理机制

换行标签<br>

段落标签<p>

行间有间隔

块级标签：

内联标签

标签<b> </strong> 内联标签

变斜<em> <i>

基本嵌套规则：

html特殊符号

空格

课间练习

块级标签

<h1></h1>

<br>

<p> </p>

link标签导入文件

input 输入框内联标签