zoukankan      html  css  js  c++  java
  • HTML常用标签(一)

    HTML基本标签

    一、 什么是HTML?
         超文本标记语言
         网页的主体结构

        浏览器:“解释和执行”HTML源码的工具

         目前网页中常用的html标准是xhtml 1.0.

         HTML的结构:

                   <html>

                        <head> -------头部
                            <title></title>
                        <head>
                        <body> -------主体部分
                      </body>
                   </html>

            

                  主体部分可包括文本,图像,链接等信息。


       1.使用<title标签>
            网页摘要信息利于浏览器解析和搜索引擎搜索

           例:<title>搜狐-中国最大的门户网站</title>

       2.使用<meta>标签
        (1)描述文档类型和字符编码
        (2)描述搜索关键字和描述

          例:
            <meta http-eqiv="Content-Type" content="text/html;charset=utf-8" />
            <meta name="keywords" content="淘宝,网上购物,在线交易,交易市场"/>
           <meta name="description" content="淘宝网-亚洲最大、最安全的网上交易平台,提供各类服饰、美容。家居、数码、......"/>
           可以在关键字和描述里重复关键词提高搜索引擎搜到的排名

       3.HTML标签分类
         块级标签:显示为块状,前后隔一行。(块级元素在显示器上单独占一行)
         行级标签:按行逐一显示。(行级元素逐一分布在显示器上)

        分类好处:方便以后的布局设计。

        根据使用场合,块级标签又分为
                                               基本块级标签
                                               常用于布局的块级标签

        基本块级标签:<h1></h1> 标题标签 放大标题,前后隔一行。
                  < p></p> 段落标签,前后换行,并隔一行。
                 <hr/> 水平线标签,用于内容分割,单闭合标签,前后隔一行

      4.列表
               一种内容的表现形式,把内容排好列在显示器上展示出来,使内容的层次化更清晰(HTML语言化)
            也是常用于布局的块级标签。

           列表的分类: 无序列表 <ul><li></li></ul>
          有序列表 <ol><li></li></ol>
          自定义列表 <dl><dt></dt><dd></dd></dl>

      4.1 有序列表(列表项前面有序号,前面不能随意调换位置)
                    <ol> ----------声明有序列表
                     <li></li> ----------声明列表项
                      ......
                   </ol>
                     例如: <h1>注册步骤</h1>
                     <ol>
                           <li>填写信息</li>
                           <li>收地址邮件</li>
                           <li>注册成功</li>
                    </ol>

                   有序列表的类型:type="" 看type取何值
                               1 使用数字作为项目符号,默认取值
                             a/A 使用英文字母作为项目符号(选大小写)
                              I/i 使用罗马字母作为项目符号(选大小写)

      4.2 无序列表(列表项前面没有序号,只有圆点等符号,可以随意调换位置)
              <ul> ----------声明无序列表
                     <li></li> ----------声明列表项
                     ......
              </ul>
               例如: <h3>新人上路指南 </h3>
               <ul>
                       <li>如何激活会员名?</li>
                       <li>如何注册贵美会员?</li>
                      <li>注册时密码设置有什么要求?</li>
                      <li>贵美认证</li>
             </ul>

              无序列表的类型:type="" 看type取何值

             disc 列表项前面为实体圆心,默认值
             circle 列表项前面为空心圆
             square 列表项前面为实体方心

      4.3 自定义列表(列表项前面没有符号,常用于图文混编场合)
           <dl>
              <dt>标题</dt>
              <dd>描述1</dd>
              ……
         </dl>
         一个dt列表项,后面可以有多个dd列表项内容,直至遇到下一个dt为止。

      5. 表格:一次描述一列数据
        <table>--表格
               <tr> --行
                     <td> --列(单元格)
                     </td>
              </tr>
       </table>

      6. 表单:用于提交用户信息,一般与table一起使用,用table标签来给表单元素布局。
         <form>
                      ……
        </form>

      7.<div> 分区标签,常作容器,划分逻辑区域。
          <div>
              ......
         </div>

        实际开发中常用的四种块状结构:
       1、div-ul(ol)-li :常用于分类导航或菜单等
       2、div-dl-dt-dd :常用于图文混编的场合
       3、table-tr-td :常用于图文布局或显示数据
       4、form-table-tr-td:常用于布局表单
      
      8. 行级标签<img> 图像标签,专门用于引用图像

               <img src="path" alt="text" title="text" width="x" height="y" />
                         图像地址 替代文本 图像悬停提示文字 图像宽度 图像高度

              例如:
                   <img src="image/hetao.jpg" width="160" height="160"
             alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>

      9. 换行标签<br/> 前后不换行 与<p>作对比

      10. 字体样式标签:
           字体样式标签
               加粗:<strong>…</strong> 删除线<del>…</del>
               斜体:<em>…</em> 下划线<ins>…</ins>

      11. 范围标签<span> :显示某行内的独特样式。
          <span></span>

      12. W3C提倡的web标准:
              W3C提倡的Web结构:
             1、内容(结构)和表现(样式)分离
             2、HTML内容结构要求语义化

      13. XHTML 1.0基本规范

            标签名和属性名称必须小写
            HTML标签必须关闭
           属性值必须用引号括起来
           标签必须正确嵌套
           必须添加文档类型声明

  • 相关阅读:
    Windows 网络监测ping IP输出时间
    python
    遇见问题汇总
    在路上积累
    Condition
    ReentrantReadWriteLock
    AbstractQueuedSynchronizer
    jmeter使用
    使用VisualVM监控java进程
    CNVD漏洞证书(2)
  • 原文地址:https://www.cnblogs.com/ithome0222/p/7683519.html
Copyright © 2011-2022 走看看