1、基础概念

①、访问一个软件的路径：协议：// IP地址：端口号/资源路径

例: mysql.jdbc://127.0.0.1:3306/mydb

②、软件的两种架构

B/S：Browser/Server（浏览器/服务器）–>直接在浏览器中可以运行，例如淘宝、京东等…

C/S：Client/Server（客户端/服务器）–>需要专门的应用打开，例如QQ、飞秋等…

③、区别：

B/S不需要专门的软件，客户端不必维护，安全性和稳定性比CS较弱

C/S更加安全，速度更快，但是需要客户端，且需要升级

④、网页三剑客

html : 完成网页的结构 - 清水房

css : 完成网页的样式 - 墙刷成红色 …

javascript : 控制网页的行为- 动态修改结构和样式

⑤、静态网页：和后台/数据库没有联系

动态网页：需要跟后台/数据库有联系，数据根据情况会发生改变

2、HTML

HTML(Hypertext Markup Language)超文本标记语言，是一种编写网页的技术；

文档结构：

html ：确定这是一个html文档
head ：头部，里面的标签都是功能解释，不在网页正文中显示出来
body ：主体，结构展示在页面的标签都写在这里面

<!-- 这是声明：主要是版本号 -->
<!DOCTYPE html>
<html><!-- 这是开始，相当于跟标签 -->
<head><!-- 这是头部标签 -->
<meta charset="UTF-8"><!-- 这是编码集 -->
<!-- 这是标题 -->
<title>这里是标题</title>
</head>
<body>
<h1>社会主义国家</h1><!-- 后面是换行标签 --><br/>
<h2>中华人民共和国</h2>
<!-- 分割线 -->
<hr/>
<h3>中国共产党</h3>
共产&nbsp;主义好！
<!-- 这是身体标签 -->
</body>
</html>

基本标签：

h1 - h6 ：标题标签

br ：换行标签<br/>

hr ：分隔线<hr/>

p : 一个段落

  : 空格

图片标签：

<!-- 
	img:用于展示图片：src：代表图片的路径，alt:如果没有图片,就看到它的值，width:设置宽度，height:设置高度
 -->
<img alt="没图片了吧" src="图片路径" width="600px">

绝对路径：以协议（http://、https://、file://）或者以“/”作为前缀

相对路径 : 以文件本身为参照路径进行定位

…/ 代表上一层路径
…/…/ 代表上一层的上一层路径

超链接标签

<body>
	<!-- 这是超文本连接，target是设置是否从新新开一个窗口 -->
	<a
href="file:///D:/Java0827/workspace/EclipseWorkspace/day_31HTML&CSS/WebContent/%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE.html"
		target="_black">转到</a>
	<a href="https://www.baidu.com/" target="_self">跳转</a>
	<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" target="_self">图片</a>
</body>

表格标签table

语法：

table: 表格(根)

tr: 行(必需在table里面)

td: 列，格子(必需在tr里面)

先写table–>tr—>td

<table border="5" width = "300px">
		<thead><!-- thead ：表头(不必需)   一般会用th -->
			<tr>
				<!-- 在开头的列还可以使用th，只能在开头使用，使用后会加粗剧中 -->
				<th>id</th>
				<th>name</th>
				<th>number</th>
			</tr>
		</thead>
		<tbody><!-- tbody : 表的身体 -->
			<tr>
				<td>1</td>
				<td>詹姆斯</td>
				<td>23</td>
			</tr>
			<tr>
				<td>2</td>
				<td>艾佛森</td>
				<td>0</td>
			</tr>
		</tbody>
		<tfoot><!-- tfoot : 表脚(不必需) -->
			<tr>
				<td>3</td>
				<td>欧文</td>
				<td>1</td>
			</tr>	
		</tfoot>
	</table>

跨行：rowspan

跨列：colspan

<table border="20" width = "300px" height = "200px">
		<tr>
			<!-- colspan:跨列  -->
			<td colspan="2">第1格</td>
		</tr>
		<tr>
			<td rowspan="2">第3格</td>
			<td>第4格</td>
		</tr>
		<tr>
			<!-- rowspan:跨行 -->
			<td>第6格</td>
		</tr>
</table>

表单标签form

form是表单标签，我们所有的表单元素都放到这个标签中

action:访问后台的路径
method:访问的方法(GET/POST)
- get:有大小的限制，并且不安全
- post:没有大小限制，并且安全一些【建议都使用post】

<!-- 语法 -->
<form action="/login" method="post">
	...	
</form>

注意：

1、只要是要传输的数据内容都必须放在form标签中；

