html页面标签元素总结

  前言

    学习python的flask架构对于有丁点C功底的人来说代码问题研究研究还能勉强跟得上脚步，但是html前端就蒙圈了，完全小菜比一枚。故此总结下我目前接触过的标签以及经常需要用的小功能(例如下拉框，单选框等等)。本篇仅从为w3c官网http://www.w3school.com.cn/收藏以供自己日后方便使用。


PART  I ：常用的html标签


    1.1 基础篇

             标签           描述
            <!DOCTYPE>         定义文档类型
            <!--XXX-->         定义注释
             <html>         定义html文档
             <title>         定义文档的标题
             <body>         定义文档主题
              <hr>         定义水平线
              <br>         定义简单的折行

    

    1.2 表单篇

         标签           描述
        <form>
定义供用户输入的HTML表单
        <label>定义input元素的标注
        <input>  定义输入的控件
        <button>定义按钮
        <select>定义选择列表(下拉列表),基本与<option>配合使用
        <option>定义选择列表中的选项
        <textarea>定义多行的文本输入控件


    1.3 表格篇 

标签描述
<table>定义表格
<caption>定义表格标题。
<th>定义表格中的表头单元格。
<tr>定义表格中的行。
<td>定义表格中的单元。
<thead>定义表格中的表头内容。
<tbody>定义表格中的主体内容。
<tfoot>定义表格中的表注内容（脚注）。


    1.4 框架篇

标签描述
<frame>定义框架集的窗口或框架
<frameset>定义框架集
<iframe>定义内联框架


    1.5 其他标签 

图像、音视频类
<img>定义图像
<map>定义图像映射
<audio>定义声音内容
<video>定义视频


链接类
<a>
定义锚<a href='链接地址'>content</a>
<link>定义文档与外部资源的关系


列表类
<ul>定义无序列表
<ol>定义有序列表
<li>定义列表项目


样式/节

<div>定义文档中的节
<span>定义文档中的节


编程类
<script>定义客户端脚本




PART II： 常用的html功能实现


    功能1：下拉菜单

    实现代码如下：

<div>
<label>角色：</label>
<select name='role' id='role'>
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
</div> <!--role-->

    

    功能截图：

wKiom1hiEeLyaWuIAAAiS7ekoUg378.png


    功能2：单选框(主要用于男女性别选择、锁定与否选择等)

        核心：记得单选框要设置value的值


    实现代码如下：

 <td>status<input type='radio' name='status' value='unlock'>unlock<input type='radio' name='status' value='lock'>lock</td>

    

    功能实现截图：

wKioL1hiEw6TDOusAAAgSLzf8Vg756.png


    功能三：展示信息颜色控制

        主要用于渲染提示信息，用红色使其更加醒目。

    实现代码如下

<div style="color:red">
<p> 信息展示 </p>
</div>

    

    功能实现截图

wKioL1hsa2_SdF_uAAAg1wnyQww377.png