网络编程、各种标签、CSS学习

系列文章目录

第一章基础知识、数据类型学习
第二章万年历项目
第三章代码逻辑训练习题
第四章方法、数组学习
第五章图书管理系统项目
第六章面向对象编程：封装、继承、多态学习
第七章封装继承多态习题
第八章常用类、包装类、异常处理机制学习
第九章集合学习
第十章 IO流、多线程学习
第十一章仓库管理系统项目
第十二章员工管理系统、多表查询、反射实现DBHelper学习
第十三章 DML、DDL、数据库对象学习
第十四章网络编程、各种标签、CSS学习
第十五章 ECMAScript、BOM学习
第十六章 DOM、jQuery学习
第十七章 Servlet、jsp、Cookie、Ajax学习

文章目录

系列文章目录
前言
一、Java前端
- 1. 网络编程的三大基石
- - 1.1 url网址
  - 1.2 http超文本传输协议
  - 1.3 html超文本标记语言
- 2. 介绍页面
- - 2.1 欢迎页/首页：index.html
  - 2.2 图片标签
  - 2.3 超链接标签
  - 2.4 表单标签
  - 2.5 文本框标签
  - - 2.5.1 文本框
    - 2.5.2 密码框
    - 2.5.3 单选按钮
    - 2.5.4 复选框
    - 2.5.5 下拉列表
    - 2.5.6 文件域
    - 2.5.7 隐藏域：
    - 2.5.8 提交按钮
    - 2.5.9 普通按钮
    - 2.5.9又3/4 普通按钮实现提交按钮功能
    - 2.5.10 图片按钮（点击图片有提交按钮功能）
    - 2.5.11 时间控件
    - 2.5.12 邮箱控件
    - 2.5.13 成果展示
  - 2.6 表格控件
  - - 2.6.1 普通建表
    - 2.6.2 emmet建表
    - 2.6.3 表格合并的个数
二、CSS层叠样式表
- 1. CSS的作用
- 2. 使用CSS
- - 2.1 行内赋值
  - 2.2 内部样式赋值
  - 2.2.1 基本选择器
  - 2.2.1 关系选择器
  - 2.3 外部样式赋值
  - - 2.3.1 方式1
    - 2.3.2 方式2
  - 2.4 不同样式排行
总结

前言

本文开始我们要进行前端的学习，之前的数据库学习是为了存储数据，学习了SQL语句；今天要学习的前端是为了对网页进行设计，要学习HTML语言 a.k.a. 超文本标记语言 a.k.a. HyperTextMarkupLanguage。这个活体木料是什么呢？咱们边学边看吧。在下攸攸太上，话说没跟你们介绍我们星球的景色，我们星球气体是比液体重的，所以你们的大海是我们那里的大气，你们的大气层时我们的大星海，当我们星球遇到危险时，星球会使用速冻喷雾冻住大星海形成厚厚的保护层，同时我们所有ൠ♄§星人和动物会躲到大气里。千万不要率领地球人去我们星球复仇，你们打不过的，呼呼哗哗哗哗哗！！！
顺便一提，我们ൠ♄§星对地球的人类甄别计划已经开始计划20%了。

一、Java前端

1. 网络编程的三大基石

url,http,html

1.1 url网址

统一资源定位符（项目外资源）
通过url 可以唯一锁定一台计算机。
uri：统一资源标识符（当前项目内）

1.2 http超文本传输协议

规定了客户端与服务器端通信的时候：信息的组成，格式，长度等
特性：
长链接： http1版本之后，使用长连接。
一旦客户端与服务器端建立连接，客户端可以一直使用这个资源，直到客户端主动断开链接。这种连接方式叫长连接。短链接是每个请求都要重新排队。
单向性： 只有客户端先发送了请求，服务器端才可以给出响应。
无状态： http协议规定，网络之间只进行数据传输，不进行数据的记录。
（cookie，session可以实现数据记录）

1.3 html超文本标记语言

也叫超文本标签语言
通过各种不同的标签，将服务器端返回的消息，解析后展示给用户。
本文重点介绍： 图片标签；超链接标签；表格标签；表单标签。

2. 介绍页面

2.1 欢迎页/首页：index.html

<!DOCTYPE html>//文档类型声明。过渡类型、严格类型、框架类型
<html>
	<head>//头部标签就是这个页面的名字，一般显示在边栏上
		<meta charset="utf-8" />
		<title></title>//标题标签，有外部赋值的css也会在此处写style
	</head>
	<body>//页面内容
		
	</body>//结束的部分在前面加'/'
</html>

2.2 图片标签

