<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本排版部分</title>
<style>
.t1{text-align:center;
font-family:Microsoft Yahei;
font-size:20px;
}
abbr{text-decoration:none;}
</style>
</head>
<body>
<h1>HTML的文本排版部分</h1>
<hr/>
<h2 style="text-align:center" id="LearningRate1">介绍</h2>
<span><strong>文本四剑客</strong>主要由
<abbr title="块级元素" style=""><mark><h>标题</mark></abbr>、
<abbr title="块级元素"><mark><p>段落</mark></abbr>、
<abbr title="行内元素"><mark><a>链接</mark></abbr>、
<abbr title="行内元素"><mark><q>引用（字或词）</mark></abbr>组成，是HTML学习里最为重要的一部份。该部分我们不仅要记住所有相关的文
本标签，还要记住所有相关的属性啊！以及他们的格式用法！比如html和css在文本排版时的用的格式、我们在作品展示时的模板啊以及网页跳转或导航索引的一些问题。
</span>
<br/><br><h2 style="text-align:center" id="LearningRate2">HTML格式部分</h2>
<table border="1" width="1200" cellpadding="10">
<thead>
<tr>
<th colspan="3" class="t1">格式大排档</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>加粗</td>
<td><i>斜体</td>
<td><sub>下标</td>
</tr>
<tr>
<td><abbr title="当解释删除文档的原因时要使用cite属性，cite中的内容可以是链接也可以是一句话等，datetime可以记录你修改该文本的时间">
<mark><del>删除线</mark></abbr></td>
<td><abbr title="ins的属性和del的属性一样"><mark><ins>下划线</mark></abbr></td>
<td><strong>加粗（用于被强调的文本）</td>
</tr>
<tr>
<td><big>文本放大</td>
<td><small>文本缩小</td>
<td><em>斜体（用于被强调词语或句子）</td>
</tr>
<tr>
<td><sup>上标</td>
<td><abbr>缩写（当鼠标放在文字上时会显示注释）</td>
<td><mark>高亮</td>
</tr>
<tr>
<td><br>换行</td>
<td><hr>水平分隔线</td>
<td><bdo>文本方向（rtl或ltr）</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><em>以上所有标签全都是行内元素！！！</em></td>
</tr>
</tfoot>
</table>
<br><br><h2 style="text-align:center">CSS格式部分</h2>
<p><strong>背景颜色：</strong>（标签中）background-color="red"  （style中）background-color:red;</p>
<p><strong> 字体 ：</strong>（标签中）font-family="宋体"     （style中）font-family:宋体;</p>
<p><strong>字体颜色：</strong>（标签中）color="green"       （style中）color:green;</p>
<p><strong>字体大小：</strong>（标签中）font-size="10px"      （style中）font-size:10px;</p>
<p><strong>文字对齐：</strong>（标签中）text-align="left"      （style中）style="text-align:left"</p>
<br><br><h2 style="text-align:center" id="LearningRate3">作品模板简介</h2>
<p>1.当在豆瓣上展示电影作品时主要会用到以下几个部分：
<abbr title="行内元素"><mark><cite>作品标题</mark></abbr>、
<abbr title="块级元素"><mark><address>作品信息</mark></abbr>、
<abbr title="块级元素"><mark><blockquote>（句子）作品内容简介</mark></abbr>；
</p>
<p style="color:red">注意：address的特殊点，元素位于body元素内部，则它表示该文档作者或所有者的联系信息。元素位于article元素内部，则它表
示该文章作者或所有者的联系信息。还有请注意使用blockquote引用别人的句子时，要使用cite属性标清楚句子的出处。</p>
<p>2.当在博客或某帖子、报纸中写文章时会用到以下几个东西：
<abbr title="块级元素"><mark><article>文本部分</mark></abbr>、
<abbr title="块级元素"><mark><hgroup>标题分组（用于当一个文本中有多个标题时）</mark></abbr>
<abbr title="块级元素"><mark><section>文本分组（用于小标题作文或描述）</mark></abbr>
<abbr title="块级元素"><mark><header>页眉（作为介绍内容或者导航链接栏的容器）</mark></abbr>、
<abbr title="块级元素"><mark><footer>页脚（包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等）</mark></abbr>；
</p>
<p>3.当在写百科或对某个东西进行解释时，文本缩写很重要，文本缩写的主要格式是<abbr title="全称或注释">缩写内容或关键词</abbr>。其中该网页中的介绍的四剑
客介绍和作品模板简介就用到了缩写部分的应用。</p>
<p>4.当你想将一个代码展示出来时用<code>或<pre>作为文本标签。</p>
<p>5.当要展示多个链接时可以使用nav标签来规定链接的区域。</p>
<p>6.当想要使用文本菜单可使用details和summary标签实现（注意：如果想不隐藏summary内容可以使用<details open>）</p>
<p>7.当再写英语文章时，如果单词或文字太长，或者您担心浏览器会在错误的位置换行，可以使用war来解决，格式：<war>换行<war>（注意不是</war>噢）</p>
<p>8.当有需要注释拼音的汉语或其他东西时可以使用<ruby>和<rp>以及<rt>标签来实现</p>
<br><br><h2 style="text-align:center">符号全家桶（不需要全部记住）</h2>
<img src="HTML符号代码.png" alt="HTML符号代码" width="1200">
<i>符号参考手册<a href="https://www.w3cschool.cn/htmltags/ref-entities.html" target="_blank">点击这里</a></i>
<br><br><h2 style="text-align:center">链接部分的属性介绍</h2>
<dl>
<dt>链接做地址时：<a href="www.baidu.com" target="_block" type="text/html">百度链接<a></dt>
<dd>1.href写的是链接地址或锚点位置</dd>
<dd>2.target的值：_block在新的网页打开；_top在本网页打开；</dd>
<dd>3.type="text/html"表示这个链接打开的地址是一个html型的网页</dd>
</dl>
<dl>
<dt>链接做锚点时：<a href="#C4">索引至第四部分<a></dt>
<dd>1.上述代码会根据id="C4“索引到那个部分</dd>
<dd>2.链接还可以打开别的html文件，<a href="文件地址（如C:/xxx.html）">跳转页面<a></dd>
</dl>
</body>
</html>HTML学习-文本排版部分
最新推荐文章于 2024-08-14 21:47:37 发布
扫一扫
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
