文章目录
- 1、B/S软件结构
- 2、前端的开发流程
- 3、网页的组成部分
- 4、HTML简介
- 5、新建html文件
- 6、html文件的书写规范
- 7、html标签的语法
- 8、常用的html标签
- 8.1 字体标签：`<font>`
- 8.2 标题标签：`<h1>`到`<h6>`
- 8.3 超链接标签：`<a>`
- 8.4 列表标签`<ul>`和`<ol>`
- 8.5 图片标签`<image>`
- 8.6 表格标签`<table>`
- 8.7 内嵌页面标签`<iframe>`
- 8.8 特殊字符
- 8.9 表单标签`<form>`
- 8.10 其他标签`<div> <span> <p>`
JavaWeb学习：
1、B/S软件结构
C/S结构，即Client - -Server客户端服务端结构，而B/S结构，即Browser - -Server浏览器服务器结构
2、前端的开发流程
3、网页的组成部分
- 内容：即在页面中看到的数据，使用html展示
- 表现：指这些内容在页面上的展现形式，比如布局、颜色、大小等，使用CSS完成
- 行为：指页面元素与输入设备的交互的相应，通过JavaScript实现
4、HTML简介
全称Hyper Text Markup Language，即超文本标记语言。HTML通过标签来标记要显示的网页中的各个部分，从而告诉浏览器怎么显示其中的内容。
5、新建html文件
- 先新建工程project
- 再工程下面创建html文件
- 选择运行的浏览器
6、html文件的书写规范
<html>表示整个html页面的开始
<head> 头信息
<tittle>标题</tittle> 标题
</head>
<body>
页面主题内容
</body>
</html> 表示整个html页面的结束<!-- 这是一条注释 -->
7、html标签的语法
- 标签的格式
<标签名>封装的数据</标签名>- 标签名对大小写不敏感，<body>和<BODY>一样
- 标签拥有自己的基本属性和事件属性，其中，基本属性用来修改简单的样式效果；而事件属性可以设置事件响应后的代码
<body>加背景颜色属性
<body bgcolor="blue"><body>标签加事件属性
<body onclick="alert('加油啊')">alert()是javaScript语言提供的一个警告框函数，它可以接受任意参数，传参就是警告框的信息。
- 标签分为单标签和双标签
- 标签不能交叉嵌套
<div><span> 努力</span><div>
错误写法：
<div><span> 努力<div></span>- 标签必须闭合，不论单双标签
<div>加油</div>
<br/>- 属性必须有值，属性值必须加引号
<font color="blue">努力</font>- 注释标签不能嵌套
ps:
html代码不是很严谨，有时标签漏了没闭合，浏览器或者IJ也会帮忙修复，但别这样。
8、常用的html标签
8.1 字体标签：<font>
font是字体标签，用来修改文本的字体、颜色、大小，相应的属性值为face、color、size
<font color="red" face="宋体" size="10">这是字体标签</font>8.2 标题标签：<h1>到<h6>
标题标签用h1到h6，其中h1最大，h6最小。该标签拥有对齐align属性，属性值为left、center、right，即左对齐、居中、右对齐，默认left
<h1>标题1</h1>
<h2 align="center">标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>8.3 超链接标签：<a>
超链接标签<a>有两个属性，属性href设置链接的地址。属性target设置哪个目标进行跳转，target属性值_self表示当前页面，_blank表示新开个页面去跳转
<a href="www.baidu.com">百度</a>8.4 列表标签<ul>和<ol>
列表标签分为无序列表<ul>和有序列表<ol>，o即order，其中的<li>是列表项，type属性可以修改列表项前面的符号
//加了type="none"，则截图前面的黑点就不见的
<ul type="none">
<li>甲</li>
<li>乙</li>
<li>丙</li>
<li>丁</li>
</ul>运行：
<ol>
<li>甲</li>
<li>乙</li>
<li>丙</li>
<li>丁</li>
</ol>运行:
8.5 图片标签<image>
image标签用来显示图片，它有src属性，可以设置图片的路径，不同于Java中的盘符起手，绝对路径的写法格式则是http://ip:port/工程名/资源路径。相对路径的表示javaSE中是从工程名开始，而src属性是 . 表示当前文件所在的目录， …表示当前文件的上一层目录，直接一个文件名表示./文件名
<image src="http://xx:xxx/test/test.png" width="100" height="200" border="1" alt="图片丢失啦"/>width属性设置宽和heigth设置长，border属性设置边框粗细，alt属性用来设置图片路径找不到的时候代替显示的文本内容。
8.6 表格标签<table>
表格标签即<table>，其中行用<tr>，每行中的每个格子用标签<td>，<th>是表头标签，自带居中加粗效果。
align属性加在td标签中设置单元格的对齐属性，加在table标签设置的是整个表格的位置对齐属性。table标签还有cellspacing属性设置单元格间距
<table border="2" width="300" height="300" cellspacing="2">
<tr>
<td align="center"><b>1-1</b></td>
<th>1-2</th>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td></td>
</tr>
</table>运行效果：
跨行跨列的效果：
设置跨列，在<td>标签加colspan属性，设置跨行，加rowspan属性
8.7 内嵌页面标签<iframe>
<iframe>标签可以在页面开辟一个小区域显示一个单独的页面，其中src属性设置内嵌的页面,width和height属性设置页面大小
<iframe src="hello.html"></iframe>iframe标签和a标签组合使用步骤：
- 在iframe标签中使用name属性定义一个名称
- 在a标签的target属性上设置iframe的name的属性值
从而达到点击超链接，内嵌页面跟着变化的效果。
<iframe src="hello.html" width="500" height="500" name="abc"></iframe>
<br/>
<ul>
<li><a href="1.html" target="abc">1.html</a></li>
<li><a href="2.html" target="abc">2.html</a></li>
<li><a href="3.html" target="abc">3.html</a></li>
</ul>运行效果：
8.8 特殊字符
下面的例子中，<br/>标签会被解析成换行，想让它显示为文本，需将其转换你成字符集
这是<br/>标签改为：
这是<br>标签此外，通常情况下，HTML会去掉文档中的空格，比如html文件中输入了10个连续空格，则其中九个会被过滤掉，空格用 
8.9 表单标签<form>
表单就是html页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器，form标签就是表单。
• input type=text 是文本输入框，value设置默认显示内容
• input type=password是密码输入框，value设置默认显示的内容
• input type=radio是单选框，加checked="checked"表示默认选中，name属性可以对其进行分组（同一个组里的选项才限制单选）
• input type=checkbox是复选框，加checked="checked"表示默认选中
• input type=reset是重置按钮，value属性可以修改按钮上的文本
• input type=submit是提交按钮，value属性可以修改按钮上的文本
• input type=button是按钮，value属性可以修改按钮上的文本
• input type=file是文件上传域，点击可选择电脑本地文件
• input type=hidden是隐藏域，当我们需要向服务器发送某些信息，而这些信息不需要用户参与输入。就可以用隐藏域，提交的时候一起发送给服务器
• select标签是下拉列表框，option标签是下拉框中的一个个选项，selected="selected"设置默认选中
• textarea表示多行文本输入框，且其实标签和结束标签的中间文本就是默认值，rows设置可以显示几行的高度，超过这几行出现滚动条，cols属性设置每行可以显示几个字符的宽度<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>表单收集</title>
</head>
<body>
<form>
用户名称：<input type="text" value="默认值user"/><br/>
用户密码：<input type="password"/><br/>
确认密码：<input type="password"/><br/>
性别：<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
兴趣爱好：<input type="checkbox" checked="checked"/>Java<input type="checkbox"/>Sleep<input type="checkbox"/>fight<br/>
国籍：<select>
<option>中国</option>
<option selected="selected">英国</option>
<option>美国</option>
</select><br/>
自我评价：<textarea rows="10" cols="20">这里写默认值</textarea><br/>
<input type="reset" value="重置输入内容"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="按钮"/><br/>
<input type="file"/><br/>
<input type="hidden"/>
</form>
</body>
</html>运行效果：
表单格式化—将表单的放入table中，一列存提示语，一列存值
<form>
<table>
<tr>
<td>提示语</td>
<td>值</td>
</tr>
</table>
</form><!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>表单收集</title>
</head>
<body>
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="默认值user"/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked"/>Java<input type="checkbox"/>Sleep<input type="checkbox"/>fight</td>
</tr>
<tr>
<td>国籍：</td>
<td> <select>
<option>中国</option>
<option selected="selected">英国</option>
<option>美国</option>
</select>
</td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" cols="20">这里写默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置输入内容"/></td>
<td align="center"><input type="submit" value="提交"/></td>
</tr>
<tr>
<td><input type="button" value="按钮"/></td>
<td><input type="file"/></td>
</tr>
<tr>
<td><input type="hidden"/></td>
</tr>
</table>
</form>
</body>
</html>form标签的
action属性设置提交的服务器地址，method属性设置提交的方式GET（默认）还是POST
<form action="http://localhost:8080" method="get">
……
</form>表单提交的时候，数据没有发送给服务器的三种情况：
- 表单项没有name属性，加name=“key”，key就是接口传参的key
<input type="text" value="默认值user"/>
改为：
<input type="text" name="username" value="默认值user"/>
- 单选、复选、下拉列表框中的option标签，都需要加value属性，否则传入的值变为一串编码
<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女此时boy显示为on
加入value：
<input type="radio" name="sex" value="boy" checked="checked"/>男<input type="radio" name="sex" value="girl"/>女
- 表单项不在提交的form标签中
<input type="hidden" name="admin" passwd="123"/>
<form action="http://localhost:8080" method="get">
……比如这里的hidden在提交的form标签外
method属性选GET请求的特点是：
- 浏览器中的地址栏显示：action属性值[+?+请求参数] ,请求参数格式是name=value&name=value
- 不安全
- 它有数据长度的限制
method属性选post请求的特点是：
- 浏览器地址栏中只有action属性值，也就是服务器的地址
- 相对于GET要安全些
- 理论上没有长度限制
8.10 其他标签<div> <span> <p>
- p段落标签，默认会在段落的上方或者下方各空出一行来
div和span标签的具体用法特点在CSS章节中再整理。