图片标签：单标签，行级标签

属性和方法：
src = "图片的地址"uri的地址
height, width 设置高和宽
alt=“当图片没加载出来时，该属性值在图片的位置进行显示”
title=“鼠标悬浮在图片上方时，显示的文字”

代码演示：

<img src = "img/sbsd.jpg" height="300" width="500" alt ="这是PP酱" title="这是PP酱"/>

2.3 超链接标签

超链接标签：成对标签1，行级标签

属性和方法：
herf = “要跳转的页面地址？变量名=值&变量名=值”（？后的用来搜索，get提交方式）
title = “鼠标悬浮在超链接上方显示的文字”

代码演示：

<a href="https://www.baidu.com/s?wd=蝙蝠侠">点击跳转baidu</a>

2.4 表单标签

表单标签，包裹着表单元素

属性和方法：
action = “表单数据提交的位置”
method = “表单数据提交的方式”
get：限制提交数据的类型（文本类型）提交的参数以？拼接在提交地址后的形式，最后显示在地址栏里。
不安全
地址栏里提交的长度信息有限
post：支持多类型提交
提交参数，打成数据包，以数据包的形式提交到服务器端。
相对安全
提交的长度几乎没有限制
target = “响应信息显示的位置”

代码演示：

<form name="form" action="https://www.ppp.com/s" method="get" target="_self">
</form>

幂等：只要提交的url是同一个，那么看到的都一样
为什么搜索都用get： get可以做数据缓存，post没有

2.5 文本框标签

文本框不仅仅包括文本框，还可以放图片，放按钮等

2.5.1 文本框

属性和方法：
name = “用来保存用户输入的信息”（存值，分组）
maxlength=“限制用户输入的最大长度”
placeholder = “提示信息”
readonly = "readonly"表示只读，可以简写成readonly，不能获得光标（可以传走默认值）
value = “为文本框赋值”
disabled="disabled"禁用，可以简写成disabled，提交表单时，数据不进行传递（默认值不会被传走）
type = "text"设置input标签为文本框
代码演示：

<input name="wd" type="text" maxlength="4" placeholder="enter text"/>

2.5.2 密码框

属性和方法：
type = "password"设置input标签为password
代码演示：

<input name="passs" type="password" />

2.5.3 单选按钮

属性和方法：
name="school"同名的按钮说明是同一题的按钮，同一题的按钮只能选一个
disabled = "disabled"不可选
checked = "checked"默认值
代码演示：

<input name="school" type="radio" value="smallschool" />smallschool
<input name="school" type="radio" value="MIDdleschool" />middleschool
<input name="school" type="radio" value="bigschool" />bigschool

2.5.4 复选框

属性跟单选框重要属性一样
代码演示：

<input name="city" type="checkbox" value="beijing" />bejing
<input name="city" type="checkbox" value="newyork" />newyoek
<input name="city" type="checkbox" value="dalian" />dalian
<input name="city" type="checkbox" value="shenyang" />sgenyang1

2.5.5 下拉列表

属性和方法：
select内为同一题的选项
option为选项
selected="selected"为默认值，可以简写成selected
代码演示：

<select name="month">
	<option value="1month">1month</option>
	<option value="2month">2month</option>
	<option value="3month">3month</option>
	<option value="4month">4month</option>
	<option value="5month">5month</option>
	<option value="6month">6month</option>
	<option value="7month">7month</option>
	<option value="8month">8month</option>
	<option value="9month" selected="selected">9month</option>
	<option value="10month">10month</option>
	<option value="11month">11month</option>
	<option value="12month">12month</option>
</select>

2.5.6 文件域

代码演示：

<input name="file" type="file" />

2.5.7 隐藏域：

代码演示：

<input type="hidden" name="hname" />

2.5.8 提交按钮

可以把数据打包提交，必须在form内 **代码演示：** ```html ```

2.5.9 普通按钮

		<input type="button" value="点我一下" 
		onclick="JavaScript:alert('再点杀了你')"/>

代码演示：

html<input type="button" name="hitme" onclick="JavaScript:alert('fuckyou')" />

2.5.9又3/4 普通按钮实现提交按钮功能

代码演示：

<input type = "submit" value="提交员工信息" />
<br />
<input type="button" value="点我一下" 
onclick="JavaScript:alert('再点杀了你')"/>
<br />
<input type="button" value="我是提交按钮" 
	onclick="demo1()" />
<script type="text/javascript">
	function demo1(){
		document.myform.submit();
	}
</script>

2.5.10 图片按钮（点击图片有提交按钮功能）

注意与src图片标签的区别

