从今天开始，我们将学习第二阶段。今天的学习内容有以下几个部分：

1. HTML5 basic 所有网页的结构和数据都使用html5来搭建
2. Ajax数据交互异步 ajax帮助我们异步连接服务器，发送请求并接收响应
3. ajax的项目 用户管理-登录、查询、注册、修改、删除
4. CSS3 美化页面 让页面看起来不错
5. Bootstrap框架 ①封装很多css，让我们快速发展 ②响应响应布局

这个阶段的知识点很细，单词很多，但我相信你一定可以。

我们每天都在上网，所以你知道我们的这个吗？"网"是什么吗? 其实它叫做Internet,它是一个全球性的计算机互联网网络，它有很多名字，你可能听说过，： 因特网 国际互联网 网际网 保护网络等. Internet事实上，它为我们提供了很多服务，比如： WWW 万维网络，用户通过浏览器Internet搜索和浏览你感兴趣的所有内容 Email 电子邮件服务，Internet用户可以收发电子邮件 FTP 文件传输服务，Internet用户可以将计算机上的文件传输到另一台 TeInet 您可以理解远程登录服务QQ远程控制 远程控制向日葵等 BBS 公告牌服务，如学校经常使用的校园网络等 所以不仅仅是网络www,还有很多很多的服务我们正在或者已经使用过了.

以上内容可以做一个简单的理解，让我们进一步了解WEB

Web又称万维网或环球网，即WWW(World Wide Web) 它可以将各种类型的信息和服务结合起来，为用户提供生动的界面，称之为文档 因此，万维网是无数文档的集合，这些文档存储在因特网的某个地方 总结一句话，你可以把Web理解成网站 以下是如何编写这些文档/网页，如何传输

Web是基于Internet由多媒体信息服务系统组成的Web服务器 浏览器 通信协议由三部分组成 通信协议是指完成通信或服务必须遵循的规则和协议。 这里用的是HTTP协议:超文本传输协议(Hypertext Transfer Protocol) 它们之间是这样的:

1. 网页采用HTML编写出来
2. 连接浏览器WEB并获取网页
3. 获得浏览器分析HTML在用户屏幕上显示网页文档

Web是运行在Internet上述最流行的应用之一，Internet为Web提供网络环境 Web它的出现极大地促进了Internet推广推广

小型软件(xMB)：notepad记事本、notepad 、editplus 中型软件(xxMB)：SublimeText 大型软件(xxxMB)：Dreamweaver、Eclipse/MyEclipse、IDEA/WebStorm、VSCode、HBuilderX

Microsoft IE / Edge（Chrome内核） GoogleChrome（Webkit内核 V8内核） Netscape Navigator/Mozilla Firefox AppleSafari（Webkit内核）

目前，中国还没有独立的浏览器核心，主要推荐谷歌和火狐 我们目前学习和使用的是HBuilderX谷歌浏览器

1. HTML–定义页面内容
2. CSS–控制页面样式
3. JS–控制页面行为/交互 当然，你也可以称之为前端三剑客

HTML:Hyper Text Markup Language，超文本标记语言用于定义页面内容，如文本、表格、图片、音频和视频、超链接…用HTML以.html或者.htm为后缀

1. 在文件夹里新建一个文本文档,命名为"p1.txt "代表我们写的第一页Page 1 注1：中文不得出现在文件夹和文件名称中！ 注2:确保文件后缀名显示，后缀名称显示.txt
2. 修改p1.txt后缀名，改成p1.html,这样，文本文档就会变成网页文件
3. 编写p1.html中的代码:

写一些普通的文字 

4.双击刚写好的文件，用浏览器查看我们刚写好的内容

标记：通常被称为标签或元素，表示页面渲染指令，它有两种： 双标签/封闭标签：有开始标签和结束标签，必须成对出现，如：<b>内容</b> 单标签标签：只有开始没有结束，不能包含内容，例如：<br>

1. 在刚刚的p1.html继续写内容。例如，如果你想加粗文本，你需要使用标签

