HTML5的基本常用标签

最新推荐文章于 2024-04-19 19:26:15 发布

Wanidde

最新推荐文章于 2024-04-19 19:26:15 发布

阅读量2.4k

点赞数 5

分类专栏： WEB

本文链接：https://blog.csdn.net/wan_ide/article/details/100707115

版权

WEB 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、常用标签：

注释

<h1...6></h1...6> 标题（从h1到h6）

<p></p> 段落

<br/> 强制换行

<hr/> 水平线

<strong></strong> 加粗字体

<em></em> 倾斜字体

<a></a> 链接

<img/> 图像

<vedio></vedio> 视频

<audio></audio> 音频

<div></div> 层

二、列表标签：

1、<ul></ul>

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

</ul>

<ul>的type属性取值说明：

disc 实体圆心，默认值

square 实体方心

circle 空心圆

2、<ol></ol>

<ol>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

</ol>

<ol>的type属性取值说明

1 数字

A/a 大写/小写字母

I/i 大写/小写罗马数字

type属性的使用：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>列表标签的使用</title>
    </head>
    <body>
        <!--无序列表的使用-->
        <ul type= "square">
            <li>西瓜</li>
            <li>桃子</li>
            <li>荔枝</li>
        </ul>

        <hr/>

        <!--有序列表的使用-->
        <ol type="A">
            <li>可乐</li>
            <li>雪碧</li>
            <li>柠檬茶</li>
        </ol>
    </body>
</html>

效果：

三、表格标签：

<table></table> 表格标签

<tr></tr> 开启表格的一行

<th></th> 在表格的第一行使用，加粗字体

<td></td> 表示表格的一个数据单元

<table border="1"></table> 设置表格边框的宽度

align 表格本身的对齐方式，取值有left、right、center

栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格的使用1</title>
    </head>
    <body>
        <h2 align ="center">2019年第二周课表</h2>
        <table border="1px" align="center" bgcolor="pink">
            <tr>
                <th>Mon</th>
                <th>Tues</th>
                <th>wed</th>
                <th>thus</th>
                <th>Fri</th>
            </tr>
            <tr>
                <td>嵌入式</td>
                <td>MATLAB</td>
                <td>通信原理</td>
                <td>光纤通信</td>
                <td>数字信号处理</td>
            </tr>
 
        </table>
    </body>
 
</html>

效果：

合并行：

合并列：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>跨行表格</title>
    </head>
    <body>
        <!--合并行的表格-->
        <table border="1">
            <tr>
                <th>分组号</th>
                <th>组员姓名</th>
            </tr>
            <tr>
                <td rowspan="2">第一组</td>
                <td>张三</td>
            </tr>
            <tr>
                <td>李四</td>
            </tr>
        </table>

        <hr/>

        <!--合并列的表格-->
        <table border="1">
            <tr>
                <td colspan="2">课程成绩</td>
            </tr>

            <tr>
            <td>JAVA</td>
            <td>PHP</td>
            </tr>

            <tr>
                <td>90</td>
                <td>89</td>
            </tr>
        </table>
    </body>

</html>

效果：

表格的嵌套使用及插入图片：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>表格的应用与嵌套</title>
    </head>

    <body>
        <table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
            <tr>
                <td colspan="2" align="center">
                    <img src="1.jpg"/> 
                </td>
                <td>13</td>
                <td>14</td>
            </tr>

            <tr>
                <td>21</td>

                <td colspan="2" rowspan="2" align="center">
                    <!--嵌套表格-->
                    <table border="1px" align="center" width="100%" height="100%">
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                    </table>
                </td>

                <td>24</td>
            </tr>

            <tr>
                <td>31</td>
                <td rowspan="2" align="center">34</td>
            </tr>

            <tr>
                <td>41</td>
                <td>42</td>
                <td>43</td>
            </tr>
        </table>
    </body>
</html>

效果：

四、表单标签：

<form></form> 表单的框架标签

<div></div> 层

<input> 单行文本框

<input type="text"> 文本框为text属性，默认为text

<input type="text" placeholder="请输入姓名"> placeholder属性是占位，主要是提示信息

<input type="text" maxlength="10"> maxlength是文本框所能输入最大的长度

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>表单的使用</title>
    </head>
    <body>
        <form action="/my-handling-form-page" method="post">
            <div>
                <lable for="name">  姓名：</lable>
                <input type="text" id="name" name="user_name" />
            </div>
            <br/>

            <div>
                <label for="mail">E-mail：</label>
                <input type="email" id="mail" />
            </div>
            <br/>

            <div>
                <lable for="msg">留言：</lable>
                <textarea id="msg"></textarea>
            </div>
            <br/>

            <input>
        </form>
    </body>

</html>

效果：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>学生注册页面</title>
    </head>

    <body>
        <form>
           <!--文本框-->
            <lable>姓名</lable>&nbsp;
            <input type="text" name="username" value="小明" size="20" placeholder="请输入姓名">
            <br/><br/>

            <!--密码框-->
            <lable>密码</lable>&nbsp;
            <input type="password" name="pwd" size="20" required="required" placeholder="密码长度在6-12位之间">
            <br/><br/>

            <!--单选按钮-->
            <lable>性别</lable>
            <input type="radio" name="sex" value="男" checked="checked">男
            <input type="radio" name="sex" value="女" >女
            <br/><br/>

            <!--复选框-->
            <lable>喜欢的运动</lable>
            <input type="checkbox" name="ch1" value="basketball">篮球
            <input type="checkbox" name="ch2" value="football">足球
            <input type="checkbox" name="ch3" value="volleyball">排球
            <input type="checkbox" name="ch4" value="pingpangball">乒乓球
            <br/><br/>

            <!--列表框-->
            <label>喜欢的水果</label>
            <select name="fruit">
                <option value="" selected="selected"></option>
                <option value="1">西瓜</option>
                <option value="2">桃子</option>
                <option value="3">荔枝</option>
                <option value="4">龙眼</option>
            </select>
            <br/><br/>

            <!--文件浏览-->
            <lable>文件浏览</lable>
            <input type="file" name="files">
            <br/><br/>

            <!--添加图片-->
            <img src="1.jpg" alt="没找到您要的图片哦" width="300px" height="300px"/>
            <br/><br/>

            <!--超链接-->
            <a href="https://blog.csdn.net/wan_ide/article/details/100707115" target="_blank">点我啊</a>
            <br/><br/>

            <!--按钮-->
            <input type="submit" name="s1" value="提交">
            <input type="submit" name="s2" value="重置">
            <input type="submit" name="s3" value="按钮">

        </form>
        
        
    </body>
</html>

效果：