常见标签

标题

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

段落和块

<p>Text</p>
<div>Text</div>

区别

1. div就是普通的块标签，多用于布局；p是语义化的段落标签，用于文章分段
2. div默认没有边距，p标签为了表示文章分段，有默认的间距

行内书写

<span>Text</span>

使用 <span> 来组合行内元素，通常通过样式来修改行内文字的表现形态

超链接

HTML 超链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn" target="_blank">This is a link</a>

target: 打开页面方式

1. _self： 默认，在当前选项卡打开，替换当前页面
2. _blank：新的选项卡打开
3. _parent：在父框架中打开
4. _top: 在最顶层打开
5. framename

图片

<img src="a.jpg" width="100" height="10" alt="alt"/>

1. src：图片地址
2. alt： 图片因为网络等原因未成功加载时候的显示文案内容
3. width/height：可以是像素值或者相对于父容器的百分比，两个属性可以只设置一个，另外一个值会按相应等比缩放

内容相关

有序列表

<ol>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ol>

无序列表

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

换行

<br/>

分割线

<hr/>

按钮

<button>按钮</button>
<button>按钮</button>

table

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

文本相关

mark

几乎和内容无关，就是为了标示（匹配搜索项，拼写错误等）

强调

标签所包含的文本会有加粗的效果，用于强调。

着重

标签所包含的文本会产生斜体效果，表示感情上的强调，增强了语气。

<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>

When to use strong, em or mark?

全部标签可以参考HTML 标签参考手册

HTML 属性

• HTML 元素可以设置属性
• 属性可以在元素中添加附加信息
• 属性一般在开始标签中
• 属性一般以名称/值对的形式出现，比如：name="value"

下面列出了适用于大多数 HTML 元素的属性：

全部属性可以参考HTML 标准属性参考手册