默认格式文本 <b>加粗的文字 </b>
后续文字

效果:只有被b标签包裹的内容才有加粗的效果 浏览器默认内容都在同一行显示 注意:写完文件需要保存,并且在打开的网页F5刷新页面后才能看到修改后的效果哦~ 2. 我们再来写一写其它的效果 加粗 斜体 下划线 删除线:

默认格式的文字
<b>bold加粗的文字</b>
<i>italic斜体文字</i>
<u>underline下划线文字</u>
<s>strike删除线文字</s>
后续文字

3. 上标字 下标字的效果:

默认格式的文字
X<sup>2</sup>上标字
Z<sub>1</sub>下标字
后续文字

1. 在p1.html中编写古诗,结果发现,4句诗都在同一行显示

静夜思     李白
床前明月光
疑似地上霜
举头望明月
低头思故乡

那我们想要换行或者多个空格的效果,该怎么实现呢?

换行符可以使用单标记标签<br>标签来实现
空格符可以使用&nbsp;转义字符来实现

2. 修改一下刚的代码:

<br>
静夜思&nbsp;&nbsp;&nbsp;李白<br>
床前明月光<br>
疑似地上霜<br>
举头望明月<br>
低头思故乡<br>

比如我们想在页面上写3个被尖括号包裹的名字,代码如下:

<李白>
<tom>
<张三>

结果却发现:两个中文的名字正确显示,英文数据没有显示,这是为什么呢? 因为浏览器以为是一个标签,但是这个标签它不认识,所以没有报错,但是给忽略了… 那如果我们就想在网页上显示中括号,就需要使用到两个转义符号:&lt;表示< &gt;表示>

<李白>
&lt;tom">&gt;
<张三>

修改下上面的代码,可以看到<tom>就可以正常显示啦

<br>注册商标register: &reg;
<br>版权声明copyright: &copy;
<br>商标trademark: &trade;
<br>关闭符号90°角: &times;
<br>带圈的关闭符号: &otimes;

©2017 <达内科技有限公司">> 版权所有

下载链接:https://www.dcloud.io/hbuilderx.html

1. 打开页面选择"DOWNLOAD"下载按钮
2. 根据自己的系统选择,但一定要选择App开发版,它功能比较完善,不要选标准版
3. 选好了点击下载即可

1. 下载好以后我们得到了一个压缩包文件
2. 压缩文件需要解压,不能直接双击压缩文件使用哦

注意: 我们要先把这个压缩包放到一个没有中文的文件夹下再解压,不要直接把下载的东西都放到桌面上,后期会很杂乱 解压需要几分钟,一定要耐心等待完全解压缩完毕后再使用

3. HBuilder无需安装,解压完毕双击可执行文件图标即可使用~

1. 我们可以选中任意一个文件,右键,有很多操作选项,比如重命名等
2. 我们还可以选中文件,直接拖拽到指定的位置下
3. 我们可以拖拽或者点这个小按钮隐藏左边栏
4. Ctrl+鼠标滚轮可以调整编辑页面中的字体大小
5. 在"工具"->“设置"中可以配置"失去焦点时自动保存” 这个配置的意思是一旦你离开HBuilder去点击其他窗口,HBuilder中未保存的编辑内容会自动保存
6. 第一次关闭的时候会有如下提示,选择"是",创建好桌面快捷方式,下次打开就方便啦
7. 修改注释的颜色 (使用灰色的默认注释颜色即可,不推荐修改这个,了解即可) “工具”->“设置”->“源码视图”->找到图中左边的自定义编辑器主题的代码部分,粘贴到右边,取消注释

1. Ctrl+R：在浏览器中运行当前页面文件
2. Ctrl+↑/↓：快速移动当前行代码
3. Ctrl+D：快速删除当前行代码
4. Ctrl+C/V：快速复制并粘贴当前行代码
5. Ctrl+/：添加/取消当前行的注释

在学习标签之前,我们需要认识HTML的注释:

