html, css, javascript, jquery, vue 接收用户的输入,向用户返回可视化结果
servlet, jsp, jstl java后端技术 -> 再去调用jdbc,访问数据库
一、HTML
超文本标记语言 hyper text markup language
俗称网页
html的文件结构:
以 .html 或 .htm 结尾的文本文件
- 标签一般成对出现:<标签名> </标签名>
- 最外层的标签 其它标签必须在它之内
- doctype 用来说明html的版本
例如:版本是html5
<!DOCTYPE html>
版本是html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- 标签由 和 子标签组成
<html>
<head>
子标签
</head>
<body>
子标签
</body>
</html>
head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分
body标签里放的是要显示的内容部分
建议开发使用的浏览器: firefox(火狐), chrome(谷歌)
不建议 ie6 ie7 ie8
1. head 中的常见标签
文件名字后缀必须是 *.html 或者 *.htm
```html
<title>网页标题</title>
标签表示是网页的标题
<meta charset="字符编码">
告诉浏览器请用这个字符串编码显示网页内容
用来包含网页的脚本
<script></script>
用来包含外部样式表
<link>
2. body 中的标签
1) 标题标签
<h1> <h2> ... <h6>
2) 正文标签
段落标签
<p>
换行
<br>
分割线
<hr>
特殊文字需要转义显示
例如:
< <
>
©
3) 超链接标签
<a href="链接地址">链接文字</a>
图片标签
<img src="图片地址" width="宽度" height="高度">
宽度和高度的单位都是像素
让图片有链接的功能
<a href="链接地址"> <img src="图片地址"> </a>
页面内的链接(锚)
首先在目的地标签添加 id=“唯一编号”, 然后在超链接的 href="#唯一编号"
4) 列表标签
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
5) 表格标签(重点)
<table>
<thead></thead> <!-- 头 -->
<tbody> <!-- 体 -->
<!-- tr 代表行 -->
<tr>
<!-- td 代表列 -->
<td></td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot> <!-- 脚 -->
</table>
table>(thead>tr>td2)+(tbody>tr5>td*2)
表格合并单元格,可以使用td 的属性 colspan(合并列)rowspan(合并行)
6) 表单标签(重点)
接收用户的输入
<!-- 把填写的信息收集起来发送给服务器
有name属性的表单,会把信息发送给服务器
-->
<form action="http://www.baidu.com">
文本框 <input type="text" name="username">
<br>
密码框 <input type="password" name="password">
<br>
按钮 <input type="button" value="点我">
<br>
单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
<br>
多选框
唱歌 <input type="checkbox" name="hobby" checked value="1">
跳舞 <input type="checkbox" name="hobby" value="2">
游戏 <input type="checkbox" name="hobby" value="3">
睡觉 <input type="checkbox" name="hobby" value="4">
<br>
<input type="file">
<br>
<input type="date" value="2018-12-30">
<br>
<input type="submit" value="提交">
<input type="reset" vlaue="重置">
</form>
7. iframe
内嵌另一个页面
<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>
二、CSS
层叠(级联)式样式表
cascade style sheet
美化html 网页的
1、颜色相关的样式
前景色
color: 单词
rgb(红色, 绿色, 蓝色) 范围从 0~255
16进制值 格式 `#红绿蓝` 范围从 0~FF
rgba(红色, 绿色, 蓝色, 0.0~1.0)
特殊取值
白色 rgb(255,255,255)
黑色 rgb(0,0,0)
背景色
background-color:颜色
背景图
background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复
2、盒子模型
margin 外间距
margin-left
…
border 边框
border-left 边框宽度 边框线类型 边框颜色
…
padding 内间距
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
3、定位方式
div
position: absolute; /绝对定位/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标 取值越大,越靠上
width: 宽度
height: 高度
4、字体相关
font-size : 字体大小
font-family: 字体种类 (电脑上事先需要有这个字体)
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline 下划线
5、显示隐藏
display: none; 隐藏
display: block; 显示
6、样式表
1. 类选择器
.名字
之后使用标签的 class=“名字引用”
2. ID选择器
根据标签的id属性来进行匹配
#id值
之后使用标签的 id=“id值”
3. 元素选择器
根据标签的名字进行匹配
优先级: 如果不同的选择器匹配到了同一个元素,
- style属性定义的样式最高,id选择器优先级次之,类选择器次之,元素选择器最低,
- 同级选择器,后定义的优先
- 可以用 !important 改变优先级,可以把优先级提升到最高
4. 父子选择器
/* 找到一个p标签,并且它的父标签必须是div */
div>p {color:red;}
格式
父标签>子标签
5. 祖先后代选择器
格式
祖先标签 后代标签
6. 伪类选择器
按钮 鼠标移入改变样式,鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时