小张的HTML笔记二

第二章  列表、表格与媒体元素

1,列表的应用:

                无序列表：以<ul>标签来实现 以<li>标签表示列表项 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容

                示例：<ul>      

                                  <li>xxx演藏族女孩</li>      

                                  <li>撞死两个人后自拍</li>      

                                  <li>诗隆甜蜜出游</li>      

                                  <li>一线城市楼市退烧</li>  

                        </ul>

                有序列表： 以<ol>标签来实现 以<li>标签表示列表项 有序列表ol-li一般用于显示带有顺序编号的特定场合

        示例：      <ol>      

                                  <li>xxx演藏族女孩</li>      

                                  <li>撞死两个人后自拍</li>      

                                  <li>诗隆甜蜜出游</li>      

                                  <li>一线城市楼市退烧</li>  

                        </ol>

                定义列表： 以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 定义列表一般适用于带有标题和标题解释性内容的场合

        示例：        <dl>            

                                         <dt>水果</dt>    

                                         <dd>苹果</dd>    

                                         <dd>桃子</dd>    

                                         <dd>李子</dd>

                           </dl>

 表格的基本语法：

        <table>...</table> 表格标签

        <tr>...</tr> 行标签

        <td>...</td>单元格标签

示例：<table>    

                <tr>

                        <td>第1个单元格的内容</td>          

                        <td>第2个单元格的内容</td>        

                        ……     </tr>    

                <tr>          

                        <td>第1个单元格的内容</td>          

                        <td>第2个单元格的内容</td>        

                        ……    

                </tr>

           </table>

 2,表格的跨行和跨列

        表格的跨列（列合并）colspan

示例：<table>  

                <tr>    

                        <td colspan="n">单元格内容</td>  

                </tr>  

                <tr>    

                        <td>单元格内容</td>      

                        ……  

                </tr>  

                 ......

           </table>

        表格的跨行（行合并）rowspan

示例：<table>  

                <tr>    

                        <td rowspan="n">单元格内容</td>  

                </tr>  

                <tr>    

                        <td>单元格内容</td>      

                        ……  

                </tr>  

                 ......

           </table>

      3,  网页上播放视频和音频的方法

视频元素video

语法：<video src="视频路径"  controls></video>

示例：<video src="video/video.mp4" controls></video>

音频元素audio

语法：<audio src="视频路径"  controls></audio>

                       

公共属性：_contrrols控制面板 autoplay自动播放 loop循环播放

解决视频格式无法播放问题：（多重路径哪一个能用播放哪个）

           <video controls autoplay="autoplay">

        <source src="voide/VID20240722171323.mp4"></source>

        <source src="voide/VID20240722171323.avi"></source>

        <source src="voide/VID20240722171323.webm"></source>

    </video>      

 4, 页面结构分析   

        页面布局分析

                header 标题头部区域的内容（用于页面或页面中的一块区域

                footer 标记脚部区域的内容（用于整个页面或页面的一块区域）

                section Web页面中的一块独立区域  

                article 独立的文章内容  

                aside 相关内容或应用（常用于侧边栏)

                nav 导航类辅助内容

示例：<header><h2>网页头部</h2> </header>  

          <section><h2>网页主体部分</h2></section>  

          <footer><h2>网页底部</h2></footer>

5， <iframe>内联框架

        语法：<iframe src="path" name="mainFrame" ></iframe>

                name是属性

                scrolling表示是否取消滚动条

                frameborder是否需要边框

                src是路径

        提示：1，可以设置src的属性值为http://www.bdqn.cn，在这个页面中也可以打开一个线上的网页

                  2，在超链接上设置target目标窗口属性为希望显示的框架窗口名

例如：<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>

总结：