1. 注释是不会被浏览器解析运行的文本<!-- 这里是注释 -->
2. 注意:注释不能嵌套注释
3. 在<>内部不能有注释

之前我们通过<br>标签和空格符实现了古诗格式的调整 但是那样写还是有点麻烦,如果是大段的文字该怎么办呢? pre标签: 保留(preserve)源代码中的原始格式

<!-- 注释:渲染时保留源代码中的格式 -->
<pre>
 静夜思
  李白
窗前明月光
疑似地上霜
举头望明月
低头思故乡
</pre>

可以看到这个效果与我们编辑的内容是一样的,使用也非常简单

<!-- 答案:注意要加pre标签哦 -->
<pre>
let i = 10;
i++;
console.log(i);
</pre>

但注意:pre标签无法实现字体的加粗等效果,还是需要结合其他之前的标签一起来使用

h标签: 引导文字、标题字

<!-- h标签:heading 引导文字 标题字 -->
<h1>静夜思</h1>
<h2>李白</h2>
窗前明月光
疑似地上霜
举头望明月
低头思故乡

效果:被h标签包裹的内容变大加粗,并且独占一行,数字

1.测试h3~h6的字体样式,看看几号字的大小与普通文本一样? 2.试试编写不存在的标签(例如h8),效果如何,会报错吗?

<!-- 答案1:h后数字越大,字体越小,最大到h6,h4的字体大小与普通文本一样,只是加粗了 -->
<!-- 答案2:写了不存在的h8标签并不会报错,没有特殊的显示效果,浏览器会直接忽略 -->
<h1>春晓</h1>
<h2>孟浩然</h2>
<h3>春眠不觉晓</h3>
<h4>处处闻啼鸟</h4>
<h5>夜来风雨声</h5>
<h6>花落知多少</h6> 
我是普通文字
<h8> 哈哈哈 </h8>

浏览器效果:

1. 块级标签(block):必须独占一行，换行无需<br>例如：p、h1~h6、pre…
2. 行内标签(inline):可以与其他内容共处一行,换行必须使用<br>例如：b、i…

p标签: paragraph段落

<!-- p标签也是块级元素 独占一行 p元素默认有上下行间距-->
<p>窗前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

属性:也称为特征，描述标签的某一方面的特点 写法:<标签名 属性名1 = “属性值1” 属性名2 = “属性值2”> 段落内容 </标签名>

1. 属性的声明必须位于开始标记里
2. 一个元素的属性可能不止一个,多个属性之间用空格隔开
3. 多个属性之前不区分先后顺序
4. 属性名与属性值用等号连接
5. 属性值要包含在引号中

<!-- 注意属性值必须使用单/双引号包裹 -->
<!-- <h2 gender="男" age="18" height="180">李白</h2> -->
<!-- align对齐方式 right/left/center 靠右/靠左/居中 -->
<!-- 按住Ctrl，光标点多个位置可以一起编辑，Esc退出 -->
<h1 align="center">静夜思 李白</h1>
<p align="center">床前明月光</p>
<p align="center">疑似地上霜</p>
<p align="center">举头望明月</p>
<p align="center">低头思故乡</p>
<!-- align属性只是凑巧这两个标签能用,比如pre b标签等就没有这个属性 -->
<!--所有标签都有的4个通用属性,后面会学:id class style title-->

hr标签:用于在页面上创建一条水平的分割线,它是一个空标记,hr后面的文本会出现在新段落中 常用属性:color颜色 width占据页面宽度 size线条粗细 align位置信息

<!-- hr标签 -->
<!-- 写Lorem单词Tab补全段落 -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum dolorum iure incidunt quos quasi similique fugiat tenetur earum modi veritatis rerum labore cupiditate explicabo quo corrupti praesentium dolor maxime unde!
<hr color="red" width="50%" size="16px" align="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error maxime numquam veniam iusto rerum perspiciatis molestiae odit odio sed velit neque sapiente dignissimos officiis autem delectus facilis quasi beatae magni.

