HTML 学习笔记 总结

总结

【标签按照功能进行分类】：

<!DOCTYPE html>：声明为 HTML5 文档
<html>（双标记、块标记）：是 HTML 页面的根元素，定义 HTML 文档
<head>（双标记、块标记）：包含文档的元（meta）数据，<meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title>（双标记，块标记）：定义浏览器工具栏的标题
<body>（双标记，块标记）：包含页面可见内容的主体部分
<h1>（双标记，块标记）：定义最高级标题
<a>（双标记，行标记）：创建超链接，可以链接到其他页面或页面中的某个位置
<br>（单标记，行标记）：在文本中插入一个换行，不需要闭合标签
<p>（双标记，块标记）：定义文本段落
<hr>（单标记，块标记）：创建一条水平线，常用于内容分割
<!--...-->（不适用，不适用）：定义注释，不会在浏览器中显示


【HTML 文本格式化标签】
<b>（双标记，行标记）：定义粗体文本
<em>（双标记，行标记）：定义着重文字
<i>（双标记，行标记）：定义斜体字
<small>（双标记，行标记）：定义小号字
<strong>（双标记，行标记）：定义加重语气
<sub>（双标记，行标记）：定义下标字
<sup>（双标记，行标记）：定义上标字
<ins>（双标记，行标记）：定义插入字
<del>（双标记，行标记）：定义删除字


【HTML "计算机输出" 标签】
<code>（双标记，行标记）：定义计算机代码
<kbd>（双标记，行标记）：定义键盘码
<samp>（双标记，行标记）：定义计算机代码样本
<var>（双标记，行标记）：定义变量
<pre>（双标记，块标记）：定义预格式文本


【HTML 引文, 引用, 及标签定义】
<abbr>（双标记，行标记）：定义缩写
<address>（双标记，块标记）：定义地址
<bdo>（双标记，行标记）：定义文字方向
<blockquote>（双标记，块标记）：定义长的引用
<q>（双标记，行标记）：定义短的引用语
<cite>（双标记，行标记）：定义引用、引证
<dfn>（双标记，行标记）：定义一个定义项目。


【HTML head 元素】
<head>（双标记，块标记）：定义了文档的信息
<title>（双标记，块标记）：定义了文档的标题
<base>（单标记，块标记）：定义了页面链接标签的默认链接地址
<link>（单标记，块标记）：定义了一个文档和外部资源之间的关系
<meta>（单标记，块标记）：定义了HTML文档中的元数据
<script>（双标记，块标记）：定义了客户端的脚本文件
<style>（双标记，块标记）：定义了HTML文档的样式文件


【HTML 样式标签】
<style>（双标记，块标记）：定义文本样式
<link>（单标记，块标记）：定义资源引用地址

【HTML 图像标签】
<img>（单标记，行标记）：定义图像
<map>（双标记，块标记）：定义图像地图
<area>（单标记，行标记）：定义图像地图中的可点击区域


【HTML 表格标签】
<table>（双标记，块标记）：定义表格
<th>（双标记，块标记）：定义表格的表头
<tr>（双标记，块标记）：定义表格的行
<td>（双标记，块标记）：定义表格单元
<caption>（双标记，块标记）：定义表格标题
<colgroup>（双标记，块标记）：定义表格列的组
<col>（单标记，块标记）：定义用于表格列的属性
<thead>（双标记，块标记）：定义表格的页眉
<tbody>（双标记，块标记）：定义表格的主体
<tfoot>（双标记，块标记）：定义表格的页脚


【HTML 列表标签】
<ol>（双标记，块标记）：定义有序列表
<ul>（双标记，块标记）：定义无序列表
<li>（双标记，行标记）：定义列表项
<dl>（双标记，块标记）：定义定义列表
<dt>（双标记，行标记）：定义定义列表中的项目
<dd>（双标记，行标记）：定义定义列表中项目的描述


【HTML 分组标签】
<div>（双标记，块标记）：定义文档的区域，用于布局设计
<span>（双标记，行标记）：用于文本的组合，不提供任何格式化


