学习笔记（五）--学习高级文字排版，理解语义化

最新推荐文章于 2025-04-09 00:18:06 发布
最新推荐文章于 2025-04-09 00:18:06 发布
阅读量242 收藏
点赞数
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41008787/article/details/115867953
版权

HTML

  • disabled表示不可以输入，输入框会变成灰色
<input type="text" disabled="disabled">

下面方式也可以：

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

产生效果：
在这里插入图片描述

head

head中的内容不会在浏览器中显示，它的作用是保存页面的一些元数据
比如<titile></title>(用于表示整个 HTML 文档的标题（而不是文档内容）)

元数据：<meta>元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta>元素。当然，其他在这篇文章中提到的东西也可以被当作元数据。有很多不同种类的 <meta>元素可以被包含进你的页面的<head>元素，但是现在我们还不会尝试去解释所有类型，这只会引起混乱。我们会解释一些你常会看到的类型，先让你有个概念。

可以指定字符集：

<meta charset="utf-8">

许多 元素包含了name 和 content 特性：

name 指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

在你的站点增加自定义图标 ？？

应用CSS和JavaScript

<link> 元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="my-js-file.js"></script>

为文档设定主语言

  • lang属性
<html lang="zh-CN">

HTML文字处理基础

  • 标题是很有必要的，但尽量保证在一个页面只有三个标题
  • 结构化，也是何有必要的，要为网页划分结构层次
  • 为什么我们需要语义？
  • 列表:有序列表，无序列表
  • <em><strong>（附带一些语义知识）

超链接

超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id属性。例如，如果你想链接到一个特定的标题，可以这样做：

<h2 id="Mailing_address">邮寄地址</h2>

然后链接到那个特定的id，您可以在URL的结尾使用一个井号指向它，例如：

<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>

你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>

尽可能使用相对URL

高阶文字排版

描述列表（会产生缩进）

描述列表 (description list)的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。让我们看一组术语和定义的示例：
描述列表使用与其他列表类型不同的闭合标签— <dl>; 此外，每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd> (description description) 元素闭合。让我们来完成下面的标记例子:

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

效果：
在这里插入图片描述
会在描述部分（description description）和描述术语（description terms）之间产生缩进。

练习：

<dl>
  <dt>培根</dt>
    <dd>整个世界的粘合剂。</dd>
  <dt>鸡蛋</dt>
    <dd>一块蛋糕的粘合剂。</dd>
  <dt>咖啡</dt>
    <dd>一种浅棕色的饮料。</dd>
    <dd>可以在清晨带来活力。</dd>
</dl>

引用

块引用

<blockquote></blockquote>浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；

行内引用

<q></q>浏览器默认将其作为普通文本放入引号内表示引用。

引文

cite属性内容不会被浏览器显示，屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接：

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

效果：
在这里插入图片描述
<cite>中的引文默认的字体样式为斜体。

缩略语

<abbr>，title属性提供缩写的解释

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>

<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

鼠标放在缩略词上，可以显示title的内容

标记联系方式

<address>但要记住的一点是，<address>元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。以下两种都可以：

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

下标和上标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以解决这样的问题。

展示计算机代码

  • <code>: 用于标记计算机通用代码。
  • <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • <var>: 用于标记具体变量名。
  • <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
  • <samp>: 用于标记计算机程序的输出。

例：

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('噢，噢，噢，别点我了。');
}</code></pre>

<p>请不要使用 <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 等表象元素。</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>


<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

效果：
在这里插入图片描述

标记时间和日期

<time>

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

总结

  • 对语义化有了更深一步的了解：就是一种大家规定好的统一的语言规范标准，“遇人说人话”，虽然在页面上展示出来的效果（字体大小，加粗，斜体等）是一样的，但不同命名的标签都是有其自己内涵意义的，不能混用，否则网页和记事本，word文档有什么区别呢。

  • 学习了元数据<mata> ， 描述列表<dl> , <dt> , <dd> ,时间日期表达<time> ， 引文<cite>

  • 稍微不理解lang 属性

