HTML5+CSS第二章笔记主讲列表和嵌套

HTML5+CSS
列表项

无序列表
    <ul>
        <li>、、、</li>
    </ul>
ul平铺     float-left； 
去掉原点   list-style:none；
有序列表
    <ol>
        <li>、、、、</li>
    </ol>
 定义列表
       <dl>
          <dt>举例水果</dt>
          <dd>苹果</dd>
          <dd>橘子</dd>
       </dl>
每一个li代表列表中的每一项，li里边可以放N多个行内元素，w3c强制规定必须用`<ul>`包括起来可形成组合标签
块级元素:独占一行
行内元素：不是独占一行，当这行被填满之后才会往下延伸

表格

`<table></table>`声明表格告诉浏览器我要开始写表格了
`<tr></tr>`代表行每写一行就要用一个tr标签包括起来
`<td></td>`单元格标签每一行包含几个单元格
`<table boder="1">`1表示像素多少，同时数字增加代表单元格粗细
样式格式为
        <table>
            <!--有几行就插入几个<tr>,有几列就插入几个<td>-->
        <tr>
            <td>插入第一行第一个单元格文本</td>
            <td>插入第一行第二个单元格文本</td>
        </tr>
        <tr>
            <td>插入第二行第一个单元格文本</td>
            <td>插入第二行第二个单元格文本</td>
        </tr>
        </table> 

HTML5的表格

<!--跟普通表格基本相同，注意区分-->
    <table><!--声明表格-->
         <thead><!--注意已经更改为<thead>单元格更改为<th>-->
            <th>插入第一行的第一个单元格的数据</th>
            <th>插入第一行第二个单元格的数据</th>
        </thead>
        <tbody><!--跟浏览器声明我要写身体部件-->
        <tr><!--跟以前身体写法保持一致-->
            <td>第二行第一列</td>
            <td>第二行第一列</td>
        </tr>
        <tfoot><!--浏览器尾部单元格声明为<tf>-->
            <tf>最后一行第一个单元格</tf>
             <tf>最后一行第一个单元格</tf>
        </tfoot>
    </table>

表格合并

    第几行第几列单元格合并就在第几行的的第几个单元格的`<td>`里边加上合并元素：
    上下合并称为行合并表达式为：`<td rowspan="n">`需合并几行就在这填几行
    左右合并成为列合并表达式为：`<td colspan=“n”>`需要合并几列就在填几列
    **单元格居中**
    单元格居中只要在需要合并的单元的`<td>中加入<td algin="center">`

html5的媒体元素

    `<video src="视频路径" congtrols="controls"></video>`
    src后跟要播放的视频文件的路径
    controls为提供播放，暂停和音量的控件
    当controls="controls"相同时后边这个controls不用写
    不同的浏览器对于不同的视频文件支持是不同的
    所以就得用不同的源文件进行更换
    示例
            <video controls><!--webm格式为谷歌提供的视频格式
            在其中加上autoplay可以自动播放-->
            <source src="video/video.webm" type=""video/webm/>
            <source src="video/video.mp4" type="video/mp4"/>
            </video>
    后边元素`（type）`表示声明文件类型，浏览器如果不支持自动跳转下一个文件，直到打开为止
    不同的浏览器支持的视频格式是不同的所以就要对你的文件进行转码每一个都添加上`（type）`，浏览器会自己找一个能播放出来的进行播放，且排名不分先后
    音频文件同上

网页布局

    网页的页面布局分为：页面头部，页面主体，页面尾部
| 元素名 |   描述   |
|header  |   标题头部的区域内容  |
|footer  |标题脚部区域的内容       |
|section | web页面的一个独立内容    |
|avticle |独立的文章内容  |
|aside|相关内容或应用|
|nav|导航类辅助内容|
示例
            <header><h2>网页头部<h2></header>
            <section><h2>网页主体部分<h2></section>
            <footer><h2>网页底部<h2></footer>

内联框架

    <!--框架标识名可以为任何名称,width="100%",scrolling="yes"表示滚动条打开，frameboder="0"表示不需要边框线-->
    <iframe src="引用页面地址" name="框架标识名"></iframe>
    <iframe>属性可以实现页面间的相互跳转
    在被打开的框架上加上name属性
    target表示目标地址
    **嵌套示例**
    <a href="https://www.baidu.com" target="aa">点击跳转百度</a>
    <a href="https://www.qichezhijia.com"target="aa">点击跳转懂车帝</a>
    <iframe src="htttps://www.dongchedi.com" name="aa"></iframe>
    <!--iframe里面的name标签等于<a>标签里的target标签即可实现下方操作-->
 如上部示例所示，当你打开这个链接会打开懂车帝界面，但是上方还会存在汽车之家的外部链接和百度的外部链接，当你点击这些外部链接，只有网页界面的身体会动，页面头部不会动。