WEBBASIC-HTML01
开发的网站包含哪些内容：
1.页面
2.业务逻辑
3.数据存储
网站架构
-BS：Browser Server 浏览器——服务器
优点：跨平台，不用下载客户端，升级方便
缺点：操作不方便，响应速度较慢，功能较少
-CS:Client Server 客户端-服务器
优点：操作方便，访问速度相对快（客户端本身存在
一些数据），提供用户体验度
缺点：功能升级需下载新版本，开发成本高
HTML
-HyperText Markup Language超文本标记语言 ：最
简单的语言
-超文本：指不仅仅包含文本，还包含颜色，字体
，图片，音视频
常用标签
1.文本标签
标题<h1><h2>......<h6>
段落标签：<p></p>
水平线<hr> 网页中一条水平分割线
标签中的align为对齐方式，若align="center"，则表示对齐
方式为居中对齐
<dt> </dt>difine list 定义列表
中间放小标题名字
<dd></dd>dedine tdata定义内容
中间放内容
无序列表
<ul> 无序列表
<li>内容
有序列表
<ol>有序列表
<li>内容
区别：有序列表会在表内容前面加序号
在ol中添加属性type：可以设置标签li前面的样式
ol中属性start：设置标签li开始的数
列表的嵌套：在无序li标签中加入有序或者无序列表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h2>层级列表</h2> <dr><!-- difine list 定义列表 --> <dt>一级标题</dt><!-- dedine title 定义标题 --> <dd>数据内容</dd><!-- define data 定义数据 --> <dd>数据内容</dd> <dd>数据内容</dd> <dt>一级标题</dt> <dd>数据内容</dd> <dd>数据内容</dd> <dd>数据内容</dd> <dt> </dr> <hr> <h2>菜单</h2> <dl> <dt>凉菜</dt> <dd>拍黄瓜</dd> <dd>木耳凉拌</dd> <dd>凉拌黄瓜</dd> <dt>炒菜</dt> <dd>鱼香肉丝</dd> <dd>香菇肉丝盖浇饭</dd> <dd>青椒牛柳</dd> </dl> <hr> <h2>无序列表</h2> <ul type="circle"><!-- type控制显示样式，有none：没有样式、 disc：默认实心圆、circle：空心圆 --> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> <hr> <h2>掌握技能</h2> <ul> <li>Java全懂</li> <li>最强王者</li> <li>把把吃鸡</li> </ul> <hr> <h2>有序列表</h2> <ol type="I"><!-- type的类型：默认数字，a：小写字母 A:大写字母 i：小写罗马字母 I：大写罗马字符 --> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> </ol> <hr> <h2>把大象装冰箱分几步</h2> <ol type="I" start="3"> <li>打开冰箱门</li> <li>把大象装进去</li> <li>关上冰箱门</li> </ol> <hr> <h2>列表嵌套菜单</h2> <ul> <li>凉菜</li> <ol typy="I"> <li>拍黄瓜</li> <li>老醋花生</li> </ol> <li>炒菜</li> <ol type="a"> <li>烧茄子</li> <li>木耳肉丝</li> </ol> <li>炖菜</li> <ol type="A"> <li>水煮肉片</li> <li>东北乱炖</li> </ol> </ul> <hr> <!-- 练习 --> <h2>课程介绍</h2> <ol> <li>java基础</li> <ul> <li>变量</li> <ol type="I"> <li>int</li> <li>long</li> <li>double</li> <li>boolean</li> <li>char</li> <li>short</li> <li>float</li> <li>byte</li> </ol> <li>数据基础</li> <li>运算符</li> <ul type="square"> <li>+</li> <li>-</li> <li>*</li> <li>/</li> <li>+=</li> <li>-=</li> <li>*=</li> <li>+/=</li> </ul> <li>流程控制</li> <ul> <li>if</li> <li>switch</li> <li>while</li> <li>for</li> </ul> </ul> <li>面向对象</li> <li>javaAPI</li> </ol> <hr> <!-- 练习 --> <ul> <li>我的订单</li> <ul> <li>我的订单</li> <li>待付款</li> <li>待收货</li> <li>待评价</li> <li>退款退货</li> </ul> <li>我的优惠券</li> <li>收货地址</li> <ul> <li>更改地址</li> <li>删除地址</li> </ul> <li>账号管理</li> <ul> <li>我的信息</li> <li>安全管理</li> </ul> </ul> </body> </html>
2.分区标签（元素） div
用来装显示的内容的，元素本身没有显示效果，使用分区标签
将页面内容分为几块，好处是便于对内容批量管理
-div ：独占一行
-span：一行可以有多个
-html5的标准中新增了几个分区标签 为了提高代码的可读性
1.header 头
2.article 文章/正文
3.footer 脚
标签分类
1.块级元素：独占一行的元素
-例如：div，p，h1-6，hr
2.行内元素：可以和其他行内元素攻占一行的元素
例如：span
<i>和<em>标签，放在其中的文本为斜体
<b>和<strong>字体加粗
<u>下划线
<del>和<s>删除线
常见特殊字符：
空格：行内元素的空格折叠现象：多个空格合并成一个空格
若想显示多个空格，则需使用：  ；
空格：  ；
< :<
> :>
换行： <br>
图片标签：
alt：表示图片不能正常显示的时候显示的文本
src：图片的路径
title：当查看图片时鼠标移动到图片上提示的内容
width/height：设置图片的宽高，单位为px像素或者百分比
如果只设置宽 则高度会按照原比例缩放（宽直接设置像素，单位px，高设置百分比）
支持的图片格式：jpg（不支持透明色，图片四周矩
形），gif（支持透明色），gif（动图）
例如：<img alt="龟兔赛跑" src="../b.jpg" title="龟兔赛跑">
1.相对路径：相当与当前的页面文件，如果是同级文件直接写文件名
如果是上级文件则../文件名 如果是下级 文件夹名/文件名
2.绝对路径：完整路径，如果访问的图片是站外资源，必须使用绝对路径
这种成为盗链，好处是不战自家资源，坏处别人换地址 自己就不显示
<map>图像地图：可以将图片的某个区域作为可以点击的链接
页面中添加一张图片，鼠标悬停在图片的指定区域时，点击图片，页面
调转到map中给定路径的图片上
<map>中的name和id属性：表示地图的唯一表示，把地图给到图片的时候使用
shape：表示指定区域的形状 圆，矩形...
coords：表示坐标
href：链接地址，可以是相对路径，也可以是绝对路径
href可以指向的内容有：1.可以指向一张图片 2.可以指向一个页面3.给定一个非图片任意文件会自动下载
（系统能查看的格式则自动显示，不能查看的格式则自动下载，例如压缩包）
例：
<img alt="结婚照" src="a.jpg">
<map name="mymap" id="mymap">
<area shape="circle" herf="b.jpf" coords="50,50,40">
<area shape="rect" herf="c.jpf" "coords="110,110,330,330">
</map>
含义：在查看图片img中的路径src为a.jpg图片时，当鼠标悬停在以50.50为原点
半径为40的圆内时，点击该区域，将跳转至herf（路径），查看b.jpg图片（如果
写的是某网址，也可以直接跳转）。当鼠标移动到对角线坐标为110.110与330.330
矩形内时，点击区域则直接跳转herf路径查看c.jpg
超链接
链接其他网页
在<a>标签中加入href属性，后面为相对路径或者绝对路径，则点击a标签内容时则自动跳转
href中的路径。href中如果是#则代表当前页面
如果加入target属性，target=“_blank”时，则打开的该路径会新创一个窗口
链接本网页：返回顶部
<a id="top" name="top"> </a> 下锚，即设置返回的地方
..
..
<a href="#top" >返回顶部</a>
注：标签中的id或者name属性为了让本页中某处迅速找到该处，href则可以实现链接作用，当用户点了
标签中间的文字时，可以迅速跳转至href处网址
表格<table>
table属性：
border属性：使表格有外边框，其值影响边框线的粗细，默认值为0
cellspacing属性：单元格间距和单元格距外边框的距离
cellpadding属性：内容与单元格边框的距离
td属性：
在td标签中加入colspan属性，其值等于2时，合并两列的宽度，相当于合并单元格
在tr标签中加入rowspan属性，其值等于2时，合并两行的高度，相当于横向合并单元格
小练习：环形图
<table cellspacing="0" cellpadding="5" border="2"> <tr > <td rowspan="2">1-1</td> <td colspan="2">1-2</td> </tr> <tr> <td>2-1</td> <td rowspan="2">2-3</td> </tr> <tr> <td colspan="2">3-1</td> </tr> </table>
课程表：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <table border="1" cellspacing="0"> <tr> <td>项目</td><td colspan="5" align="center">上课</td><td colspan="2" align="center">休息</td> </tr> <tr> <td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td> </tr> <tr> <td rowspan="4">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td rowspan="4">休息</td> </tr> <tr> <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> </tr> <tr> <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 rowspan="2">休息</td> </tr> <tr> <td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td> </tr> </table> </body> </html>
