简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0310 课程作业
Blogger Information
Blog 5
fans 0
comment 1
visits 1648
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0310 课程作业
张金明学PHP
Original
490 people have browsed it

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 中文网:朱老师

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好，只是作业标题还是不要用日期了，这样以后回看的时候可能一下子看不出文章内容是什么
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！