【HTML 表单标签】
<form>（双标记，块标记）：定义供用户输入的HTML表单
<input>（单标记，行标记）：定义各种类型的输入字段
<textarea>（双标记，块标记）：定义多行文本输入控件
<label>（双标记，行标记）：定义<input>元素的标签
<fieldset>（双标记，块标记）：用于对表单元素进行分组
<legend>（双标记，行标记）：定义<fieldset>元素的标题
<select>（双标记，块标记）：定义下拉选项列表
<optgroup>（双标记，块标记）：定义选项组
<option>（双标记，行标记）：定义选择列表中的选项
<button>（双标记，行标记）：定义按钮
<datalist>（双标记，块标记）：定义输入字段的预定义选项
<keygen>（单标记，行标记）：规定用于表单的密钥生成器字段（已废弃）
<output>（双标记，行标记）：定义表单的输出


【HTML iframe 标签】
<iframe>（双标记，块标记）：定义内嵌的浏览上下文


【HTML 脚本标签】
<script>（双标记，块标记）：定义客户端脚本
<noscript>（双标记，块标记）：定义不支持脚本的浏览器的替代内容

【HTML 属性参考手册】：

查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性：

属性描述
class为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式（inline style）
title描述了元素的额外信息 (作为工具条使用)

更多标准属性说明： HTML 标准属性参考手册.

【HTML 标签简写及全称】：

标签英文全称中文说明
aAnchor锚
abbrAbbreviation缩写词
acronymAcronym取首字母的缩写词
addressAddress地址
altalter替用(一般是图片显示不出的提示)
bBold粗体（文本）
bdoBi-Directional Override文本显示方向
bigBig变大（文本）
blockquoteBlock Quotation区块引用语
brBreak换行
cellcell巢
cellpaddingcellpadding巢补白
cellspacingcellspacing巢空间
centerCentered居中（文本）
citeCitation引用
codeCode源代码（文本）
ddDefinition Description定义描述
delDeleted删除（的文本）
dfnDefines a Definition Term定义定义条目
divDivision分隔
dlDefinition List定义列表
dtDefinition Term定义术语
emEmphasized加重（文本）
fontFont字体
h1~h6Header 1 to Header 6标题1到标题6
hrHorizontal Rule水平尺
hrefhypertext reference超文本引用
iItalic斜体（文本）
iframeInline frame定义内联框架
insInserted插入（的文本）
kbdKeyboard键盘（文本）
liList Item列表项目
nlnavigation lists导航列表
olOrdered List排序列表
optgroupOption group定义选项组
pParagraph段落
prePreformatted预定义格式（文本 ）
qQuotation引用语
relReload加载
s/ strikeStrikethrough删除线
sampSample示例（文本
smallSmall变小（文本）
spanSpan范围
srcSource源文件链接
strongStrong加重（文本）
subSubscripted下标（文本）
supSuperscripted上标（文本）
tdtable data cell表格中的一个单元格
thtable header cell表格中的表头
trtable row表格中的一行
ttTeletype打印机（文本）
uUnderlined下划线（文本）
ulUnordered List不排序列表
varVariable变量（文本）

学习小记

1、单标记、双标记

双标记：

<button> </button>
<div> </div>

单标记：

<img/>

2、块标记、行内标记

块标记：

<ul>

</ul>

行内标记：

<div> XXXXXXXXXXXXXXXXXX </div>
<a>、<input>、<img>

3、前端神器emmet：【Emmet 的使用手册（知识点超全版本）】_emme/2用户适用手册-CSDN博客

HTML练习

1、参照慕课首页3.1.10的演示视频完成咖啡屋界面的HTML结构；

参考：

image-20240304180605196

计划：

image-20240304185342437

实现：

