0310 课程作业

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
0310 html 知识课堂作业学到了什么?
通过今天的学习,我学习到了以下内容.1.元素类型

在 html 中,页面布局主要有两种元素,块元素和行业元素,其中块元素为垂直排列,行业元素为水平排列.

  • 块元素

    常用的块元素分别有以下元素,可设置宽高,可以当容器,块内容独占一行.

    1. 1. `<div></div>`
    2. 2. `<ul></ul>`
    3. 3. `<li></li>`
    4. 4. `<table></table>`
  • 行内元素

    常用的行内块元素有以下元素

    1. 1. `<span></span>`
    2. 2. `<a herf=""></a>`
    3. 3. `<strong></strong>`
    4. 4. `<em></em>`
    5. 5. `<mark></mark>`
  • 行业块元素

    常用的行内块元素有以下元素,行内元素可设置宽高,可以当容器,并且可以水平排列,通常可以使用外部资源.

    1. 1. `<img></img>`
    2. 2. `<video></video>`
    3. 3. `<audio></audio>`
    4. 4. `<input></input>`
    5. 5. `<select></select>`
    6. 6. `<button></button>`
2.页面结构

  • 页面结构元素类型

    1. <!-- 告诉浏览器编程的文档类型 ,也叫根元素 -->
    2. <!DOCTYPE html>
    3. <!-- 告诉浏览器所用的编程语言 -->
    4. <html lang="en">
    5.   <!-- 头部开始 -->
    6.   <head>
    7.     <!-- 告诉浏览器编程所有字符集 -->
    8.     <meta charset="UTF-8" />
    9.     <!-- 兼容浏览器类型 -->
    10.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    11.     <!-- 页面宽高兼容类型 -->
    12.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    13.     <!-- 引入样式文件 -->
    14.     <link rel="样式名称" href="样式地址" />
    15.     <!-- 引入脚本文件 -->
    16.     <script src="脚本地址"></script>
    17.     <!-- 页面标题 -->
    18.     <title>Document</title>
    19.   </head>
    20.   <!-- 头部结束 -->
    21.   <!-- 内容开始 -->
    22.   <body>
    23.     <!-- 主体元素 -->
    24.   </body>
    25.   <!-- 内容结束 -->
    26. </html>
    27. ```

  • 页面元素属性

    1. 1. 标签 - 在页面元素标签中分为单标签与双标签,常用的单双标签示例 双标签:
    2. <div></div>
    3. ;<span></span>;<a></a>;
    4. <h1></h1>
    5. 单标签:<img src="图片地址" /> 2. 标签属性 - 在标签内的属性,常用于样式等内容
    6. 示例:
    7. <div id="1" class="y" style=""></div>
    8. - 通用属性示例 id="" class="现代页面属性万金油" style="" - 自定义属性
    9. *自定义属性 通过 data- 开始; dataset 对象来读取(很重要,先熟悉)
3.页面布局与布局元素

  • 标签

    1. 1.传统用法标签
    2. <div id="header">页眉</div>
    3. <div id="main">内容</div>
    4. <div id="footer">页脚</div>
    6. 2.优化id标签 使用class标签
    7. <div class="header"></div>
    8. <div class="main"></div>
    9. <div class="footer"></div>
    11. 3.常用语义化标签
    12. <header>页眉</header>
    13. <main>内容</main>
    14. <footer>页脚</footer>
    16. 4.有限回退标签
    17. <div class="article header">页眉</div>
    18. <div class="article main">内容</div>
    19. <div class="article footer">页脚</div>
4.表格

  • 表格合并属性

    1. 合并表格使用 colspan在tr中使用,rowspan 只能在td中使用
    2. -代码
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6. <meta charset="UTF-8">
    7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9. <title>Document</title>
    10. </head>
    11. <body>
    12. <table border="1" width="400" cellspacing="0" cellpadding="5">
    13. <caption>
    14. <h2>购物车</h2>
    15. </caption>
    16. <thead bgcolor="lightgreen">
    17. <td>种类</td>
    18. <td>品类</td>
    19. <td>等级</td>
    20. <td>单价</td>
    21. <td>数量</td>
    22. <td>金额</td>
    23. </thead>
    24. <tbody >
    25. <tr>
    26.   <td rowspan="3">水果</td>
    27.   <td>苹果</td>
    28.   <td rowspan="3">A</td>
    29.   <td>10</td>
    30.   <td>2</td>
    31.   <td>20</td>
    32. </tr><tr>
    33.   <!-- <td>水果</td> -->
    34.   <td>橘子</td>
    35.   <!-- <td>A</td> -->
    36.   <td>10</td>
    37.   <td>3</td>
    38.   <td>30</td>
    39. </tr>
    40. <tr>
    41.   <!-- <td>水果</td> -->
    42.   <td>香蕉</td>
    43.   <!-- <td>A</td> -->
    44.   <td>20</td>
    45.   <td>2</td>
    46.   <td>40</td>
    47. </tr>
    48. <tr>
    49.   <td rowspan="2">办公用品</td>
    50.   <td>笔</td>
    51.   <td>A</td>
    52.   <td rowspan="2">20</td>
    53.   <td>2</td>
    54.   <td>40</td>
    55. </tr> <tr>
    56.   <!-- <td>办公用品</td> -->
    57.   <td>打印机</td>
    58.   <td>A</td>
    59.   <!-- <td>20</td> -->
    60.   <td>2</td>
    61.   <td>40</td>
    62. </tr>
    63. </tbody>
    64. <tfoot>
    65. <tr>
    66.   <td colspan="5">统计</td>
    67.   <td>170</td>
    68. </tr>
    69. </tfoot>
    70. </body>
    71. </html>
    • 图片展示
      表格图片展示

作业出处:张金明的 blog

今日心情:蓝瘦 香菇
今日天气:冻死人了
授业老师: php 中文网:朱老师

【感谢龙石为本站数据质量管理平台提供技术支撑 http://www.longshidata.com/pages/quality.html】
更多阅读