1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格式为以下三种：.jpg（图片有损压缩，影响画质）、.png（图片无损压缩、容积大、具有透明通道）、.gif（动图）。图片路径地址分为本地图片和网络图片，本地图片中分为绝对路径（从盘符开始算起）和相对路径（从当前路径算起），相对路径属于平级关系，如果图片相对于上一级，表现形式为"../"在<img src="图片路径地址" alt="属性名" title="占位符">中，alt="属性名"是当图片无法正常展示出来时显示的文字，title="占位符"是鼠标移动到图片上展示出来的提醒文字。
2.HTML基础标签文本分为这个段落<p></p>标题h1-h6，文本随标签数字的增大而减小，标题的展示代码如下：
 <!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>就是在这个标签之间的文字），浏览器就会强制的转换为一个空格；如果没有在字符之间，则会直接清空，当然我们在编辑器中的排列添加的空格是为了排版的需要！如果想要排版展示的文字和在浏览器窗口展示的一样，我们应该怎么办？常见代码如下：

 <!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>下划线

     空格&nbsp;   <!--字符实体-->

     文本格式化标签：

     <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>,还有我们常说的书签标记：锚点展示代码形式如下

<!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>

 <!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 id="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</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>
4.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=""代表的是可横跨行数，展示代码:

 <!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列数&nbsp;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>

HTML基础标签图片文本超链接列表表格介绍的更多相关文章

  1. Web开发——HTML基础（高级文本格式 列表/style）

    文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...

  2. 2.html基础标签:无序+有序+自定义列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. html基础标签-2-textarea文本域

    textarea文本域 <!doctype html> <html lang='zh-cn'> <head> <meta charset='utf-8'> ...

  4. Html标签使用——文字、列表、表格、超链接

    注:文章来源于传智播客毕向东老师使用课件和网络.整理学习如下: 一.Html内容 1.   Html就是超文本标记语言的简写,是最基础的网页语言. 2.   Html是通过标签来定义的语言,代码都是由 ...

  5. html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格

    一.body的属性 <body  bgcolor  页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...

  6. HTML基础-- 标签、表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  7. Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  8. 2017.9.14 HTML学习总结---超链接标签图片标签

    2.4 超链接标签 定义:它是指从一个对象指向另一个对象的指针,它可以是网页中的一段文字  也可以是一张图片,以实现从一个页面到另一个页面的跳转. 格式:<a href="url&qu ...

  9. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

随机推荐

  1. Redis（八）：zset/zadd/zrange/zrembyscore 命令源码解析

    前面几篇文章,我们完全领略了redis的string,hash,list,set数据类型的实现方法,相信对redis已经不再神秘. 本篇我们将介绍redis的最后一种数据类型: zset 的相关实现. ...

  2. HLS协议

    今天来介绍一下HLS协议,这个协议是由苹果公司提出并推广开来的.来一段维基百科的定义. HTTP Live Streaming(缩写是HLS)是一个由苹果公司提出的基于HTTP的流媒体网络传输协议.是 ...

  3. Docker基础内容之端口映射

    随机映射 docker run -d -P training/webapp python app.py # -P会随机映射一个 49000~49900 的端口到内部容器开放的网络端口 映射所有接口地址 ...

  4. SpringCloud与微服务系列专栏

    一. 前置知识 学习SpringCloud之前需要具备和掌握如下框架和工具的使用:SpringMVC,Spring,Spring Boot,Mybatis,Maven,Git. SpringCloud ...

  5. 使用visual studio 2013读取.mat文件

    现在有一个T.mat 文件需要在c++中处理然后以.mat 或是.txt形式返回 T．mat中存储了十个cell,每个cell中会有一个不等长的数组 1.以下是相关配置过程: 参考:http://we ...

  6. python安装BeautifulSoup4

    今天学习使用python爬虫,书上说让安装一个BeautifulSoup的插件,网上找了,说是下载压缩文件,直接解压然后,通过两行代码就实现了,我下载了两个,还是无法使用,后来就使用在在Pycharm ...

  7. FFMPEG学习----使用SDL播放PCM数据

    参考雷神的代码: /** * 最简单的SDL2播放音频的例子(SDL2播放PCM) * Simplest Audio Play SDL2 (SDL2 play PCM) * * 本程序使用SDL2播放 ...

  8. num11---桥接模式

    比如手机类,有各种类型,比如翻盖.平板等,每一类下又有各个品牌,比如华为,如果新增一个类型,比如折叠屏,或者新增一个手机品牌,苹果,那么会导致 扩展性问题. 这种情况下,应该使用桥接模式. 代码: 创 ...

  9. Go语言实现：【剑指offer】调整数组顺序使奇数位于偶数前面

    该题目来源于牛客网<剑指offer>专题. 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和 ...

  10. 【题解】P1020 导弹拦截

    [题解]P1020 导弹拦截 从n^2到nlogn 第二问就是贪心,不多说 第一问: 简化题意:求最长不下降子序列 普通n^2: for (int i = 1; i <= n; i++) for ...