030 JavaWeb Html CSS

- JavaWeb概述
- - 1.访问web的原理
  - 2.C/S软件和B/S软件区别
  - 3.静态网站和动态网站
- HTML
- - HTML的概述
  - Table表格
  - - 详细用法见W3CSchool.chm
    - 合并单元格
    - 课程表
  - img标签
  - table和img标签组合使用
  - a标签
  - 表单
  - - 表单
    - Get提交和post提交
  - div和span
- CSS
- - 1.CSS概述
  - 2.CSS语法
  - 3.CSS三种写法
  - - 行内样式
    - 内部样式
    - 外部引入
  - 4.CSS选择器
  - - 选择器语法
    - 通用选择器
    - 标签选择器/元素选择器
    - 类选择器
    - ID选择器

JavaWeb概述

1.访问web的原理

在这里插入图片描述

2.C/S软件和B/S软件区别

CS 客户端/服务器

代表 qq 飞秋 lol 酷狗

特点：
1.都需要下载客户端
2.如果网站更新.那么我们客户端也要更新甚至重写下载 (缺点)
3.界面好看用户体验好( 优点)
4.业务逻辑和页面展示都是前台(客户端)处理，服务器只是一个数据库，只处理数据

BS 浏览器/服务器

代表 4399 贪玩蓝月淘宝百度

特点
1.不需要下载客户端，只要一个浏览器就可以使用系统
2.服务器发生更新，浏览器不需要更新.
3.用户体验没有C/s程序好

胖(富)客户端
它结合了 B/S和C/s的优点

JAVASE 用来做电脑上的软件（gui）
JAVAEE 用来做网站（PHP java对并发支持较好）
JAVAME 用来做手机上的软件

3.静态网站和动态网站

静态网站：一个网站在任何时间、任何地点、任何人、看见的样子都一样我们叫做静态网站(html)

动态网站：不同的人、不同的时间、不同的地点、看见的网站里面的内容可能不一样(jsp)

HTML

HTML的概述

HTML(Hypertext Markup Language)超文本标记语言，是一种编写网页的技术
超比一般强
文本
标记不同的标签有不同的效果
语言弱语言，写错了不会报错，没写全会自动帮你补全（F12）

Table表格

详细用法见W3CSchool.chm

<html>
    <head>
    	<meta charset="UTF-8">
    	<title>这里是标签标题</title>
    </head>
    <body>
        <table border="1">						<!--表格由 <table> 标签来定义,-->
            <tr>
                <th>Heading</th>				<!--表格的表头使用 <th> 标签进行定义。-->
                <th>Another Heading</th>
            </tr>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
            </tr>
        </table>
    </body>
</html>

表格由 < table > 标签来定义。每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格。即border=“1”。

表格的表头使用 < th > 标签进行定义。

在浏览器显示如下：
在这里插入图片描述

合并单元格

<!-- 
 table:表格标签    border:显示表格的边框
 row 行   column 列
    tr 行             
    th 表头  
    td 单元格      
table的作用  1,用来展示数据 （常用） 2,用来布局（不常用）   
	<br>:换行
   colspan   合并 列
   rowspan   合并 行
 -->
   <table border="1" width="200px"  height="100px" >
      <tr>
       <th colspan="2">1</th>	<!-- 合并 列 -->
      </tr>
      <tr>
       <td>2</td>
       <td>3</td>
      </tr>
   </table> <br>		<!-- 换行 -->
   
   <table border="1" width="200px"  height="100px" >
      <tr>
       <th rowspan="2">1</th>	<!-- 合并 行 -->
       <th>2</th>
      </tr>
      <tr>
       <td>3</td>
      </tr>
   </table>

在浏览器显示如下：
在这里插入图片描述

课程表

在这里插入图片描述

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <table border="1" width="200px" cellspacing="0">
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
   
   <tr>
      <td rowspan="4" >1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
   
   <tr>
    
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
     
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
    
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
     
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
   </table>
</body>
</html>

在这里插入图片描述

img标签

