、HTML文本结构

浏览器通常会为其文本元素添加不同的样式，以区别于普通文本。例如 em 和 cite 元素中的文本都是斜体的。又如，code 元素专门用来格式化脚本或程序中的代码，该元素中的文本默认使用等宽字体。内容显示的样子与其使用的标记没有关系。因此不应该为了让文字变为斜体就使用 em 或 cite，添加样式是 css 的事情。相反，应该选择能描述内容的 HTML 元素。

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

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

1. 指定细则：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> © 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> < ;ul 
 id = "thumbanil" > </code> list </p>

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

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

如果要显示包含 HTML 元素内容，应将包围元素名称的 < 和 > 分别改为对应的字符实体<和 >否则浏览器就会试着显示这些元素。大多数情况下推荐队 div 元素使用 white-space:pre 以替代 pre，因为空格可能对这些内容的语义非常重要。

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" alt="" />      

提供替代文本：在 img 标签内，src 属性及值的后面，输入 alt=""； 输入图像出于某种原因没有显示时应该出现的文本。指定图像的尺寸：在 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>

作者：excavate
https://juejin.cn/post/6988467705909248014

.概念：一种标记、描述网页的语言。超文本标记语言（Hype Text Markup Language），用标签描述网页中的图片、文本、音乐、视频、超链接等，将数据可视化展示给用户）。

2.发展：（XHTML可扩展的超文本语言，相对于html而言语法更加严格）

3.组成：

文档类型声明<!DOCTYPE>（文档开头），指示浏览器关于页面使用哪个html版本进行编译的指令。

文档标记<html>，网页根元素、根标签、根节点，让浏览器识别其是一个HTML文档。

文档头部<head>，头元素，主要用来设置字符编码、关键词，描述网页标题，引入一些外部CSS文件或者js文件，可加title标签用来说明网页标题。

文档主体<body>，包含文档所显示的所有内容。

4.语法：

分为单双标签：双标签 ， <关键字> </关键字>

单标签 ，<关键字/> （必须要关闭，留意/位置）

例如，<head><head/>为双标签，前括号为开标签，后者为闭标签; <meta/>为单标签。

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落内容</p>
</body>
</html>

5.html标签关系

嵌套（head和meta标签）、并列（head和body标签）

6.基本标签

标题标签：<h1> xx</h1>

段落标签：<p>xx</p>

斜体（有强调作用）：<em>xx</em>

斜体：<i>xx<i/>

粗体(加重语气作用): <strong>xx</strong>

粗体：<b>xx</b>

水平线：<hr/>

换行：<br/>

上标注：^xx

下标注：_xx

下划线：<u>xx</u>

删除线：<del>xx</del>

注释标签：<!--注释内容-->

7.特殊符号（键盘中无法输入的内容；连续空格；特殊含义的符号）

写法： &关键字；

空格 ： ；

< 小于：<

> 大于 ：>；

版权符号： ©；

8.图像标签

<img/> 单标签

（a）图片路径 src 引用图片的路径

（b）替换文本 alt 图片不能加载显示时的提示语

（c）提示内容 title 鼠标放上时显示的内容

（d）宽度高度 width/height

<img src="图片" alt="替换提示语" title=''codeup'' width="x" height="y"/>

html标签的属性作用：扩展html标签的功能

html标签的属性写在标签中，若有多个属性则必须用空格分隔，

属性语法是 属性=“属性值”

9.超链接

HTML 使用超级链接与网络上的另一个文档相连。点击链接可以从一个页面跳转到另一个页面。

使用<a>XX</a>标签

<a href="链接地址" ></a> 点击后到达目标位置

target ：打开网页的方式

（1） blank 新建窗口打开网页

（2） self 自身网页（默认）

10.锚链接：（从A位置到B位置）

(a)同页面内跳转

创建跳转标记：<a name="XXX"></a>

创建跳转链接：<a href="#XXX"></a>

(b)不同页面跳转

创建跳转标记：<a name="XXX"></a>

创建跳转链接：<a href="目标页面地址#XXX"></a>

(c)到页面顶部

< a href="#" >：点击跳回网页顶端