博客列表 >HTML常用元素作业和课程笔记

HTML常用元素作业和课程笔记

孤独求败的博客
孤独求败的博客原创
2022年10月24日 11:51:24376浏览

HTML 常用元素

一、作业

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>课程表</title>
  8. </head>
  9. <body>
  10. <table border="1">
  11. <!-- 标题(可选) -->
  12. <caption>
  13. 课程表
  14. </caption>
  15. <!-- 表头 -->
  16. <thead>
  17. <tr>
  18. <th>时间</th>
  19. <th>星期一</th>
  20. <th>星期二</th>
  21. <th>星期三</th>
  22. <th>星期四</th>
  23. <th>星期五</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr>
  28. <th rowspan="4">上午</th>
  29. <td>数学</td>
  30. <td>语文</td>
  31. <td>英语</td>
  32. <td>道德法制</td>
  33. <td>体育</td>
  34. </tr>
  35. <tr>
  36. <td>道德法制</td>
  37. <td>数学</td>
  38. <td>英语</td>
  39. <td>体育</td>
  40. <td>语文</td>
  41. </tr>
  42. <tr>
  43. <td>语文</td>
  44. <td>体育</td>
  45. <td>数学</td>
  46. <td>道德法制</td>
  47. <td>英语</td>
  48. </tr>
  49. <tr>
  50. <td>英语</td>
  51. <td>体育</td>
  52. <td>语文</td>
  53. <td>数学</td>
  54. <td>道德法制</td>
  55. </tr>
  56. <tr>
  57. <th colspan="6">午餐时间</th>
  58. </tr>
  59. <tr>
  60. <th rowspan="3">下午</th>
  61. <td>美术</td>
  62. <td>手工</td>
  63. <td>音乐</td>
  64. <td>手工</td>
  65. <td>美术</td>
  66. </tr>
  67. <tr>
  68. <td>手工</td>
  69. <td>美术</td>
  70. <td>手工</td>
  71. <td>美术</td>
  72. <td>音乐</td>
  73. </tr>
  74. <tr>
  75. <td>音乐</td>
  76. <td>音乐</td>
  77. <td>美术</td>
  78. <td>音乐</td>
  79. <td>手工</td>
  80. </tr>
  81. </tbody>
  82. </body>
  83. </html>

二、常用属性

1.通用属性:id, class, style

这三大属性最常用,所以需要熟练掌握

id

我的理解id就是名字。
MDN解释:
定义了一个全文档唯一的标识符 (ID)。它用于在链接(使用片段)、脚本和样式(通过 CSS)中辨识元素。

class

我的理解是用于分组,区别去其他编程语言的类。通过class可以把一批元素分组,然后直接用class选择这类元素
MDN解释:
全局属性 class 的值是一个以空格分隔的元素的类名(classes)列表,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 ( document.getElementsByClassName) 来选择和访问特定的元素。

style

我的理解,style就是风格样式,和CSS样式表一样。
MDN解释:
style 全局属性 包含应用到元素的 CSS 样式声明。要注意样式最好定义在单独的文件中。这个属性以及 <style> 元素的主要目的是快速装饰。例如用于测试目的。

2.预置属性: href,target, src,alt

w3c,浏览器可以自动识别的,并内置了样式

  1. <!-- 通过这两段代码,解释href,target, src,alt 四个预置属性 -->
  2. <a href="" target=""></a>
  3. <img src="" alt="" />

href

我的理解,href就是超链接,资源在其他位置。
MDN解释:
包含超链接指向的 URL 或 URL 片段。URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和 mailto:。

target

我的理解,target就是链接的处理方式,是当前页面跳转,还是新开页面
MDN解释:
该属性指定在何处显示链接的资源。取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
_self: 当前页面加载,即当前的响应到同一 HTML 4 frame(或 HTML5 浏览上下文)。此值是默认的,如果没有指定属性的话。
_blank: 新窗口打开,即到一个新的未命名的 HTML4 窗口或 HTML5 浏览器上下文
_parent: 加载响应到当前框架的 HTML4 父框架或当前的 HTML5 浏览上下文的父浏览上下文。如果没有 parent 框架或者浏览上下文,此选项的行为方式与 _self 相同。
_top: IHTML4 中:加载的响应成完整的,原来的窗口,取消所有其它 frame。HTML5 中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有 parent)。如果没有 parent 框架或者浏览上下文,此选项的行为方式相同_self

src

我的理解,src就是资源位置
MDN解释:
src属性是必须的,它包含了你想嵌入的图片的文件路径。
图像的 URL,这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中,src 被当做拥有一个像素密度的描述符 1x 的候选图像处理,除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。

alt

