HTML常用标签总结 - 前端学习总结

Home > List of blog posts > HTML常用标签总结

Blogger Information

Blog 44

fans 0

comment 0

visits 35774

Special Recommendation

More>

Related recommendations

HTMl常用标签一般分为以下这几类

1. 标题与段落

例如：h1，p

2. 文本修饰

例如：em，strong

3. 列表

例如：ul>li (无序) ， ol>li （有序） ,dl>li （定义）

4. 表格

例如：table>tr>td

5. 表单

例如：from>label>input

6. 图片与媒体

例如：img , vedio

7. 布局标签

8. 其它...

实例

<!DOCTYPE html>
<html lang="en">
    <!-- HTML头部标签 -->
<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>
    <!-- 
        HTML常用的标签
        1. 标题与段落
            <h1><h2><h3><h4><h5><h6>常用于修饰标题
            <p>段落标签，块级元素
        2. 文本修饰
            
        3. 列表
        4. 表格
        5. 表单
        6. 图片与媒体
        7. 布局标签
        8. 其它...
        
     -->

     
     <div>
        <h1>我是H1标签</h1>    
        <h2>我是H2标签</h2>
        <h3>我是H3标签</h3>
        <h4>我是H4标签</h4>
        <h5>我是H5标签</h5>
        <h6>我是H6标签</h6>
        <p>我是段落P标签</p>
    </div>

    <div>
        <hr>
        hr标签是单标签，一条水平线
        <hr>
    </div>

    <div>
        <p><strong>我是文本加粗标签strong</strong></p>
        <p><em>我是斜体标签em</em></p>
    </div>
        
    <hr>
   
    <!-- 列表 -->
    <div>
        <!-- 无序列表 -->
        <h3>无序列表</h3>
        <ul>
            <li>我是无序列表的第一行</li>
            <li>我是无序列表的第二行</li>
            <li>我是无序列表的第三行</li>
        </ul>
        <!-- 有序列表 -->
        <ol>
            <li>我是有序列表的第一行</li>
            <li>我是有序列表的第三行</li>
            <li>我是有序列表的第二行</li>
        </ol>

        <!-- 定义列表 -->
        <dl>
            <dt>我是定义列表的dt标签</dt>
            <dd>我是定义列表的dd标签</dd>
        </dl>
    </div>  
    
    <hr>
   
    <!-- 4. 表格 -->

    <table border="1" cellpadding="0" cellspacing="0" width="500" height="150">

        <caption>购物车</caption><!-- table里的标签 -->
        <!-- 表头 -->
        <thead>
            <tr bgcolor="lightblue">
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>用途</th>
            </tr>
        </thead>
        
        <tr>
            <td align="center">1</td>
            <td align="center">暖手宝一个</td>
            <td align="center">30</td>
            <td align="center">1</td>
            <td align="center">被窝太冷</td>
        </tr>
        <!-- align="center"可以用到tr上再加方便 -->
        <tr  align="center">
            <td>2</td>
            <td>笔记本电脑一台</td>
            <td>5000</td>
            <td>1</td>
            <td>学php编程</td>
        </tr>
        <tr  align="center">
            <td>3</td>
            <td>充气娃娃一个(波波款)</td>
            <td>2000</td>
            <td>1</td>
            <td>孤枕难眠</td>
        </tr>
    </table>
       
    <hr>

    <!-- 5. 表单 -->
    <h2>用户注册</h2>
    <form action="" method="GET"> <!-- action为传值的URl method为传值方式（GET/POST） -->
        <div>
            <!-- 用户名: -->
            <label for="username">用户名:</label>
            <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 -->
            <!-- placeholder: 用户于设置文本框的提示文本 -->
            <input type="text" id="username" name="username" value="" placeholder="不少于6位">
        </div>

        <div>
            <!-- 可以将input控件写在label里，可以不用做for，id绑定 -->
            <label>
                <!-- password类型,输入的内容以*号占位符代替 -->
                密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
            </label>
        </div>
        <div>
            <label>
                确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30">
            </label>
        </div>

        <div>
            <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 -->
            <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 -->
            <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label>
            <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
        </div>

        <div>
            <!-- 复选框 -->
            <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 -->
            <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 -->
            <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label>
            <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label>
            <!-- 同样也是使用checked设置默认值,可同时设置多个 -->
            <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label>
        </div>

        <div>
            <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 -->
            <label for="edu">您的学历:</label> 
            <select name="" id="edu" value="">
                <option value="1">幼儿园算吗?</option>
                <!-- selected设置默认项 -->
                <option value="2" selected>小学没毕业</option>
                <option value="3">不好意思,博士后</option>
            </select>
        </div>

        <!-- 文本域,其实就是多行文本框 -->
        <div>
            <label for="common">请留言:</label>
            <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea>
        </div>
        
        <!-- 按钮 -->
        <input type="submit" value="提交">

        <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 -->
        <input type="reset" value="重置">

        <!-- 推荐使用语义化的button标签 -->
        <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 -->
        <button type="button">注册</button>
    </form>
    
    <!-- 6. 图片与媒体 -->

    <div>
        <!-- 图片标签是单标签,引入的是外部的资源
        src="图片地址", 支持本地和网络url地址
        alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 -->
        <img src="static/images/zly.jpg" alt="颖***" width="200">
        
        <!-- 播放视频:controls显示播放控件, 支持宽度设置 -->
        <video src="static/images/demo.mp4" controls="controls" width="400"></video>
    </div>
      
</body>
</html>

运行实例 »

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

上述代码中设计的知识点总结：

1.HTML中的标签类别
2.HTML中各种单双标签的使用示例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

DOM-概念

2019-01-20 16:55:37