HTML文本及图像和锚基础

一、HTML文本结构

1. 添加段落：要在网页中开始一个新的段落，使用 p元素。（通过 css 可以为段落添加样式，包括字体、字号、颜色等。以及控制内行间距，段落文本对齐方式等。）

    <p> Text </p>
   

2. 指定细则：small元素 表示细则一类的旁注，通常是文本中的一小块。

   <p> HTML <small> HyperText Markup Language </small> </p>
   

3.标记重要和强调文本：strong元素 表示内容的重要性，而 em元素 表示内容的着重点。

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>

浏览器通常将 strong 文本以粗体显示，em 文本以斜体显示。可以用 CSS 将任何文本变为粗体或斜体，也可以覆盖 strong 和 em 等元素的浏览器默认显示样式。

4.创建图：图可以是图表、照片、图形、插图、代码片段以及其他类似的独立内容。通过引入 figure 和 figcaption，figcaption 是 figure 的标题。

<figure>
<figcaption>
 [标题内容]
</figcaption>
 [插入内容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必须的，但是只有包含它，就必须是 figure 元素内嵌的第一个或最后一个，且只能有一个。 5.指明引用或参考：使用 cite元素 可以指明对某内容源的引用或参考。默认以斜体显示（不因使用 cite 引用人名）

 <p> he Listend to <cite> Abbey Road </cite> </p>

6.引述文本：有两个特殊的元素用以标记引述的文本。blockquote元素 表示单独存在的引述，其默认显示在新的一行。而 q元素 则用于短的引用，如句子里面的引述。由于q元素存在夸浏览器问题，应该避免使用，而是直接输入引号。

<blockquote>
 text...
</blockquote>
浏览器对应q元素中的文本自动加上语音的引号。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定时间：使用 time元素 标记时间、日期或时间段。输入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

<time> 16:20 </time>  <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>

8.解释缩写词：使用 abbr元素 标记缩写词并解释其含义。（通常是使用括号提供缩写词的全称是解释缩写词最直接的方式）

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>

9.定义术语:在HTML中定义术语时，使用 dfn元素 对其作语义上的区分，首次定义术语通常会对其添加区别于其他文本格式，后续在使用术语时不再需要使用dfn对其进行标记。 （默认以斜体显示）

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>

10.创建上标和下标:比主体文本稍高或稍低的字母或数字分别成称为上标和下标。可以使用 sub元素 创建下标， sup元素 创建上标。上标和下标字符会轻微地扰乱行与行之间的均匀间距，但可以使用 CSS 修复这个问题。

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>

11.添加作者联系方式: address元素 用以定于与 HTML 页面或页面一部分有关的作者、相关人士信息或组织联系信息，通常位于页面底部或相关部分内。

 <footer role = "contentinfo">
  <p> <small> &copy; 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>

12.标注编辑和不再准确的文本:有时可能需要将在前一版本之后对页面的编辑标出来，或者对不再准确、不再相关的文本进行标记。有两种用于标注编辑的元素：代表添加内容的 ins元素 和标记已经删除内容的 del元素。

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>
  

通常对已删除的文本加上删除线，对插入的文本加入下划线。标记不再准确或不再相关的文本

  <li> <s> 5 p.m </s> SOLD </li>
  

13.标记代码:如果你的内容包含代码示例或文件名，使用 code元素。

 <p> The <code> showPhoto() </code> ... <code> &lt ;ul 
 id = "thumbanil" &gt; </code> list </p>

14.使用预格式化的文本：通常浏览器会将所有额外的回车和空格压缩，并根据窗口大小自动换行，预格式化的文本可以保持固有的换行和空格。pre元素。

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>

15.突出显示文本：类似文本中的荧光笔！HTML5 使用新的 mark元素 实现，引起读者对特定文本片段的注意。对原生支持的浏览器将对该元素文字默认加上黄色背景。

<p> GSL is <mark> YYDS! </mark>       

16.创建换行：当我们希望在文本中手动强制文字进行换行时，可以使用 br元素 (空元素).

<p> 123 <br />
    456 <br />
</p>

17.创建span：同 div 一样，span元素 是没有任何语义的，不同的是，span 只适合包围字词或短语内容，而 div 适合包含块级内容。

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>

18.其他元素：

U元素：用来为文本添加下划线。

wbr元素：表示可换行处。让浏览器知道在哪里可以根据需要进行换行（存在跨版本问题）。

ruby元素：旁注标记是一种惯用符号，通常用于表示生僻字的发音。

bdi和bdo元素：如果某些页面中混合了从左至右书写的字符（如拉丁字符）和从右至左书写的字符（如阿拉伯语）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分数的值或已知范围的测量结果。

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>

progress元素:表示某项任务完成的进度，可用它表示一个进度条。不能与 meter 混在一起使用。

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>

二、 HTML图片

在页面插入图片：输入 <img src=image.url" />

<img src="xxx.jpg"  />        

提供替代文本：在 img 标签内，src 属性及值的后面，输入 ； 输入图像出于某种原因没有显示时应该出现的文本。指定图像的尺寸：在 img 标签内，src 属性后输入width="x", heigth="y"; 以像素为单位指定 x 和 y。

三、 HTML链接

创建一个指向另一个网页的链接：

输入 <a href="URL"> 此处输入链接标签 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>        

创建锚并链接到锚： 通常激活一个链接会将用户带到对应网页的顶端。如果想用户跳至网页特定区域，可以创建一个锚，并在链接中引用该锚。

1.创建锚： 输入 id="anchor-name",其中 name 是在内部用来标识网页中这部分内容的文字。

2.创建锚链接到特定锚链接：输入 <a href="#"anchor-name>，其中 anchor-name 是目标的 id 属性值。

3.输入标签文本（默认带下划线蓝色字体），用户激活该字体时将用户带到（1）步中引用的区域文本。

```<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Creating and Linking to Anchors</title>
</head>
<body>

<article>
	<header>
		<h1>Frequently Asked Questions (FAQ)</h1>
		
		<nav>
			<ul>
				<li><a href="#question-01">Can an id have more than one word?</a></li>
				<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
				<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
				<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
			</ul>
		</nav>
	</header>

	<h2 id="question-01">Can an id have more than one word?</h2>
	<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>

	<h2 id="question-02">Can visitors bookmark anchor links?</h2>
	<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>

	<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
	<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>

	<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
	<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>

</body>
</html>
、