web前端之初级html-学习笔记分享一
weixin_52112965的博客
09-08 565
自学html基础一
Bootstrap3学习笔记(二)之排版
09-02
在本文中，我们将深入探讨Bootstrap3的排版元素，包括标题、段落、文本对齐、文本格式化以及颜色样式。 首先，Bootstrap3对HTML的标题标签（`<h1>`到`<h6>`）进行了样式调整，以提供更统一和美观的视觉效果。同时，...
html学习笔记-01
weixin_38923162的博客
05-21 740
html 基础学习笔记
Dify学习-04-学习DifyMarpFlask_PPT（生成PPT）实操笔记
最新发布
Claire的博客
04-09 281
Dify学习-04-学习DifyMarpFlask_PPT（生成PPT）实操笔记
CDGA数据治理工程师-学习笔记
w1304099880的博客
12-31 990
清晰、准确、完整。2）关系是实体之间的关联。通用术语“关系”也可以用其他名称来表示。关系的别名(Relationship Aliases)根据模型不同而变化。在关系模型中经常使用术语“关系”，在维度模型中经常使用术语“导航路径”，在NoSQL非关系型数据库模型中经常使用诸如“边界”或“链接”等术语。在概念和逻辑级别上的关系就被称为“关系”，但是在物理级别上的关系可能会采用其他名称表示，如“约束”或“引用”等，这主要取决于具体的数据库技术。表明一个实体与其他实体参与建立关系的数量。有“0、1、多”。
【前端入门】学习笔记1
2401_83805387的博客
10-26 1668
概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）
DIV+CSS学习笔记总结篇
2401_84153177的博客
04-19 835
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。]( )textarea高度自适应多行溢出省略Retina屏1px线Flexbugs其他IF IE ENDIF条件判断之IE10Chrome 翻译插件网页retina优化常用meta树状菜单em vs remcss vs jscss解决方案（w3cplus）Textures生成纹理CSSgramCsscss（检查重复声明等）附录四 部分工具资源。
前端学习笔记-html-排版标签
qq_36434637的博客
07-23 348
HTML常用标签 首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。 <hn> 标题文本 </hn> 排版标签 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。 标题标签 (熟记) h1、h2、h3、h4、h5、h6 标题标签语义： 作为标题使用...
前端HTML+CSS学习笔记（1）
2301_80981878的博客
10-26 1431
HTML（Hyper Text Markup Language）超文本标记语言超文本：暂且理解为“超级的文本”，和普通文本比，内容更丰富。标记：文本要变成超文本，就需要用到各种标记符号。语言：每一个标记的写法、读音、使用规则，构成标记语言。dl。
HarmonyOS 鸿蒙学习笔记1-DevEco Studio、ArtTS、ArkUI
m0_66174481的博客
03-30 3229
类型必须被指定，且和双向绑定状态变量的类型相同。HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，例如基于图形化的自由拖拽、数据的参数化配置等，遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。
前端学习之路-htm5+css3l笔记.doc
07-17
在PC端，开发者经常需要通过查看京东等大型网站的源代码来学习和理解CSS的实现方式。初始化CSS通常涉及重置或清除浏览器默认样式，以消除各浏览器之间的差异。例如，去除链接的下划线，改变鼠标悬停时的颜色（如粉红...
学习HTML5过程笔记
03-19
* 标签语义化：媒体标签、图片标签、音频标签、视频标签、链接标签 三、HTML标签 * 列表标签：无序列表、有序列表、自定义列表 * 表格标签：表格标题和表头、表格结构标签、合并单元格 * 表单标签：Input系列、...
学习笔记（一）前后端的基础理论
qq_41008787的博客
04-30 978
学习笔记（4.17） 基础理论 访问一个网址的过程 HTML是一种标记语言，在论坛上天机阿德富文本内容（论坛代码）也是一种标记语言 如果不加css，页面效果如下图 所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS CSS代码的基本格式是 属性：值 HTML5和XHTML JavaScript是做动态效果的，所谓的AJAX是不用刷新就能与服务器进行交互，更新页面 ...
学习笔记（十二）HTML表格
qq_41008787的博客
05-13 868
表格基础表格表格高级特性标题基础表格 <table></table>：每一个表格的内容都包含在这两个标签中; <td>列（单元格）：在表格中，最小的内容容器是单元格, 是通过 <td> 元素创建的 (‘td’ 代表 ‘table data’).； <tr>行：如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用 <tr> 元素 <th>：表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型。用
练习：观鸟网（主要练习文档结构）
qq_41008787的博客
05-13 849
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>观鸟网</title> <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet"> <link rel="stylesheet" hre
学习笔记（四）web入门--HTML+CSS+JS+发布网站
qq_41008787的博客
05-06 737
web入门--HTML+CSS+JS+发布网站HTML基础知识CSS基础“CSS规则集”详解多元素选择不同类型的选择器字体和文本一切皆盒子JavaScript基础变量注释运算符条件语句函数事件小结发布网站==获取主机服务和域名==使用在线工具如 GitHub 或 Google App Engine通过GitHub发布使用像 Thimble 的基于 Web 的集成开发环境 HTML基础知识 标题 图片 段落 列表 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 &l
学习笔记（二）主要是一些HTML的标签学习
qq_41008787的博客
04-30 675
HTML什么是HTMLHTML标签HTML标题HTML段落HTML链接HTML 图像HTML元素HTML属性标签实例HTML标题标准属性时间属性HTML水平线HTML注释标签段落标签拆行clear属性 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网
学习笔记（十）在网页中添加矢量图形
qq_41008787的博客
05-06 584
在网页中添加矢量图形矢量图和位图概念SVG是什么将SVG添加到页面矢量图和位图概念 在网上，你会和两种类型的图片打交道 — 位图和矢量图: 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.) 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用
学习笔记（十一）自适应图片
qq_41008787的博客
05-06 474
自适应图片切换分辨率并切换图像一些有用的开发工具切换分辨率切换图像为什么我们不能使用 CSS 或 JavaScript 来做到这一效果?新图像格式总结 自适应图片——一种可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片 切换分辨率并切换图像 使用两个新的属性—srcset和sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jp
HTML与CSS全面学习经验与实践总结
4. **CSS样式**：掌握不同属性的使用，包括文字排版(text styling)、背景(background)、颜色(color)、边框(border)、边距(margin)、填充(padding)等。 5. **CSS响应式设计**：学习媒体查询(media queries)来制作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值