JavaWeb - html
1.Web基本概念
软件架构：
1.C/S:Client/Server 客户端/服务端
优点：用户体验好
缺点：开发 安装 部署 维护 麻烦
2.B/S Browser/Server 浏览器/服务器端
优点：开发 安装 部署 维护 方便
缺点：如果应用过大，用户的体验可能会受到影响
资源分类：
1.静态资源：
*使用静态网页开发技术发布的资源
*特点：
*所有用户访问，得到的结果都是一样的
*如：文本，图片，音频，视频，HTML，CSS,JavaScript
*如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2.动态资源：
*使用动态网页及时发布的资源
*特点：
*如：jsp/servlet
*如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
静态资源：
HTML:用于搭建基础网页，展示页面的内容
CSS:用于美化页面，布局页面
JavaScript：控制页面的元素，让页面有一些动态的效果
2.HTML
1.概念：最基础的网页开发语言
*Hyper Text Markup Language 超文本标记语言
*超文本：超文本是用超链接的方法，将各种不同空
间的文字信息组织在一起的网状文本
*标记语言：
*由标签构成的语言。 < 标签名称> 如：HTML、XML
2.快速入门
*语法：
1.html文档后缀名 .html 或 .htm
2.标签分为：
1.围堵标签：有开始标签和结束标签。如<html></html>
2.自闭合标签：开始标签和结束标签在一起。如<br/>
3.标签可以嵌套：需要正确嵌套，不能你中有我，我中有你
4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
5.html的标签不区分大小写，建议使用小写
*代码：
<html> <title>biaoti</title> <body> <font color='red'>Hello World</font><br/> <font color = 'yellow'>nihao</font> </body> </html>
3.标签学习：
1.文件标签：构成html最基本的标签
*html：html文档的根标签
*head：头标签。用于指定html文档的一些属性。或引入外部资源 如：指定字符集 <meta charset="UTF-8">
*title：标题标签。定义标题的标签
*body：体标签
*<!DOCTYPE html>：html5中定义该文档是html文档
2.文本标签：和文本有关的标签
*<!- - 注释内容 - - >
*<h1> to <h6> 标题标题
*<p> 段落标签 自动换行
*<br/> 换行标签
*<hr/>一条水平线
*<b> 字体加粗
*<i> 斜体
*<font>字体标签
*face：控制字体 楷体等
*属性定义：
*color：
1.英文单词：red，green
2.rgb（值1，值2，值3） 值的范围：1-255
3.#值1值2值3 值的范围：00-FF 如：#FF00FF <hr color="#FF00FF" width="1300" align="center"/>
*width：
1.数值：width = '20', 数值的单位，默认是px（像素）
2.数值%：占比相对于父元素的比例
练习：公司简介
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <h1>公司简介</h1> <hr color="yellow" width="99%"/> <p><font color="red"> "中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。</p> <p> 目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p> <p> 黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p> <p> 中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p> <hr color="yellow" width="99%"/> <p align="center"><font size="2" color="#808080">江苏传智播客教育科技股份有限公司</font></p> <p align="center"><font size="2" color="#808080"> 版权所有Copyright© 2006-2018, All Rights Reserved 苏ICP备16007882</font></p> </body> </html>
3.图片标签：展示图片
*img：展示图片
*src：
*相对路径：以 . 开头的路径
* . / 代表当前目录 ./image/banner_1.jpg （如果不写 默认就是. /）
* . . / 代表上一级目录
4.列表标签：
*有序列表：
*ol： order list 有序列表
*li：子项
*无序列表：
*ul： unorder list 无序列表
*li：子项
属性：type 定义样式 start 定义起始顺序
<ol type="A" start="5"> <li>睁眼</li> <li>穿衣服</li> <li>洗漱</li> </ol> <ul type="circle"> <li>睁眼</li> <li>穿衣服</li> <li>洗漱</li> </ul>
5.链接标签：
*a：定义一个超链接
*属性：
*href：指定访问资源的URL（统一资源定位符）
*mailto：邮件地址 可以用本地邮件客户端发送邮件
*target：指定打开资源的方式
*_self：默认值，在当前页面打开
*_blank：在空白页面打开，新的页面打开
6.div和span
*span：文本信息在一行展示，行内标签 内联标签
*div：每一个div占满一整行 块级标签
7.语义化标签：html5中为了提高程序的可读性
*头部：header 尾部：footer
8.表格标签：
*table：定义表格
*width：宽度
*border：边框
*cellpadding：定义内容和单元格的距离
*cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
*bgcolor：背景颜色
*tr：定义行
*td：定义单元格
*colspan：合并列
*rowspan：合并行
*th：定义表头单元格
*<caption>：表格标题 与css用
*<thead>：表示表格的头部分 与css用
*<tbody>：表示表格的体部分 与css用
*<tfoot>：表示表格的脚部分 与css用
##案例：旅游网首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旅游网</title> </head> <body> <!--最外层table--> <table width="100%" align="center"> <!--第一行--> <tr> <td> <img src="./image/top_banner.jpg" alt="" width="100%"> </td> </tr> <!--第二行--> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="./image/logo.jpg" alt=""> </td> <td> <img src="image/search.png" alt=""> </td> <td> <img src="image/hotel_tel.png" alt=""> </td> </tr> </table> </td> </tr> <!--第三行--> <tr> <td> <table align="center" width="100%" cellspacing="0"> <tr bgcolor="#ffd700" align="center" height="45"> <td>门票</td> <td>门票</td> <td>门票</td> <td>门票</td> <td>门票</td> <td>门票</td> <td>门票</td> </tr> </table> </td> </tr> <!--第四行--> <tr> <td> <img src="image/banner_3.jpg" alt="" width="100%"> </td> </tr> <!--第五行--> <tr> <td> <img src="image/icon_5.jpg" alt="" > 黑马精选 <hr color="gold"/> </td> </tr> <!--第六行--> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥899</font> </td> </tr> </table> </td> </tr> <!--第七行--> <tr> <td> <img src="image/icon_6.jpg" alt="" > 国内游 <hr color="gold"/> </td> </tr> <!--第八行--> <tr> <td> <table> <tr> <td rowspan="2"><img src="image/guonei_1.jpg" alt=""></td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p align="center">上海飞三亚5天4晚自由行</p> <font color="red">¥699</font> </td> </tr> </table> </td> </tr> </table> </body> </html>
