Article Directory
One, create a static Web project
- Create a new project in IDEA (New Project) and create a static Web project.
- You can create a new module under the project, which is also a static web project
- Then create a new HTML file
2. Introduction
Hyper Text Markup Language (Hyper Text Markup Language) abbreviation: HTML
html itself is a text file, through tags to tell the browser how to display the corresponding text.
Three, label introduction
Tag name is not case sensitive
Tags have attributes
- Basic attributes: modify simple style effects
- Event attribute: Set the code after the event response. Example: οnclick="alert=('Hello')"
Labels are divided into single label and double label
Four, commonly used labels
4.1 font label
<!--
属性:color 颜色
face 字体
sice 字体大小 1~7
-->
<font color="red" face="宋体" size="7">
字体标签内容7
</font>
4.2 Referencing entities
4.3 Hyperlink
<!--
href 是超链接地址
target 是属性设置哪个目标(窗口)进行跳转
_self 当前页面跳转(默认)
_blank 打开新页面跳转
也可以指定窗口 比如和iframe标签配对使用
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
4.4 List
List: ordered order list, unordered unOrder list
- Ordered list
<ol>
<li>java</li>
<li>python</li>
<li>c++</li>
</ol>
- Unordered list
<!--type 属性可以修改列表符号-->
<ul type="none"><!--设置为无符号-->
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
4.5 Picture
<!--
border :边框宽度
alt : 当找不到图片时,显示出来的内容
相对路径:
.表示当前目录
..表示上级目录
绝对路径:
https://ip:prot/工程名/资源路径
-->
<img src="photo/1.jpg" width="500" height="600" border="1" alt="找不到图片"/>
4.6 Form
<!--
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>
The cross-row label
colspan merges the left and right columns into one column
rowspan merges the upper and lower rows into one row
<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 Embedded window with iframe tag
<!--给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 tags
<!--
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、 理论上没有数据长度的限制
-->
Combine form tags and forms
<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>