《HTML5与CSS3基础教程》第四章学习笔记 文本
文章目录
- 第4章 文本
- 4.1 添加段落
- 4.2 指定细则
- 4.3 标记重要和强调的文本
- 4.4 创建图
- 4.5 指明引用或参考
- 4.6 引述文本
- 4.7 时间
- 4.8解释缩写词
- 4.9 定义术语
- 4.10 上标和下标
- 4.11 添加作者联系信息
- 4.12 标注编辑和不再准确的文本
- 4.13 标记代码
- 4.14 使用预格式化的文本
- 4.15 突出显示文本
- 4.16 创建换行
- 4.17 创建`span`
- 4.18 其他元素
第4章 文本
选择元素不是为了使用其样式，而是为了描述内容，比如不能为了让文字变成斜体就使用em,em是用来标记强调的文本的。
4.1 添加段落
<p>:HTML会忽略你在文本编辑器中输入的回车符和其他额外的空格。要在网页中开始一个新的段落，应该使用p元素
4.2 指定细则
small表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”
small通常是行内文本中的一小块，而不是包含多个段落或其他元素的大块文本
1.例子一：
Order now to receive free shipping. (Some restrictions may apply.)
2.例子二：
在上面的两个例子中，我们用
small元素来表示简短的法律声明。在第二个例子中，small表示的是包含在页面级footer里的版权声明，这是一种常见的用法
提示 用
small标记页面的版权信息是一种常见的做法。不过，small只适用于短语，因此不要用它标记长的法律声明，如“使用条款”和“隐私政策”页面。根据需要，应该用段落或其他语义标签标记这些内容。
4.3 标记重要和强调的文本
strong元素：表示内容的重要性。em元素：表示内容的着重点。
This is my pen.I like it.
提示 不要使用b元素代替strong，也不要使用i元素代替em。尽管它们在浏览器中显示的样式是一样的，但它们的含义却很不一样
HTML5中重新定义的
b和i元素
HTML5强调元素的语义，而非表现。b和i元素是早期HTML遗留下来的产物，它们分别用于将文本变为粗体和斜体（那时CSS还未出现）。HTML4和XHTML1当然抛弃了它们，因为它们本质上是用于表现的。当时的规范建议编码人员用strong替代b，用em替代i。不过，事实证明，em和strong有时在语义上并不合适。为此，HTML5重新定义了b和i。
传统出版业里的某些排版规则在现有的HTML语义中还找不到对应物，其中就包括用斜体表示植物学名（如“Ulmus americana is the Massachusetts state tree.”）、具体的交通工具名称（如“We rode the Orient Express.”）及外来语（如“The couple exhibited a joie de vivre that was infectious.”）。这些词语不是为了强调而加上斜体的，只是样式上的惯例。
为了应对这些情况，HTML5没有创建一些新的语义化元素（进一步把事情搞复杂），而是采取了一种很实际的做法，直接利用现有元素：em用于所有层次的强调，strong用于表示重要性，而其他情况则使用b和i。
这意味着，尽管b和i并不包含任何明显的语义，但读者仍能发现它们与周边文字的差别。而且你还可以通过CSS改变它们粗体或斜体的样式。HTML5强调，b和i应该是其他元素（如strong、em、cite等）都不适用时的最后选择。
b元素简介
HTML5将b重新定义为：
b元素表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。
例如：
<p>The <b>XR-5</b>, also dubbed the <b>Extreme Robot 5</b>, is the best robot we've ever tested.</p>
b元素默认显示为粗体。
i元素简介
HTML5将i重新定义为：
i元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等。
例如：
<p>The <i lang="la">Ulmus americana</i> is the Massachusetts state tree.</p>
<p>We rode the <i>Orient Express</i>.<p>
<p>The couple exhibited a <i lang="fr">joie de vivre</i> that was infectious.<p>
i元素默认显示为斜体。
4.4 创建图
figure元素：插入图片、图表、图形、代码以及其他的独立内容figcaption元素：figure的标题，出现在figure内容的开头或结尾处。
<figure><figcaption>花木兰</figcaption><img src="花木兰 冠军飞将.jpeg"><figcaption>冠军飞将</figcaption><code>console.log("hello mulan！")</code></figure>
4.5 指明引用或参考
cite元素：指明某内容源的引用或参考，例如，戏剧、脚本或图书的标题，歌曲、电影、照片、或雕塑的名称，演唱会或音乐会，规范、报纸或法律文书等。
4.6 引述文本
bolckquote元素：引述块级文本q元素：引述行内文本 （浏览器会默认添加双引号）
由于
q元素的跨浏览器问题，开发时要避免使用q元素，而是选择直接输入正确的引号或使用字符实体。
4.7 时间
time元素：定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的datetime属性：规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
格式：
YYYY-MM-DDThh:mm:ss或者YYYY-MM-DDT:hh:mm.sss
例如：1985-11-03T17:19:40
如果表示时间段，需要用nh nm ns
例如：<p>这个会议持续了<time>2h 41m 3s</time>
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
提示：不能在
time元素中嵌套另一个time元素，也不能在没有datetime属性的time元素中包含其他元素（只能包含文本）
4.8解释缩写词
<abbr title="abbreviation">abbr</abbr>
<abbr title="National Basketball Association">NBA</abbr><abbr>NFL</abbr>(National Football League)
页面显示效果：
方式一：
| NBA |
|---|
方式二：
| NFL(National Football League) |
|---|
方式二对手机用户友好，这些用户没办法移到
<abbr>元素上查看title提示框
4.9 定义术语
dfn元素：定义术语（只是包围术语词儿，而不包围定义）
<p>The contestant was asked to spell "pleonasm".
She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression"(Ref:<cite><a href="http://dictionary.reference.com/browse/pleonasm" rel="external">dictionary.com</a></cite>).</p>
4.10 上标和下标
sub：下标sup：上标
<a href="#footnote-1" title="Read footnote 1"><sup>1</sup></a>.
<a href="#footnote-2" title="Read footnote 2"><sup>2</sup></a>.<footer><p id="footnote-1"><sup>1</sup>It means Paul in English.</p><p id="footnote-2"><sup>2</sup>In 1963,Ibelieve.</p>
</footer>
The1.
The2.
4.11 添加作者联系信息
address元素：用以定义有关作者、相关人士或组织的联系信息，通常位于相关部分内或者页面底部
address元素的内容通常是作者的电子邮件地址或者指向联系信息页的链接。但address不能用来标记公司网站“联系我们”页面中的办公地点
提示
address只能包含作者的联系信息，不能包括其他内容，如文档或文章的最后修改时间。此外，HTML5禁止在address里包含以下元素：h1～h6、article、address、aside、footer、header、hgroup、nav和section
4.12 标注编辑和不再准确的文本
ins元素：代表添加内容,标记新插入文本del元素：代表删除内容，标记以删除文本s元素：标记不再准确或不再相关的文本
<ul><li><del>2 desks</del></li><li>1 chalkboard</li><li><del>4 solar-powered tablets</del></li><li><ins>1 bicycle</ins></li>
</ul>
<s>HTML4 HTML3 HTML2 HTML1</s>
效果如下：
2 desks- 1 chalkboard
4 solar-powered tablets- 1 bicycle
HTML4 HTML3 HTML2 HTML1
del和ins是少有的既可以包围短语内容（HTML5之前称“行内元素”）又可以包围块级内容的元素
4.13 标记代码
code元素：标记代码或文件名
<code><ul id="thumbnail"></code>
<ul id=“thumbnail”>
注意 code元素中需要表示左右尖括号的话应该要用
<和>，否则浏览器会将这些代码当做HTML元素处理 （lt:less than,gt:greater than）
4.14 使用预格式化的文本
pre元素：保持文本固有的换行和空格，这是表现计算机代码示例的理想元素
<pre><code>abbr[title]{border-bottom:1px dotted #000;}</code>
</pre>
效果如下：
abbr[title]{border-bottom:1px dotted #000;}
对比效果（不用<pre>）：
abbr[title]{
border-bottom:1px dotted #000;
}
4.15 突出显示文本
mark元素：突出显示文本
4.16 创建换行
br元素：强制换行
提示 在HTML5中，输入
<br />或<br>都是有效的
4.17 创建span
span元素：没有任何语义，适合包围资瓷或短语内容（div适合包围块级内容）
4.18 其他元素
mater元素：表示分数的值或意志范围的测量结果
简单地说，它代表的是投票结果（如“30% Smith，37% Garcia，33% Hawkins”）、已售票数（如“共850张，已售811张”）、考试分数（如“百分制的90分”）、磁盘使用量（如“256GB中的74GB”）等测量数据。
<p>project completion staus:<meter value="0.80">80% completed</meter></p>
<p>Car brake pad wear:<meter low="0.25" high="0.75" optimum="0" value="0.21">21% worn</meter>
<p>Miles walked during half-marathon:<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>
效果如下：
project completion staus:80% completed
Car brake pad wear:21% worn
Miles walked during half-marathon:4.5
《HTML5与CSS3基础教程》第四章学习笔记 文本相关推荐
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
- HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
- Python基础教程第七章学习笔记——更加抽象
7 更加抽象-创建自己的对象 前面讲了: Python主要的内建对象类型(数字.字符串.列表.元组和字典) 内建函数和标准库的用法 自定义函数的方式 本章主讲: 创建自己的对象(尤其是类型或者被称为类 ...
- Python基础教程 第六章 学习笔记
收集函数 把实际参收集到元组和字典当中 1 def print_params(*params): 2 print(params) 3 """ 4 print_parasm ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- html5入门 epub,分享《HTML5与CSS3基础教程(第7版) 》(图灵程序设计丛书) pdf epub azw3格式...
<HTML5与CSS3基础教程(第7版)> pdf epub azw3格式 下载地址: https://pan.baidu.com/s/1J2LPQoV1GP90UwaFXvKPaw 内容 ...
- C++程序设计教程（钱能）第四章 学习笔记
C++程序设计教程(钱能)第四章 学习笔记 4.1 名词解释与操作符 4.1.1 名词解释 4.1.2 操作符汇总 4.1.3 操作符的说明 4.2 算数运算问题 4.2.1 周而复始的整数 4.2. ...
- html5与css3基础教程课件,揭秘HTML5和CSS3教学幻灯片.ppt
揭秘HTML5和CSS3教学幻灯片.ppt * 揭秘HTML5和CSS3 鲁超伍|Adam / / /adamlu 网站标准的简单历史 WHATWG? Web Hypertext Applicatio ...
最新文章
- ATT扩展随选网络至100城 SDN在美国落地开花
- 前端学习（1427）：ajax封装二
- tomcat的jdbc连接池PoolExhaustedException 1
- java nio 客户端_Java网络编程:Netty框架学习(二)---Java NIO,实现简单的服务端客户端消息传输...
- 【Noip模拟 20161005】公约数
- linux入门怎么学？
- linux每日一练：Enable multithreading to use std::thread: Operation not permitted问题解决
- 计算机视觉实战(三）阈值与平滑处理
- velocity include
- JavaScript嗅探执行神器-sniffer.js，你值得拥有！
- 华为mate50会用鸿蒙系统吗,华为Mate50Pro概念机：瀑布环绕屏+鸿蒙系统，就算涨价我也劝你买...
- CR渲染器全景图如何渲染颜色通道_Corona渲染器如何处理材质溢色？【渲云渲染】...
- 中医秘笈：气不足则胖，血不足则瘦
- 移动硬盘如何合并磁盘
- Objective-C知识点总结
- 阻抗和电抗的基本概念
- 通过ip地址访问操作远程Mysql数据库
- Meta Learning/Learning to Learn, 到底我们要学会学习什么？||介绍了几篇元学习文章
- 斐讯K2 22.5.9固件刷华硕固件实测教程
- win10打开视频显示服务器运行失败,windows10系统无法播放GoPro视频的解决方法