我的理解,alt就是对图像单元的文字解释,可以在网络不好或丢图情况下解释图片内容,还可以被爬虫抓取
MDN解释:
属性包含一条对图像的文本描述,这不是强制性的,但对无障碍而言,它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。如果由于某种原因无法加载图像,普通浏览器也会在页面上显示alt 属性中的备用文本:例如,网络错误、内容被屏蔽或链接过期时。

3.事件属性: on+事件名称 onclick,oninput,onkeyup

我的理解,网页上的能被捕获的变化,都可以在这里标记。
这属于JS脚本,常用的应该就是 输入,点击,变化等命令,和其他编程语言类似
从MDN查找,大概有几十个可以用到的事件,这里放原图,备查:

4.自定义属性:data-自定义属性名称,由js的dataset进行处理

我的理解,只要是data-开头的,自动会被网页捕获,通过get方法,可以获取相应数值。
这部分,我理解的还不到位,我本身认为应该通过全名“data-user-email”获取,老师的样例代码 只是通过”getEmail(this)”
从MDN查找工作未完:

  1. <!-- ? 参考代码 -->
  2. <!-- ? 4. 自定义属性: `data-自定义属性名称`,由js的dataset进行处理 -->
  3. <!-- data-user-email: 自定义属性, data-: 默认前缀 -->
  4. <div data-user-email="admin@php.cn">邮箱</div>
  5. <button onclick="getEmail(this)">查看邮箱</button>
  6. <span></span>

三、布局元素演化史

1. 传统布局

老师从普通网站距离,上面是页眉,下面是页脚,中间是主体
这部分没歧义,很清晰
从代码上来说

  1. <!-- ? 1. 传统 -->
  2. <div id="header">页眉</div>
  3. <div id="main">主体</div>
  4. <div id="fooer">页脚</div>
  5. <!-- ?这部分老师用了快速编写 -->
  6. <!-- ?先写 #header{页眉} 在tab -->
  7. <!-- ?这个在前面练习做过了,不赘述 -->

2. 优化布局

老师的说法是 id权重过大,影响其他
我的理解:
由于id是最终选择,一旦用了id定了个格式,就无法被替代
而用 class 和 其他分组,制定样式,可以被其他样式覆盖,
另外 id 属于唯一值,不好分组
而 class 可以分组
改变的方法就是用 class 替换 id

  1. <div class="header">页眉</div>
  2. <div class="main">主体</div>
  3. <div class="fooer">页脚</div>
  4. <!-- ?这部分老师用了三行同步修改 -->
  5. <!-- ?做法是用alt同步了三行的光标位置,这时候 删除和打字都是三行完全一致 -->

3. 语义化标签

老师的说法:因为程序员常用,所以把语义直接标签化
缺点:
1、标签有限,不到20个,语义受限
2、所以更多的还是不用语义化,用class解决
3、用class的好处是,层数少,渲染好一些
4、对于seo,class识别可能会差,一般移动端开发忽略seo

  1. <!--article 文章的意思-->
  2. <!-- 语义化写法 -->
  3. <article>
  4. <header>文章头部</header>
  5. <main>文章主体</main>
  6. <footer>文章结尾</footer>
  7. </article>
  8. <hr />
  9. <!-- class 写法 -->
  10. <div class="article header">文章头部</div>
  11. <div class="article main">文章主体</div>
  12. <div class="article footer">文章结尾</div>

四、图文解决方案

1. 传统div和figure标签的区别

我的理解:
推荐figure,多一个margin(外边距)。

  1. <!-- ! 1. 传统 -->
  2. <div class="box">
  3. <img src="static/images/course1.png" alt="" width="200" />
  4. <div class="title">PHP中文网第21期线上培训班</div>
  5. </div>
  6. <hr />
  7. <!-- ! 2. 推荐: figure 创建带标题的内容 -->
  8. <figure>
  9. <img src="static/images/course1.png" alt="" width="200" />
  10. <figcaption>PHP中文网第21期线上培训班</figcaption>
  11. </figure>
  12. <!-- figure 与 div 相比, 它多一个margin -->

2. 图像、链接、列表

  1. <!-- ? 1. 图像: <img>, `src,alt, width/height->css` -->
  2. <img src="static/images/course1.png" alt="" width="200" />
  3. <hr />
  4. <!-- ? 2. 链接: <a>, `href, target` -->
  5. <a href="https://php.cn/" target="_blank">PHP中文网</a>
  6. <hr />
  7. <!-- ? 3. 无序列表: <ul><ol><li> -->
  8. <!-- ? 4. 有序列表: <dl><dt><dd> -->

2. 文字导航 nav比div+ul好一点

  1. <!-- ! 实战1: 文字导航 `<ul> + <a>`,实体字符: `&nbsp; &copy;`-->
  2. <div class="nav">
  3. <ul class="menu" style="display: flex; list-style: none">
  4. <li><a href="">首页&nbsp;</a></li>
  5. <li><a href="">教学视频&nbsp;</a></li>
  6. <li><a href="">社区问答&nbsp;</a></li>
  7. </ul>
  8. </div>
  9. <hr />
  10. <!-- ! <nav> + <a>: 层级更少, 代码更少,渲染更快 -->
  11. <nav>
  12. <a href="">首页</a>
  13. <a href="">教学视频</a>
  14. <a href="">社区问答</a>
  15. </nav>
  16. <hr />

