web概念的概述和HTML
web概念的概述
*JavaWeb:
*使用Java语言开发基于互联网项目
*软件架构：
*1、C/S架构：Client/Server
顾名思义，本地有一个客户端程序，在远程有一个服务端程序
优点：用户体验好
缺点：开发、安装、部署、维护麻烦
*2、B/S：Browser/Server 浏览器/服务器
优点：开发 安装 部署 维护 简单
缺点：应用过大的话，用户体验可能不行
对硬件要求过高
在服务器端：一类是静态资源。一类是动态资源
1、使用静态网页开发技术来完成发布的资源，特点是所有用户访问看到的效果是一样的。如：文本、图片、视频、HTML，CSS，JavaScript。如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器会展示这些静态资源
2、使用动态动态网页技术发布的资源。特点是所有用户访问，得到的结果不一样，如：php,jsp/servlet
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。浏览器是只能接收静态资源的。
*我们要学习动态，必须先学习静态资源。
1、HTML：用于搭建基础网页，展示页面的内容。
2、CSS：用于美化页面，布局页面。
3、JavaScript：控制页面的元素，比如产生动态的效果，动态效果不是动态资源。
HTML最基础的网页开发语言
概念：Hyper Text Markup Language 超文本标记语言
超文本：
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：由标签构成的语言。<标签名称> 如html,xml
标记语言不是编程语言
快速入门：
语法：
1、html文档后缀名html或htm
2、标签分为
1、围堵标签：有开始标签和结束标签。如<html></html>
2、自闭和标签：开始标签和结束标签在一起。如<br/>换行标签
3、标签是可以嵌套的：
需要正确嵌套，不能我中有你，你中有我
例如错误示范：<a><b></a></b></a>
正确：<a><b></b></a>
4、在开始标签中可以定义属性。属性是由键值对构成，值需要用引号引单双都行起来。
5、html的标签不区分大小写，建议使用小写
*我们需要学的就是每个标签的含义，各个标签能够干什么*
- 标签学习
1、文件标签：最基本的标签
*html:html文档的根标签
*head：头标签。用于指定html文档的一些属性。引入外部的资源。
*title：标题标签
*body:体标签
* html的声明
2、文本标签：和文本有关的
3、图片标签
4、列表标签
5、链接标签
6、表格标签 - 文本标签如下：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<>
<!--注释-->
<!--br换行-->
白日依山尽<br>
黄河入海流<br>
<!--<!–标签标签 h1~h6–> <h1> to <h6> 标签被用来定义 HTML 标题。-->
<!--<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。-->
黑马旅游网<br>
<h1>黑马旅游网</h1>
<h2>黑马旅游网</h2>
<h3>黑马旅游网</h3>
<!--段落标签 p-->
<!--<p> 标签定义段落-->
<!--<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。-->
<p>
1今天吃了没呢今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没
</p>
<p>
2今天玩了没
</p>
<p>
3今天睡了没
</p>
<p>
4今天干事了咩
</p>
<!--<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。自闭和标签-->
<!--<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。-->
<!--自闭和标签：开始标签和结束标签在一起。如<br/>换行标签-->
<hr color="red"width="200"size="10"align="left"/>
</body>
</html>- 案例1_公司简介类型的
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>案例1_公司简介</title>
</head>
<>
<!--注释-->
<!--br换行-->
<!--白日依山尽<br>-->
<!--黄河入海流<br>-->
<!--<!–标签标签 h1~h6–> <h1> to <h6> 标签被用来定义 HTML 标题。-->
<!--<h1> 定义重要等级最高的标题。<h6> 定义重要等级最低的标题。-->
<h1>公司简介</h1>
<hr color="red"size="5"/>
<!--段落标签 p-->
<!--<p> 标签定义段落-->
<!--<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。-->
<p>
<font color="red">1今天吃了没呢</font>>今天玩了没<b><i>今天玩了没</i>></b>>今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没今天玩了没
</p>
<p>
2今天玩了没
</p>
<p>
3今天睡了没
</p>
<p>
4今天干事了咩
</p>
<!--<hr> 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。自闭和标签-->
<!--<hr> 元素被用来分隔 HTML 页面中的内容（或者定义一个变化）。-->
<!--自闭和标签：开始标签和结束标签在一起。如<br/>换行标签-->
<hr color="red"size="5"/>
<!-- 特殊字符一个空格-->
<font color="gray" size="2"><center>江苏 传智播客教育科技股份有限公司，版权所有</center></font>
</body>
</html>- 图片标签
*展示图片的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--<!–展示一张图片–> img自闭和标签-->
<img src="img/黄霄雲.jpg"/>
<!--相对路径-->
<!--*以.开头的路径
*../:后退上一级目录 就意思是在展示图片的时候这个目录级数要一致才行。
-->
<img src="./img/黄霄雲.jpg/">
</body>
</html>-
列表标签
1、有序列表 2、无序列表 -
有序的：
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- 无序的：
- Coffee
- Tea
- Milk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--超链接 需要给超链接指定属性-->
<a href="http://www.baidu.com">点我</a>
<br>
<!--超链接 超链接指定属性 打开新的页面-->
<a href="http://www.baidu.com" target="_blank">点我</a>
<!--超链接 超链接指定属性 图片超链接-->
<a href="http://www.baidu.com"><img src="img/黄霄雲.jpg"></a>
</body>
</html>- 块标签span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--span 和 div 结合CSS一起使用，CSS可以控制包裹元素的样式 此时默认是没有效果的
文本信息在一行展示的，行内标签，内联标签
div:每一个div沾满一整行。块级标签
span:文本信息在一行展示，行内标签，内联标签
-->
<span>黑马程序员</span>
<hr>
<!--这个div任何的样式-->
<div>黑马程序员</div>
</body>
</html>-
项目
-
项目
-
项目1
-
项目2
-
项目3
-
计划任务
-
完成任务
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