div标签: division区/块,是一个最简单的块级元素,只有独占一行的效果,没有其他效果

注意:这4句诗词不像之前使用p标签时有行间距哦 提示:试试span标签和div标签,看看哪个可以,为什么

<h1>静夜思</h1>
<h2>李白</h2>
<div>窗前明月光</div>
<div>疑似地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
<!-- span是行内元素,不会换行哦 -->

URL(Uniform Resource Locator):统一资源定位器,用来标识网络中的任何资源,其实就是文件对应的路径.我们常说的有绝对路径和相对路径.先来写个案例感受一下: img标签:全称image图像

<!-- 在页面中呈现图片 -->
<!-- src:全称source,来源/源头 -->
<!-- 小知识:计算机中 一个 . 表示"当前目录" 两个 .. 表示"上一级目录" ./ 表示当前目录的下一级 比如.表示DAY01 ./image表示DAY01目录下的image目录 -->
<img src="./image/1.png" />
<img src="./image/2.png" />
<img src="image/3.png" /><!-- 计算机中./可以省略 -->
<!-- 效果:3张图片在同一行,是行内元素 -->
<!-- alt:alternative替代物,图片无法找到时显示的替代文字 -->

如果图片的路径或者名字错误,图片是无法正常显示的! 比较这三个文件引入这3张图片,路径有何不同?自己动手写写看: 结论:我们写的图片路径与文件和图片的相对位置有关系,位置更改,图片地址就需要更改

<!-- 在3个html中的图片链接是一样的,不会因为文件的不同而更改 -->
<!-- 绝对地址:其他服务器 -->
<img src="https://cdn.tmooc.cn/bsfile//courseImg///f2b39759be9842ae86cfd62294a8e665.png" />
<!-- 为什么呢?因为这个是绝对地址,指定的是图片所在服务器的完整路径 -->
<!-- 绝对地址:本地服务器 -->
<img src="http://127.0.0.1:8848/DAY01/image/1.png" />
<!-- 绝对地址:协议名可以省略不写,注意//不能省略哦 -->
<img src="//127.0.0.1:8848/DAY01/image/1.png" />

a标签:全称anchor锚,超链接

<!-- 超链接 -->
<a href="p1.html">今日的第1个页面</a>
<a href="p3.html">今日的第3个页面</a>

<!-- 使用HBuilder打开时的地址 -->
<!-- http://127.0.0.1:8848/DAY01/p3.html -->
<!-- 直接在文件夹中双击打开网页 -->
<!-- file:///D:/WEB_CODE/DAY01_PM/DAY01/p3.html -->

<!-- <a href="www.baidu.com">跳转到百度</a> -->
<a href="https://www.baidu.com/">跳转到百度</a>
<a href="https://www.tmooc.cn/">跳转到tmooc</a>
<!-- 协议名和冒号可以省略不写，但是双斜杠不可以省略 -->
<a href="//www.tmooc.cn/">跳转到tmooc2</a>

在页面上定义一个位置。叫做锚点 使用a标签，跳转到锚点，页面直接在这个位置显示

1. 定义锚点:使用元素的id名称直接当做锚点名称
2. 跳转锚点:<a href="#锚点名称"></a>

<h1>西游记全集</h1>
<!-- 我们还可以通过超链接跳转到本页的其他位置 -->
<!-- #id值：表示跳转到对应id所在的位置 -->
<a href="#c1">快速跳转到第1章</a>
<a href="#c2">快速跳转到第2章</a>
<a href="#c3">快速跳转到第3章</a>

<!-- 输入Lorem Tab补全一段文字 -->
<h3 id="c1">第一章 石猴出世</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

<h3 id="c2">第二章 东海学艺</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

<h3 id="c3">第三章 龙宫借宝</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

创建p10.html： 写好后运行，我们在浏览器->右键->检查: 这些都是页面结构标签,我们来学习一下:

