HTML中常用的单标签和双标签及form表单

双标签

<h1>...</h1>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • 在这里插入图片描述

<p>...</p>

<p>段落标签</p>

<i>...</i>

<i>文字会出现倾斜(斜体)</i>

<b>...</b>

<b>文字加粗</b>

<a>..</a>

<a href="https://www.baidu.com/">超链接标签</a>
## href为标签的属性写入链接
<a href="https://www.baidu.com/" target="-blank">超链接标签</a>
## 加上target="-blank" 是让在新页面打开超链接

<ul> ...</ul> 无序列表

<ul>
    <li>li为列表标签</li>
    <li>li为列表标签</li>
    <li>li为列表标签</li>
</ul>
## 无序列表

<ol>...</ol> 有序列表

<ol>
    <li>li为列表标签</li>
    <li>li为列表标签</li>
    <li>li为列表标签</li>
</ol>
## 有序列表

<del>删除线</del>

<del>给文字添加删除线</del>

<sup> 2</sup>

1100<sup>2</sup>
# 2次方
  • 在这里插入图片描述

<u>下划线</u>

<u>给文字添加下划线</u>

<center>文字居中</center>

<center>文字居中</center>

<table>...</table> 表格标签

# 一个3*3的表格, border为边框像素,cellspacing为表格间距,
# height为高度,width为宽
<table border="1px" cellspacing="0" height="50px" width="100px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

单标签

<br> 换行标签

<hr> 水平线

&nbsp 空格

<img src=" "> 图片标签
src属性填图片地址
<img src="" width="100px" height="100px"> 给图片设置显示大小
img title="鼠标划上图片时显示的文字" alt="失败的文字"

form表单

form表单中必须要有action属性,就是提交地址
所有要提交的数据 input中必须有name 属性
input 按钮上的文字使用value属性表示
input必须放在form表单标签内才能提交
下面是一个登录表单的小案例

<!--
File: form表单.html
Created Date: 2020-11-28 19:32:42
Author: 蓝小白
Contact: <[email protected]>
Last Modified: Sunday December 13th 2020 19:18:16 pm
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form表单</title>
</head>
<body>
    <form action="https://www.baidu.com/">
        <table border="1px" cellspacing="0">
            <col width="100px">
            <col width="100px">
            <col width="100px">
            <col width="100px">
            <tr height="60px">
                <td colspan="4" align="center">登录表单</td>
            </tr>
            <tr height="40px">
                <td align="center" rowspan="3">总体信息</td>
                <td align="center">账号:</td>
                <td colspan="2">
                    <input type="text" name="账号">
                </td>
           
            </tr>
            <tr height="40px">
         
                <td align="center">密码:</td>
                <td colspan="2">
                    <input type="password" name="密码">
                </td>
            </tr>
            <tr height="40px">
                <td colspan="3" align="center">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
    
</body>
</html>

猜你喜欢

转载自blog.csdn.net/lxb_wyf/article/details/111143264