HTML所有标签演示

于 2021-04-13 08:50:46 发布
阅读量207 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/New_new_zero/article/details/115612986
该博客主要围绕HTML进行演示，虽未给出具体内容，但可知聚焦于HTML相关信息技术，能为前端开发学习提供一定参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>&lt;!-- 标题演示 --&gt;</font><br/>

<h1>标题一</h1>
<h2>标题二</h2>
<h6>标题六</h6>
<hr/>
<!-- 转义演示 -->
<font color="green">&lt;!-- 转义演示 --&gt;</font><br/>

&lt;html&gt;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是网页的开始!
<hr/>
<!-- 列表标签 自动缩进 -->
<font color="green">&lt;!-- dl 列表标签 --&gt;</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">&lt;!-- ol 有序列表 --&gt;</font><br/>

<ol type="a">
    <li>财务部</li>
    <li>人事部</li>
</ol>
<hr/>
<!-- 无序列表 默认实心圆 -->
<font color="green">&lt;!-- ul 无序列表 --&gt;</font><br/>

<ul type="circle">
    <li>空心圆</li>
    <li type="disc">实心圆</li>
    <li type="square">实心方块</li>
</ul>
<hr/>
<!-- 图像标签 -->
<font color="green">&lt;!-- 图像标签 --&gt;</font><br/>

<!-- border 边框宽度 -->
<img src="C:\Users\10340\Pictures\WallPaper\45937.jpg" width="300" height="200" border="3" alt="这是图片上的文字"/>
<hr/>
<!-- 超链接 -->
<font color="green">&lt;!-- 超链接 --&gt;</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">&lt;!-- 定位资源，同一界面跳转 --&gt;</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">&lt;!-- 表格标签 --&gt;</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">&lt;!-- 表单标签 --&gt;</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">&lt;!-- 原样输出 --&gt;</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>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值