web前台入门到实战：HTML基础标签图片文本超链接列表表格详情
1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格式为以下三种：.jpg（图片有损压缩，影响画质）、.png（图片无损压缩、容积大、具备透明通道）、.gif（动图）。图片路径地址分为本地图片和网络图片，本地图片中分为绝对路径（从盘符开始算起）和相对路径（从当前路径算起），相对路径属于平级关系，假如图片相对于上一级，体现形式为”../”在<img src="图片路径地址" alt="属性名" title="占位符">中，alt=”属性名”是当图片无法正常展现出来时显示的文字，title=”占位符”是鼠标移动到图片上展现出来的提示文字。
2.HTML基础标签文本分为这个段落<p></p>标题h1-h6，文本随标签数字的增大而减小，标题的展现代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML基础标签文本</title> 7 </head> 8 <body> 9 <h1>标题1</h1>10 <h2>标题2</h2>11 <h3>标题3</h3>12 <h4>标题4</h4>13 <h5>标题5</h5>14 <h6>标题6</h6> 15 </body>16 </html>专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）在这里不得不说的是浏览器的机制：针对空格、回车、table键，只需在字符之间（何谓字符，相似<p>我是字符</p>就是在这个标签之间的文字），浏览器就会强制的转换为一个空格；假如没有在字符之间，则会直接清空，当然我们在编辑器中的排列增加的空格是为了排版的需要！假如想要排版展现的文字和在浏览器窗口展现的一样，我们应该怎样办？常见代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML基础标签文本</title> 7 </head> 8 <body> 9 换行<br>10 <hr>下划线 11 空格 <!--字符实体-->12 文本格式化标签： 13 <strong>文本加粗</strong>14 <em>斜体</em>15 <del>删除线</del>16 </body>17 </html>3.html基础标签超链接,常见形式为<a href="#">文本</a>,在href="#"里面，这个#可以替换为任何网址，假如不写就为空，用#表示。点击链接的文本，链接的网址打开形式分为当前窗口和新窗口打开，展现代码为<a href="http://www.dhnblog.com/" target="_blank">新窗口打开</a>,<a href="http://www.dhnblog.com/" target="_self">当前窗口打开</a>,还有我们常说的书签标记：锚点展现代码形式如下
View Code
<a name="br">1</a> <a href="#br">68点击跳转1</a>或者者也可以这样写:<a id="br">1</a><a href="#br">68点击跳转1</a>,除此之外，默认的<a href="#">点击返回顶部</a>
View Code
4.html基础标签列表分为无序列表，有序列表，自己设置列表，字面意思了解就是有无顺序的区别，代码展现形式如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>html基础标签列表</title> 7 </head> 8 <body> 9 <!-- 无线列表type="circle"定义列表前展现的样式，现在基本用的是style="list-style: ;"-->10 <ul type="circle">11 <li>1</li>12 <li>2</li>13 <li>3</li>14 <li>4</li>15 </ul>16 <!-- 有序列表 -->17 <ol style="list-style: square;">18 <li>1</li>19 <li>2</li>20 <li>3</li>21 <li>4</li>22 </ol>23 <!-- 自己设置列表 -->24 <dl>25 <dt>26 <dd>文本</dd>27 </dt>28 </dl>29 </body>30 </html>5.html基础标签表格<table>包含若干行<tr>，行里面包含若干个单元格,单元格的标题是<th>内容为<td>，在表格中最重要的2个是合并行或者者列，而colspan=””代表的是单元格可横跨列数rowspan=””代表的是可横跨行数，展现代码:
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>html基础标签</title> 7 </head> 8 <body> 9 <table border="1"><!--边框为1px-->10 <caption>colspan列数 rowspan行数</caption><!--表格头部标题-->11 <tr>12 <th rowspan="4">部门</th>13 <th>姓名</th>14 <th>性别</th>15 <th>工资</th>16 </tr>17 <tr>18 <td>小明</td>19 <td>男</td>20 <td>1W</td>21 </tr>22 <tr>23 <td>小林</td>24 <td>男</td>25 <td>1W</td>26 </tr>27 <tr>28 <td>小影</td>29 <td>女</td>30 <td>1W</td>31 </tr>32 <tr>33 <td colspan="3">工资合计</td>34 <td>3W</td>35 </tr>36 </table>37 </body>38 </html>专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划）1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：HTML基础标签图片文本超链接列表表格详情
