week09_day01_HTML

1基础
1.1数据结构+数据库+javase
应该对java这个语言有一定认知

心里上的一个坎, 技术上并不难 (站在前端(语言)的角度上理解前端, )

1.2计划
1.31,前端基础: html css js(javascript) dom 3-4
1.42, Vue (是一个前端框架) 3-4
3, Git HTTP Tomcat 2-3

强类型语言: java (语法规范很严格)
弱类型语言: html css js vue (有语法要求, 不严格)
强类型语言，比如数据类型不一样，计算结果就可能不一样；"“表示字符串；’'表示字符。
弱类型语言，比如在JavaScript中，数值的数据类型只有number，1的数据类型是number，1.1的数据类型也是number；”"和’'都表示字符串。

Npm-- 不稳定

1.5历史
Java - 90年代
Html css js - 是和java一个时代, 甚至比java更早

后台开发(服务器开发)- java 很多年
前端开发 ---- 2010年之后才形成的一个职位

所有语言----从杂草横生- 到逐渐稳定

1.6前端or 后端
1, javase java技术语法
2, 数据结构 研究数据的组织方式
3, 数据库 存储数据
4, 前端 页面(一套页面) (怎么去实现一套页面) (在浏览器看到的一切都属于 前端)
5, javaee java的服务器开发
6, spring以及spring一些衍生或者相关的一些框架 (后台框架) 用框架来简化服务器开发
比如我们之前学的DBUtils，它就是一个工具，用来简化JDBC，代码要讲究效率，不能每次都自己写一个连接池，建立连接。
有这么个工具，我们可以在这个框架的基础上写代码，刨去了底层的细节。
再比如jar包，本质上就是一个类，别人写的java代码，编译之后，形成一个jar包，你在人家的基础上用。
所以，spring其实就是对javaee的封装，用框架写就可以减少对底层操作的处理。
7, 分布式

项目

1.7目标
1, 能看懂前端代码 (有查询工具的支撑)
2, 对前端的生态有一个简单的的了解
3, 如果想修改项目某些前端代码, (在工具支撑下) 可以修改. -----完全不推荐

非线性学习曲线:
html 超级简单, 仅仅只是一些标签
css 有点不好接受, 难入门, 难精通的
js 很简单 对我们来说, 易入门, 难精通
vue : 刚开始很简单, 后面(起项目)非常麻烦

作业: 都会讲(除非非常简单)
1, 完全不知到作业怎么写
2, 知道怎么写, 但是就是写不出来(无从下手)
3, 可以写, 写出来的结果, 不是你想要的

经验: 要问(多问: 课间, 课下, 作业, 别的前端代码–都是可以问)

1.8前端的html css js
是用来写页面
页面—人
Html – 骨架
Css — 皮肤和血肉
Js — 大脑逻辑

················································································································································································································

2Html
2.1历史
2.1.1产生的原因
2.1.2三要素
1, 要知道需求资源所在的位置: url(统一资源定位符) - 指示资源所在位置
http://115.29.141.32/#/home
协议 ip 服务器内部路径：#/home 这个路径是给服务器看的，服务器能

Ip: 是互联网上唯一标识某台电脑的标记 (局域网, 公网, ) (ipv4 ipv6)
服务器内部路径: 服务器(java服务器开发)

2, html
承载资源内容. (当下这个应用环境: html js css 代码)

3, 协议
http 规定资源的传输方式. (网络模型)
屏蔽底层理解: http就是规定了传输方式
如我们可以获取京东网站上的一张图片的URL：
按F12—>Network—>Headers—>General

2.2Html css js
W3c: 草案- 类似于java的文档
浏览器: 把代码(html css js)-转化为实际显示的样子

Html5: 2008
Css3: 2001
ES6(js javascript, ECMASript): 2015

