HTML 学习笔记 总结

news2024/11/17 19:30:30

总结

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

<!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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

机器学习-04-分类算法-01决策树

机器学习-04-分类算法-01决策树

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法开篇与决策树部分。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程…
阅读更多...
【Linux杂货铺】操作系统

【Linux杂货铺】操作系统

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 冯诺依曼体系结构 &#x1f4c2; 拓展问题&#xff1a;程序为什么要被加载到内存&#xff1f; &#x1f4c2; 主机与主机的交互 &#x1f4c1; 操作系统的概念 &#x1f4c2; 作用 &#x1f4c2; 理解“管理” &#x…
阅读更多...
基于Python实现电商订单的数据分析

基于Python实现电商订单的数据分析

基于Python实现电商订单的数据分析 数据集&#xff1a;技术&#xff1a;功能&#xff1a;创新点&#xff1a;明确需求和目的&#xff1a; 数据集&#xff1a; 项目使用一家全球超市4年内的电商销售订单数据&#xff0c;数据集名为superstore_dataset2011-2015.csv。数据集共有…
阅读更多...
线性代数（一）——向量基础

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

向量基础 1、向量和线性组合2、向量的模和点乘3、矩阵4、参考 线性代数的核心是向量的加和乘两种运算的组合&#xff0c;本篇博客为线性代数的一个引子&#xff0c;主要从向量、线性组合和矩阵逐步引出线性代数的相关知识。 1、向量和线性组合 首先介绍的是向量相关&#xff0…
阅读更多...
使用nexus3搭建npm私有仓库

使用nexus3搭建npm私有仓库

一、下载解压安装包 下载地址&#xff1a;nexus-3.66.0-02-win.zip 二、安装并运行私服 在cmd中进入到文件夹中的bin目录下运行一下命令 nexus.exe /run等几分钟启动后&#xff0c;浏览器访问&#xff1a;默认端口8081 http://127.0.0.1:8081/ #修改端口在etc文件下 nexus-…
阅读更多...
Oracle集群ASM磁盘扩容

Oracle集群ASM磁盘扩容

先通过lsblk来查看集群两端磁盘是否扩容成功 lsblk -a查看自己两边磁盘UUID是否相同(for i in 后面为磁盘sd后字母名) for i in x y z aa ab ac ad ae do echo "KERNEL\"sd*\", SUBSYSTEM\"block\", PROGRAM\"/lib/udev/scsi_id --whitelist…
阅读更多...
javaEE4（预习第3章，做课后习题1：简答）

javaEE4（预习第3章，做课后习题1：简答）

1、简答 &#xff08;1&#xff09;Jsp页面翻译成的Servlet类的源文件在哪里可以找到&#xff1f;servlet实例是每次请求页面都会创建一个&#xff0c;还是只有一个&#xff08;单例&#xff09;&#xff1f; tomcat工作目录下的work目录下 只有一个 页面中定义变量加和不加…
阅读更多...
扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

扫雷小游戏制作教程：用HTML5和JavaScript打造经典游戏

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
smart-doc 社区 Committer 晋升公告

smart-doc 社区 Committer 晋升公告

我们非常荣幸地宣布&#xff0c;经过 PMC 委员会的提名和讨论&#xff0c;社区成员李星志&#xff08;GitHub ID: netdied&#xff09;、陈琪&#xff08;GitHub ID: chenqi146&#xff09;和李兵&#xff08;GitHub ID: abing22333&#xff09;正式晋升为同程旅行 smart-doc 开…
阅读更多...
Jenkins自动构建 CI/CD流水线学习笔记（从入门到入土，理论+示例）

Jenkins自动构建 CI/CD流水线学习笔记（从入门到入土，理论+示例）

文章目录 1、什么是Jenkins的流水线?2、流水线语法2.1、声明式流水线2.2、脚本化流水线 3、流水线示例3.1、使用声明式流水线的语法编写的 Jenkinsfile 文件3.2、Pipeline 各种语言示例3.2.1 Java&#xff1a;3.2.2 Node.js / JavaScript3.2.3 Python 4、一套完整的Devops Jen…
阅读更多...
Adobe Photoshop 2024 v25.5.1 for mac 强大的图形编辑工具 兼容 M1/M2/M3

Adobe Photoshop 2024 v25.5.1 for mac 强大的图形编辑工具 兼容 M1/M2/M3

