html, css, javascript, jquery, vue 接收用户的输入,向用户返回可视化结果
servlet, jsp, jstl java后端技术 -> 再去调用jdbc,访问数据库
html
1. 什么是html
hyper 超级 text 文本 markup 标记 language 语言
超文本标记语言,俗称网页
2. html 文件结构
以 *.html 或 *.htm 结尾的文本文件
- 标签一般成对出现:
<标签名> </标签名>
- 最外层的标签
<html></html>
其它标签必须在它之内 - 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>
和<body>
子标签组成
<html>
<head></head>
<body></body>
</html>
head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分
body标签里放的是要显示的内容部分
建议开发使用的浏览器: firefox(火狐), chrome(谷歌)
不建议 ie6 ie7 ie8
3. 常用标签
3.1 标题标签
<h1>...<h6>
标题从1到6,字号依次减小
3.2 段落标签(正文)
<p>
可以起到内容换行的作用, 普通文本是不会自动换行的
3.3
分隔符 <hr>
不需要结束标签, 加一道横线
换行符 <br>
不需要结束标签, 起到换行的作用
3.4 标签的属性: 格式 : 属性名=“属性值”
可以用来定义标签的宽、高、颜色等等
例如:
<p align="right">内容</p>
表示段落内容靠右对齐
<hr color="red">
表示分隔符颜色变为红色
3.5 特殊转义字符(实体)
<
表示 <,
>
表示 >
3.6 图片标签 img
src 属性代表图片路径
更多注释内容
alt 是图片访问不到时的提示文字
width 表示宽度(单位是像素)
height 表示高度(单位是像素)
注意:路径建议使用相对路径,不要使用绝对路径(e:\… c:\…)
3.7 超链接 a 【重点】
href 属性 表示跳转的目标
方式1:两个网页之间跳转:
<a href="目标网页的地址">超链接提示文字</a>
方式2:网页内跳转 (锚点)
<a href="#另一个标签的id值">超链接提示文字</a>
方式3:图片作为超链接
<a href=""> <img src="图片路径"> </a>
3.8 列表
有序列表 (order)
<ol>
<li>列表项</li>
</ol>
无序列表 (unorder)
<ul>
<li>列表项</li>
</ul>
3.9 表格【重点】
<table>
<thead></thead> 头
<tbody></tbody> 体
<tfoot></tfoot> 脚
</table>
其中 thead, tbody, tfoot 里又可以分为行与列
<tr>
表示行 ‘’ 表示列
比如要在tbody再分两行两列
<tbody>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</tbody>
例:
<table border="1" width="100%">
<!--标题-->
<thead>
<tr>
<td>编号</td><td>姓名</td>
</tr>
</thead>
<!--内容-->
<tbody>
<tr>
<td>1</td><td>张三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
</tbody>
</table>
<hr>
<table border="1" width="100%">
<tr>
<td>第一列</td><td>第二列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</table>
<hr>
Zen Coding快捷写法
生成表格的父子关系,4行3列
table>tbody>tr4>td3
同时生成thead和tbody 需要用() 把他们分组,平级的用+连在一起
table>(thead>tr>td3)+(tbody>tr4>td*3)
给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr2>td2
<!-- 合并列 -->
<table border="1" width="100%">
<tbody>
<tr>
<!--colspan=2 将两个td合并为一个-->
<td colspan="2">行1列1</td>
<td>ss</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
</tbody>
</table>
<!-- 合并行 -->
<table border="1" width="100%">
<tbody>
<tr>
<td rowspan="2">行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td>行2列2</td>
</tr>
</tbody>
</table>
与<td>
类似的<th>
,他们都是代表一列,但<th>
其中的文本默认是居中并加粗
3.10 表单【重点】
都是用来收集用户录入的信息
<input type="text">
文本框标签
<input type="password">
密码框
<input type="radio">
单选按钮
例子:
<!-- name取值相同的单选按钮视为同一组
checked 表示是否默认选中, 对于这种取值只有“是否”这两种情况的属性, 有两种写法:一种是只写属性名,另一种是名="值"
-->
<p>男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"></p>
<p>未婚<input type="radio" name="married"> 已婚<input type="radio" name="married" checked> 离婚<input type="radio" name="married"></p>
<input type="checkbox">
复选按钮
<!-- name取值相同的复选按钮视为同一组, 同样可以用checked表示是否默认选中-->
<p>
读书<input type="checkbox" name="hobby">
玩游戏<input type="checkbox" name="hobby">
听音乐<input type="checkbox" name="hobby">
敲代码<input type="checkbox" name="hobby" checked>
</p>
<input type="email">
输入邮件地址
<input type="date" value="日期初始值">
日期选择标签
<input type="time" value="时间初始值">
时间选择标签
<input type="file">
文件选择框
<input type="button" value="按钮文字">
按钮
<input type="reset" value="重置">
重置按钮 把页面所有填写的内容重置到初始状态
<input type="submit" value="提交">
提交按钮 把表单填好的信息发送给服务器
<button type="button|reset|submit">按钮文字</button>
下拉列表标签
<select>
<option>值1</option>
<option>值2</option>
....
<option>值n</option>
</select>
如果希望某个option默认被选中,在option上添加属性selected
写法1: selected
写法2: selected=“selected”
文本域标签 适合输入多行文本内容
<textarea cols="宽" rows="高"></textarea>
3.11 取值是布尔值的属性
checked 配合单选按钮、复选按钮使用
selected 配合option标签使用
readonly 表示只读,可以配合大部分表单标签使用
disabled 表示禁用,跟只读类似,不能修改,
而且在表单提交时,不会发送disabled属性的数据
加在按钮上,禁用这个按钮
required 是否必填,如果空值,不允许提交表单