首页 > 代码库 > html

html

1、html的简介

   *什么是html?

       -HyperText Markup Language:超文本标记语言,网页语言

      **超文本:超出文本的范畴,使用html可以轻松实现这样的操作

      **标记:html所以的操作都是通过标记实现的,标记就是标签,<标签名称>

      **网页语言:

  *html的规范

    1、一个html文件开始和结束标签<html></html>

    2、html包含两部分内容

        (1)<head>设置相关信息</head>

        (2)<body>显示在页面上的内容都写在body里面</body>

    3、html的标签又开始和结束

        -<head></head>

   4、html不区分大小写

   5、有些标签没有结束标签,在标签内结束

       比如:换行<br/>

             一条线<hr/>

 

****html的操作思想(****************)

   网页中有很多数据,不同的数据可能需要不同的显示效果,这个时候需要使用标签把要操作的内容的数据包起来(封装起来),

   通过修改标签的属性值实现标签内数据样式的变化。

一个标签相当于一个容器,想要修改容器内数据的样式,只需要改变容器的属性值,就可以实现容器内数据样式的变化。

 

html常用的标签

2、文字标签和注释标签

    *文字标签:修改文字的样式

         -<font></font>

         -属性

         *size:文字的大小 取值范围1-7

         *color:文字颜色

              -两种表示方式

                  **英文单词:red  green  blue

                  **使用十六进制数表示#ffffff:RGB

                         -通过工具实现不同的颜色  #66cc66

    *html的注释标签

        -Java注释有三种

         -html注释<!--注释的内容-->

3、标题标签、水平线标签和特殊字符标签

      *标题标签

            -<h1></h1>

            -从h1到h6,大小是依次变下,同时会自动换行

      *水平线标签

            -<hr/>

            -属性

                **size:水平线的粗细

                **color:水平线的颜色

            -代码

                <hr size="5" color="blue" />

       *特殊字符

             -想要在页面上显示这样的内容  <html>:是网页的开始!

             -需要对特殊字符进行转义   

                     * <  :&lt;

                     * >  : &gt;

                     *&  : &amp;

                     * 空格 :&nbsp

4、列表标签

       -比如现在显示这样的效果  

        **<dl></dl>:表示列表的范围

              **在dl里面 <dt></dt>:上层内容

              **在dl里面 <dd></dd>:下层内容

      -代码     

         <!-- 列表标签 -->
            <dl>
                 <dt>传智播客</dt>
                     <dd>财务部</dd>
                     <dd>学工部</dd>
                    <dd>人事部</dd>
           </dl>

     -

            <!-- 有序列表 -->
                 <ol type="i">
                      <li>财务部</li>
                      <li>学工部</li>
                      <li>人事部</li>
                </ol>

             <!-- 无序列表 -->
                 <ul type="square">
                    <li>财务部</li>
                    <li>学工部</li>
                    <li>人事部</li>
                 </ul>

5、图像标签(************)       

          * <img src="http://www.mamicode.com/图片的路径"/>
                  - src: 图片的路径
                  - width:图片的宽度
                  - height:图片的高度

                  - alt: 图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容
                          ** 有些浏览器下不显示(没有效果)

6、路径的介绍
         * 分类:两类
              ** 绝对路径
                    -C:\Users\asus\Desktop\0413\day01\code\a.jpg
                    - http://www.baidu.com/b.jpg

              ** 相对路径

                   - 一个文件相对于另外一个文件的位置

                   - 三种:
                           ** html文件和图片在一个路径下,可以直接写文件名称
                                       - <img src="http://www.mamicode.com/b1.jpg" alt="这是一个美女"/>

                           ** 图片在html的下层目录
                                      在html文件中,使用img文件夹下面的a.jpg

-                                     - C:\Users\asus\Desktop\0413\day01\code\ 4.html
                                      -- C:\Users\asus\Desktop\0413\day01\code\ img\a.jpg
                                              *** 在html中使用图片 4.html和img在一个路径下
                                                              img\a.jpg

                           ** 图片在html文件的上层目录

                                         --- C:\Users\asus\Desktop\0413\day01\ code\4.html
                                         --- C:\Users\asus\Desktop\0413\day01\ c.png

                                               *** html文件所在的目录和图片是一个目录
                          ** 图片和html文件是什么关系?
                                   - 图片在html的所在目录的上层目录 day01
                          ** 怎么表示上层路径 ../
                                   - ../: day01
                                          -- ../c.png
                          ** 想要表示上层的上层 ../../

7、超链接标签

       *链接资源

             -<a href="http://www.mamicode.com/连接到资源的路径" >显示在页面上的内容</a>

                    ** href: 链接的资源的地址

                    ** target:设置打开的方式 ,默认是在当前页打开
                                 -- _blank : 在一个新窗口打开
                                 -- _self: 在当前页打开 默认
             - 当超链接不需要到任何的地址 在href里面加#
                              - <a href="http://www.mamicode.com/#">这是一个超链接2</a>

       *定位资源

               ** 如果想要定位资源:定义一个位置 

                        <a name="top">顶部</a>
               ** 回到这个位置
                        <a href="http://www.mamicode.com/#top">回到顶部</a>
               ** 引入一个标签 pre:原样输出

8、表格标签(*******重要的标签********)

          * 可以对数据进行格式化,使数据显示更加清晰

          * <table></table>: 表示表格的范围
                   - border:表格线
                   - bordercolor:表格线的颜色
                   - cellspacing:单元格直接的距离
                   - width:表格的宽度
                  - height:表格的高度

           ** 在table里面 <tr></tr>
                    - 设置对齐方式 align: left center right

                     *** 在tr里面 <td></td>
                           - 设置显示方式 align: left center right

                     *** 使用th也可以表示单元格
                           - 表示可以实现居中和加粗

         * 代码
                  <table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">

         * 画图分析表格的写法
                - 首先定义一个表格的范围使用table
                - 定义一行使用 tr
                - 定义一个单元格使用 td
          ** 操作技巧:
                - 首先数有多少行 ,数每行里面有多少个单元格

          ** 表格的标题
                 <caption></caption>

          ** 合并单元格
                 - rowspan:跨行
          ** <td rowspan="3">人员信息</td>
                - colspan:跨列
          ** <td colspan="3">人员信息</td>

 

html