Mac毒搜集到的Adobe Photoshop 2024 v25.5.1 是一款强大的图形编辑和设计工具! v25.5.1版本AI生成式无法使用 应用介绍 Adobe Photoshop 2024是一款强大的图像处理软件&#xff0c;由Adobe公司开发。它可以用于编辑和处理照片、图形和其他类型的图像&#xff0c;包括设计、绘画…
阅读更多...
YOLOv5独家改进：backbone改进 | 最新大卷积核CNN架构UniRepLKNet，ImageNet 88% | CVPR2024

YOLOv5独家改进：backbone改进 | 最新大卷积核CNN架构UniRepLKNet，ImageNet 88% | CVPR2024

💡💡💡本文独家改进：大核卷积一统多种模态！RepLK正统续作UniRepLKNet，代替YOLOv5 Backbone 改进结构图如下： 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/category_12511931.html 💡💡💡全网独家首发创新（原创），适合paper ！！！ 💡…
阅读更多...
Linux查看磁盘命令df-h详解

Linux查看磁盘命令df-h详解

df -h 是一个常用的 Linux 命令&#xff0c;用于查看文件系统的磁盘使用情况并以易于阅读的方式显示。以下是 df -h 命令的详细解释&#xff1a; -h&#xff1a;以人类可读的格式显示磁盘空间大小。例如&#xff0c;使用 GB、MB、KB 等单位代替字节。 执行 df -h 命令后&…
阅读更多...
基于ElasticSearch存储海量AIS数据：时空立方体索引篇

基于ElasticSearch存储海量AIS数据：时空立方体索引篇

文章目录 引言I 时间维切分II 空间范围切分引言 索引结构制约着查询请求的类型和处理方式，索引整体架构制约着查询请求的处理效率。随着时间推移，AIS数据在空间分布上具备局部聚集性，如 果简单地将所有AIS数据插入一个索引结构，随着数据量增长，索引的更新效率、查询效率及…
阅读更多...
Codeforces Round 933 (Div. 3)（A~E）

Codeforces Round 933 (Div. 3)（A~E）

还在HACK&#xff0c;代码仅供参考。 A. Rudolf and the Ticket 关键句&#xff0c;直接枚举所有可能 #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for(int (i)(j);(i)>(k);--(i)) #defi…
阅读更多...
使用 IDEA 将本地jar上传到本地maven仓库

使用 IDEA 将本地jar上传到本地maven仓库

IDEA中的操作步骤 创建一个 Maven 运行配置 在开发工具的导航栏中&#xff0c;点击选择配置&#xff1a; 在配置界面点击左上角的加号&#xff0c;随后选择增加一个maven运行配置&#xff1a; 编辑 Maven 配置 上图中的含义&#xff1a; Name 对应的是本配置的名字、用处或功…
阅读更多...
Tomcat Web 开发项目构建教程

Tomcat Web 开发项目构建教程

1下载Tomcat安装包&#xff0c;下载链接&#xff1a;Apache Tomcat - Welcome!&#xff0c;我电脑环境为JDK8,所以下载Tomcat9.0 2、下载完压缩包后&#xff0c;解压到指定位置 3.在intelij中新建一个项目 4.选中创建的项目&#xff0c;双击shift&#xff0c;输入add frame...然…
阅读更多...
【Android】数据安全(一) —— Sqlite加密

【Android】数据安全(一) —— Sqlite加密

目录 SQLCipherSQLiteCrypt其它 SQLCipher SQLCipher 是 SQLite 数据库的的开源扩展&#xff0c;使用了 256 位 AES 加密&#xff0c;支持跨平台、零配置、数据100%加密、加密开销低至 5 -15%、占用空间小、性能出色等优点&#xff0c;因此非常适合保护嵌入式应用程序数据库&a…
阅读更多...
阿里云ECS磁盘扩容操作手册

阿里云ECS磁盘扩容操作手册

云原生专栏大纲 文章目录 ESC磁盘扩容步骤前提条件云盘备份云盘扩容扩容分区和文件系统前提条件操作视频操作步骤准备工作&#xff1a;获取目标云盘信息步骤1&#xff1a;扩容分区步骤2&#xff1a;扩容文件系统 ESC磁盘扩容步骤 扩容已有云盘的操作步骤和注意事项_云服务器 …
阅读更多...
excel如何查找两张表格共有的名单信息

excel如何查找两张表格共有的名单信息

我们需要在表格一中查找表格二中有名单的数据行 或者我想在表格二中查找表格一中有数据的数据行 这时候就可以使用上我们的公式啦 IF(COUNTIF(Sheet2!$B$2:$B$11326,B5),"YES") Sheet2&#xff1a;表示需要查询内容所在的表格 $B$2&#xff1a;表示从Sheet2表中的B2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023