MDN-HTML

从答案训练知识。

 

实时输出：

欲练葵花宝典，需引刀自宫

 

可编辑代码：

<p>欲练<a  href="https://www.baidu.com/ "   title="中国版葵花宝典 "  target=" _blank">葵花宝典</a>，需引刀自宫<img src="https://github.com/roy-tian/mdn-examples/raw/master/html/playable-code/images/sdxl.jfif"></p>

1:href="   "：属性声明超链接的web地址

2:title=" "  ：超链接声明额外的信息

3:target="_blank" :新标签页中显示链接

4: img src=" " : 插入图片

5:   <!--  --> : 注释

原义字符
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

在HTML中应用CSS和JavaScript

分别使用 <link>元素以及 <script> 元素。

 

列表 Lists

无序 Unordered

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序 Ordered

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

描述列表 

内心独白
戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
语言独白
戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
旁白
戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

引用

块引用

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

 

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

 

缩略语

实时输出

这些代码的显示效果如下（当光标移动到项目上时会出现提示）：

NASA 做了一些动人心弦的事情。

 

<p><abbr title="nb">NASA</abbr> 做了一些动人心弦的事情。</p>

 

 

上标和下标

 <sup> 和<sub>元素可以解决这样的问题

<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

如果 x2 的值为 9，那么 x 的值必为 3 或 -3。(博客显示不出来)