html常用标签

2018-12-06 07:32:03来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1、em/strong/span

  <span>      正常字体内容,设置与普通字体不同的样式

  <em>      斜体,表示强调语义

  <strong>      加粗字体,表示强调语义

  例子:

    <p>第一段</p>
    <p><span>第二段<span></p>
    <p><em>第三段</em></p>
    <p><strong>第四段</strong></p>

       

 

2、q/blockquote

  <q>         引用一句话,给这句话加双引号

  <blockquote>    缩进样式

  例子:

    <p><q>感情有着极大的鼓舞力量</q><p>
    <p><blockquote>感情有着极大的鼓舞力量</blockquote></p>

      

 3、br/&nbsp

    <br>      换行

    &nbsp      空格,html代码中输入多个空格或回车,在浏览器中只占一个空格位置,要想输入多个空格,可以使用多个&nbsp;

    例子:

 

    <p>一行白鹭上青
      天</p>
    <p>一行白鹭上青    天</p>
    <p>一行白鹭上青&nbsp&nbsp&nbsp&nbsp天</p>
    <p>两岸猿声啼不住</p>
    <br>
    <p>风萧萧兮易水寒</p>

      

4、hr    水平横线

    例子:

    <p>风萧萧兮易水寒</p>
    <hr />
    <p>壮士一去兮不复还</p>

      

5、address    一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签  

    例子:

    <p>公司地址:<address>广东省深圳市科技园</address></p>

      

 6、ul    没有前后顺序的信息列表

    例子:  

    <ul>
      <li>第一个</li>
      <li>第二个</li>
      <li>第三个</li>
    </ul>

    

7、ol    有序列表

     例子:

    <ol>
      <li>有序1</li>
      <li>有序2</li>
      <li>有序3</li>
    </ol>

      

    注:有序与无序的差别:(1)有序列表有start属性 ,最大序号为999 ;无序列表无start属性(2)有序列表前面有序号(序号形式由type属性值决定),无序列表前面没序号,只有圆点(圆点样式由type属性值决定)

 

8、表格元素

  (1)table:   整个表格以<table>标记开始、</table>标记结束。

  (2)tbody:  如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

  (3)thead:  定义表格的表头。该标签用于组合 HTML 表格的表头内容。

  (4)tr:  表格的一行,所以有几对tr 表格就有几行。

  (5)th:  表格的头部的一个单元格,表格表头。

  (6)td:  表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

  (7)caption   表格标题

    例子:

    <table>
      <thead>
        <tr>
          <td>第一</td>
          <td>第二</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>表头一</th>
          <th>表头二</th>
        </tr>
        <tr>
          <td>数据一</td>
          <td>数据二</td>
        </tr>
      </tbody>
    </table>

      

 

    可以看到这个表格是没有边框的,那么可以设置一下table的css:<table style="border: 1px solid blue">,效果如下:

      

 9、<a>

    <a>  超链接,默认在当前窗口打开;target="_blank":在新窗口打开。

      <a href="目标网址" title="鼠标放在上面显示的文本">链接显示的文本</>

      <a href="目标网址" title="鼠标放在上面显示的文本" target="_blank">链接显示的文本</a>

     例子:

      <a href="http://www.baidu.com" title="百度">给我一首歌的时间</a>
      <a href="http://www.baidu.com" title="百度一下" target="_blank">给我一首歌的时间</a>

      

10、img

    <img src="图片的地址" title="鼠标放在图片上显示的文本" alt="图片加载失败时显示的文本">

    例子:

    <img src="/info/upimg/allimg/181206/0I20UG4-0.jpg" title="我的图片" alt="图片加载失败">

      

11、form表单

    <form>  以<form>开始,以</form>结束;

    <action>  说明浏览器输入的数据要传送到的地方

    <method>   数据传送方式,post或者get

    例子:

    <form method="post" action="html.jsp">
      <label for="username">用户名:<input type="text" name="username" id="username"/></label>
      <label for="password">密码:<input type="password" name="password" id="password"/></label>
      <input type="submit" value="确定" name="submit" />
      <input type="reset" value="重置" name="reset" />
    </form>

     

 

12、textarea文本域

    <textarea cols="列数" rows="行数">默认值<textarea>

    注:col和row可以使用height和width替代

       

 

13、单选框与复选框

    <input type="radio/checkbox" value="值" name="名称">

      (1)radio  单选框

      (2)checkbox  多选框

      (3)value    提交到服务器的数据

      (4)name    控件名字,作为单选框时该值要一致

       

14、select下拉框

    <option value="提交给服务器的值" selected="selected">显示的值</option>    

    selected="selected"表示下拉框默认选择该选项

    multiple="multiple"表示下拉框可以进行多选

    例子: 

    <form action="html.jsp" method="post">
      <span>请选择你所在的地区:</span>
      <select multiple="multiple">
      <option value="广东">广东</option>
      <option value="北京" selected="selected">北京</option>
        <option value="上海">上海</option>
        <option value="天津">天津</option>
      </select>
    </form>

      

      

15、使用提交按钮,提交数据

    <input type="submit" value="提交" />

    注:type为submit时,才会有提交按钮,value则是按钮显示的值

    例子:

    <form action="html.jsp" method="post">
      <span>性别:<span>
      <input type="text" />
      <input type="submit" value="提交" />
    </form>

      

 16、表单重置按钮reset

    <input type="reset" value="重置" />

    例子: 

    <form method="post" action="html.jsp">

      <label for="phone">电话号码:<input type="text" id="phone"/></label>
      <label for="name">姓名:<input type="text" id="name"/></label>
      <input type="reset" value="重置" />

    </form>

      

    点击重置按钮后:

      

17、label标签

    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

    例子:

    <label>你对什么运动感兴趣</label><br>
    <label for="run">慢跑<input type="checkbox" id="run" /></label>
    <label for="pa">登山<input type="checkbox" id="pa" /></label>
    <label for="boss">篮球<input type="checkbox" id="boss" /></label>

       

 

 

    

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS特殊性、继承和层叠

下一篇:HTML中令人惊喜的全局属性