<html></html> : 用于标记页面的开始和结束(必需的,不能省略)
<head><head> : 页面的头部(必需的,不能省略)
<body><body> : 页面的主体(必需的,不能省略)

那为什么之前我们没写这几个结构标签也可以呢? 其实就像上节的h8标签一样,没有这个标签,写错了html不会报错,而是会忽略掉. 所以严格意义上页面结构标签是不能省略的,必须写,不写也会默认补出,就像上面的图片所示

所以我们修改下10.html,补全代码

<!-- html标签：用于标记页面的开始和结束，必须的，不能省略的 -->
<!-- head标签：页面的头部，必须的，不能省略的 -->
<!-- body标签：页面的主体内容，必须的，不能省略的 -->
<html>
	<head></head>
	<body>学子商城哈哈哈123</body>
</html>

用HBuilder运行检查后发现:body里多了script,这是HBuilder给页面增加了实时刷新的功能 只要我们修改了html的内容,保存,不用刷新浏览器,网页也会自己更新成最新的内容 但注意要通过HBuilder访问,直接在文件夹双击p10.html文件是没有这个效果的

像这样在html标签中写head和body标签的形式,是一种嵌套的结构 这个结构有规范的写法:html标签包含了head标签和body标签

1. 我们把外层的标签称作父级标签,里层的标签称作子级标签
2. 子级标签相对于父级标签要缩进,具体缩进几个字符,根据公司的情况决定

我们也可以在HBuilder中自定义制表符的长度:工具->设置->常用配置->如图

3. 如果一对标签中的内容只有文字,结束标签与开始标签在同一行,不需要换行
4. 如果一对标签中还有子标签,结束标签需要换行

<!-- 我们可以通过Ctrl+K 调整代码格式 -->
<!-- 嵌套结构,子级要缩进,Tab制表符的长度我们可以自行设置 -->
<html> <!-- 父标签 -->
  <head></head> <!-- 子标签1 -->
	<body> <!-- 子标签2 -->
		<p>学子商城3</p>
		<p>
			abcd
			<a>跳转</a>
		</p>
	</body>
</html>

5. 不能在html标签外写比如p标签这样的内容,即使写在外面,浏览器也会纠正

html标签的外面可以放且只能放一行代码:文档类型声明 我们需要告诉客户端浏览器,当前页面使用的是哪个版本的HTML语言 ,声明文档的类型

比如XHTML的语法要求就非常严格,要求<br/>必须写/ 但HTML5写<br>即可,无需再写/ ,这就是版本不同带来的差异

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>  目前h5使用的就是这个文档类型声明,但注意这里没有数字5

我们可以加一下h5的文档声明,有发现区别吗?

<!-- html标签的外面可以放且只能放一行代码:文档类型声明 -->
<!-- 我们需要告诉客户端浏览器,当前页面使用的是哪个版本的HTML语言 -->
<!-- document:文档 type:类型 -->
<!-- 注意它既不是标签也不是注释,作用:声明文档的类型,一般大写 -->
<!DOCTYPE html>

<html>
	<head></head>
	<body>学子商城</body>
</html>

效果:没加文档声明前html铺满整个页面 加了之后只有一行文字的区域变成蓝色,说明还是有区别的

lang属性:用来指定当前页面所用的自然语言(language) 可取的值可以参考下面的表格.那这个属性有什么作用呢? 作用1:为浏览器的翻译功能指定基础语言 比如甲骨文官网是英文的,那谷歌浏览器怎么知道当前是英文的,提示我们是否需要翻译呢? 要知道,一个中文网页也有可能出现英文字母,我们不是根据这个来确定的,而是根据lang属性的值来判断当前网页的基础自然语言是英文,在中国地区,可能需要翻译 作用2: 无障碍阅读支持,同一个词在不同自然语言的读音不一样,为盲人的屏幕阅读器确定基础发音

head标签用于给页面定义全局信息,紧跟在html标签之后 我们来介绍几个head标签中的常用标签:

title : 页面的标题 注意:title只能写一个,并且只能写在head标签中,而且title标签没有属性