HTML 学习笔记 总结

Jay 172024-03-12 14:23

总结

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

<!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 标签简写及全称】：

标签 英文全称 中文说明
a Anchor 锚
abbr Abbreviation 缩写词
acronym Acronym 取首字母的缩写词
address Address 地址
alt alter 替用(一般是图片显示不出的提示)
b Bold 粗体（文本）
bdo Bi-Directional Override 文本显示方向
big Big 变大（文本）
blockquote Block Quotation 区块引用语
br Break 换行
cell cell 巢
cellpadding cellpadding 巢补白
cellspacing cellspacing 巢空间
center Centered 居中（文本）
cite Citation 引用
code Code 源代码（文本）
dd Definition Description 定义描述
del Deleted 删除（的文本）
dfn Defines a Definition Term 定义定义条目
div Division 分隔
dl Definition List 定义列表
dt Definition Term 定义术语
em Emphasized 加重（文本）
font Font 字体
h1~h6 Header 1 to Header 6 标题1到标题6
hr Horizontal Rule 水平尺
href hypertext reference 超文本引用
i Italic 斜体（文本）
iframe Inline frame 定义内联框架
ins Inserted 插入（的文本）
kbd Keyboard 键盘（文本）
li List Item 列表项目
nl navigation lists 导航列表
ol Ordered List 排序列表
optgroup Option group 定义选项组
p Paragraph 段落
pre Preformatted 预定义格式（文本 ）
q Quotation 引用语
rel Reload 加载
s/ strike Strikethrough 删除线
samp Sample 示例（文本
small Small 变小（文本）
span Span 范围
src Source 源文件链接
strong Strong 加重（文本）
sub Subscripted 下标（文本）
sup Superscripted 上标（文本）
td table data cell 表格中的一个单元格
th table header cell 表格中的表头
tr table row 表格中的一行
tt Teletype 打印机（文本）
u Underlined 下划线（文本）
ul Unordered List 不排序列表
var Variable 变量（文本）

学习小记

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结构；

参考：

计划：

实现：

html 复制代码 
<!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项作业的基础上设计用户登录界面的草图，登录界面必须包含用户名、登录密码和登录按钮；

设想：

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

还缺这些

html 复制代码 
<!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）进行功能分类，例如，文本类标记、媒体类标记等，注意单双标记区分，划分分类没有统一标准，根据自己的理解去划分，需告知划分标准。

放在开头了

相关推荐
小白探索世界欧耶！~3 分钟前
使用patch-package自动修改node_modules中的内容/打补丁
前端·经验分享·笔记
IT海中的小浪花19 分钟前
《昇思25天学习打卡营第11天 | 昇思MindSpore基于 MindSpore 实现 BERT 对话情绪识别》
人工智能·学习·bert
工头阿乐22 分钟前
Python游戏脚本开发之大漠插件
前端·python·游戏
小小201741 分钟前
【前端】HTML+CSS复习记录【5】
前端·css·html
Polaris北极星少女43 分钟前
【算法笔记自学】入门篇（1）——入门模拟
数据结构·笔记·算法
小小201744 分钟前
【前端】HTML+CSS复习记录【3】
前端·css·html
不爱敲代码的南兮44 分钟前
Echarts热力图关闭初始化时动画效果（由左至右渐进加载动画)
前端·javascript·echarts
karshey1 小时前
【前端】上传和下载zip文件，有进度条（el-progess）
前端
HSunR1 小时前
线性代数笔记
笔记·线性代数·机器学习
小孟的CDN1 小时前
comsol学习笔记
笔记·学习
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）052025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解0751-2 万字长文，深度解读端到端自动驾驶的挑战和前沿08通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09浏览器插件——ModHeader 的分享和学习10＜工控＞＜PLC＞汇川Easy521系列PLC与汇川SV630N伺服进行EtherCat通讯的相关配置及指令编写