2.3Html: 超文本标记语言
它是个标记类型的文本语言
超文本: 超- 可以包含文本字体,图片、链接，甚至音乐、程序等元素的文本
是一个以.html为后缀的文本
是一个文本,也是一个网页;该文本可以用浏览器打开( 如果包含代码, html和普通文本就不一样)

标记: HTML 是一个使用“标签”来描述网页的文本 (标签在html文本中有实际意义)

标签: 以’<>’包裹的元素, 在html文档中 叫标签

注意: html的主要意义(作用)- 就是用来描述资源的
通过标签的方式-来描述资源

2.4一个html从文档角度
1首先html是一个文档(和txt, 别的文档类型, 仅是类型的区别)
2.html结尾的文档
3Html是有结构的文档

2.5Html文档的标准结构

1, html文档----标签成对出现 (不绝对—存在不是成对的标签)
2, 以标签 包裹整个文档
3, 分为两部分, 头部份包裹,身体部分包裹

2.6我们主要关注身体部分
Html - 网页的骨架— 骨架是由标签来构成的

头: 引入外部资源, 标记和描述html文档, seo
身体: 我们所能看到的网页----基本都是 所显示的内容

2.7Html的重要标签(body)

•<hr>:  横线 
•<br>:  换行
•<h1>-<h6>:  标题 
•<div>:   文档分区或分节
•<a> :    超链接
•<p>:     段落
•<img>:   图片 
•<input>:  输入框
•< textarea >: 多文本 
•< select > :   下拉选
•<ol>--<ul>:  有序和无序列表, 
•< table >--<tr>---<td>---<th> :  表格
•< form >

2.8body标签的分类(css盒子模型)
行级标签: 在一行中顺序排列, 从左向右
块级标签: 独占一行, 上下排列
行内块: 本质上是个行级元素, 但是有一些块级元素的特性

2.9编辑器
IDEA：
新建project—>在project的src目录下新建一个名为html包—>新建一个HTML5文件，然后在里面写点东西。
然后点击右上角的Chrome浏览器的按钮，发现没反应。
那就配置一下：点击setting—>Tools—>Web Browsers—>Path
在path中写入自己本机上Chrome浏览器的存放位置。

················································································································································································································

: 一个声明(html5的声明)

声明给浏览器看，告诉浏览器按照哪个标准去解释如下的代码，这是html5的固定写法。就是说你的这段代码要用html5的语法去解释的话，要加这个声明。

Meta标签: 标识html页面文档的一些元信息

在HTML文档中加很多空格、回车，只能表示为一个空格，那如何在页面上写出多个空格呢？

3标签
3.1Hr
Hr: 标识一条横线, 并且是一个单标签, 无结束标签

---

noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时–默认px )
width:宽度(不带单位时–默认px)
align:对其方式

---

Px: 像素

90%的html标签的属性, 我们都是用不到的
Css - 皮肤和血肉
Css 就是对html标签的修饰

Html创建之初- 描述资源(通过标签结构) -

3.2Br
换行符: 对一行进行换行, 单标签

使用在行级元素, 当多个行级元素, 中间需要换行时使用

3.3Hn
H1……h6: 标题标签, h1最大, h6最小
用来描述标题
h0
h8
h0 h8

自定义标签: 一些不存在于规定之内的使用者自己创造的标签, 没有任何实际意义, 按文本渲染

注意: h1标签,在一个html文档中, 只能出现一次, h2—h6可以出现多次

为什么h1只能出现一次?
竞价排名:
网络爬虫: 1, 去百度注册, 2, 爬虫爬的过程中, 把你的网页关键字存到搜索引擎的数据库
Seo: 搜索引擎优化
别的爬虫来爬你的时候，会看一下你有的keywords有没有h1这个标签，有的话就会去做优化

3.4Div
Div: 对文档(页面)进行分区或者分节
可以通过css将块级的div变成行级的div

3.5A
<a >: 标识超链接. 用于从一张页面链接到另一张页面 (从一个地方跳转到另一个地方)
A的href: 标识改超链接, 要跳转的位置(跳转到那个页面上区)
Target: 指示要跳转的页面在那个地方打开

