美文网首页
常用的HTML标签介绍

常用的HTML标签介绍

作者: tolstory | 来源:发表于2018-10-18 11:54 被阅读0次

    一、基础标签

    1.<!DOCTYPE>定义文档类型
    2.<html> 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
    3.<head>代表关于文档元数据的一个集合,包括脚本或样式表的链接或内容。
    4.<title>定义文档的标题,将显示在浏览器的标题栏或标签页上。该元素只能包含文本,包含的标签不会被解释。
    5.<body>定义文档的主体
    6.<h1>~<h6>标题,h1字体最大最醒目,h6为最小标题。
    7.<br>折行符号,空标签。
    8.<hr>水平线。
    9.<link>用于链接外部的 CSS 到该文档。
    10.<style>用于内联CSS样式。

    二、表单

    1.<form>定义html表单,常用于用户输入HTML表单。
    <form action="form_action.asp" method="get">
    action:表明提交数据的路径。
    method:规定提交数据的方式。
    2.<input>标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
    常用的有如下几种:
    (1)输入文本域:

    <form>
    姓名:
    <input type="text" name="fullname">
    </form>
    

    (2)输入密码:
    举例:

    <form>
    密码:
    <input type="password" name="password">
    </form>
    

    效果:


    输入密码

    (3)复选框
    举例:

    <form>
    我喜欢自行车:
    <input type="checkbox" name="Bike">
    <br />
    我喜欢汽车:
    <input type="checkbox" name="Car">
    </form>
    

    效果如下:


    复选框

    (4)单选按钮
    需要注意的是只有在两个input标签中设置name为相同名称时,才能达到复选效果。
    举例:

    <form>
    男性:
    <input type="radio" checked="checked" name="Sex" value="male" />
    <br />
    女性:
    <input type="radio" name="Sex" value="female" />
    </form>
    

    效果:


    单选框

    (5)文本域
    举例:

    <textarea rows="10" cols="30">
    

    rows表示行数,cols表示列数。
    效果:


    文本域

    (6)按钮
    举例:

    <input type="button" value="爱改什么改什么">
    

    效果:


    按钮

    三、框架

    1.<frame>定义框架集的窗口或框架。
    2.<frameset>定于框架集。
    3.·<noframes>定义针对不支持框架的用户的替代内容。
    4.<iframe>定义内联框架。
    举例:

    <iframe src="https://www.qq.com" frameborder=0 >QQ</iframe>
    <p>一些老的浏览器不支持 iframe。</p>
    <p>如果得不到支持,iframe 是不可见的。</p>
    

    效果:


    用iframe标签打开腾讯网

    四、列表

    1. <ol>定义一个有序列表。
    2. <ul>定义一个无序列表。
    3. <li>定义列表中的列表项。
    4. <dl>定义一个定义列表(一系列术语和其定义)。
    5. <dt>代表一个由下一个 <dd> 定义的术语。
    6. <dd>代表出现在它之前术语的定义。

    五、表格

    1. <table>定义多维数据。
      2.<caption>表格标题
      3.<colgroup>代表表格中一组单列或多列。
      4.<col>代表表格中的列。
    2. <tbody>代表表格中的一块具体数据(表格主体)
    3. <thead>表头
      7.<tfoot>表格中的列摘要(表尾)。
    4. <tr>代表表格中的行。
      9.<td>表格中单元格。
      10.<th>表格中头部的单元格。

    以上信息参考MDN中的html文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list

    相关文章

      网友评论

          本文标题:常用的HTML标签介绍

          本文链接:https://www.haomeiwen.com/subject/wlejzftx.html