html5教程，零基础html5自学教程

绝对地址 ：以盘符开始，例如：C:\Program Files\AMD

相对地址 ：相对于当前而言，从现在的位置开始找到目标位置

../ ：表示上一级目录

链接标签

<a href="http://www.baidu.com" target="_blank" >点我跳转至百度</a> <a href="图像标签.html" target="_self">    <img src="resources\image\1.jpg" alt="快手图片" title="悬停文字" height="300" width="500" > </a>

超链接打开方式默认为“-self”，文字添加超链接后会变为蓝色；图片添加超链接后，鼠标停留在图片上会变为小手手。

点击有超链接的文字或图片会跳转到href所指定的位置，如百度，自己做的网页等都是可以哒~

锚链接

   1.需要一个锚标记
   2.跳转到标记
   3.用“#”+锚标记

<a name="top"></a> <a href="#down">到底部</a> ...... <p><a href="#top">回到顶部</a></p> <p><a name="down"></a></p>

该功能与上面超链接原理相同，自己在顶部或尾部设置个锚标记，跳转时用 ”#+锚标记“ 即可。

也可以从一个网页跳转到新网页的底部，这里不再赘述。代码如下：

<a href="链接标签.html#down" target="_blank">跳转</a>

简单介绍一下行内元素和块元素

块元素: 总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列

行内元素：和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列

块元素：<p> <h1>...<h6> 行内元素：<a> <strong></strong> <em></em>

内联标签：在网页（一块给定区域）中打开另一个网页

<iframe src="" name="hello" height="800" width="1000"></iframe> <!-- 上面代码为给定区域 --> <a href="链接标签.html" target="hello"> 点击跳转 </a> <!-- 上面代码表示需要打开的新页面及打开方式，打开方式为上面给定的“hello”即：在上方指定区域打开新网页-->

列表标签

有序列表：

<ol>  <li>java</li>  <li>html</li>  <li>css</li>  <li>js</li>  <li>c/c++</li> </ol>

无序列表：

<ul>  <li>java</li>  <li>html</li>  <li>css</li>  <li>js</li>  <li>c/c++</li> </ul>

自定义列表：

    dl：标签
    dt：列表名称
    dd：列表内容

<dl>  <dt>学科</dt>  <dd>java</dd>  <dd>web前端</dd>  <dd>C语言</dd>  <dt>位置</dt>  <dd>北京</dd>  <dd>郑州</dd> </dl>

有序标签会标有“1、2、3......”，无序标签前面会有一个“点”，如下：

• java

媒体标签

<video src="resources/video/1.mp4"  controls autoplay> </video> <br> <audio src="resources/audio/周迅%20-%20飘摇.mp3" controls autoplay> </audio>

表格标签

<table border="1px"> <tr > <!--        跨列-->  <td>1-1</td>  <td>1-2</td>  <td>1-3</td> </tr> <tr> <!--        跨行-->  <td>2-1</td>  <td>2-2</td>  <td>2-3</td> </tr> <tr>  <td>3-1</td>  <td>3-2</td>  <td>3-3</td> </tr> </table>

border：用来设置表格的边框宽度

跨列：

<td colspan="3">1-1</td>

跨行：

<td rowspan="2">2-1</td>

注：跨行、列只能在首个位置进行修改，要在td标签中设置colspan或rowspan。

对上述代码进行修改如下：

<table border="1px">    <tr > <!--        跨列-->        <td colspan="3">1-1</td>    </tr>    <tr> <!--        跨行-->        <td rowspan="2">2-1</td>        <td>2-2</td>        <td>2-3</td>    </tr>    <tr>        <td >3-2</td>        <td>3-3</td>    </tr> </table>