image-20240304191010711

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coffee Shop</title>
</head>
<body>
  <!-- 容器作用#container -->
  <div id="container">
    <!-- 页头部分#header，放置logo、标题等信息 -->
    <div id="header">
      <h1>Jay17's Coffee Shop</h1>
    </div>

    <!-- 页面主题部分#main，放置页面主要信息，此处为左右结构 -->
    <div id="main">
      <!-- 左边导航栏信息.sidebar -->
      <!-- div.sidebar>ul>(li>a{menu$})*5 -->
      <div class="sidebar">
        <ul>
          <li><a href="">menu1</a></li>
          <li><a href="">menu2</a></li>
          <li><a href="">menu3</a></li>
          <li><a href="">menu4</a></li>
          <li><a href="">menu5</a></li>
        </ul>
      </div>

      <!-- 右边内容信息.mainbar -->
      <!-- div.mainbar>p{coming soon}+(ul>li{item$}*10)+img[src="images/coffee.jpg"]+p{Road 23......} -->
      <div class="mainbar">
        <p>coming soon</p>
        <ul>
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          <li>item4</li>
          <li>item5</li>
          <li>item6</li>
          <li>item7</li>
          <li>item8</li>
          <li>item9</li>
          <li>item10</li>
        </ul>
        <img src="images/coffee.jpg" alt="">
        <p>Road 23......</p>
      </div>
    </div>

  
    <!-- 页面底部信息#footer，放置版权，管理员信息等 -->
    <!-- div#footer>p{copyright&copy;}+a[herf="mailto:JiangShiQi@proton.me"]{JiangShiQi@proton.me} -->
    <div id="footer">
      <p>copyright&copy;</p>
      <a href="" herf="mailto:JiangShiQi@proton.me">JiangShiQi@proton.me</a>
    </div>



  </div>



</body>
</html>

2、在第1项作业的基础上设计用户登录界面的草图，登录界面必须包含用户名、登录密码和登录按钮；

设想：

image-20240304182009856

3、根据第2步完成的设计草图，完成用户登录界面的HTML结构；

image-20240311002713956

还缺这些

image-20240311002757972

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
  /* Your CSS styles go here */
</style>
</head>
<body>

<!-- 容器作用#container -->
<div class="container">

  <div class="sms-login">
    <h2>手机短信登录</h2>
    <form id="smsLoginForm">
      <input type="tel" placeholder="请输入手机号码" required>
      <input type="text" placeholder="请输入验证码" required>
      <label>
        <input type="checkbox" required>
        我已阅读并同意相关条款和隐私政策
      </label>
      <button type="submit">注册登录</button>
    </form>
  </div>

  <div class="qr-login">
    <h2>扫码登录</h2>
    <!-- QR code should be dynamically generated here -->
    <div id="qrCode"></div>
    <p>使用微信扫描二维码登录</p>
  </div>

</div>



<script>
  // Your JavaScript for form handling and QR code generation goes here
</script>
</body>
</html>

4、在实验报告中总结标记的特点、前3步完成的作业中哪些是单标记、哪些是双标记。

将菜鸟教程中HTML部分（https://www.runoob.com/html/html-tutorial.html）进行功能分类，例如，文本类标记、媒体类标记等，注意单双标记区分，划分分类没有统一标准，根据自己的理解去划分，需告知划分标准。

放在开头了

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/449299.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

缓存更新策略（旁路更新策略）

缓存更新策略（旁路更新策略）

文章目录 前言旁路更新策略读操作写操作 总结 前言 Redis &#xff0c;是基于内存的数据库&#xff0c;我们常将其做为缓存&#xff0c;在数据访问时&#xff0c;达到更高的性能。 那么该如何使用 Redis 做为缓存呢&#xff1f;本篇文章介绍缓存的更新策略——Cache-Aside&am…
阅读更多...
ASP.Net实现玩具管理(三层架构，两项数据相乘)

ASP.Net实现玩具管理(三层架构，两项数据相乘)

目录 演示功能&#xff1a; 点击启动生成页面 步骤&#xff1a; 1、建文件 ​编辑 2、添加引用关系 3、根据数据库中的列写Models下的XueshengModels类 4、DAL下的DBHelper&#xff08;对数据库进行操作&#xff09; 5、DAL数据访问层下的service文件 6、BLL业务逻辑层…
阅读更多...
Vue3全家桶 - Vue3 - 【6】组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）

Vue3全家桶 - Vue3 - 【6】组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）