<html>
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<!--
	<img> 图像标签 
		alt 图片加载不出来时就会显示里面内容   src 图像的位置   title 鼠标移动上去会显示

    位置 :本地的位置,网络的位置
    本地位置路径
        / 根路径
        ./ 当前路径 或者不写
        ../ 当前路径的上一级目录
        ../ ../ 当前路径的上一级目录的上一级目录
    网络路径
        F12 就是查看网页源代码
        http 一定要有http协议 用这个http来确定他是网络资源         				-->
       
 <img src="../imgs/5.jpg" />
 <img alt="图片" src="https://www.baidu.com/img/PCgkdoodle_293edff43c2957071d2f6bfa606993ac.gif" title="程序员白又白">

<!--视频-->		<!--controls控制播放-->
 <video src="https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/70d6207f333212625737879553/v.f30.mp4?source=1&h265=v.f1022_h265.mp4&dockingId=98daca92-ec52-4593-802f-76d91f0db2171" controls="controls">
 </video>

</body>
</html>

table和img标签组合使用

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <!-- 
    我们怎么把标签嵌套使用
      图片可以放在那些位置
      可以放到表格里
      也可以放到a标签里
   -->
   
   <table border="1">
     <tr>
      <td>图片</td>
      <td>
        <img alt="" src="./imgs/5.jpg" height="100px">
      </td>
     </tr>
   </table>
   
</body>
</html>

a标签

<html>
<head>
<meta charset="UTF-8">
<title>a标签</title>
</head>
<body>
  <!-- 
      <a></a>  这是一个超链接标签 点击就可以跳转网站
      href 要跳转的地址
         -- 本地地址
         -- 网络地址
   -->
   
      <a href="./3img.html">我是a标签</a>
   
      <a href="http://www.baidu.com">百度</a>
      
      <a href="https://item.jd.com/61096780713.html">
       <img alt="这是图片" src="./imgs/5.jpg" height="150px">
      </a>
</body>
</html>

表单

<html>
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!-- 
	<form> 用来给后台传数据的标签
    action  把数据传递到什么位置，如java后台地址。
    method  提交数据的方式
       get / post  			
       get请求	text和password有name才能传值，其他没有value框的都要有name和value才能传值
    form里面可以传的数据
	    文本框        		text
	    密码框       		password
	    单选框       		radio
	    多选框/复选框       checkbox
	    下拉框				select 定义一个下拉框    option 定义里面的选项    
	    文件上传            file 
	    文本域    			textarea 定义一个文本域     rows 文档域的行    cols 文本域的列
	    
  		&nbsp; 空格 一个nbsp代表一个英文空格
 		&emsp; 中文空格..
  
   按钮
   reset  重置
   submit 提交数据到action 指定的位置
   button 普通的按钮没有任何效果
 -->
  <form action="" method="post">
  
	    用户名:<input type="text" name="UserName"><br>
	    密&emsp;码:<input type="password" name="password"><br>
	    性&emsp;别:男<input type="radio" name="sex" value="1">女<input type="radio"name="sex" value="0"><br>
      				<!-- 加一样的name后同类型只能单选其中一个不能都选上 -->
	    爱&emsp;好:<input type="checkbox" name="hobby" value="java">java
	           	   <input type="checkbox" name="hobby" value="php">php 
	          	   <input type="checkbox" name="hobby" value="c">C<br>
	   地&emsp;址 : <select name="address">
                      <option value="NO">请选择</option>
                      <option value="湖北">湖北</option>
                      <option value="四川">四川</option>
                      <option value="云南" >云南</option>
	          	   </select><br>
	   文&emsp;件:<input type="file"><br>
	   介&emsp;绍:<textarea rows="10" cols="50"></textarea>  <br>
      
          <input type="reset" value="清空">  
          <input type="button" value="按钮">
          <input type="submit" value="提交">
  </form> 
</body>
</html>

Get提交和post提交

Get提交
在这里插入图片描述
Post 提交

Get

