文章目录
一、创建静态Web工程
- 在IDEA中新建一个项目(New Project),创建一个静态Web工程。
- 可在项目下创建新的 module ,同样是静态Web工程
- 然后新建一个 HTML文件
二、简介
Hyper Text Markup Language (超文本标记语言) 简写:HTML
html本身是一种文本文件,通过标签来告诉浏览器如何显示对应的文本。
三、标签介绍
标签名大小写不敏感
标签具有属性
- 基本属性: 修改简单的样式效果
- 事件属性: 设置事件响应后的代码。例:οnclick=“alert=(‘你好’)”
标签又分为单标签 和 双标签
四、常用标签
4.1 font字体标签
<!--
属性:color 颜色
face 字体
sice 字体大小 1~7
-->
<font color="red" face="宋体" size="7">
字体标签内容7
</font>
4.2 引用实体
4.3 超链接
<!--
href 是超链接地址
target 是属性设置哪个目标(窗口)进行跳转
_self 当前页面跳转(默认)
_blank 打开新页面跳转
也可以指定窗口 比如和iframe标签配对使用
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
4.4 列表
列表 :有序 order list、无序 unOrder list
- 有序列表
<ol>
<li>java</li>
<li>python</li>
<li>c++</li>
</ol>
- 无序列表
<!--type 属性可以修改列表符号-->
<ul type="none"><!--设置为无符号-->
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
4.5 图片
<!--
border :边框宽度
alt : 当找不到图片时,显示出来的内容
相对路径:
.表示当前目录
..表示上级目录
绝对路径:
https://ip:prot/工程名/资源路径
-->
<img src="photo/1.jpg" width="500" height="600" border="1" alt="找不到图片"/>
4.6 表格
<!--
tr 表示行
td表示列
th 表示表头
border 表示边框
cell spacing 单元格间距
-->
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<td align="center"><b>1.1</b></td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
跨行列的标签
colspan 左右两列合并为一列
rowspan 上下两行合并为一行
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th >1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td >2.1</td>
<td colspan="2" rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
</table>
4.7 iframe标签 内嵌窗口
<!--给iframe 标签中定义name 名字 ,使超链接显示的网页在iframe 中跳转 -->
<iframe src="pracetice02.html" width="500" height="200" name="abc"></iframe><br/>
<!--通过以下超链接和target属性,可以控制 iframe 窗口跳转到对应页面 -->
<a href="practice03.html" target="abc">03html</a><br/>
<a href="pracetice02.html" target="abc">02html</a>
4.8 表单标签
<!--
form 标签就是表单
input type=text 是文件输入框 value 设置默认显示内容
input type=password 是密码输入框 value 设置默认显示内容
input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
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 属性设置每行可以显示几个字符宽度-->
表单提交:
<!--
form 标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式 GET(默认值)或 POST
表单提交的时候, 数据没有发送给服务器的三种情况:
1、 表单项没有 name 属性值
2、 单选、 复选(下拉列表中的 option 标签) 都需要添加 value 属性, 以便发送给服务器
3、 表单项不在提交的 form 标签中
GET 请求的特点是:
1、 浏览器地址栏中的地址是: action 属性[+?+请求参数]
请求参数的格式是: name=value&name=value
2、 不安全
3、 它有数据长度的限制
POST 请求的特点是:
1、 浏览器地址栏中只有 action 属性值
2、 相对于 GET 请求要安全
3、 理论上没有数据长度的限制
-->
表单标签和表格结合使用
<form action="https://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<table>
<tr>
<td>用户名称:</td>><!--文本框-->
<td>
<input type="text" value="默认值" name="username"/>
</td>
</tr>
<tr>
<td>用户密码:</td>
<td>
<input type="password" name="password"><!--密码框-->
</td>
</tr>
<tr>
<td>性别:</td><!--单选框 为sex一组-->
<td>
<input type="radio" name="sex" checked="checked" value="boy"/>男<!--默认选中-->
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td><!--多选框-->
<td>
<input type="checkbox" checked="checked" name="hobby" value="java"/>java<!--默认选中-->
<input type="checkbox" name="hobby" value="c++"/>c++
<input type="checkbox" name="hobby" value="php"/>php
</td>
</tr>
<tr>
<td>国籍:</td><!--下拉框-->
<td>
<select nam="country">
<option>----请选择国籍----</option>
<option selected="selected" value="china">中国</option><!--默认选项-->
<option value="USA">美国</option>
<option value="Russia">俄罗斯</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td><!--文本域-->
<textarea rows="10" cols="20" name="desc">我是默认值</textarea>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置" />
</td>
<td>
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>