2、name:(代表这个元素的名称)，元素必需有name属性才会向后台提交值；

3、value:当前元素的值，不写默认就是填写的内容（一般在传输过程中为了节省空间，不会将填写的内容直接传输至后台），在submit,button,reset等按钮中它代表的是按键中的文字；

4、在实际开发中不要英文、拼英混用，尽量使用英文。

input实现功能非常多的标签

<!-- type属性：决定input标签的展现效果
				text：文本框（默认值，可以不写）
				password：密码框
				radio：单选框
				checkbox：多选框/复选框
				file：文件上传
				hidden：隐藏域
				submit：提交按钮
				button：普通按钮
				reset：重置按钮
				image：图片按钮
				select:选择(下拉) option:每一个选择
				文字比较多，使用文本域 (两个标签要挨着)
					rows:行数
					cols:列数
-->
		 <input type="属性" name="名字" value="元素值">

综合运用：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<!-- 
	form
	表单元素中除按钮之外，都应当具备name属性，有了name属性值，表单的数据才能提交到服务器 
-->
</head>
<body>
		 <input type="hidden" name="id" value="22">
		 姓名<input type="text" name="name" value="王xx"><!-- 这里value可以设置默认值 -->
		 <br/>
		 密码<input type="password" name="password" >
		 <br/>
		 性别<input type="radio" name="sex" value="1">男<!-- 这里的value是用来传输值的 -->
		 <input type="radio" name="sex" value="0" checked>女<!-- 这里的checked是设置默认是 -->
		 爱好<input type="checkbox" name="hobby" value="1">打球
		 <input type="checkbox" name="hobby" value="2">摄影
		 <input type="checkbox" name="hobby" value="3">看书
		  <br/>
		 民族<select name="national">
		 		<option value="1">----请选择民族----</option>
		 		<option value="2" selected>汉族</option><!-- selected是默认选择-->
		 		<option value="3">回族</option>
		 		<option value="4">维吾尔族</option>
		 		<option value="5">哈萨克族</option>
		 	</select><br/>
		 头像照片<input type="file" name="file"  value="1">
		 <br/>
		 自我介绍<textarea name="intro" rows="20" cols="20"></textarea>
		 <hr/>
		 <input type="submit" value="没填完不要点这里"> <!-- 按钮的value可以设置名字 --><br/>
		 <input type="reset" value="可以重置"><br/>
	</form>
</body>
</html>

效果：

在这里插入图片描述

div和span标签

div：块级元素，独占一行： div,h1-h6,p,hr,…

span：行内元素，不会独占一行：span,a,img,…

3、CSS

CSS是(Cascading Style Sheets)层叠样式表

CSS三种写法：

第一种：行内样式:style:样式的意思(所有能显示的标签都有这个属性)
样式的写: key:value;
第二种：样式标签
第三种：外连接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三种写法</title>
<!-- 
	三种写法：
	第一种：行内样式:style:样式的意思(所有能显示的标签都有这个属性)
		样式的写: key:value;
	第二种：样式标签
	第三种：外连接
 -->
 <!-- 第三种：外连接，在外部定义一个.css结尾的文件夹 -->
 <link rel="stylesheet" type="text/css" href="csstest/Test.css" />
 <!-- 第二种：样式标签 -->
<style type="text/css">
	 h2{
     
     
	 	color:green;font-size: 10px
	 }
</style>
 
</head>
<body>
	<!-- 第一种：行内样式 -->
	<div style="color:red;font-size: 50px">每天都是好心情</div>
	
	<h2>我是中国人</h2>
	<h2>实现中国梦</h2>
	<h2>好好学习，天天向上</h2>
	
	<div>你好吗</div>
	<div>Just so so！</div>
	
</body>
</html>

CSS四种选择器

通用选择器 *
标签选择器
类选择器 .
id选择器 #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!-- 
	选择器一共有四种 
	第一种：通用选择器
-->
<style type="text/css">
*{
     
     
	color:blue;
} 
/* 第二种：标签选择器 */
h3{
     
     
	color:#E2622F;
}
/* 第三种：class选择器 */
.tx{
     
     
	color:#2FC1E0;/* 可以是十六进制的数字表示颜色 */
}
/* 第四种：id选择器，只能作用于一个，id不能重名 */
#sishi{
     
     
	color:red;
}

</style>
</head>
<body>
	<div class="tx">凯尔特人</div>
	<div id="sishi">森林狼</div>
	<div id="si">密尔沃基雄鹿</div>
	
	<h3>拉里伯德</h3>
	<h3 class="tx">巴克利</h3>
	
	<h5>阿的江</h5>
</body>
</html>