HTML标记
单标记 <标记名/>
双标记 <标记名>内容</标记名>
注释标记 <!—内容—!>
| <!doctype> |
文档类型声明 |
触发浏览器以标准兼容模式显示页面 |
| 标记 |
根标记 |
告知浏览器自身为HTML文档 |
| 标记 |
头部标记 |
定义头部信息，如<meta>…</td>
</tr>
<tr>
<td><body>标记</td>
<td>主体标记</td>
<td>定义HTML文档所要显示内容</td>
</tr>
<tr>
<td><title>标记</td>
<td>设置页面标题标记</td>
<td>显示浏览器窗口标题栏</td>
</tr>
<tr>
<td><mata>标记</td>
<td>定义页面元信息标记</td>
<td>可重复出现，单标记，定义页面相关参数；如提供网页关键字，内容描述，定义网页刷新时间</td>
</tr>
<tr>
<td><link>标记</td>
<td>引用外部文件标记</td>
<td>引用外部文件</td>
</tr>
<tr>
<td><style>标记</td>
<td>内嵌样式标记</td>
<td>定义样式信息</td>
</tr>
</tbody>
</table>
<p><a name="zhpy0"></a></p>
<h3 id="gff6pd"><a name="gff6pd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标记的属性</h3><pre><code class="lang-html"><标记名 属性名="属性值">内容</标记名>
例如: < p alige="center">标题文本</p> //标题文本居中对齐
</code></pre>
<p><a name="wQa9j"></a></p>
<h3 id="dmwd0e"><a name="dmwd0e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本控制标记</h3><table>
<thead>
<tr>
<th><h1>….<h6></th>
<th>标题标记</th>
</tr>
</thead>
<tbody>
<tr>
<td><p></p></td>
<td>段落标记</td>
</tr>
<tr>
<td><hr/></td>
<td>水平线标记</td>
</tr>
<tr>
<td><br/></td>
<td>换行标记</td>
</tr>
</tbody>
</table>
<p><strong>注意：</strong><br />1、一个页面只能使用一次<h1>..<h6>标题标记，常被用在logo部分<br />2、h元素具有确切语义，禁止仅仅使用h标记设置文字加粗或更改文字大小<br />3、在实际工作中不赞成使用<hr/>的所有外观属性，可通过css样式设定<br />4、<hr/>标记虽然可以实现换行效果，但并不能取代结构标记<p>、<h>等
<a name="sbT4w"></a></p>
<h3 id="5rmse"><a name="5rmse" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文本格式化标记</h3><table>
<thead>
<tr>
<th><b></b>和<strong></strong></th>
<th>粗体（b定义文本粗图/strong强调文本）</th>
</tr>
</thead>
<tbody>
<tr>
<td><i></i> 和 <em></em></td>
<td>斜体（i定义斜体字/em定义强调文本）</td>
</tr>
</tbody>
</table>
<p><strong>注意</strong><br />以上文本样式格式化均可使用<span>标记配合css样式替代
<a name="TeqJd"></a></p>
<h3 id="fit3o4"><a name="fit3o4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>特殊字符标记</h3><p><a name="OB0Cr"></a></p>
<h3 id="5h7l1w"><a name="5h7l1w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图像标记</h3><p>图片格式主要有GIF、JPG和PNG三种。</p>
<pre><code class="lang-html"><img src="图像URL" />
</code></pre>
<p>常用属性：</p>
<table>
<thead>
<tr>
<th>src</th>
<th>URL</th>
<th>图像的路径</th>
</tr>
</thead>
<tbody>
<tr>
<td>alt</td>
<td>文本</td>
<td>图像不能显示时的替换文本</td>
</tr>
<tr>
<td>title</td>
<td>文本</td>
<td>图像悬停时的显示的文本</td>
</tr>
<tr>
<td>width</td>
<td>像素</td>
<td>图像宽度</td>
</tr>
<tr>
<td>height</td>
<td>像素</td>
<td>图像高度</td>
</tr>
<tr>
<td>border</td>
<td>数字</td>
<td>图像边框的宽度</td>
</tr>
<tr>
<td>vspace</td>
<td>像素</td>
<td>图像顶部和底部的空白（垂直边距）</td>
</tr>
<tr>
<td>hspace</td>
<td>像素</td>
<td>图像左侧和右侧的空白（水平边距）</td>
</tr>
<tr>
<td><br /><br /><br />align<br />（对齐属性）</td>
<td>left</td>
<td>将图像对齐到右边</td>
</tr>
<tr>
<td></td>
<td>right</td>
<td>将图像对齐到左边</td>
</tr>
<tr>
<td></td>
<td>top</td>
<td>将图像顶端和文本的第一行文字对齐，其他文字居图像下方</td>
</tr>
<tr>
<td></td>
<td>middle</td>
<td>将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方</td>
</tr>
<tr>
<td></td>
<td>bottom</td>
<td>将图像的底部和文本的第一行文字对齐，其他文字居图像下方</td>
</tr>
</tbody>
</table>
<p><strong>注意：</strong><br />1、HTMl不赞成图像标记<img/>使用border、vspace、hspace、align属性，可用css代替<br />2、网页制作中，装饰性的图像都不要直接插入<img/>标记，而是通过css设置背景图像来实现</p>
<p><strong>路径：</strong>绝对路径和相对路径
<a name="JmZRe"></a></p>
<h3 id="bhhn3x"><a name="bhhn3x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接标记</h3><pre><code class="lang-html"><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
</code></pre>
<p><a>标签用于定义超链接<br />target=”” 的值有两种 _self （默认值，在原窗口打开） _black（在新窗口打开）</p>
<p>注意：<br />1、暂时没有超链接目标是 href=”#” 表示该链接为空链接<br />2、链接可在各种网页元素中创建，例如图像，音频、文本等等<br />3、链接图像在低版本IE浏览器中会添加边框效果，去掉连接图象边框只需将边框设置为0即可
<a name="J68Lv"></a></p>
<h3 id="5hsaaq"><a name="5hsaaq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>锚点链接</h3><p>锚点链接是超<strong>链接中的一种。</strong> 锚点的妙处之一在于，你可以使用它链接到文档中的某个特定位置。 例如，有些网页内容较多，页面过长，用户需要不停的使用浏览器上的滚动条来查看文档中的内容。</p>
<pre><code class="lang-html"><a href="#id名"">连接文本</a>
</code></pre>
<p>使用相应的id名标注跳转目标的位置</p>
|
