zoukankan      html  css  js  c++  java
  • html部分常用标签的含义及作用

    1.a 超链接

    <a> 标签定义超链接,用于从一张页面链接到另一张页面。<a> 标签中必须提供 href 属性或 name 属性,它指示链接的目标。

    例如:点击 百度一下 跳转到www.baidu.com

    <a href="http://www.baidu.com.cn/" target="_blank">百度一下</a>

    如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。

                将图片作为链接

    <a href="http://www.baidu.com.cn/"><img src="baidu.jpg" /></a>

                链接到同一页面的不同位置,这里是链接到C4区域

    <p><a href="#C4">查看 Chapter 4。</a><p>

    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>

    <h2><a name="C4">Chapter 4</a></h2>
    <p>This chapter explains ba bla bla</p>

     

    2.div 

     

    <div> 是一个块级元素,常配合CSS使用,为网页中最常用的分区标签。它的内容会自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

     

    可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。在css中,用#xxx{ }来为id xxx添加属性,用.xxx{ }来为class xxx添加属性。

     

    3.span

    <div>与<span>区别<div>是一个块级(block-level)元素,它包围的元素会自动换行。而<span>仅仅是一个行内元素(inline element),在它的前后不会换行。

    <span>没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就可以使用<span>元素。可以对同一个 <span> 元素应用 class 或 id 属性,然后在css中为其添加属性。

    例如:          div会让每张图片各占一行,span则会让三张图片排列在一行中

    <p>div标记不同行</p>

    <div><img src="0550372.jpg" border="0"/></div>

    <div><img src="0550372.jpg" border="0"/></div>

    <div><img src="0550372.jpg" border="0"/></div>

    <p>span标记在同一行</p>

    <span><img src="0550372.jpg" border="0" /></span>

    <span><img src="0550372.jpg" border="0" /></span>

    <span><img src="0550372.jpg" border="0" /></span>

                span可以在一段内容中赋予自己的属性,这里是让文字显示不同的颜色

    <p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛,我的父亲有 <span style="color:darkolivegreen">碧绿色</span> 的眼睛</p>

     4.form

    <form> 标签用于为用户输入创建 HTML 表单。

    表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含 menustextareafieldsetlegend 和 label 元素。表单用于向服务器传输数据。

     例如:            创建一个密码域
    <form>
    用户:<input type="text" name="user"><br />
    密码:<input type="password" name="password">

    </form>

                创建一个复选框,用户可以选中或取消选取复选框。

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

               创建一个单选摁钮,用户可以选择其中某一选项。

    <form>

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

    女性:<input type="radio" name="Sex" value="female" />

    </form>

               简单的下拉摁钮,点击会弹出所有选项,用户可以选择某一项,然后会收回,并显示选择项

    <form>
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected="selected">Fiat</option> 
    <option value="audi">Audi</option>
    </select>
    </form>

    selected="selected"使摁钮带有预选值,让Fiat变成默认选项

             创建一个文本域,用户可以在文本域中写入文本,宽度为30高度为10

    <p>
    This example cannot be edited
    because our editor uses a textarea
    for input,
    and your browser does not allow
    a textarea inside a textarea.
    </p>

    <textarea rows="10" cols="30">
    The cat was playing in the garden.

             创建一个摁钮,可以给摁钮附加各种属性

    <input type="button" value="Hello world!">

    value显示摁钮上的内容

             创建一个带有提交摁钮的表单
    <form action="http://www.baidu.com.cn/">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>

    如果点击提交,表单数据会被发送到百度的页面。

    5.table

    <table> 标签定义 HTML 表格。

    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

    tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

    例如:在表格中可以加入表格或列表

    <table border="1">
    <tr>
    <td>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    </td>
    <td>这个单元格包含一个表格:
    <table border="1">
    <tr>
    <td>A</td>
    <td>B</td>
    </tr>
    <tr>
    <td>C</td>
    <td>D</td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>这个单元格包含一个列表
    <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    </ul>
    </td>
    <td>HELLO</td>
    </tr>
    </table>

             跨两格或跨两列的表格

    <h4>单元格跨两格:</h4>
    <table border="1">
    <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
    </tr>
    <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
    </tr>
    </table>

    <h4>单元格跨两列:</h4>
    <table border="1">
    <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
    </tr>
    <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
    </tr>
    <tr>
    <td>555 77 855</td>
    </tr>
    </table>

    6.nav

    <nav> 标签定义导航链接的部分。

    例如:

    <nav>
    <a href="https://www.baidu.com/">百度</a> |
    <a href="https://www.sogou.com/">搜狗</a> |
    <a href="http://www.google.cn/">谷歌</a> |
    <a href="https://www.qq.com/">腾讯</a>
    </nav>

    7。blockquote

    <blockquote> 标签定义块引用。

    <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

     

     

     

  • 相关阅读:
    数据集冲突
    苹果如何设计iPad的商业模式
    IT部门应如何制定技术路线图
    关于软件测试
    c#写文件
    正则表达式语法及常用表达式。
    使用Mysql的Replication功能实现数据库同步
    CMMI=大象关冰箱?
    asp.net 中RegularExpressionValidator的bug|IE的bug?
    Singleton 模式的Java和C#的实现方法
  • 原文地址:https://www.cnblogs.com/qq1312583369/p/9836332.html
Copyright © 2011-2022 走看看