简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML常用元素作业和课程笔记
Blogger Information
Blog 9
fans 0
comment 0
visits 3316
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
HTML常用元素作业和课程笔记
孤独求败的博客
Original
365 people have browsed it

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>
  16.       <!-- 表头 -->
  17.       <thead>
  18.         <tr>
  19.           <th>时间</th>
  20.           <th>星期一</th>
  21.           <th>星期二</th>
  22.           <th>星期三</th>
  23.           <th>星期四</th>
  24.           <th>星期五</th>
  25.         </tr>
  26.       </thead>
  27.       <tbody>
  28.         <tr>
  29.           <th rowspan="4">上午</th>
  30.           <td>数学</td>
  31.           <td>语文</td>
  32.           <td>英语</td>
  33.           <td>道德法制</td>
  34.           <td>体育</td>
  35.         </tr>
  36.         <tr>
  37.           <td>道德法制</td>
  38.           <td>数学</td>
  39.           <td>英语</td>
  40.           <td>体育</td>
  41.           <td>语文</td>
  42.         </tr>
  43.         <tr>
  44.           <td>语文</td>
  45.           <td>体育</td>
  46.           <td>数学</td>
  47.           <td>道德法制</td>
  48.           <td>英语</td>
  49.         </tr>
  50.         <tr>
  51.           <td>英语</td>
  52.           <td>体育</td>
  53.           <td>语文</td>
  54.           <td>数学</td>
  55.           <td>道德法制</td>
  56.         </tr>
  57.         <tr>
  58.           <th colspan="6">午餐时间</th>
  59.         </tr>
  60.         <tr>
  61.           <th rowspan="3">下午</th>
  62.           <td>美术</td>
  63.           <td>手工</td>
  64.           <td>音乐</td>
  65.           <td>手工</td>
  66.           <td>美术</td>
  67.         </tr>
  68.         <tr>
  69.           <td>手工</td>
  70.           <td>美术</td>
  71.           <td>手工</td>
  72.           <td>美术</td>
  73.           <td>音乐</td>
  74.         </tr>
  75.         <tr>
  76.           <td>音乐</td>
  77.           <td>音乐</td>
  78.           <td>美术</td>
  79.           <td>音乐</td>
  80.           <td>手工</td>
  81.         </tr>
  82.       </tbody>
  83.   </body>
  84. </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 />
  8.     <!-- ! 2. 推荐: figure 创建带标题的内容 -->
  9.     <figure>
  10.       <img src="static/images/course1.png" alt="" width="200" />
  11.       <figcaption>PHP中文网第21期线上培训班</figcaption>
  12.     </figure>
  14.     <!-- figure 与 div 相比, 它多一个margin -->

2. 图像、链接、列表

  1.     <!-- ? 1. 图像: <img>, `src,alt, width/height->css` -->
  2.     <img src="static/images/course1.png" alt="" width="200" />
  3.     <hr />
  5.     <!-- ? 2. 链接: <a>, `href, target` -->
  6.     <a href="https://php.cn/" target="_blank">PHP中文网</a>
  7.     <hr />
  9.     <!-- ? 3. 无序列表: <ul><ol><li> -->
  10.     <!-- ? 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 />
  11.     <!-- ! <nav> + <a>: 层级更少, 代码更少,渲染更快 -->
  12.     <nav>
  13.       <a href="">首页</a>
  14.       <a href="">教学视频</a>
  15.       <a href="">社区问答</a>
  16.     </nav>
  17.     <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 />
  19.     <!-- ? nav + figure + a -->
  20.     <nav style="display: flex">
  21.       <figure>
  22.         <a href=""><img src="static/images/course1.png" alt="" width="150" /></a>
  23.         <figcaption><a href="">第二十一期_前端开发</a></figcaption>
  24.       </figure>
  25.       <figure>
  26.         <a href=""><img src="static/images/course2.png" alt="" width="150" /></a>
  27.         <figcaption><a href="">第二十一期_PHP编程</a></figcaption>
  28.       </figure>
  29.       <figure>
  30.         <a href=""><img src="static/images/course3.png" alt="" width="150" /></a>
  31.         <figcaption><a href="">第二十一期_综合实战</a></figcaption>
  32.       </figure>
  33.     </nav>
  35.     <!-- ! 层级少,代码少  -->

五、表格 和表单

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