HTML 初识 HTML【 整体结构 文字 图片 表格 超链接】

HTML 
      超文本标记语言,页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
      网页的本质就是超级文本标记语言,万维网是建立在超文本基础之上的。 TML 通过标记符号来标记要显示的网页中的各个部分,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。
      对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果
      HTML /HTM 作为文件后缀名
 
一 整体结构
超文本标记语言的结构包括 头”部分(Head 部提供关于网页的信息)、和“主体”部分(Body 提供网页的具体内容)
 

<html>     --开始标签

     <head>                

                   -- 页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果

                    -- <title>页面标题</title>      内容显示在网页窗口的标题栏中

     </head>

 

     <body>

                -- 页面显示的内容

     </body>

</html>      --结束标签

 
附  HTML head 元素
 
 
二 文字设置
 
< u > __ __  文字___ __ </u> 下划线(英文全称:Underline)                      -- 注释  <!--注释内容-->
< b > __ __  文字___ __ </b> 黑体字 (英文全称:Bold)
< i   > __ __  文字___ __  </i> 斜体字 (英文全称:Italics)
 
< font  size=""    color=""    face=" 微软雅黑"    __ __  文字___ __    </font>
            字号           颜色          字体
                                                                                                          -- 设置字体大小从1到7,
                                                                                                          -- 颜色使用名字或RGB(中文全称:红绿蓝)的十六进制值
&nbsp;       --  空格
< br />      --  回车
< p    < /p > --锻炼标签 (所夹内容为独立的段落)
 
片标签
 
< img / >   单身狗一只

<img  src="图片地址" alt="文字" width="" height="" title="" />                 -- 高跟宽设置一个即可,显示图片会按比例缩放。可设置具体像素也可设置百分比

                                                                                                            -- alt在图片无法加载时,显示文字,还可帮助搜索引擎搜索。

                                                                                                            -- tetle  图片的标题 鼠标移到图片显示

                                                                                                            -- 图片地址为 相对路径  “ . . \xxxx    " 向上返回一层路径

                                                                                                            -- 常用的图像文件的扩展名为 gif 和 jpg。

三 超链接

< a   href = "http://www.baidu.com"  target=" _ blank " > 

      < font color="red" >  百度 </ font >                             -- 将指向字体设置为红色

       百度图片

< /a >

                               -- href =" 超链接地址"

                               -- target=" _ blank "    在新页面打开链接地址 

                                -- 对指向文字格式设置 放在<a>标签里边  

第一步:做锚点的标签。<a name=""></a>

第二步:做锚点链接。<a href="目标链接的name的值"></a>

 

-- 去掉指向文字下的下划线

  |   < style  type = " text/ess"              |

  |    a  {                                              |       -- 写在 head 里

  |              text - decoration : none       |

  |        }                                              |

   ——  -  ——  -  ——   -  ——  -   ——  — 
                
四 表格
 
< table >
           < tr >
                  < td >
                 < /td >
          < /tr >
< /table >
 

 表格   < table   border="1"  width="100%" height="100"  cellspacing ="0"  >            </table>

        

        border:          边框,常用值0,只用在 <table >

         width:            宽度,可以用像素或百分比表示。常用960像素。

         height:         行高,页面会随内容的增多而增长,无法用百分比表示

        cellpadding:  内容跟单元格边框的边距。常用值0。

        cellspacing:   单元格之间的间距。常用值0。

        align:              对齐方式 ,表格在页面的位置,通常为 左 中 右           --  center 据中     right 右     left 左边

        bgcolor:          背景色。

        background:   背景图片。

 

行   <tr   height=”100%“ align=”center“   >  </tr>

 

         height:       行高                 

         align:          一行的内容的水平对齐方式

         valign:        一行的内容的垂直对齐方式                    -- bottom   底      toop  顶       默认居中

         bgcolor:         背景色

         background:  背景图片

   

单元格  <td>   </td>

        <th></th>    表头,单元格的内容自动居中、加粗

        width:          单元格宽度

        height:         单元格高度

        align:             单元格的内容的对齐方式

        valign:          单元格的内容的垂直对齐方式

        bgcolor:         背景色

        background:  背景图片

    内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。设置单元格行高、列高时,会同时影响对应的行或列

   

去掉表格最外边留白

       < style  type = " text/ess"             

  |    *  {                                             |       -- 写在 head 里

  |             padding : 0px ;                   | 

  |             margin : 0px  ;                    |

  |        }                                             |

    —— - —— - —— - —— - —— - —— - -

 
 
 
 
 

转载于:https://www.cnblogs.com/Tanghongchang/p/6600982.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值