1.数据不安全，是以明文的形式显示在浏览器的地址栏的
2.浏览器的地址栏长度有限制，所有我们传递的数据大小也有限制
3.好处传递的数据比post块

Post

1.数据安全
2.基本上没有大小的限制
3.比get传输数据慢

实际上我们开发95% 都是用的post提交

div和span

Div 块级元素 (行标签) 独占一行
Span 行内元素内容有多少就占多少

CSS

1.CSS概述

1.CSS是(Cascading Style Sheets)层叠样式表
2.网页设计者使用CSS可以定义元素的样式，直白的讲就是让网页更好看

2.CSS语法

单个样式写法：
<标签名 style=“样式属性：样式属性值;”>内容</标签名>

<div style="background-color:red">我是行标签</div>

多个样式写法：
<标签名 style=“样式属性1：属性值; 样式属性2：属性值;”>源代码教育</标签名>

<div style="background-color:red; font-size:25px; text-align:center">我是行标签</div>

3.CSS三种写法

行内样式

当前标签有效，尽量不使用

<标签名 style="样式属性：样式属性值;" >内容</标签名>

内部样式

即包含的四类选择器写法

<html>
<head>
<meta charset="UTF-8">
<title> title</title>
	<style type="text/css">
		*{
			background-color:red; font-size:25px; text-align:center
		}
	</style>
</head>
<body>
	<div>我是行标签1</div>
	<div>我是行标签2</div>
	<span>我是行内标签1</span>
	<span>我是行内标签2</span>
</body>
</html>

外部引入

在外部单独新建一个以.css为后缀的文件

@CHARSET "UTF-8";
.haha{
  background-color:pink;
  font-size: 25px;
  text-align: center
 }

然后使用<link>标签将这个CSS文件与需要样式的网页关联起来

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
   <link rel="stylesheet"  href="./styles.css"> 
</head>
<body>
	<div class="haha">我是div1</div>
	<div >我是div2</div>
	<span>我是sapn1</span>
	<span >我是sapn2</span>
</body>
</html>

4.CSS选择器

选择器语法

选择器名{
	样式属性1：样式属性值;
	样式属性2：样式属性值;
	……
}

通用选择器

匹配所有一般我们不用全局字体可能会用

*{
	样式
}

<html>
<head>
<meta charset="UTF-8">
<title> title</title>
	<style type="text/css">
		*{
			background-color:red; font-size:25px; text-align:center
		}
	</style>
</head>
<body>
	<div>我是行标签1</div>
	<div>我是行标签2</div>
	<span>我是行内标签1</span>
	<span>我是行内标签2</span>
</body>
</html>

标签选择器/元素选择器

页面内所有同类型标签均生效

标签名{
	样式
}

<html>
<head>
<meta charset="UTF-8">
<title> title</title>
	<style type="text/css">
		div{
			background-color:red; font-size:25px; text-align:center
		}
	</style>
</head>
<body>
	<div>我是行标签1</div>
	<div>我是行标签2</div>
	<span>我是行内标签1</span>
	<span>我是行内标签2</span>
</body>
</html>

类选择器

极力推荐使用的可控性好

.class属性值{
	样式
}

<html>
<head>
<meta charset="UTF-8">
<title> title</title>
	<style type="text/css">
		.aaa{
			background-color:red; font-size:25px; text-align:center
		}
	</style>
</head>
<body>
	<div class="aaa">我是行标签1</div>
	<div>我是行标签2</div>
	<span>我是行内标签1</span>
	<span>我是行内标签2</span>
</body>
</html>

ID选择器

坚决不用，页面内id不能重复，id一般结合js用

#id值{
	样式
}

<html>
<head>
<meta charset="UTF-8">
<title> title</title>
	<style type="text/css">
		#a3{
			background-color:yellow; font-size:25px; text-align:center
		}
	</style>
</head>
<body>
	<div id="a3">我是行标签1</div>
	<div>我是行标签2</div>
	<span>我是行内标签1</span>
	<span>我是行内标签2</span>
</body>
</html>