<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是标题</title>
<!-- 3秒后刷新至指定页面 -->
<!-- <meta http-equiv="refresh" content="3;url=hello.html" /> -->
<!-- 统一设置超链接打开方式(此时就不需要指定 href 内容) -->
<!-- <base target="_blank" /> -->
</head>
<body> <!-- bgcolor="yellow" 添加背景颜色 ; background="xxx.gif" 添加背景图片-->
<!-- 第一个html程序！-->
<font size="5" color="red">hello
<br/>HTML<!-- 换行 -->
</font>
<!-- 水平线 范围1~7 -->
<hr size="7" color="#ff0066"/>
<!-- 标题演示 范围1~6 -->
<font color="green" size=6><!-- 标题演示 --></font><br/>
<h1>标题一</h1>
<h2>标题二</h2>
<h6>标题六</h6>
<hr/>
<!-- 转义演示 -->
<font color="green"><!-- 转义演示 --></font><br/>
<html>: 是网页的开始!
<hr/>
<!-- 列表标签 自动缩进 -->
<font color="green"><!-- dl 列表标签 --></font><br/>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容1</dd>
</dl>
<hr/>
<!-- 有序列表 type: 1(默认),a,i -->
<font color="green"><!-- ol 有序列表 --></font><br/>
<ol type="a">
<li>财务部</li>
<li>人事部</li>
</ol>
<hr/>
<!-- 无序列表 默认实心圆 -->
<font color="green"><!-- ul 无序列表 --></font><br/>
<ul type="circle">
<li>空心圆</li>
<li type="disc">实心圆</li>
<li type="square">实心方块</li>
</ul>
<hr/>
<!-- 图像标签 -->
<font color="green"><!-- 图像标签 --></font><br/>
<!-- border 边框宽度 -->
<img src="C:\Users\10340\Pictures\WallPaper\45937.jpg" width="300" height="200" border="3" alt="这是图片上的文字"/>
<hr/>
<!-- 超链接 -->
<font color="green"><!-- 超链接 --></font><br/>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<!-- ** target：设置打开的方式 ，默认是在当前页打开
-- _blank : 在一个新窗口打开
-- _self: 在当前页打开 默认 -->
<br/>
<a href="">打开当前文件路径</a>
</br />
<a href="#">空连接</a>
<hr/>
<!-- 定位资源，同一界面跳转 -->
<font color="green"><!-- 定位资源，同一界面跳转 --></font><br/>
<a name="锚名">我是锚</a>
...
<a href="#锚名">goto锚</a>
<br/>
<a href="网页名称#锚名/" target="_blank">不同页面跳转，这里未定义</a>
<br/>
<a href="mailto:邮箱地址/" target="_blank">邮箱地址</a>
<hr/>
<!-- 表格标签table -->
<font color="green"><!-- 表格标签 --></font><br/>
<!-- 边框宽度(一般不使用)；边框颜色；单元格间隙；宽 ；高 -->
<table border="2" bordercolor="blue" cellspacing="0" width="400" height="150">
<caption>表格的标题: 基本标签</caption>
<tr align="center"><!-- left 居左, center 居中, right 居右 -->
<td>姓名</td>
<td align="left">性别 "居左"</td>
<td>年龄</td>
</tr>
<tr>
<td>东方不败</td>
<td>男</td>
<td>35</td>
</tr>
<tr align="center">
<td>岳不群</td>
<td>男</td>
<td>56</td>
</tr>
<tr align="right">
<th>张无忌</th><!-- th居中并加粗 -->
<th>男</th>
<th>25</th>
</tr>
</table>
<hr/>
<table border="2" bordercolor="blue" cellspacing="0" width="400" height="150">
<caption>colspan 合并列</caption>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center">
<td>东方不败</td>
<td>男</td>
<td>35</td>
</tr>
<tr align="center">
<!--
<td>岳不群</td>
<td>男</td>
<td>56</td>
-->
<td colspan="3">岳不群，男，56</td> <!-- 跨3列合并 -->
</tr>
<tr>
<th>张无忌</th>
<th>男</th>
<th>25</th>
</tr>
</table>
<hr/>
<table border="2" bordercolor="blue" cellspacing="0" width="400" height="150">
<caption>rowspan 合并行</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<th>东方不败</th>
<th rowspan="3">男</th>
<th>35</th>
</tr>
<tr>
<th>岳不群</th>
<th>56</th>
</tr>
<tr>
<th>张无忌</th>
<th>25</th>
</tr>
</table>
<!-- 表单标签form -->
<hr/>
<font color="green"><!-- 表单标签 --></font><br/>
<!-- action提交到指定地址（默认提交至本页面 或者使用 #） post隐藏信息(默认get)
** 面试题目： get和post区别
1、get请求地址栏会携带提交的数据，post不会携带
2、get请求安全级别较低，post较高
3、get请求数据大小的限制，post没有限制
-->
<form action="hello.html" method="post" name="表单名"><!-- style="width: 100; height: 200" -->
<!-- 得到焦点后执行 funcFocus()函数， οnfοcus="funcFocus();"
失去焦点后执行 funcBlur()函数， οnblur="funcBlur();" -->
手机号(文本): <input type="text" name="phone"/><br/>
密码(隐藏): <input type="password" name="pwd"/><br/>
性别(单选): <input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl" id="g2" checked="checked"/>女
<input type="radio" name="sex" value="what" id="whatId"/><label for="whatId">点击文字选择</label>
<br/>
<!-- checked 默认选项 -->
爱好(复选): <input type="checkbox" name="love" value="huaban"/>滑板
<input type="checkbox" name="love" value="yumaoqiu"/>羽毛球<br/>
<!--
** 使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中 -->
文件(文件输入项): <input type="file"/>上传文件<br/>
生日(下拉输入项)：<select name="birthday">
<!-- multiple="multiple" 裸露所有选项-->
<!-- οnchange="add1(this.value);" onchange 触发选择事件，this.value 当前选中的值 -->
<option value="0">
请选择
</option>
<option value="1998" selected="selected"><!-- selected 默认选项 -->
1998
</option>
<option value="1999">
1999
</option>
<option value="2000">
2000
</option>
</select><br/>
<!-- cols 列 rows 行 -->
文本区：<textarea cols="40" rows="5" name="tex">I am ZERO...</textarea><br/>
隐藏项：<input type="hidden" name="hid"/><br/>
<!-- 点击按钮提交 -->
<input type="submit" value="注册"/><br/>
<!-- 点击图片提交 -->
<input type="image" src="立即注册.jpg"/><br/>
<!-- 重置 -->
<input type="reset" value="重置注册"/>
<!-- 普通按钮 onclick 点击按钮后触发函数执行 -->
<input type="button" value="普通按钮" onclick="func();"/>
<!-- 可使用 button 提交 form 表单, 详情见案例 11、表单提交的方式和输入框的焦点得到失去.html -->
</form>
<!-- 常用标签: -->
<!-- 原样输出pre -->
<font color="green"><!-- 原样输出 --></font><br/>
<pre>
public static void main(String[] args) {
System.out.println("pre原样输出");
}
</pre>
<hr/>
<b>b 少小离家胖了回，</b><!-- 粗体 -->
<strong>strong 少小离家胖了回2，</strong><!-- 粗体2 -->
<i>i 乡音无改肉成堆。</i><!-- 斜体 -->
<em>em 乡音无改肉成堆2。</em><!-- 斜体2 -->
<u>u 儿童相见不相识，</u><!-- 下划线 -->
<s>s 乡笑问胖子你是谁。</s><!-- 删除线 -->
<hr/>
3<sup>100</sup><!-- 上标 -->
<br/>
x<sub>1</sub><!-- 下标 -->
<hr/>
<div>第一行</div><!-- 自动换行 -->
<div>第二行</div>
<div>第三行</div>
<hr/>
<span>第一句</span><!-- 自动空格（同行显示） -->
<span>第二句</span>
<span>第三句</span>
<hr/>
<!-- 段落标签（换两行） -->
春眠不觉晓，处处蚊子咬。
<p>夜来大狗熊，谁也跑不了。</p>
</body>
</html>
HTML所有标签演示
最新推荐文章于 2023-06-15 10:43:47 发布
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
