javaweb大体范围:html, css, javascript, jquery, vue 接收用户的输入,向用户返回可视化结果
servlet, jsp, jstl java后端技术 -> 再去调用jdbc,访问数据库
# html
## 1. 什么是html
1)html指的是超文本标记语言 (Hyper Text Markup Language)
超文本标记语言,俗称网页
html不是一种编程语言,而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));
其功能强与普通文本,可以在文本里边加入图片、链接等,能实现普通文本不能实现的功能。
标记:就是标签,不同的标签能实现不同的功能
2)html能做什么
html通过标签的形式将信息展示给用户
## 2. html 文件结构
以 *.html 或 *.htm 结尾的文本文件
1) 标签一般成对出现:''''<标签名> </标签名>'''
2) 最外层的标签'''<html></html>'''其它标签必须在它之内
3) doctype 用来说明html的版本
例如:版本是html5
'''<!DOCTYPE html> '''
版本是html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
4) '''<html>''' 标签由 '''<head>''' 和 '''<body>''' 子标签组成
'''<html>
<head>
<title>我是标题</title>
</head>
<body>
bublabulabula
</body>
</html>
以上的标签,在一个文件中只能出现一次。所有的显示标记都必须写在body中。
head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分
### 3. 常用标签
3.0几个常用的标记:
注释: ''' <!-- 我是注释 -->'''
空格:
换行: '''<br/>'''
段落: '''<p></p>''' 段与段之间有空行
水平线:'''<hr width = "10" size = "5" color = "blue" align = "right"/>'''
块标签:'''<div></div>'''行级块标签
'''<span></span>'''行内块标签
清单标签:
无序列表'''<ul></ul>'''
列表项'''<li type = "cricle"></li>'''
有序列表'''<ol></ol>'''
列表项'''<li type = "a"></li>'''
定义列表'''<dl><dt></dt></dl>'''
大于号: >
小于号: <
3.1 标题标签
<h1></h1> -> <h6></h6> 随着数字增大逐渐变小,默认占据一行
用来表明各部分内容的提示信息
3.2 段落标签(正文)
<p> 可以起到内容换行的作用, 普通文本是不会自动换行的
3.3
分隔符 <hr> 不需要结束标签, 加一道横线
换行符 <br> 不需要结束标签, 起到换行的作用
3.4 标签的属性: 格式 : 属性名="属性值"
可以用来定义标签的宽、高、颜色等等
例如:
'''<p align="right">内容</p> '''表示段落内容靠右对齐
'''<hr color="red">''' 表示分隔符颜色变为红色
3.5 特殊转义字符(实体)
< 表示 <
> 表示 >
3.6 图型标签 img
'''<img src = "1.png" width = "200" height = "200" border = "1" align ="center" alt = "this is a image" >'''
src 属性代表图片路径
width 表示宽度(单位是像素)
height 表示高度(单位是像素)
border表示边框
align表示对其方式
alt 是图片访问不到时的提示文字
注意:路径建议使用相对路径,不要使用绝对路径(e:\... c:\...)
3.7 超链接 a 【重点】
href 属性 表示跳转的目标
<!--网页间的跳转-->
'''<a href="01.html">跳转至01.html</a><br>'''
<!--网页内的跳转-->
'''<a id="001">我是001</a>''''''<br>'''
'''<a id="002">我是002</a>''''''<br>'''
'''<a href="#001">跳转至001</a>''''''<br>'''
'''<a href="#002">跳转至002</a>''''''<br>'''
<!--图片作为超链接-->
'''<a href="01.html"><img src="th2.png" alt=""></a>'''
'''<hr>'''
3.8 列表
<!--有序order-->
'''<order>
<ol>
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ol>
</order>'''
<!--无序unorder-->
'''<unorder>
<ul>
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
</unorder>'''
3.9 表格标签【重点】
'''<table>
<thead></thead> 头
<tbody></tbody> 体
<tfoot></tfoot> 脚
</table>'''
'''<tr>''' 表示行 '''<td>'''表示列
例:
<!--分为:头,体,尾 <tr>` 表示行 '<td>' 表示列-->
<!--border加边框,width宽度-->
'''<table border="1" width="100%">
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
</tr>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
</table>'''
'''<hr>'''
生成表格的父子关系,4行3列
table>tbody>tr*4>td*3
同时生成thead和tbody 需要用() 把他们分组,平级的用+连在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)
给table加属性的快捷写法
table[border=1][width=100%]>tbody>tr*2>td*2
<!--行合并-->
'''<table border="1" width="60%">
<thead>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1,1</td>
<td>1,2</td>
</tr>
<tr>
<!--由于行合并行该列不写-->
<td>2,2</td>
</tr>
</tbody>
</table>'''
'''<hr color="red">'''
<!--列合并-->
'''<table border="1" width="60%">
<thead>
<tr>
<td>列1</td>
<td>列2</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" span="2">1,1</td>
<!--由于列合并,该列不写-->
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</tbody>
</table>'''
'''<caption>表示表格的标题</caption>'''
''' <table border = "1" width = "300" align = "right" bgcolor = "blue">
<tr>代表行
<td colspan = "0" rowspan = "0">代表单元格</td>
<th>相等于td,只是样式加粗居中</th>
</tr>
</table>'''
3.10 表单标签【重点】
都是用来收集用户录入的信息
'''<input type = "" value = " " name =""/>'''
在这里呢,type分为:
text,password,button,submit,reset,checkbox,radio,image(图片按钮),hidden(隐藏表单,不需要用户看到的
'''<form action = "写入的是提交对象界面路径" method = "get/post" name = "表单名称">'''
'''<form action="">
<!--文本框标签-->
<p><input type="text"></p>
<!-- 密码框,不可见-->
<p><input type="password"></p>
<!-- 单选按钮-->
<p><input type="radio"></p>
</form>'''
get和post的区别(重点):
(1)get提交将数据加在地址栏的后面,格式?name=value&name=value;
post提交将数据封装在请求体中
格式?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
(2)get提交相对不安全;post提交相对安全
(3)get提交有大小限制,根据浏览器不同而不同;post不限制大小
例子:
<!--为了使某些属性呈现单选,多选不符合实际时,
例如性别,只能选单个,这时用name取值相同可避免-->
''' <p>男<input type="radio"name="1">
女<input type="radio" name="1"></p>'''
<!--当想默然选中时使用 checked或者checked="checked"-->
'''<p>男<input type="radio"name="1" checked>
女<input type="radio" name="1"></p>'''
<!--当有多个选项符合要求时,
想要都选中,可以用checkbox(复选按钮),
name相同时,视为同一组,此时同样可用checkbox选中多项
例如:个人爱好方面-->
''' <p>听音乐<input type="checkbox" name="1">
踢足球<input type="checkbox" name="1">
登山<input type="checkbox" name="1">
看电影<input type="checkbox" name="1"></p>'''
<!--输入邮箱-->
'''<p>邮箱<input type="email"></p>'''
<!--选择日期(年月日)-->
'''<p>日期<input type="date" value=""></p>'''
<!--选择时间(时,分,没有秒)-->
'''<p>时间<input type="time" value=""></p>'''
'''<input type="file"> '''文件选择框
'''<input type="button" value="按钮文字">''' 按钮
'''<input type="reset" value="重置"> '''重置按钮 把页面所有填写的内容重置到初始状态
'''<input type="submit" value="提交">''' 提交按钮 把表单填好的信息发送给服务器
'''<button type="button|reset|submit">按钮文字</button>'''
下拉列表标签( select标签)
'''<select name="" id="表单名">
<p><option value="">北京</option></p>
<p><option value="">上海</option></p>
<p><option value="">天津</option></p>
</select>'''
如果希望某个option默认被选中,在option上添加属性selected
写法1: selected
写法2: selected="selected"
'''<select name="" id="">
<!--如果希望某个option默认被选中,
在option上添加属性selected-->
<p><option value="">北京</option></p>
<p><option value="" selected>上海</option></p>
<p><option value="">天津</option></p>
</select>'''
文本域标签 适合输入多行文本内容(textArea标签)
''' <textarea size = "16" maxlength = "10" cols = "5" rows = "5"></textarea> '''
cols宽
rows高
3.11 取值是布尔值的属性
checked 配合单选按钮、复选按钮使用
selected 配合option标签使用
readonly 表示只读,可以配合大部分表单标签使用
disabled 表示禁用,跟只读类似,不能修改,
而且在表单提交时,不会发送disabled属性的数据
加在按钮上,禁用这个按钮
required 是否必填,如果空值,不允许提交表单