Day4

一、Text Formatting——文本格式

1、 Highlighting——凸出显示

<mark>元素在HTML5中是新元素，用于标记或突出显示文档中的文本，“因为它在另一个上下文中的相关性”。最常见的例子是搜索结果，即用户输入了搜索查询，结果会突出显示所需的查询。

用法：如下所贴的代码，只要将想要凸出的文本用<mark></mark>夹住就可以。

代码：

<p>
    Here is some content from an article that contains the
    <mark>searched query<mark>
    that we are looking for. Highlighting the text will make it easier for                 
    the user to find what they are looking for.
</p>    

实现：

 2、斜线、加粗和下划线。

1、斜线

代码：这俩句都是实现斜体的

<p><em>Italicized Text Here</em></p>

<p><i>Italicized Text Here</i></p>

实现：

 

2、加粗

代码:俩种方式都是加粗

<strong>Bold Text Here</strong>

<b>Bold Text Here</b>

实现：

3、下划线 

代码：

<p>This paragraph contains some <u>mispelled</u> text.</p>

实现：

 3、缩写

代码：

<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>

实现：

 4、插入、删除和下划线

1、插入：

代码：

<ins>New Text</ins>

实现：

2、删除：

代码：

<del>Deleted Text</del>

3、下划线：

代码：

<s>Struck-through text here</s>

实现：

 5、Anchors and Hyperlinks——锚和超链接

1、Link to another site——连接到另外一个站点

代码：

 <a href="http://example.com/">Link to example.com</a>

实现：

2、Link to an anchor——连接到锚

代码：

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

实现：

3、Link to a page on the same site——连接到同一个网站的一个页面

 代码：

<a href="http://example.com/page">Text Here</a>

实现：

 4、 Link that dials a number——连接一个号码

代码

<a href="tel:11234567890">Call us</a>

实现

6、Lists——列表

 1、order List——系列列表

代码：

<ol>
 <li>Item</li>
 <li>Another Item</li>
 <li>Yet Another Item</li>
</ol>

实现：

 2、Unordered List——无序列表

代码：

<ul>
 <li>Item</li>
 <li>Another Item</li>
 <li>Yet Another Item</li>
</ul>

实现：

3、 Nested lists ——嵌套列表

代码：

<ul>
 <li>item 1</li>
 <li>item 2
 <ul>
 <li>sub-item 2.1</li>
 <li>sub-item 2.2</li>
 </ul>
 </li>
 <li>item 3</li>
</ul>

实现：

7、 Tables——表

 1、Simple Table——简单表

代码：

<table>
 <tr>
 <th>Heading 1/Column 1</th>
 <th>Heading 2/Column 2</th>
 </tr>
 <tr>
 <td>Row 1 Data Column 1</td>
 <td>Row 1 Data Column 2</td>
 </tr>
 <tr>
 <td>Row 2 Data Column 1</td>
 <td>Row 2 Data Column 2</td>
 </tr>
</table>

实现：

 2、表

代码：

<table>
 <tr>
 <td>row 1 col 1</td>
 <td>row 1 col 2</td>
 <td>row 1 col 3</td>
 </tr>
 <tr>
 <td colspan="3">This second row spans all three columns</td>
 </tr>
 <tr>
 <td rowspan="2">This cell spans two rows</td>
 <td>row 3 col 2</td>
 <td>row 3 col 3</td>
 </tr>
 <tr>
 <td>row 4 col 2</td>
 <td>row 4 col 3</td>
 </tr>
</table>

实现：

 3、 Table with thead, tbody, tfoot, and caption——功能齐全的表

代码：

<table>
<caption>Table Title</caption> <!--| caption is the first child of table |-->
 <thead> <!--======================| thead is after caption |-->
 <tr>
 <th>Header content 1</th>
 <th>Header content 2</th>
 </tr>
 </thead>
 <tbody> <!--======================| tbody is after thead |-->
 <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>

实现：

8、类和id

1、Giving an element a class ——给一个元素提供一个类

类是被分配给它们的元素的标识符。使用类属性可以将类指定给元素。

2、Acceptable Values ——可接受的值

代码：

<div id="container"> ... </div>
GoalKicker.com – HTML5 Notes for Professionals 28
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

实现：

 9、Data Attributes——数据属性

代码：

<div data-submitted="yes" class="user_profile">
 … some content …
</div>

实现：