HTML基础标签图片文本超链接列表表格介绍

1.HTML基础标签图片常见代码形式常见的图片格式为以下三种:.jpg(图片有损压缩,影响画质)、.png(图片无损压缩、容积大、具有透明通道)、.gif(动图)。图片路径地址分为本地图片和网络图片,本地图片中分为绝对路径(从盘符开始算起)和相对路径(从当前路径算起),相对路径属于平级关系,如果图片相对于上一级,表现形式为"../"在中,alt="属性名"是当图片无法正常展示出来时显示的文字,title="占位符"是鼠标移动到图片上展示出来的提醒文字。
2.HTML基础标签文本分为这个段落

标题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>标题1h1>
10     <h2>标题2h2>
11     <h3>标题3h3>
12     <h4>标题4h4>
13     <h5>标题5h5>
14     <h6>标题6h6>   
15 body>
16 html>

 在这里不得不说的是浏览器的机制:针对空格、回车、table键,只要在字符之间(何谓字符,类似

我是字符

就是在这个标签之间的文字),浏览器就会强制的转换为一个空格;如果没有在字符之间,则会直接清空,当然我们在编辑器中的排列添加的空格是为了排版的需要!如果想要排版展示的文字和在浏览器窗口展示的一样,我们应该怎么办?常见代码如下:

 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基础标签超链接,常见形式为文本,在href="#"里面,这个#可以替换为任何网址,如果不写就为空,用#表示。点击链接的文本,链接的网址打开形式分为当前窗口和新窗口打开,展示代码为新窗口打开,当前窗口打开,还有我们常说的书签标记:锚点展示代码形式如下
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
<br><a name="br">1a>
<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点击跳转到1a>
<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>
View Code

 1 68点击跳转1或者也可以这样写:168点击跳转1,除此之外,默认的点击返回顶部

  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>Documenttitle>
  7 head>
  8 <body>
  9 <br><a id="br">1a>
 10 <br>2
 11 <br>3
 12 <br>4
 13 <br>5
 14 <br>6
 15 <br>7
 16 <br>8
 17 <br>9
 18 <br>10
 19 <br>11
 20 <br>12
 21 <br>13
 22 <br>14
 23 <br>15
 24 <br>16
 25 <br>17
 26 <br>18
 27 <br>19
 28 <br>20
 29 <br>21
 30 <br>22
 31 <br>23
 32 <br>24
 33 <br>25
 34 <br>26
 35 <br>27
 36 <br>28
 37 <br>29
 38 <br>30
 39 <br>31
 40 <br>32
 41 <br>33
 42 <br>34
 43 <br>35
 44 <br>36
 45 <br>37
 46 <br>38
 47 <br>39
 48 <br>40
 49 <br>41
 50 <br>42
 51 <br>43
 52 <br>44
 53 <br>45
 54 <br>46
 55 <br>47
 56 <br>48
 57 <br>49
 58 <br>50
 59 <br>51
 60 <br>52
 61 <br>53
 62 <br>54
 63 <br>55
 64 <br>56
 65 <br>57
 66 <br>58
 67 <br>59
 68 <br>60
 69 <br>61
 70 <br>62
 71 <br>63
 72 <br>64
 73 <br>65
 74 <br>66
 75 <br>67
 76 <br><a href="#br">68a>
 77 <br>69
 78 <br>70
 79 <br>71
 80 <br>72
 81 <br>73
 82 <br>74
 83 <br>75
 84 <br>76
 85 <br>77
 86 <br>78
 87 <br>79
 88 <br>80
 89 <br>81
 90 <br>82
 91 <br>83
 92 <br>84
 93 <br>85
 94 <br>86
 95 <br>87
 96 <br>88
 97 <br>89
 98 <br>90
 99 <br>91
100 <br>92
101 <br>93
102 <br>94
103 <br>95
104 <br>96
105 <br>97
106 <br>98
107 <br>99
108 <br>100   
109 body>
110 html>
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     
10     <ul type="circle">
11         <li>1li>
12         <li>2li>
13         <li>3li>
14         <li>4li>
15     ul>
16     
17     <ol style="list-style: square;">
18         <li>1li>
19         <li>2li>
20         <li>3li>
21         <li>4li>
22     ol>
23     
24     <dl>
25         <dt>
26             <dd>文本dd>
27         dt>
28     dl>
29 body>
30 html>

 5.html基础标签表格

包含若干行,行里面包含若干个单元格,单元格的标题是
内容为,在表格中最重要的2个是合并行或者列,而colspan=""代表的是单元格可横跨列数rowspan=""代表的是可横跨行数,展示代码如下:

 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">
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>1Wtd>
21         tr>
22         <tr>
23             <td>小林td>
24             <td>td>
25             <td>1Wtd>
26         tr>
27         <tr>
28             <td>小影td>
29             <td>td>
30             <td>1Wtd>
31         tr>
32         <tr>
33             <td colspan="3">工资合计td>
34             <td>3Wtd>
35         tr>
36     table>
37 body>
38 html>
 

你可能感兴趣的:(HTML基础标签图片文本超链接列表表格介绍)