zoukankan      html  css  js  c++  java
  • HTML第二篇

    1>压缩文件格式:使用.zip格式较好

    2>charset(字符集)  国内最新字符集格式为:gb18030

                   国际上通用的字符集是:UTF-8

    3>添加图片

    <img src=”path” alt=”text” title=”text”  width=”x”  height=”y”/>

    4>path路径:

    绝对路径:指文件在硬盘上真是存在的路径。

    eg: <body backround="E:ook网页布局代码第2章g.jpg" >  

    相对路径:指相对于自己目标文件的位置。

    eg:  <body background="img/bg.jpg"> 

    注意:相对路径使用/”字符作为目录的分隔字符,而绝对路径可以使用“”或“/”字符作为目录的分隔字符。由于“img”目录是“第2章”目录下的子目录,因此在“img”前不用再加上“/”字符。

    5>超链接

    页面超链接: <a href=”path” target=””>链接图文</a>      target属性值常用:_seft  _blank   _parent

    锚链接: a:  创建跳转标记  <a name=”marker”>标记点</a> 

            b:  创建跳转链接  <a href=”#marker”>链接点</a> 

    功能性链接 <a href=”mailto:raycosmos@aliyun.com”>联系我们</a>    mailto 邮件传输协议

                       <a href=”ftp://192.168.90.25”></a>    ftp传输协议

    6>   块元素(block):独占一行

        行内元素:内容撑开的宽度

    7>列表(无序,有序,定义列表)

    what:列表就是信息资源的一种展示形式。他可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

    无序列表unordred  list       item项目

    <ul>
    <h3>热门活动</h3>
        <li>
            <img src="../picture//img1.png"/>
            <p>推荐活动 | 原创音乐现金榜T榜</p>
        </li>
        <li>
            <img src="../picture//img2.png"/>
            <p>推荐节目|《TAImusic》爆笑来袭</p>
        </li>
        <li>
            <img src="../picture//img3.png"/>
            <p>推荐歌单 | 继续宠爱张国荣</p>
        </li>
        <li>
            <img src="../picture/img4.png"/>
            <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
        </li>
    </ul>

     

     

    where:常用于导航栏,侧边栏新闻。

    有序列表  1.有顺序,每个<li>标签独占一行(块元素)2.默认<li>标签项前有顺序标记 3.一般用于排序类型的列表,where:常用于试卷,问卷调查。

     

    1 <ol>
    2     <dt>热门排行榜</dt>
    3     <li><a href="#"> 潇洒走一回</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    4     <li><a href="#">偏偏喜欢你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    5     <li><a href="#">酒干倘卖无</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    6     <li><a href="#">不说再见</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    7     <li><a href="#">舍不得你</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    8     <li><a href="#">请跟我来</a><a href="#"><img src="../picture/pic1.png"/></a></li>
    9 </ol>

     

    定义列表 define    title

    1 <dl>
    2     <dt>水果</dt>  标题
    3     <dd>苹果<dd>  
    4     <dd>香蕉<dd>  
    5     <dd>橘子<dd>  
    6 </dl>

     

     

    where:常用于一个标题下有多个子标题

     

    8>表格table

    <body>
    <h1>流量调查表</h1>
    <table border="1">
        <tr><td>总页面流量</td><td>共计来访</td><td>会员</td><td>游客</td></tr>
        <tr><td>9756488</td><td>97656</td><td>7538087</td><td>43364677</td></tr>
        <tr><td>46776686</td><td>85544</td><td>69357</td><td>568787</td></tr>
        <tr><td>7538087</td><td>546774</td><td>476897</td><td>334545</td></tr>
        <tr><td colspan="3">平均没人浏览</td><td>1.58</td></tr>
    </table>
    </body>

     

    row 行    rowspan  跨行    column列    colspan 跨列

    去除隐藏的单元格线条 border-collapse:collapse; 属性。

    9> 视频 video        音频  audio(用法同video)

     <video src=”path” controls></video> 

    1 <video controls>
    2 <source src=”path” type=”video/mp4”/>
    3 <source src=”path” type=”video/avi”/>
    4 </video>

    autoplay 自动播放

     

    10>页面布局(用户体验)layout

     
     header 标题头部区域的内容(用于页面或页面中的一块区域)
    footer 标记肩部区域的内容(用于整个页面或页面的一块区域)
    section web页面中的一块独立区域
    article 独立的文章内容
    aside 相关内容或应用(常用于侧边栏)
    nav 导航类辅助内容

     

     

     

     

     

     

    11>内联框架  inner

     <iframe src=”path” name=”mainFrame”></iframe> 

     

  • 相关阅读:
    zoj 3632 Watermelon Full of Water
    将字符串切割成数组 componentsSeparatedByString
    paip.C#.NET多线程访问 toolStripStatusLabel
    EBS后台取消死锁检查代码和取消死锁会话步骤经验
    Java泛型深入题目
    Win7下BootCamp蓝屏问题解决方案二
    一步步开发 Spring MVC 应用
    批处理获取U盘、可移动硬盘的盘符
    一种松耦合的分层插件系统的设计和实现
    分享一个开源的批量修改VC工程属性的小工具
  • 原文地址:https://www.cnblogs.com/cosmosray/p/7512473.html
Copyright © 2011-2022 走看看