•<a href=“http://www.baidu.com.cn”>baidu</a>
•属性
•Target
•超链接属性target的value值时默认是_self
•_blank:在新窗口打开
•_parent:在父窗口打开
•_self:它使目标文档显示在超链接所在框架或者窗口中
•_top:在顶级窗口打开
•同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口

标识, 在该页面中, 引入一个新的页面( 引入一个新的html文档对象)

3.6P
标识一个段落标签, 双标签, 块级元素(独占一行)

注意: p标签会在段前和段后占据一部分空间(上下空间)

3.7Img
Img: 是一个图片标签

可以控制图片宽高
width=“100px” height=“100px”

3.8Input
Input: 标识一个输入框 , 但是它可以根据type属性, 做各种显示

3.9Textarea
多文本

Cols:列
Rows:行
Maxlength:最大 (最大可以输入多少个字符)
Placeholder:提示 (注意, 必须文本域之中无内容, 这个属性才具有实际意义)


注意：上面这段代码换行后，在浏览器中显示的时候有空格
readonly :只读

3.10select
select: 标识一个下拉选 , 并且必须和option一起使用才具有实际意义
option: 标识下拉选的一个选项

: 标识option的默认选中

<select>
    <option>
        1
    </option>
    <option>
        2
    </option>
    <option selected="selected">
        3
    </option>
    <option>
        4
    </option>
</select>

3.11ol, ul, li
ol: 标识有序列表
ul: 标识无序列表

必须结合li标签使用

有序列表
Type:规定在列表中使用的标记类型(1,A,a,I,i)。
Start:规定有序列表的起始值 (必须是数字 )
Reversed:规定列表顺序为降序。(9,8,7…) (仅作用于序号)

无序列表:
Type:
disc:默认值。实心圆。
circle :空心圆。
square :实心方块。

3.12Table
Table:标识一个表格, tr td th
Thead tbody tfoot: 使用的时候,必须一起使用, 使用顺序Thead tfoot tbody:

Tr: 代表table表格内发一行
Td: 代表一个行内的一个单元格

Table元素的元素边框

标识一个单元格元素内容, 到单元格边框的距离
cellpadding=“100”

标识单元格与单元格之间的距离
cellspacing=“10”

合并列
colspan=“2”

合并行
rowspan=“2”

用来替换 作为表格头

3.13 Form表单

3.13.1一个页面是如何产生的？

比如打开京东：
1.在百度输入“京东”，点击第一个，进入官网。
2.在地址栏输入“https://www.jd.com”。

比如，“https://www.baidu.com”，浏览器怎么知道访问百度的呢？
https://www.jd.com/是一个域名。

浏览器找服务器要的是：点击F12后的HTML代码。
那这些HTML代码分几部分呢？
两部分：1.前端代码。2.数据库中的内容，如一张图片、一个超链接等。

我们不能把代码直接写成点击F12后的样子，比如京东的页面刷新一下后可能主页显示的商品就不一样了，为啥不一样了，是因为程序员改代码了么？当然不是。
所以：

1. 数据和前端代码是分离的, 他们要通过某种途径结合到一起
   结合到一起, 这个工作,由服务器帮我们做好
   浏览器只需要一个, 结合好数据和前端代码的html页面
   

浏览器得根据IP地址访问服务器，我们所访问的其实就是url，通过url获取某些资源。
2. 浏览器, 关注于url是什么, 关注于协议是什么,并且还要再url中提取出ip地址 (因为IP地址才是唯一标记一台电脑的方式，域名不是)

https://www.baidu.com

第一步, 就是要把用户输入(直接输入, 超链接, form)的url中的域名变成ip
直接输入, 超链接, 它的本质都是根据url调用浏览器,发送一个请求
Dns: 域名映射服务: 把域名变成ip
Dns由网络运营商提供。