组件 一、 注册组件 1.1 ❌ 全局注册 目标文件&#xff1a;main.js&#xff1b;语法&#xff1a;import { createApp } from vue import App from ./App.vue const app createApp(App)// 全局注册 app.component(组件名字, 需要注册组件)app.mount(#app)缺陷&#xff1a; 全…
阅读更多...
06-集合篇 面试题

06-集合篇 面试题

1.算法复杂度分析 为什么要进行复杂度分析？ 指导你编写出性能更优的代码评判别人写的代码的好坏分类： 时间复杂度分析空间复杂度分析/*** 求1~n的累加和 * @param n * @return*/ public int sum(int n) {int sum = 0;for (int i = 1; i <= n; i++) {sum = sum + i;}retur…
阅读更多...
有线网络下windows电脑被投屏方案实践

有线网络下windows电脑被投屏方案实践

最近在看使用笔记本屏幕作PC副屏的解决方案 无线网络Miracast 如果使用Win10/11自带的Miracast方案&#xff08;即windows系统中的&#xff1a;设置-系统-投影到此电脑&#xff09;&#xff0c;原则上需要通过Wi-Fi网络&#xff08;这是因为Miracast就是Wi-Fi联盟组织提出的&a…
阅读更多...
Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 2、线条平滑曲面但有间隔

Python 导入Excel三维坐标数据 生成三维曲面地形图(面) 2、线条平滑曲面但有间隔

环境和包: 环境 python:python-3.12.0-amd64包: matplotlib 3.8.2 pandas 2.1.4 openpyxl 3.1.2 scipy 1.12.0 代码: import pandas as pd import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D from scipy.interpolate import griddata im…
阅读更多...
SSM整合项目（校验）

SSM整合项目（校验）

文章目录 1.前端校验1.需求分析2.HomeView.vue的数据池中添加校验规则3.HomeView.vue 绑定校验规则![image-20240311213428771](https://img-blog.csdnimg.cn/img_convert/7770bfa16814a0efd4eb818c9869a5bd.png)4.验证是否生效5.如果验证不通过&#xff0c;阻止用户提交表单1.…
阅读更多...
中兴R5300G4无法识别全部硬盘与服务器Smart31002100RAID卡修改端口模式配置方法

中兴R5300G4无法识别全部硬盘与服务器Smart31002100RAID卡修改端口模式配置方法

中兴R5300G4无法识别全部硬盘&#xff0c;需要启动UEFI模式。 问题描述 硬盘配置RAID或者HBA直通模式需要修改RAID卡的端口模式。 本文介绍服务器分别在legacy、UEFI模式下的配置方法。 适用产品 R5300 G4、R5500 G4、R8500 G4 解决方案 一&#xff0e;Legacy启动模式&#x…
阅读更多...
【深度学习】换脸新科技，InstantID: Zero-shot Identity-Preserving Generation in Seconds

【深度学习】换脸新科技，InstantID: Zero-shot Identity-Preserving Generation in Seconds

论文&#xff1a;https://arxiv.org/abs/2401.07519 代码:https://github.com/InstantID/InstantID demo&#xff1a;https://huggingface.co/spaces/InstantX/InstantID 文章目录 1 引言2 相关工作2.1 文本到图像扩散模型2.2 主题驱动的图像生成2.3 保持ID的图像生成 3 方法3.…
阅读更多...
【大厂AI课学习笔记NO.80】深度学习行业人才能力图谱

【大厂AI课学习笔记NO.80】深度学习行业人才能力图谱

深度学习领域的就业岗位及所需关键技术、工具、能力分析 深度学习作为人工智能领域的一个重要分支&#xff0c;近年来得到了飞速的发展。随着技术的不断进步和应用场景的不断拓展&#xff0c;深度学习领域的就业岗位也日益增多。本文将从领军人才、产业研发人才、应用开发人才…
阅读更多...
post为什么会发送两次请求？

post为什么会发送两次请求？

post为什么会发送两次请求&#xff1f; 同源策略 在浏览器中&#xff0c;内容是很开放的&#xff0c;任何资源都可以接入其中&#xff0c;如 JavaScript 文件、图片、音频、视频等资源&#xff0c;甚至可以下载其他站点的可执行文件。但也不是说浏览器就是完全自由的&#xf…
阅读更多...
STM32CubeMX教程---通用定时器_PWM_舵机角度控制

STM32CubeMX教程---通用定时器_PWM_舵机角度控制

实验摘要&#xff1a; 通过舵机的角度控制&#xff0c;示范通用定时器如何输出PWM信号; 目录 一、舵机速读 二、舵机如何控制角度 三、CubeMX配置 &#xff08;TIM时基、PWM周期&#xff09; 四、Keil编写代码 &#xff08;启动TIM、输出PWM、改变PWM脉宽&#xff09; 五…
阅读更多...
“antd“: Unknown word.cSpell

“antd“: Unknown word.cSpell

你遇到的问题是 VS Code 的 Code Spell Checker 插件在检查拼写时&#xff0c;将 "antd" 标记为未知单词。"antd" 是 Ant Design 的缩写&#xff0c;是一个流行的 React UI 库&#xff0c;不是一个英语单词&#xff0c;所以 Spell Checker 会将其标记为错误…
阅读更多...
案例分析篇04：数据库设计相关28个考点（1~8）（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

案例分析篇04：数据库设计相关28个考点（1~8）（2024年软考高级系统架构设计师冲刺知识点总结系列文章）

专栏系列文章推荐： 2024高级系统架构设计师备考资料（高频考点&真题&经验）https://blog.csdn.net/seeker1994/category_12601310.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】（2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…
阅读更多...
智慧水务大数据，信息化云平台建设，综合运营管理平台

智慧水务大数据，信息化云平台建设，综合运营管理平台

一、水务信息化的建设方向 1、完善基础设施构建软件定义的数据中心 基础设施&#xff0c;建设新一代软件定义的数据中心;逐步整合水务和海洋资源、统一、规范化各业务系统,按照一体化、一站式的服务进行建设。 2、整合信息资源建立智慧决策体系 统一信息采集方式&#xff0c;…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Menu）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Menu）

以垂直列表形式显示的菜单。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 Menu组件需和bindMenu或bindContextMenu方法配合使用&#xff0c;不支持作为普通组件单独使用。 子组件 包含MenuIt…
阅读更多...
线性代数（一）——向量基础

线性代数（一）——向量基础

向量基础 1、向量和线性组合2、向量的模和点乘3、矩阵4、参考 线性代数的核心是向量的加和乘两种运算的组合&#xff0c;本篇博客为线性代数的一个引子&#xff0c;主要从向量、线性组合和矩阵逐步引出线性代数的相关知识。 1、向量和线性组合 首先介绍的是向量相关&#xff0…
阅读更多...
Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...

Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...

截止到本期&#xff0c;一共发了4篇关于机器学习预测全家桶Python代码的文章。参考往期文章如下&#xff1a; 1.机器学习预测全家桶-Python&#xff0c;一次性搞定多/单特征输入&#xff0c;多/单步预测&#xff01;最强模板&#xff01; 2.机器学习预测全家桶-Python&#xff…
阅读更多...
HarmonyOS 关系型数据 整体测试 进行 初始化 增删查改 操作

HarmonyOS 关系型数据 整体测试 进行 初始化 增删查改 操作

好啊 前面的文章 HarmonyOS 数据持久化 关系型数据库之 初始化操作 HarmonyOS 数据持久化 关系型数据库之 增删改逻辑编写 HarmonyOS 数据持久化 关系型数据库之 查询逻辑编写 我们分别编写了 初始化数据库表 增删查改操作 的逻辑代码 那么 下面我们就来整体操作一下 然后 这…
阅读更多...
科技云报道：两会热议的数据要素，如何拥抱新技术？

科技云报道：两会热议的数据要素，如何拥抱新技术？

科技云报道原创。 今年全国两会上&#xff0c;“数字经济”再次成为的热点话题。 2024年政府工作报告提到&#xff1a;要健全数据基础制度&#xff0c;大力推动数据开发开放和流通使用&#xff1b;适度超前建设数字基础设施&#xff0c;加快形成全国一体化算力体系&#xff1…
阅读更多...
最新文章

Copyright @ 2022~2023