（此文章是本人对html的学习笔记，仅供资料查询和参考，不可商用）
参考书籍《html&css设计与构建网站》
一、简单的结构（详细看书）
<br> <body></p>
<h2>二、文本</h2>
<h3>2.1标题</h3>
<p><code><h1>main heading</h1></code><br> <code><h2>level2 heading</h2></code></p>
<h3>2.2段落</h3>
<p><code><p></code><br> <code>eg:<p>a paragraph</code></p>
<h3>2.3粗体和斜体</h3>
<p><code><b>粗体文字</b></code>粗体<br> <code><i>斜体文字</i></code> 斜体</p>
<h3>2.4上标和下标</h3>
<p><code><sup></sup></code>上标 <code>eg:<p>4<sup>th</sup></code>变成4th<br> <code><sub></sub></code>下标<code><p>co<sub></sub>2</code> CO2 这种形象</p>
<h3>2.5空白</h3>
<p>空白解释：当浏览器遇到两个及以上连续空格的时候，会默认将其转化为一个空格。称为：白色空间折叠.</p>
<h3>2.6换行符和水平线</h3>
<p><code>前面的文字<br />后面的文字自动换行</code><br> <code><hr /></code>这代码会变成一条水平线</p>
<h2>三、列表</h2>
<h3>3.1有序列表</h3>
<p><code><ol></ol></code>创建有序列表<br> <code><li></li></code>列表中每个项目都被置于起始标签<code><li></code>和结束标签<code></li></code>之间</p>
<h3>3.2无序列表</h3>
<p><code><ul></ul></code>创建无序列表<br> 用<code><li></li></code>来完成内容的填充<br> 其和有序列表的区别便是有序列表前会有数字标记每行的序号</p>
<h3>3.3定义列表</h3>
<p><code><dl></dl></code>创建定义列表，其中会看到<dt>和<dd><br> <code><dt</dl></code>用来包含被定义的术语<br> <code><dd></dd></code>用来包含定义</p>
<h3>3.4嵌套列表</h3>
<p>可在<li>元素中放入另一个列表来创建字列表<br> 例子：</p>
<pre><code class="<ul>"> <li>Mousses</li>
<li>Pastries
<ul>
<li>Croissant</li>
<li>Mille-feuille</li>
<li>Palmier</li>
<li>Profiterole</li>
</ul>
</li>
<li>Tarts</li>
</ul>
</code></pre>
<h2>四、链接</h2>
<h3>4.1指向其他网站的链接</h3>
<p>网页中链接是通过<code><a></code>元素来建立，<code><a></code>元素拥有重要特性——href,href特性的值设定了链接的目标，即网站用户单击链接时所到达的页面地址。<br> 当网站用户单击位于链接起始标签<code><a></code>和结束标签<code></a></code>之间的内容，就会打开href特性所设定的网页<br> <code><a href="http://www.baidu.com">baidu</a></code><br> 页面会显示<code>baidu</code>字样的文字，点击就会去访问百度网页。</p>
<h3>4.2指向同一网站中的其他页面的链接</h3>
<pre><code class="<p>"> <ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</p>
</code></pre>
<p>这是指向文件夹中的html文件，如果没有就会报错。</p>
<h4>衍生：</h4>
<h5>相对url</h5>
<pre><code><a href="review.html">Reviews</a> //相同文件夹
<a href="music/listing.html">Listing</a> //子文件夹
<a href="movies/dvd/reviews.html">Reviews</a> //孙子文件夹
<a href="../index.html">Home</a> //父文件夹
<a href="../../index.html">Home</a> //祖父文件夹
</code></pre>
<h5>新窗口打开新连接</h5>
<p>利用target特性值,值为<code>_blank</code></p>
<pre><code><a href="https://www.baidu.com" target="_blank">baidu(open in new window)</a>
</code></pre>
<h3>五、图像</h3>
<h4>5.1添加图像</h4>
<pre><code><img src="images/example.jpg">
</code></pre>
<p>特性：</p>
<blockquote>
<p>atl：这个特性是对图像进行文本说明，是对图像的描述</p>
</blockquote>
<p>title：光标悬浮在图像上会显示title特性的内容<br> height：以像素为单位来指定图像的高度<br> wide：以像素为单位来指定图像的宽度</p>
<h4>5.2在代码插入图像位置</h4>
<p>5.2.1.先插入图片，换行后再出现文字</p>
<pre><code><img src="image/bird.gif" alt="Bird" width="100" height="100"/>
<p>
文字内容
</p>
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 560px; max-height: 284px;">
<div class="image-view">
<a href="http://img.e-com-net.com/image/info10/7789984874894d85af953e324f24714b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/7789984874894d85af953e324f24714b.jpg" width="560" height="284" alt="html 代码汇总（更新中）——供查阅html代码用_第1张图片" style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
5.2.1
</div>
</div>
<p>5.2.2.插入图片之后，跟着图片显示文字</p>
<pre><code><p>
<img src="image/bird.gif" alt="Bird" width="100" height="100"/>文字内容
</p>
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 560px; max-height: 255px;">
<div class="image-view">
<a href="http://img.e-com-net.com/image/info10/3e487805bfc9411a9960231287990821.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/3e487805bfc9411a9960231287990821.jpg" width="560" height="255" alt="html 代码汇总（更新中）——供查阅html代码用_第2张图片" style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
5.2.2
</div>
</div>
<p>5.2.3.在文字中间插入图片</p>
<pre><code><p>
文字前半部分<img src="image/bird.gif" alt="Bird" width="100" height="100"/>文字后半部分
</p>
</code></pre>
<div class="image-package">
<div class="image-container" style="max-width: 522px; max-height: 243px;">
<div class="image-view">
<a href="http://img.e-com-net.com/image/info10/13e11e67b51444ce90eef659cc485d83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/13e11e67b51444ce90eef659cc485d83.jpg" width="522" height="243" alt="html 代码汇总（更新中）——供查阅html代码用_第3张图片" style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
5.2.3
</div>
</div>
<h4>5.3旧代码</h4>
<p>5.3.1图像的水平对齐</p>
<blockquote>
<p>align:通常用来表名页面的其他部分怎样环绕在图像的周围<br> 特性值：<br> left:将图像做对齐（使文本环绕在图像的右边）<br> right将图像右对齐（使文本环绕在图像的左边）</p>
</blockquote>
<p>5.3.2图像的垂直对齐</p>
<blockquote>
<p>top:将周围文本的第一行与图像的顶端对齐<br> middle:将周围文本的第一行与图像的中间对齐<br> bottom：将周围文本的第一行与图像的底端对齐</p>
</blockquote>
<h2>六、表格</h2>
<p>6.1基本表格结构<br> <code><table></code>:创建表格，表格内容逐行编写<br> <code><tr></code>:用起始标签<br> <code><td></code>:表格中的每个单元格表示<br> <code><th></code>:和<td>元素的用法一样，但它作用是表示列或者行的标题(th代表table heading)</p>
<p>6.2<br> 6.2 .1跨列</p>
<p>直接示例就行</p>
<pre><code><table>
<tr>
<th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</th>
<tr>
<th>Monday</th>
<td colspan="2">Geogrphy</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</tr>
</table>>
</code></pre>
<p>可以看一下包含单词“Geography”的单元格，可以看见单元格中的consplan的特性值为2，这表明单元格跨两列。在第三行中，“Gym”所在的单元格跨行2列。</p>
<p>6.2.2跨行<br> 直接示例</p>
<pre><code><table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm-7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm-8pm</th>
<th>Sports</th>
<th>Current Affairs</th>
</tr>
</table>
</code></pre>
<p>用rowspan特性来表明单元格多要跨越的行数。<br> ABC在6点到8点之间播出电影，然而BBC和CNN频道在同样的时间段都播出两套节目（每套节目秩序一个小时）。<br> 看一下最后一个<tr>元素，尽管在下面的结果途中显示为4列，但它仅包含3个元素中的Movie单元格使用了rowspan特性，使得这个单元格乡下延伸并占据了在其下面的单元格。</p>
<p>6.2.3 长表格<br> <code><thead></code>：表格的标题放在<br> <code><tbody></code>：表格的主体部分<br> <code><tfoot</code>：表格的脚注<br> 示例：</p>
<pre><code><table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st Janauary</th>
<td>250</td>
<td>36</td>
</tr>
<th>2nd January</th>
<td>285</td>
<td>48</td>
<!-- additional rows as above -->
<tr>
<th>31st January</th>
<td>129</td>
<td>64</td>
</tr>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
</code></pre>
<p>6.3旧代码<br> 6.3.1.宽度和间隔</p>
<pre><code><table width="400" cellpadding="10" cellpadding="5"> <!-- cellpading是增加的表格内边距-->
<tr>
<th width="150"></th>
<th>WithDraw</th>
<th>Credit</th>
</tr>
<tr>
<th>January</th>
<th>250.00</th>
<td>660.50</td>
<td>410.00</td>
</tr>
<tr>
<th>February</th>
<th>135.55</th>
<th>895.20</th>
<td>1170.15</td>
</tr>
</table>
</code></pre>
<blockquote>
<p>width特性用于其实标签<table>，它用来指明表格的宽度，还用于起始标签<th><td>用来指定特定单元格的宽度。cellpadding特性为表哥</p>
</blockquote>
<p>6.3.2 边框和背景</p>
<pre><code><table border="2" bgcolor="#efefef"> <!-- cellpading是增加的表格内边距-->
<tr>
<th width="150"></th>
<th>Withdrawn</th>
<th>Credit</th>
<th width="150" bgcolor="#cccccc">Balance</th>
</tr>
<tr>
<th>January</th>
<th>250.00</th>
<td>660.50</td>
<td bgcolor="#cccccc">410.50</td>
</tr>
<tr>
<th>February</th>
<td>135.55</td>
<td>895.20</td>
<td bgcolor="#cccccc">1170.15</td>
</tr>
</table>
</code></pre>
<h4>示例 表格</h4>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Tables
|
Home starter hosting |
Premium business hosting |
| Disk space |
250MB |
lgb |
| Bandwidth |
5gb per month |
50gb per month |
|
Sign up now and save 10%! |
