HTML5学习笔记（五）
2019-08-14 本文已影响0人
理以周
1、引用大作战：
1.1 实现简短行内引用：q元素，浏览器显示为双引号
image.png
1.2 实现一大段引用：blockquote元素，用cite表示引用的来源，采用缩进的方式进行区分
<blockquote cite = "http://fishc.com.cn">
<!--这里是一大段引用哟-->
<!--这里是一大段引用哟-->
<!--这里是一大段引用哟-->
</blockquote>
image.png
HTML主要管理结果语义，样式主要css管，实现语义与呈现分离。
1.3 cite元素：定义作品的标题,变成斜体
<p><cite>王小波先生语录</cite></p>
image.png
1.4 abbr元素：用于定义简称、缩写，配合全局属性，可以指定title缩写所代表的完整含义
image.png
1.5 dfn元素：表现定义中的术语（技术名词）
<p><dfn>HTML</dfn>是一门用于创建网页的超文本标记语言。</p>
image.png
1.6 address元素：定义文档或文章的作者的联系信息（如地址、qq等等）
<address>
<strong>联系我们</strong><br>
邮箱：<a href="mailte:fishc_serivce@126.com">fishc_serivce@126.com</a><br>
旺旺：dingdingjiayu<br>
微信：fishc_studio（公众号）<br>
</address>
image.png
1.7 “魑魅魍魉”，如果网页上出现生僻字，如何给其注音：ruby、rt（用来标记注音符号）、rp（标记当浏览器不支持ruby元素时所显示的内容）元素，三个搭配使用
<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>meì</rt><rp>)</rp></ruby>
<ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
<ruby>魉<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
image.png
1.8 bdo元素：怀古“从右到左”
- Itr = left to right;
-
rtl = right to left;
image.png
2、格式化大比拼：
2.1 strong元素（使文本加粗以强调,表示重要）和b元素（变粗，无语义）
<p><strong>See the pyramids around the Nile.</strong> 看着尼罗河畔的金字塔<p/>
<p><strong>watch the sunrise from a tropic isle. </strong>注视着热带岛屿的日出</p>
<p><strong>just remember darling all the while.</strong> 回忆着自己最心爱的人</p>
<p><strong>you belong to me.</strong>你属于我</p>
<p><strong>See the marketplace in old Angier.</strong> 注视着在老安吉尔的市场</p>
<p><strong>send me photographs and souvenirs.</strong> 递送着我的照片和纪念品</p>
<p><strong>just remember when a dream appears.</strong> 回忆着梦里所展现的一切</p>
<p><strong>you belong to me.</strong>你属于我</p>
<p><strong>And I'll be so alone without you.</strong> 没有你在身边我很孤单</p>
<p><strong>maybe you'll be lonesome too.</strong> 也许你也和我一样寂寞</p>
<p><strong>Fly the ocean in a silver plane.</strong> 乘着银色飞机飞跃海洋</p>
<p><strong>See the jungle when it's wet with rain.</strong> 望着正是雨季时的丛林</p>
<p><strong>Just remember till you're home again.</strong> 回忆着一切只到你归来</p>
<p><strong>You belong to me. </strong>你属于我</p>
image.png
2.2 em元素（表示强调的语义，通常以斜体形式出现）和i元素（无语义）：
image.png
- 使用css代替b和i元素：没有无缘无故的加粗，也没有无缘无故的倾斜；
<!DOCTYPE html>
<html>
<head>
<title>格式化大比拼演示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="周小雨进阶前端大神记">
<meta name="description" content="《跟随小甲鱼成为前端大神》">
<meta name="author" content="Belle zhou">
<style type="text/css"
.bold(font-weight:bolder;)
.italic(font-style:italic;)
</style>
</head>
<body>
<p class="bold">这里的内容加粗会比较好看！</p>
<p class="italic">这里的内容倾斜会比较好....</p>
</body>
</html>
2.3 del元素（表示旧的内容）和ins元素（表示更新的内容）：
<p>从今天起，鱼c论坛的域名从<del>bbs.fishc.com</del>变成<ins>fishc.com.cn</ins>，官网从<del>
www.fishc.com</del>变成<ins>ilovefishc.com</ins></p>
image.png
2.4 s元素：（定义那些错误的内容）
image.png
2.5 u元素：下划线，表示专有名词或一些需要加下划线的地方
image.png
2.6 mark元素:表示标记文本
<p><mark>可乐、雪碧、柠檬茶</mark>，请问客观喝点啥？</p>
image.png
2.7 sup(上标)元素和sub(下标)元素：在网页上使用上标文本和下标文本（数学公式、化学公式等等）
<p>E = MC<sup>2</sup></p>
<p>Mg + Znso<sub>4</sub> = Mgso<sub>4</sub> + Zn</p>
image.png
2.8 small元素：使指定的文本变小
<h1>送钱啦！！</h1>
<p>细节不重要，反正就是送钱啦！</p>
<p>.........</p>
<p><small>本次活动最终解释权归商家所有。</small></p>
image.png
