• 常用HTML标签整理


    1、标题标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    2、段落标签

    <p>文本段落</p>

    3、列表标签

    //无序列表
    <ul>
    <li></li>
    <li></li>
    <li></li>
    ……
    </ul>
    //有序列表
    <ol>
    <li></li>
    <li></li>
    <li></li>
    ……
    </ol>
    标题
    正文
    正文
    //定义列表
    <dl>
    <dt>标题 </dt>
    <dd>正文</dd>
    <dd>正文</dd>
    </dl>

    4、预格式文本标签

    //常用于表示计算机源代码,会保留空格和换行符,文本呈现等宽字体
    <pre></pre>

    5、引用标签

    //用于大段引用文本,会从常规文本中分离出来,左右两边进行缩进,有时会使用斜体
    <blockquote></blockquote>
    //用于小段引用文本(如诗句、小句子等,浏览器中通常自动用“”标记起来)
    <q></q>
    //用于引用书名、网站名、作品名(浏览器中通常自动变为斜体字体)
    <cite></cite>

    6、跨越多个字符标签

    <span></span>

    7、超链接标签

    //返回顶部
    <a href="#"></a>
    //target="_blank"打开一个新的标签页
    <a href="" target="_blank"></a>

    8、插入图片标签

    /*src属性值:当图片与HTML文件在同一级文件夹中时,可直接输入图片名
    当图片在HTML文件下一级文件夹中时,可输入路径,如“img/12.png”
    当图片与HTML在不同的文件夹中时,路径格式为“../img/12.png”,html跳出本文件夹链接到图片文件夹
    alt="" 提示图片信息*/

    <img src="" alt="">

    9、划分区域、区块标签

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

    10、强调标签

    //(文字加粗)
    <strong></strong> //语义上更加强调
    <b></b>
    //(文字倾斜)
    <em></em> // 语义上更加强调
    <i></i>

    11、定义缩写

    //鼠标指针移到abbr元素上时显示出简称/缩写的完整版
    <abbr title="缩写的文本"></abbr>

    12、图像标签

    <!-- figure 标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。
    figcaption元素被用来为 figure 元素定义标题, 元素应该被置于 figure 元素的第一个或最后一个子元素的位置。-->

    <figure>
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
    </figure>

    13、插入视频

    <!--controls[播放可控],autoplay[自动播放],loop[重复播放]-->
    <video src="" controls autoplay loop></video>

    14、插入音频

    <!--controls[播放可控],autoplay[自动播放],loop[重复播放]-->
    <audio src="" controls autoplay loop></audio>

    15、表格

    <table>
    <caption></caption> //表示表格名称,写在table下,文字自动居中
    <thead>
    <tr>
    <th></th> //表头标签,文字加粗
    ……
    </tr>
    </thead>
    <tbody>
    <tr> //[表示表格的一行]
    <td></td> //[表示表格的每一个单元格],属性colspan="需要横向合并的单元格个数 ";rowspan="需要纵向合并的单元格个数 "
    ……
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td></td>
    ……
    </tr>
    </tfoot>
    </table>

    16、form表单标签

    //action为提交到后台的地址,method为提交方式 get | | post
    <form action="" method=""> //get将在地址栏中显示出name取值,post(更安全)可在地址栏中隐藏name取值

    账号:
    <input type="text" placeholder="请输入账号"> //placcholder默认值

    密码:
    <input type="password" maxlength="6" > //maxlength控制密码最大长度

    按钮:
    <input type="button" value="按钮1"> //按钮,默认不可以发起提交
    <input type="reset"> // 重置按钮
    <input type="submit"> //提交按钮 提交到action地址
    <button>我是HTML5新的可以发起提交的按钮</button>

    单选:
    男:<input type="radio" name=“sex” checked> //checked默认选项 设置相同name实现单选
    女:<input type="radio" name=“sex”>

    多选:
    足球:<input type="checkbox" name=”sports“>
    篮球:<input type="checkbox" name=”sports“>
    乒乓球:<input type="checkbox" name=”sports“>

    下拉列表:
    <select name="" id="">
    <option value="">北京</option>
    <option value="">天津</option>
    <option value="">河北</option>
    </select>

    //点击文字时可关联到选框(通过id关联):
    <label for="football ">足球: </label>
    <input type="checkbox" name=”sports“ id="football"> //id具有唯一性
    <label for="basketball "> 篮球:</label>
    <input type="checkbox" name=”sports“ id="basketball">
    <label for="">乒乓球: </label>
    <input type="checkbox" name=”sports“ id="">

    //多行文本框:
    <textarea name="" id="" cols="30" rows="10"></textarea> //cols、rows控制宽高,不建议使用,用css控制

    </form>

    17、articel标签

    //装载显示一个独立的文章内容,可以嵌套,则内层的articel对外层的articel标签有隶属的关系。如:一个博客文章,可以用articel显示,其中一些评论可以以articel的形式嵌入其中。
    <articel>
    <h1>标题</h1>
    <p>文章</p>
    <articel>评论1。。。</articel>
    <articel>评论2。。。</articel>
    </articel>

    18、section标签

    //定义文档中的节(section、区段),比如章节、页眉、页脚或文档中的其他部分
    <section>
    <h1>章节1</h1>
    <p>内容。。。</p>
    </section>
    <section>
    <h1>章节2</h1>
    <p>内容。。。</p>
    </section>

    19、header标签

    可以用来装载网页头部,如导航条

    20、footer标签

    可以用来装载网页页脚,如友情链接、法律条款、联系信息等

    <!--表示主要的导航项-->
    <nav>
    <a href="" ></a>
    <a href="" ></a>
    <a href="" ></a>
    </nav>
    <nav>
    <ul>
    <li><a href="" ></a> </li>
    <li><a href="" ></a> </li>
    <li><a href="" ></a> </li>
    </ul>
    </nav>
  • 相关阅读:
    ASP.NET MVC框架(第四部分): 处理表单编辑和提交场景 【转】
    ASP.NET MVC框架 (第二部分): URL路径选择 【转】
    ASP.NET MVC框架(第三部分): 把ViewData从控制器传到视图 【转】
    SNS介绍
    测试代码在实际类的内部写还是外部写的思考
    敏捷开发:软件与文档
    TDD是开发方法还是开发方法学?
    命名空间元素的封装性
    个人感觉
    呜呜....可惜...呜呜,也谈谈测试驱动开发
  • 原文地址:https://www.cnblogs.com/tortoises/p/7434604.html
Copyright © 2020-2023  润新知