3. 图文导航 nav比div+ul好一点

  1. <!-- ! 实战2: 图文列表-->
  2. <!-- ? ul+li+a -->
  3. <ul class="courses" style="display: flex; list-style: none; width: 500px; place-content: space-between">
  4. <li class="item" style="display: grid">
  5. <a href=""><img src="static/images/course1.png" alt="" width="150" /></a>
  6. <a href="">第二十一期_前端开发</a>
  7. </li>
  8. <li class="item" style="display: grid">
  9. <a href=""><img src="static/images/course2.png" alt="" width="150" /></a>
  10. <a href="">第二十一期_PHP编程</a>
  11. </li>
  12. <li class="item" style="display: grid">
  13. <a href=""><img src="static/images/course3.png" alt="" width="150" /></a>
  14. <a href="">第二十一期_综合实战</a>
  15. </li>
  16. </ul>
  17. <hr />
  18. <!-- ? nav + figure + a -->
  19. <nav style="display: flex">
  20. <figure>
  21. <a href=""><img src="static/images/course1.png" alt="" width="150" /></a>
  22. <figcaption><a href="">第二十一期_前端开发</a></figcaption>
  23. </figure>
  24. <figure>
  25. <a href=""><img src="static/images/course2.png" alt="" width="150" /></a>
  26. <figcaption><a href="">第二十一期_PHP编程</a></figcaption>
  27. </figure>
  28. <figure>
  29. <a href=""><img src="static/images/course3.png" alt="" width="150" /></a>
  30. <figcaption><a href="">第二十一期_综合实战</a></figcaption>
  31. </figure>
  32. </nav>
  33. <!-- ! 层级少,代码少 -->

五、表格 和表单

1. 表格

我的理解:
1、表格由 表头 <thead> 表体<tbody> 表尾<tfoot>构成
2、表体<tbody> 可以是多个
3、td,th 都是单元格;th有预置样式,加粗和居中。
4、跨行合并(纵向合并) : rowspan, row行 span 合并
5、水平方向合并(横向合并): colspan
6、合并属性 rowspan/colspan,必须写到td, th中

2. 表单

  1. <body>
  2. <!-- ! 用户注册 -->
  3. <h2 class="title">用户注册</h2>
  4. <!--
  5. * 1. action: 服务器上的表单处理脚本,如login.php
  6. * 2. method: 提交方式
  7. * 2.1 GET: 默认,数据在URL中,适用于"少量且公开"的数据,如分页,查询参数
  8. * http://127.0.0.1:5500/1017/register.php?username=admin
  9. * http://127.0.0.1:5500/1017/register.php?username=peter+zhu
  10. * 2.2 POST: 数据在请求体中,适合于"大量的或隐私"的数据
  11. * 3. enctype:
  12. * 3.1 application/x-www-form-urlencoded: 默认对值对的编码方案
  13. * 3.2 multipart/form-data: 分块,原始数据,适用文件上传
  14. * 4. target: 与<a>相同,_self是默认,_blank新页面
  15. * 5. id: name现在已废弃不推荐,全用id来引用该表单
  16. * 6. onsubmit: 提交时执行的js,拦截提交操作,执行用户自定义提交行为
  17. -->
  18. <form action="register.php" method="POST" enctype="application/x-www-form-urlencoded" target="_blank" id="register">
  19. <input type="text" name="username" />
  20. <input type="password" name="password" />
  21. <button>提交</button>
  22. </form>
  23. </body>

六、最后部分,老师板书

1. 布局

  • 结构: <header><main><footer><aside>
  • 内容: <article><section>
  • 导航: <nav>
  • 图文: <figure><figcaption>
  • 通用: <div><span>

2. 链接,图像,列表

  • 链接: <a>
  • 图像: <img>
  • 列表: <ul><ol><li>

3. 表格

  • 结构: <table><caption><tbody>
  • 分组: <thead><tfooter>
  • 内容: <tr><td><th>
  • 合并: colspan, rowspan

4. 表单(重点)

表单中用户与服务器数据交互的入口,也是服务器安全的最大隐患

  • 类型: <form><input><select><textarea><button><datalist>
  • 属性: type,name,value,placeholder,require,selected,checked,disabled

5. 内联框架

  • 标签: <iframe>
  • 属性: src,srcdoc,frameborder,width,height

6. 音频/视频/其它

  • 标签: <video><audio>
  • 属性: src,controls,poster,autoplay,loop,muted
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议