HTML的基本案例

表示空格:“& nbsp;”

<br>表示换行

使用HBuilderX写出的案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        
        <!--标题标签-->
        <h1 align="center">标题1</h1>
        <h2>我是2号标题</h2>
        <h3>我是3号标题</h3>
        <h4>我是4号标题</h4>
        <h5>我是5号标题</h5>
        <h6>我是6号标题</h6>
        <!--列表标签
        ol<orderlist> + li 有序
        ul<unorderlist> + li 无序
        type 定义列表符号,默认是 disc 小圆点-->
        <ol>
            <li>中国</li>
            <li>美国</li>
            <li>小日本</li>
        </ol>
        <ul type="square">
            <li>中国</li>
            <li>美国</li>
            <li>小日本</li>
        </ul>
        <ul type="disc">
            <li>
                <a href="http://bd.xitong18.com/" target="_blank">
                    中国
                </a>
            </li>
            <li>
                <a href="http://bd.xitong18.com/" target="_blank">
                    美国
                </a>
            </li>
            <li>小日本</li>
        </ul>
        <!--图片标签-->
        <img src="1.jpeg" border="2px" width="100px" height="100px"/>
        <!--超链接标签
        target中代表的是如何打开网页,默认当前页面打开(_self)新窗口打开(_blank)-->
        <a href="http://bd.xitong18.com/" target="_blank">
            <img src="1.jpeg" border="2px" width="100px" height="100px"/>
        </a>
        <a name="top"></a>
        <!--锚定:回到一个固定位置-->
        <a href="#top">返回顶部</a>
        
        <!--输入框-->
        <input type="text"/>
        <input type="password" placeholder="手机号"/>  <br />
        <input type="number"/>
        <input type="date"/><br />
        <input type="radio"/> 男
        <input type="checkbox"/>狼
        <input type="button" value="点击"/>    
        
    </body>
</html>

表格标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试表格标签</title>
    </head>
    <body>
        <!--table向网页中插入表格
        tr表示行元素,td表示行里的列元素
        bgcolor背景颜色,cellspacing:行间距
        colspan:合并列 rowspan:合并列-->
        <table border="3px" width="500px" height="50px" 
        bgcolor="pink" cellspacing="0px">
            <tr>
                <td colspan="2">1.1</td>
                <td>1.3</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td rowspan="2">2.3</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
            </tr>
        </table>
        <table border="2px" cellspacing="0px">
            <tr>
                <th>总页面流量</th>
                <th>共计来访</th>
                <th>会员</th>
                <th>游客</th>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="3">1</td>
            </tr>
        </table>
    </body>
</html>

表单标签(form):比表格标签多了数据提交的功能,需要对提交按钮标签设置为submit

下拉框:select(下拉)+option(选项)

文件上传:<input typr="file"/>

文本域:<textarea></textarea>

综合案例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>学生信息管理系统</h1>
        <form>
            <table>
                <tr><td>姓名:</td></tr>
                <tr>
                    <td>
                        <input type="text" placeholder="请输入姓名..." name="name">
                    </td>
                </tr>
                <tr><td>年龄:</td></tr>
                <tr>
                    <td>
                        <input type="text" placeholder="请输入年龄" name="age">
                    </td>
                </tr>
                <tr>
                    <td>性别:(单选框):
                        <input type="radio" name="seg" value="1">男
                        <input type="radio" name="seg" value="0">女
                    </td>
                </tr>
                <tr>
                    <td>爱好:(多选框)
                        <input type="checkbox" name="aihao" value="1">足球
                        <input type="checkbox" name="aihao" value="2">篮球
                        <input type="checkbox" name="aihao" value="3">皮球
                    </td>
                </tr>
                <tr>
                    <td>学历:
                        <select name="grade" id="">
                            <option value="1">大专</option>
                            <option value="2">本科</option>
                            <option value="3">研究生</option>
                            <option value="4">博士</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>入学日期:</td>
                </tr>
                <tr>
                    <td><input type="date" value="date" name="date"></td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="submit">
                        <input type="button" value="取消">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

视频与音频都可借助H5来使用

<audio controls="controls">
    <source src="res/1.mp3"><source />
</audio>
<video controls="controls" loop="loop" width="300px">
   <source src="res/1.mp4"><source/>
</video>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值