到上面的过程为止, 我们获得了一个html页面。

再想一个问题：
09_img.html文件，右击—>用Chrome浏览器打开，地址栏是这样显示的：F:\QQ文件\王道_上课资料\前端\前端Day1_HTML_下午\code\src\html\09_img.html.。
而在IDEA中新建一个HTML文件并点击右上角的Chrome浏览器标识打开后，地址栏是这样显示的：http://localhost:63342/Code3/html/09_img.html?_ijt=h413se4fm1oaj3kled9hf43upg

第一个就像在本地用记事本打开一个文件似的。
第二个才是真正的上图中的连接的方式打开一个页面，IDEA帮你建了一个后台服务器，这个服务器端口是63342。

http://localhost:63342/Code3/html/09_img.html?_ijt=h413se4fm1oaj3kled9hf43upg
http:协议
Localhost：本机
63342：端口号
/Code3/html/09_img.html?_ijt=h413se4fm1oaj3kled9hf43upg：这部分给服务器看。

按F12看HTML代码，刷新一下

发现有三次请求：

1. 获取HTML代码，解析代码。
2. 解析代码的时候发现代码中有图片的链接，通过链接获取图片并显示。
3. 获取标题中的IDEA图片。
   

点击超链接浏览器做的事情：
1,启动相对应的协议引擎。
2,解析协议后面的具体内容。
3,如果跟的是一个主机地址。先查找本机hosts文件列表。是否可以找到该主机对应ip。
如果没有找到，会找本机指定的后者本机默认的DNS服务器。去解析该主机。
4,获取到该ip后，在连接该指定ip的主机，并获取所需的资源。
我们没法直接获取资源，因为我们没有访问权限，是有服务专门处理外部请求，由服务器拉决定我们是否有权限访问。

注意：
1，当没有指定具体协议时，浏览器会启动默认的file协议引擎来解析href的值。
2，当指定的协议浏览器无法解析时，浏览器会在本地注册中查找是否有关联该协议的应用程序。如果有就调用程序进行该协议的解析。

再看，F:\QQ文件\王道_上课资料\前端\前端Day1_HTML_上午\index.html，这是一个绝对路径

<img width="100px" height="100px" src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984473917,238095211&fm=26&gp=0.jpg">

中src后面的内容也是一个绝对路径。
这个路径最终是要有服务来接收的。
而前面那个绝对路径没有服务来接收。
例如，如果我们写成这样：

<img width="100px" height="100px" src="F:\QQ文件\王道_上课资料\前端\前端Day1_HTML_下午\html字符.png">

这样是没法访问的。
因为这样读的是读本机上的文件，如果真的能读到，那别人写个这样的代码，你去访问岂不是让别人把你本机上的文件都读走了。所以浏览器直接禁止了这种操作。

那怎样才能读这张图片呢?用相对路径。把文件放在工作目录下。

<img width="100px" height="100px" src="./btn_reg.gif">

它现在读的就是服务器了。./表示从服务器的目录下读文件。

·······································································································································································································

3.13.2 Form

它的作用就是,在一个页面内部, 发起一个请求(调用浏览器发起)
比如你在百度首页的搜索框输入：1，按回车，就会跳转到另一个页面。

百度首页就是一个form表单

一个请求(浏览器发起的请求): 获取了一个html
流程如下:

我们调用浏览器的请求: 1,直接输入 2, 超链接 3, form表单

需要3要素: url, html, http

从浏览器服务器的角度理解：要有浏览器发起请求, 要有服务器接收请求(分析)

借助百度的服务器: url
https://www.baidu.com/s?wd=1&rsv_spt=1&rsv_iqid=0x92542d7c00471a4b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=938&rsv_sug4=1484

url第一部分: 协议
url第二部分: 域名或者ip+端口
url: 第三部分: 服务器内部路径(给服务器上服务’看’(解析)的)
/s?wd=1&rsv_spt=1&rsv_iqid=0xab135bd20047dce0&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=0&rsv_btype=i&inputT=2297&rsv_sug4=3980

