code2. body

作者: 晨曦Bai | 来源:发表于2020-07-23 11:15 被阅读0次

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/%E6%96%87%E4%BB%B6%E5%92%8C%E7%BD%91%E7%AB%99%E7%BB%93%E6%9E%84

主要内容目录

超链接 a $\color{ green }{a , href , target }$
图像 img $\color{ green }{img , src , alt }$
列表 $\color{ green }{ol...li , ul...li , dl...dt...dd }$
表格 table $\color{ green }{ table...tr...th...th...tr...td...td , colspan , rowspan ， caption }$
引用 blockquote， q， cite $\color{ green }{ blockquote , cite }$ $\color{ blue}{ q , cite }$ $\color{ red}{ cite }$
缩略语 abbr $\color{ green }{ abbr , title }$
标记联系方式 address $\color{ green }{ address }$
标记时间和日期 time $\color{ green }{ time ， datetime }$
上标下标 sup ， sub $\color{ green }{ sub，sup }$
展示计算机代码 code , pre , kbd , samp , var $\color{ green }{ code , pre , kbd , samp , var }$

1. body 内使用的基础标签

1. a

Linking to relative URLs

<a href="./p">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>

Linking to an element on the same page

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down"> Anchor to Section further down </a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Using the download attribute to save a <canvas> as a PNG

<p>Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>
<canvas width="300" height="300"></canvas>

icon is used to signify link behavior
<a  target="_blank" href="https://www.wikipedia.org">
  <img alt="(opens in new tab)" src="newtab.svg">
</a>
<a href="2017-annual-report.ppt">
  2017 Annual Report 
  <img alt="(PowerPoint file)" src="ppt-icon.svg">
</a>


Linking to an email address   --- mailto
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Linking to telephone numbers --- tel:

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

2. img

Alternative text

<img src="https://developer.mozilla.org/static/img/favicon144.png" 
 alt="MDN logo">

Image link

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visit the MDN site">
</a>

Using the srcset attribute ---  srcset   高分辨率设备上显示srcset 源上的图片，src 属性作为 1x candidate

<img src="https://developer.mozilla.org/static/img/favicon72.png" 
      alt="MDN logo" 
      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">

Using the srcset and sizes attributes  --- 满足 size 条件时显示加载与 200 px 最接近的图片，否则加载其他图片。

 <img src="/files/16864/clock-demo-200px.png" 
      alt="Clock" 
      srcset="/files/16864/clock-demo-200px.png 200w,
          /files/16797/clock-demo-400px.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

3. 描述列表 dl ... dt ... dd （description list ... description term ... description decription）

Single term and description

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>


<dl>
  <dt>Name</dt>    
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Multiple terms, single description

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Multiple terms with multiple corresponding descriptions

4. 列表，列表可嵌套 ol ... li 和 ul ... li

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

5. 表格 , 不设置 border

thead , tbody , tfoot
colgroup , col , span
caption
colspan , rowspan

属性没有边框

Simple Table

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

Simple table with header （表头）
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

带垂直表头 --- th   ---caption  表格标题

<table border="1">
<caption>我的标题</caption>
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

Table with thead, tfoot, and tbody （页眉，页脚，主题）
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

跨行或跨列的表格单元格 --- rowspan ， colspan

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

colgroup  col   --- 设置列

<table border="1">
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman" style="background-color:blue">
        <col span="2" class="flash"  style="background-color:green">
    </colgroup>
    <tr>
        <td> </td>
        <th >Batman</th>
        <th >Robin</th>
        <th>The Flash</th>
        <th >Kid Flash</th>
    </tr>
    <tr>
        <th >Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

2. 高级文字排版

1. 块引用

块级内容：段落，列表等

<blockquote cite="引用源">引用内容</blockquote>

URL指向引用的资源

2. 行内引用

<q cite="引用源">引用内容</q>

3. 引文

<a href=" 引用源 "><cite> 引用内容 </cite></a>

注意：

cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法使用<cite>元素：

<p>According to the 
        <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
              <cite>MDN blockquote page</cite>
        </a>:
</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>

<p>The quote element — <code>&lt;q&gt;</code> — is 
      <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.
      </q> 
     -- 
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
              <cite>MDN q page</cite>
      </a>.
</p>

4. 地址

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

5. 上下标

<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

6. 标记计算机代码：

<code>: 用于标记计算机通用代码。
<pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。

<pre>
    <code>const para = document.querySelector('p');

        para.onclick = function() {
                        alert('噢，噢，噢，别点我了。');
                      }
    </code>
</pre>

<p>    请不要使用 
                <code>&lt;font&gt;</code> 、 <code>&lt;center&gt;</code> 
       等表象元素。
</p>

<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>


<p>按 
        <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 
         选择全部内容。
</p>

<pre>$ <kbd>ping mozilla.org</kbd>
            <samp>PING mozilla.org (63.245.215.20): 56 data bytes
                          64 bytes from 63.245.215.20: icmp_seq=0 ttl=40       
                          time=158.233 ms
              </samp>
</pre>

7. 标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素

<time datetime="2016-01-20">20 January 2016</time>

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

code2. body

主要内容目录

1. body 内使用的基础标签

1. a

2. img

3. 描述列表 dl ... dt ... dd （description list ... description term ... description decription）

4. 列表，列表可嵌套 ol ... li 和 ul ... li

5. 表格 , 不设置 border

2. 高级文字排版

1. 块引用

2. 行内引用

3. 引文

注意：

4. 地址

5. 上下标

6. 标记计算机代码：

7. 标记时间和日期

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

code2. body

主要内容目录

1. body 内使用的基础标签

1. a

2. img

3. 描述列表 dl ... dt ... dd （description list ... description term ... description decription）

4. 列表 ， 列表可嵌套 ol ... li 和 ul ... li

5. 表格 , 不设置 border

2. 高级文字排版

1. 块引用

2. 行内引用

3. 引文

注意：

4. 地址

5. 上下标

6. 标记计算机代码：

7. 标记时间和日期

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

4. 列表，列表可嵌套 ol ... li 和 ul ... li