简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

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

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
上一条：后台小案例下一条：微信美容美发预约小程序开发设计方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多