本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格式为以下三种：.jpg（图片有损压缩，影响画质）、.png（图片无损压缩、容积大、具有透明通道）、.gif（动图）。图片路径地址分为本地图片和网络图片，本地图片中分为绝对路径（从盘符开始算起）和相对路径（从当前路径算起），相对路径属于平级关系，如果图片相对于上一级，表现形式为"../"在<img src="图片路径地址" alt="属性名" title="占位符">中，alt="属性名"是当图片无法正常展示出来时显示的文字，title="占位符"是鼠标移动到图片上展示出来的提醒文字。
2.HTML基础标签文本分为这个段落<p></p>标题h1-h6，文本随标签数字的增大而减小，标题的展示代码如下：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基础标签文本</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
在这里不得不说的是浏览器的机制：针对空格、回车、table键，只要在字符之间（何谓字符，类似<p>我是字符</p>就是在这个标签之间的文字），浏览器就会强制的转换为一个空格；如果没有在字符之间，则会直接清空，当然我们在编辑器中的排列添加的空格是为了排版的需要！如果想要排版展示的文字和在浏览器窗口展示的一样，我们应该怎么办？常见代码如下：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基础标签文本</title>
</head>
<body>
换行<br>
<hr>下划线
空格 <!--字符实体-->
文本格式化标签：
<strong>文本加粗</strong>
<em>斜体</em>
<del>删除线</del>
</body>
</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>,还有我们常说的书签标记：锚点展示代码形式如下
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<br><a name="br">1</a>
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
<br>21
<br>22
<br>23
<br>24
<br>25
<br>26
<br>27
<br>28
<br>29
<br>30
<br>31
<br>32
<br>33
<br>34
<br>35
<br>36
<br>37
<br>38
<br>39
<br>40
<br>41
<br>42
<br>43
<br>44
<br>45
<br>46
<br>47
<br>48
<br>49
<br>50
<br>51
<br>52
<br>53
<br>54
<br>55
<br>56
<br>57
<br>58
<br>59
<br>60
<br>61
<br>62
<br>63
<br>64
<br>65
<br>66
<br>67
<br><a href="#br">68点击跳转到1</a>
<br>69
<br>70
<br>71
<br>72
<br>73
<br>74
<br>75
<br>76
<br>77
<br>78
<br>79
<br>80
<br>81
<br>82
<br>83
<br>84
<br>85
<br>86
<br>87
<br>88
<br>89
<br>90
<br>91
<br>92
<br>93
<br>94
<br>95
<br>96
<br>97
<br>98
<br>99
<br>100
</body>
</html>
<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>
4.html基础标签列表分为无序列表，有序列表，自定义列表，字面意思理解就是有无顺序的区别，代码展示形式如下：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html基础标签列表</title>
</head>
<body>
<!-- 无线列表type="circle"定义列表前展示的样式，现在基本用的是style="list-style: ;"-->
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 有序列表 -->
<ol style="list-style: square;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>
<dd>文本</dd>
</dt>
</dl>
</body>
</html>
5.html基础标签表格<table>包含若干行<tr>，行里面包含若干个单元格,单元格的标题是<th>内容为<td>，在表格中最重要的2个是合并行或者列，而colspan=""代表的是单元格可横跨列数rowspan=""代表的是可横跨行数，展示代码:
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html基础标签</title>
</head>
<body>
<table border="1"><!--边框为1px-->
<caption>colspan列数 rowspan行数</caption><!--表格头部标题-->
<tr>
<th rowspan="4">部门</th>
<th>姓名</th>
<th>性别</th>
<th>工资</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>1W</td>
</tr>
<tr>
<td>小林</td>
<td>男</td>
<td>1W</td>
</tr>
<tr>
<td>小影</td>
<td>女</td>
<td>1W</td>
</tr>
<tr>
<td colspan="3">工资合计</td>
<td>3W</td>
</tr>
</table>
</body>
</html>
| 
发表于 2020-3-24 07:00:01