url第三部分: 服务器内部路径+参数, 以?为分割 参数可以携带多个(以&符号分割)
而且参数是key-value形式的参数
为什么要有参数— 因为要获取某个特殊的页面。
在淘宝中，同一店铺的不同商品只有商品参数不一样，比如下面就是Nike旗舰店两款鞋子的链接。id=618102997645，id是主键，唯一标识一个商品。

https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w4004-22857512303.1.42d26730H8XTAA&pvid=7934dd8e-55af-4d90-9b01-edc952cfcf9a&pos=1&acm=03068.1003.1.702815&id=601768152559&scm=1007.12941.156882.100200300000000

https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w4004-22857512303.3.42d26730H8XTAA&pvid=7934dd8e-55af-4d90-9b01-edc952cfcf9a&pos=2&acm=03068.1003.1.702815&id=618102997645&scm=1007.12941.156882.100200300000000

<form action="https://www.baidu.com/s" method="get">
    <input name="wd">
    <input type="submit">
</form>

Action: 是一个url

<input type="submit"> 是一个提交按钮，专门用来在form表单中提交请求

表单元素: input select textarea option button (他们是有值的: value)
比如上面这段代码，我在输入框中输入aaa，那么value就等于“aaa”，甚至还可以给他个初始值：<input name="wd" value="aaa">，那么页面的输入框刚开始就是aaa
select的value体现在option上

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Key: 就通过表单元素的name属性来标记

如果输入aaa，并点击提交，就会自动形成键值对wd=aaa，并将其加个？并添加到https://www.baidu.com/s后面，然后再加一些参数并进行访问。

请求方式: get post
method=“get”


Post请求

3.13.3get和post区别
第一个: 当get请求需要向后台提交数据的时候, 那么它的数据会直接拼接在url之后
当post请求需要向后台提交数据的时候, 它是数据一般放到正文里
Post请求url之后可以拼接参数(但是,没有人这么用)
第二个: 安全性。比如你要输入密码，提交的时候并不想让别人看到，就得用post
第三个: 参数的限制,
get请求, url之后只能拼接1kb的参数
post请求(参数放到正文里) 没有限制携带参数大小
第四个: 语义化的区别
Get 一般用来, 获取数据
Post一般用来, 提交数据

百度处理的请求必须是get，post会报错

·······································································································································································································

4重点
4.1比较重要的标签(记住)
4.2理解一个页面产生大体逻辑(理解)

·······································································································································································································

作业：实现如图所示页面(仅需实现样子)

分析：一看这道题，它应该分几部分？
两部分，左侧的文字部分和右侧的框图部分。
用<table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homework</title>
</head>
<body>

<table cellspacing="10">
    <tr>
        <td>注册邮箱:</td>
        <td><input></td>
    </tr>
    <tr>
        <td></td>
        <td>你还可以使用手机号注册</td>
    </tr>
    <tr>
        <td>创建密码:</td>
        <td><input></td>
    </tr>
    <tr>
        <td>真实姓名:</td>
        <td><input></td>
    </tr>
    <tr>
        <td align="right">性别:</td>
        <td>
            <input type="radio" value="1" name="aaa">男
            <input type="radio" value="2" name="aaa">女
        </td>
    </tr>
    <tr>
        <td align="right">生日:</td>
        <td>
            <select>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
            </select>年

            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>月

            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
            </select>日
        </td>
    </tr>
    <tr>
        <td align="right">我正在:</td>
        <td>
            <select>
                <option>学习</option>
                <option>打球</option>
                <option>跑步</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img src="./verycode.gif">看不清换一张？
        </td>
    </tr>
    <tr>
        <td align="right">验证码:</td>
        <td><input></td>
    </tr>
    <tr>
        <td></td>
        <td>
            <img src="btn_reg.gif">
        </td>
    </tr>
</table>

</body>
</html>