登录  /  注册
博主信息
博文 31
粉丝 1
评论 5
访问量 27871
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML标签元素,列表,表格,表单的理解及总结__2019-8-30
零度 的博客
原创
1122人浏览过

一:HTML 标签

  1. html的标签是由尖括号包围的关键词,比如 <html>

  2. HTML 标签通常是成对出现的,比如 <p> 和 </p>

  3. 标签对中的第一个标签是开始标签,第二个标签是结束标签

  4. 开始和结束标签也被称为开放标签和闭合标签

  5. HTML标签大都是成对出现,也有一些特殊的标签没有结束标签,如<img />、<input />、<hr />等没有结束标签

  6. 。HTML的标签对大小写不敏感

    实例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html标签实例</title>
    </head>
    
    <body>
        <p>html中的段落标签p标签实例效果</p>
        <br>
        <a href="http://www.php.cn">html中的链接标签a标签实例效果</a>
        <br>
        <br>
        <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" width="300" height="142" />
    </body>
    
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例



二:HTML 元素

HTML 元素指的是从开始标签(<p>)到结束标签(</p>)的所有代码。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html标签实例</title>
</head>

<body>
    <p>html中的元素实例效果</p>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


三:HTML元素属性

是由元素属性和值来组成,HTML的元素属性显示了对HTML元素的描述,如img标签里的src、width、height属性,p标签里的style属性,浏览器就会按照设定的效果来显示内容。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html属性实例</title>
</head>

<body>
    <h1 align="center">html属性实例</h1>

    <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

三:HTML列表

HTML列表有三种,它们都是块元素,分为有序列表,无序列表还有定义列表,用的最多的是无序列表,它们通常是组合标签出现,常用在网页布局导航的部分。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html标签实例</title>
</head>

<body>

    <ol>
        <li>有序列表实例</li>
        <li>有序列表实例</li>
        <li>有序列表实例</li>
    </ol>
    <br>
    <ul>
        <li><a href="#">无序列表实例</a></li>
        <li><a href="#">无序列表实例</a></li>
        <li><a href="#">无序列表实例</a></li>
    </ul>
    <br>
    <dl>
        <dt>列表标题</dt>
        <dd>定义列表内容实例</dd>

        <dt>列表标题实例 </dt>
        <dd>定义列表内容实例</dd>

        <dt>列表标题实例</dt>
        <dd>定义列表内容实例</dd>

    </dl>


</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

四:html列表与表格的区别

列表由ol、ul、dl表示,l代表了list,内部有li、dt、dd组成,而表格由table包裹外部,内部有thead、tbody、tfoot,tr、td、th组成

如果数据比较简单,只有一列数据,就用列表来进行代码编写,如果有多列数据,就适合用表格来编写

五:列表实现工作计划实例

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表实现工作计划</title>
</head>

<body>
    <h1>列表实现工作计划</h1>
    <ol>
        <li>先看一遍老师的直播视频</li>
        <li>视频过程手写记不住的英语单词</li>
        <li>看完视频后再动手敲一遍课程学到的知识</li>
        <li>敲代码过程有错误反复观看视频找出错误点认真去记</li>
    </ol>
    <br>
    <ul>
        <li>先看一遍老师的直播视频</li>
        <li>视频过程手写记不住的英语单词</li>
        <li>看完视频后再动手敲一遍课程学到的知识</li>
        <li>敲代码过程有错误反复观看视频找出错误点认真去记</li>
    </ul>
    <br>
    <dl>
        <dt>列表实现工作计划</dt>
        <dd>先看一遍老师的直播视频</dd>
        <dd>视频过程手写记不住的英语单词</dd>
        <dd>看完视频后再动手敲一遍课程学到的知识</dd>
        <dd>敲代码过程有错误反复观看视频找出错误点认真去记</dd>

    </dl>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

六:商品清单实例

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <caption>商品清单</caption>
    <!-- 表格头部 -->
    <table border="1" width="500" cellspacing="0" cellpadding="10">

        <thead>
            <tr>
                <th>类别</th>
                <th>排序</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
            </tr>

        </thead>
        <!-- 表格主体内容 -->
        <tr>
            <td rowspan="5">笔记本电脑</td>
            <td>1</td>
            <td>华硕笔记本</td>
            <td>5000</td>
            <td>1</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>联想笔记本</td>
            <td>4999</td>
            <td>2</td>
            <td>9998</td>
        </tr>
        <tr>
            <td>3</td>
            <td>神州笔记本</td>
            <td>4999</td>
            <td>3</td>
            <td>14447</td>
        </tr>
        <tr>
            <td>4</td>
            <td>华为笔记本</td>
            <td>4999</td>
            <td>4</td>
            <td>19996</td>
        </tr>
        <tr>
            <td colspan="3" align="center">共计所需金额</td>
            <td>10</td>
            <td>49991</td>
        </tr>


    </table>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

七:HTML注册表单

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册编写</title>
</head>

<body>
    <h3>用户注册编写</h3>
    <form action="rigister.php" method="POST">
        <p>
            <label for="username">账号:</label>
            <input type="username" id="username" name="username" placeholder="用户名不能超过8个字符">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="密码不能超过8个字符">
        </p>
        <p>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址">
        </p>
        <p>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="5" max="10">
        </p>
        <p>
            <label for="">课程:</label>
            <select name="" id="">
            <optgroup label="前端">
                <option value="">html</option>
                <option value="">css</option>
                <option value="">javascript</option>
            </optgroup>
            <optgroup label="后端">
                <option value="">php</option>
                <option value="">mysql</option>
                <option value="">laraver</option>
            </optgroup>
        </select>
        </p>
        <p>
            <label for="">爱好:</label>
            <input type="checkbox" name="bobby[]" value="game" id="game"><label for="game">打游戏</label>
            <input type="checkbox" name="bobby[]" value="program" id="program"><label for="program">敲代码</label>
            <input type="checkbox" name="bobby[]" value="movies" id="movies" checked><label for="movies">看大片</label>
        </p>
        <p>
            <label for="">性别:</label>
            <input type="radio" name="gender" id="girl"><label for="">女生</label>
            <input type="radio" name="gender" id="male"><label for="">男生</label>
            <input type="radio" name="gender" id="secrced" checked><label for="">保密</label>
        </p>
        <p>
            <label for="">按钮:</label>
            <input type="submit" value="提交">
            <input type="reset" value="重填">
            <input type="button" value="按钮">
            <button>提交</button>
        </p>
    </form>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

八:课程总结

  1. 有序列表ol,无序列表ul,定义列表dl,dd,dt

  2. h1-h6,h1标签字体最大,h6标签字体最小

  3. html语言不分大小写

  4. 表格里的cellspacing表示单元格内容与其边框之间的距离,cellpadding表示单元格之间的距离, colspan表示合并列,rowspan表示合并行,

  5. 表单的type属性类型有很多种敲代码的时候要选择相对的类型,max表示用户输入字段最大值限制,min表示输入字段的最小值限制,checked表示默认选项放在input标签内不要混淆。

  6. 直接写button标签也可以提交网页数据

  7. 感谢老师百忙之中检阅(ps:作业写了2个小时以上,我太难了)


批改状态:合格

老师批语:作业版式相当规范, 课程内容总结的也好, 案例也很实用经典, 非常的用心, 不错, 已做了推荐....
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学