代码演示：

图片标签
<img src = "img/sbsd.jpg" alt ="这是PP酱" title="这是PP酱"/>	
图片按钮
<input type="image" src="img/PP.jpg" />

2.5.11 时间控件

代码演示：

<input type="date" name="date" />
<input type="week" name ="week" />
<input type="datetime-local" name="time" />

2.5.12 邮箱控件

代码演示：

<input type="email" name="email" />

2.5.13 成果展示

在这里插入图片描述

2.6 表格控件

表格是由行组成的：
行是由单元格组成的

2.6.1 普通建表

直接写出下面语句

<table border="1px">
	<tr>
		<td>00</td>
		<td>00</td>
	</tr>
	<tr>
		<td>00</td>
		<td>00</td>
	</tr>
</table>

2.6.2 emmet建表

执行以下语句后
table[border = “1px”]>tr*2>td{250}*3
会形成一下表格

<table border="">
	<tr>
		<td>250</td>
		<td>250</td>
		<td>250</td>
	</tr>
	<tr>
		<td>250</td>
		<td>250</td>
		<td>250</td>
	</tr>
</table>

2.6.3 表格合并的个数

1、确定每行单元格的个数
2、确定每个单元格的特性（跨行、跨列、跨行又跨列、不跨行不跨列）

<table border="1px">
	<tr>
		<td>00</td>
		<td rowspan="2">00</td>
		<td>00</td>
	</tr>
	<tr>	
		<td colspan="3">00</td>
	</tr>
</table>

二、CSS层叠样式表

1. CSS的作用

1、美化页面，让他变得好好看
2、页面布局，让他变得好好看（原用table，现用div + css）

css作用：样式与表现分离

2. 使用CSS

CSS样式需要搭配外观属性，来对页面做美化
属性：自身属性和外观属性
自身属性属性名 = “值”（html赋值方式）
外观属性行内赋值、行外复制（css样式赋值方式）

2.1 行内赋值

style = "属性: 属性值; 属性: 属性值; "
缺点：
外观属性直接写在标签里，样式与标签没有分离，代码不能重用，修改、扩展效率低

2.2 内部样式赋值

使用选择器将提取出来的外观样式，作用到对应的标签上

基本选择器：id，类，标签，交集，并集，全集
关系选择器：后代，子代，同辈（后代是爷爷及以上，子代是父亲）
属性选择器：就是直接给一类对象全部赋值，简单暴力，直接上代码

[class^='cd']{/*以cd开头*/
	background-color: deeppink;
}
[class$='1']{/*以1结尾*/
	background-color: peru;
}
div[class="cd1"][id]{
	color: darkred;
}

2.2.1 基本选择器

标签选择器：标签 {}
类选择器：*.类名
id选择器：#id{}
多个选择器同时符合时，id>类>标签

2.2.1 关系选择器

全局选择器：*{}
并集选择器：div,div1{}(标签紧挨id，标签紧挨类)
交集选择器：div#div1{}(标签紧挨id，标签紧挨类)
子代选择器：table>tbody{}
后代选择器：table tr{}
同辈选择器：tr~其他同级{}
table和tr之间默认有一代tbody
在这里插入图片描述

2.3 外部样式赋值

创建一个外部样式文件：
1、将选择器+外观属性粘贴过去
2、在应用的页面里，导入外部样式文件
link和style是并列关系，都在head标签里
外部样式是把一个文件内的内部样式提取出来放到一个css文件里，通过link或者import链接到本文件下。

2.3.1 方式1

<link rel="stylesheet"href="css/csd.css"/>

2.3.2 方式2

<style type="text/css">
		@import url("css/csd.css");
</style>

2.4 不同样式排行

作用范围：外部>内部>行内
修改、扩展效率：外部>内部>行内
分离程度：外部>内部>行内
优先级：行内>内部>外部

推荐使用外部样式，因为这种方式做到了元素页面和样式分离，可维护性高
推荐使用外部样式，因为这种方式做到了元素页面和样式分离，可维护性高
推荐使用外部样式，因为这种方式做到了元素页面和样式分离，可维护性高

总结

本文介绍了前端html语言的学习，重点是报表部分，请将所有本文列出的重点种类的报表熟记于心，前端可能我们以后不会涉及到，但是知道的越多总没错，前端也要作为学习的一个阶段，不要认为’哇，写前端的都是美术生，我才不搞嘞’会限制自己的成长。
我写了好长时间，人类甄别计划已经到50%了！做好灭亡的准备吧，渺小的人类，哇哈哈哈哈哈哈哈哈哈！！！