第一章 HTML
1. 前端和后端：
前端：呈现在用户面前的就是前端
前端技术：前端就是编写网页代码的技术。
Web应用中，运行在浏览器中的代码就是前端技术。
主要包括三种技术：
1） HTML：组织网页中的内容。
2） CSS：美化网页中的元素。
3） JavaScript：提供更加丰富的交互方式。
只有以上三种技术是可以运行在浏览器的。
基于以上三种技术的衍生技术：
1） 前端库： jQuery是JS的封装库。
2） 前端框架：React、Vue、Bootstrap、Layui、Layui-mini。
后端:
用户看不到的那就是后端
运行在服务器上的代码，就是后端技术。
比如：
JavaEE
PHP
C# .net
2.C/S和B/S架构：
C/S：
Client-Server
客户端+服务器：QQ、LOL
优势：效率高，安全性高
缺点：必须安装客户端，针对不同的平台开发客户端
B/S：
Browser-Server
浏览器+服务器：百度，淘宝，京东
优势：无须安装客户端，在浏览器中就可以直接访问，并且是跨平台的。
缺点：效率低，安全性低
3. Web应用访问过程：
4. HTML
Hyper Text Markup Language
超文本标记语言，它是用来编写网页一种基础语言。
组织网页中的内容 —人
超文本最核心的东西是：超链接。 还有图片，视频，音频。
标记：HTML由各种标签（标记）组成的。
开发工具：
IDE
HBuilderX官网：https://www.dcloud.io/
HBuilder下载页面：https://www.dcloud.io/hbuilderx.html
下载解压后即可使用。
4.1 HTML的基本结构
<!-- DOCTYPE document 文档 type 类型 html html5 -->
<!DOCTYPE html><!-- HTML的根标签： -->
<html><!-- HTML的头，设置当前页面，进行一些通用性的配置 --><head><!-- 元， charset 字符集 使用 utf-8 --><meta charset="utf-8" /><!-- 设置网页的标题，显示在浏览器的标题栏中 --><title>HTML页面</title><!-- JS或CSS的代码 --></head><!-- HTML的主体，在浏览器的主窗口中可以显示的内容 比如，文本，超链接，图片。。。--><body>我的HTML页面</body><!-- HTML标签的结尾 -->
</html>
标签
注解的快捷方式：
Ctrl+/
4.2 HTML中的标签
在HTML中，所有的标签都以<标签名>方式存在。标签上还可以设置一些属性。
双标签：
<标签名 属性=“值”>标签的内容</标签名>
单标签
<标签名 属性=“值” />
例如：
双标签是可以包含内容的，单标签不行。
HTML双标签通常都可以嵌套的。外层的标签叫父标签，内层标签叫子标签。
id:为标签指定一个id值，在一个页面中id值是不能重复的
class：为标签指定一个class值，通常用于设置CSS样式
width：宽度 单位：300px（像素） 50%（以父标签的宽度进行计算）
height：高度
border：边框
style:设置CSS样式的
4.3 常用标签
4.3.1 文本：
<!-- 文章标题标签
h1~h6, 字体加粗，字号减小，每个标题独占一行（块级元素）
-->
<h1>标题<span>一</span></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h6>标题六</h6><!-- 段落标签, 表示文章的一个段落 独占一行
在HTML中连续的多个空白字符（空格，回车换行，Tab）最多只解析成一个空格
-->
<p>常见的关系型数据库：MySQL： 开源免费的，Oracle公 司旗下。Oracle：商业数据库，大型的面向对象的关系型数据库。MS SQL Server：微软的数据库，收费，只能运行Windows平台上。SQLite：基于文件的微型的关系型数据库。Access：微软基于文件的微型数据库。</p>
<!-- hr 分隔线-->
<hr>
<p>常见的关系型数据库：
MySQL： 开源免费的，Oracle公司旗下。<!-- br 换行-->
<br>
<br>
Oracle：商业数据库，大型的面向对象的关系型数据库。
MS SQL Server：微软的数据库，收费，只能运行Windows平台上。
SQLite：基于文件的微型的关系型数据库。
Access：微软基于文件的微型数据库。</p><b>加粗</b>
<strong>加粗</strong><i>斜体</i>
<em>斜体</em><!-- sub下角标 sup上角标-->
H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
<span>没有任何效果，布局</span>总结：
1）标题标签：h1~h6, 字体加粗，字号减小，每个标题独占一行（块级元素）
<h1>标题<span>一</span></h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h6>标题六</h6>2）p,段落标签3）br 换行标签4）hr,分隔线5）字体相关的：
b ,strong ，em ,i,sub,sup,span,font
<b>加粗</b>
<strong>加粗</strong><i>斜体</i>
<em>斜体</em><!-- sub下角标 sup上角标-->
H<sub>2</sub>O
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
<span>没有任何效果，布局</span>4.3.2 图片：
img标签用于在页面中显示图片。
<img src="图片的地址" width="宽度" height="高度" title="文本提示"/>
img标签是一个单标签。
src：设置要显示的图片的地址。这个地址可以是相对路径，也可以是绝对路径。
width和height：用于设置图片在页面中的显示大小，可以使用像素设置，也可以使用百分比。
当使用像素值时，这时会根据实际像素进行显示。
当使用百分比时，这时会根据父元素的宽度来进行计算。
如果只设置了width和height中的一个，另一个也会进行等比例缩放。
如果同时设置了width和height，这里会按照设置宽度高度进行拉伸。
4.3.3 超链接：
超链接是HTML的灵魂。
超链接可以实现页面之间的跳转，从而将多个网页整合成一个网站。
<a href="点击时跳转地址" target="打开方式">超链接的内容</a>
超链接在点击前，点击后，鼠标按下时，会呈现不同的状态。
超链接可以嵌套其它标签，当存在多个超链接时，从左向右的顺序排列。
href：超链接跳转的地址，可以是相对路径，也可以是绝对路径。
target：设置超链接的打开方式。
target的取值：
1） _self：在当前页面中打开，默认值。
2） _blank：在新页面中打开超链接。
3） _parent：在父页面中打开超链接。
锚点：
在一个页面中，每一个标签都可以添加id属性。
id属性在一个页面中也不应该出现重复的值。
如果在a标签的href设置为#id值，这时a标签就变成了锚点的跳转。
比如：
4.4组合标签
由多个标签组合在一起，完成整个功能。
4.4.1 列表：
1.有序列表
<ol> order list<li>第一项</li> list item<li>第二项</li><li>第三项</li>
</ol>
每一项前显示序号。
2.无序列表（最常用）：
无序列表在网页中是最常用的一种列表。例如：新闻列表，文章列表，菜单。
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>
每一项前显示小圆点
展示效果如下：
3.自定义列表：
<dl><dt></dt> <dd></dd><dt></dt> <dd></dd>
</dl><dl><dt></dt> <dd></dd><dt></dt> <dd></dd>
</dl>
如下所示：
展示效果如下：
4.4.2 表格：
<table border="" cellspacing="" cellpadding=""><caption>表格的标题</caption><thead> 头部<tr> 行<th>列头</th><th>列头</th></tr></thead><tbody><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></tbody>
</table>
具体对应的效果：
caption，thead，tbody标签可以没有。
table标签的属性：
1） border：边框宽度，以像素为单位。
2） width：表格宽度。
3） cellspaceing：单元格之间的间距。
4） cellpadding：单元格边框与内容的间距。也就是内边距。
th、td标签的属性：
1） width：宽度。
2） rowspan：行合并。（并且可以设置 rowspan=‘’2‘’这样，代表一个格子占两行）
3） colspan：列合并。并且可以设置 colspan=‘’2‘’这样，代表一个格子占两列）
注意：可以单独设置某一行的具体宽度，也可以直接设置表格整体的宽度，如果不特意说明那么会自适应。
如下所示：
4.3.3 表单
表单为用户操作页面操作的元素。为用户在页面中输入数据提供丰富的方式。
<form action="表单数据的提交地址" method="请求方式" enctype="表单数据的传输方式">
表单元素
</form>
action：
表单在提交时，数据送的地址，这个地址通常是一个服务器的动态页面。地址可以是相对路径，也可以是绝对路径。
method：
表单的请求方式实际就是HTTP的请求方式，常用的有get、post等请求。默认情况下method的值是get。
4.3.4 表单元素
input：
表单中最常用的输入元素。
<input type="类型" name="名字参数名" value="值" />
1） type：通过设置不同的type得到不同的输入控件。
type的取值可以是：text、password、radio、checkbox、number、email、file、submit、reset、button、hidden等等。
2） name：input标签的名字，只有设置了name属性的表单元素，才会将它的值提交到action。
3） value：标签的值，对于某些input，value就是初始时的默认值；对于另外一些input，value就是它的对应值。
input的类型：
1） text
文本框，可以输入任意的文本字符，只能输入一行。
用户名：<input type="text" name="username" value="tom" placeholder="请输入用户名">
2） password
密码框，输入字符都显示为掩码状态即一个圆点。
密 码：<input type="password" name="pwd" value="123" placeholder="请输入密码">
3） radio
单选按钮，在一个表单中，name相同的radio会被当做一组，一组的radio最多只能有一个被选中。
单选按钮的默认值是on，通常使用value设置单选按钮所对应的值。
如果希望某一项选中，可设置checked属性。
性 别：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女
4） checkbox
复选框，是可以多选的，也可以选中，或不选中。
爱 好：
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉" checked>睡觉
<input type="checkbox" name="hobby" value="打豆豆" checked>打豆豆
5） number、email
只能输入允许的值，并且会进行检查。
身 高：<input type="number" name="height">米
邮 箱：<input type="email" name="email">
6） file
上传文件，可以选择本地的文件上传到服务器。
照 片：<input type="file" name="photo">
7） submit
提交表单的按钮，点击时会将当前表单中所有的有效表单元素的值获取并上传到action的地址。
<input type="submit" value="保存">
8） reset
重置按钮，点击时会将用户的输入全部清除，回到最初始的状态。
<input type="reset" value="重新填写">
9） button
普通按钮，不具有提交和重置的功能。
<input type="button" value="按钮">
10） hidden
隐藏域，在页面中不会显示，也不需要用户进行操作，表单提交给，传递用户不应该看到的数据。
<input type="hidden" name="id" value="12">
select
下拉列表框，从下拉列表中选择一个项。省，市，区地址。
<select name="名字"><option value="1">选项一</option><option value="2">选项二</option>
</select>
例如
班 级：
<select name="clazz"><option value="1">220701Java</option><option value="2">220702Java</option><option value="3">220703Java</option><option value="4">220704Java</option><option value="5">220705Java</option><option value="6">220701H5</option><option value="7">220702H5</option>
</select>
textarea
多行文本域，可以输入多行文本，生成滚动条。
<textarea name="名字">文本内容</textarea>
textarea可以通过cols控制宽度，rows控制高度，这两个属性都是根据字符大小计算的。
button
相当于input的按钮，但它是一个双标签，可以嵌套其它的标签。
<button type="submit/reset/button">内容</button>
相对路径和绝对路径
url的相对路径和绝对路径
绝对路径
协议://主机名/ip:端口/具体路径
http://127.0.0.1:8848/demo0728/form.html
绝对路径一般用于跨站访问。
相对路径
1） 以/开头的路径。
以当前的站点作为相对路径的根路径。
例如：
页面： http://127.0.0.1:8848/demo0728/url.html
相对路径：/index.html
计算过程：http://127.0.0.1:8848/ + index.html
最终访问路径：http://127.0.0.1:8848/index.html
2） 直接以路径开头。
以当前页面所在的路径作为根路径。
页面：http://127.0.0.1:8848/demo0728/url.html
相对路径：index.html 或 ./index.html
计算过程：http://127.0.0.1:8848/demo0728/ + index.html
最终访问路径：
http://127.0.0.1:8848/demo0728/index.html
3） 以…/开头的路径。
…/当前路径的上级路径。
页面：http://127.0.0.1:8848/demo0728/url.html
相对路径：…/index.html
计算过程：http://127.0.0.1:8848/demo0728/向上一级 + index.html
最终访问路径：http://127.0.0.1:8848/index.html
base
根路径的设置标签, 用于设置当前页面的相对路径的根路径。
页面：http://127.0.0.1:8848/demo0728/url.html
base：<base href="/root/page/">
相对路径：index.html
计算过程：
相对路径根路径 => http://127.0.0.1:8848/ + root/page/
index.html => http://127.0.0.1:8848/root/page/ + index.html
最终访问路径：http://127.0.0.1:8848/root/page/index.html
举例子：
显示效果如下：
