• html.列表,表格与媒体元素.


    无序列表:

    无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表的起始.

    <ul>

    <li>内容</li>

    <li>内容</li>

    <li>内容</li>

    </ul>

    特性:1.没有顺序,每个<li>标签独占一行(块元素).2.默认<li>标签项前面有个实心小圆点.

    有序列表:

    有序列表由<ol>标签和<li>标签组成,使用<ol>标签有序列表的声明,使用<li>标签作为每个每个列表的起始,有序列表和无序列表一样,只能<ol>标签里嵌套<li>标签.

    <ol>

    <li>内容</li>

    <li>内容</li>

    <li>内容</li>

    </ol>

    特性:1.有顺序,每个<li>标签独占一行(块元素)2.默认前面<li>标签前面有顺序.

    定义列表:

    定义列表是一个特殊的列表形式,它是标题和列表的结合,它是使用<dl>标签作为开始,使用<dt>来作为每个列表的起始,使用列表<dd>标签来完成.

    <dl>

    <dt>标题</dt>

      <dd>内容</dd>

      <dd>内容</dd>

    <dt>标题2</dt>

      <dd>内容</dd>

      <dd>内容</dd>

    </dl>

    特性:1.没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)2.默认没有标记

    表格:

    单元格:表格的最小单位,一个或多个纵横排列组成了表格.

    行:一个或多个单元格横向推叠形成了行.

    列:由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列.

    基础语法:

    <table border="1">

    <tr>

      <th>标题</th>

      <th>标题2</th>

    </tr>

    <tr>

      <td>内容</td>

      <td>内容</td>

    </tr>

    </table>

    第一步:创建表格标签<table></table>

    第二步:在表格标签<table><table>里创建行标签<tr></tr>可以有多行.

    第三步:在行标签<tr></tr>里创建单元格标签<th></th>,用于表格标题.

    第四步:在行标签<tr></tr>里创建单元格标签<td></td>,可以有多个单元格.另为了显示表格的轮廓,一般还需要设计<table border="1">边框属性,

    注意:在HTML5的规范里已经把boreder边框属性废除了.

    表格的跨列和跨行.

    跨列:

    <table>

    <tr>

      <td colspan="所跨的列数">内容</td>

    </tr>

    </table>

    跨行:

    <table>

    <tr>

      <td rowspan="所跨的行数">内容</td>

    </tr>

    </table>

    媒体元素:

    <video src="视频地址" controls></video>

    <video controls>

      <source src="视频地址"视频格式>

      你的浏览器不支持video标签

    </video>

    音频元素:

    <audio src="地址" controls></audio>

    <audio controls>

      <source src="音频地址"音频格式>

    </audic>

    <iframe框架>:

    语法:<iframe src="引用页面地址" name="框架名"></iframe>

    示列:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <head>
        <title>使用iframe嵌套网页</title>
    </head>
    <body>
          <h2>使用iframe嵌套</h2>
           <p>
               <a href="http://s.bdqn.cn/login" target="a">打开云课堂</a><br/>
               <a href="https://www.baidu.com/index.php?tn=56060048_4_pg&ch=13" target="a">打开百度</a><br/>
               <a href="图像vedio.MP4" target="a">你猜</a><br/>
           </p>
               <iframe name="a" width="2000" height="1000"></iframe>
    
    </body>
    </html>

    页面布局分析:
    整个页面,页面的头部,页面的主体,页面的底部.

    HTML5的饥结构元素:

    元素名                            描述

    header                           标题头部区域的内容

    footer                             标记脚部区域的内容

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

    article                             独立的文章内容

    aside                            相关内容和应用

    nav                              导航类辅助内容

  • 相关阅读:
    windows 快捷键
    MySQLorder by用法
    Idea-2020.1.3破解
    Java-FTP上传下载
    Java-byte转换
    Java-执行shell命令
    Java-文件加密传输(摘要+签名)
    AmazonRekognition-Java对接
    Java-File转MultipartFile
    AmazonS3-Java对接
  • 原文地址:https://www.cnblogs.com/matianpeng/p/7444445.html
Copyright © 2020-2023  润新知