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>就是在这个标签之间的文字），浏览器就会强制的转换为一个空格；如果没有在字符之间，则会直接清空，当然我们在编辑器中的排列添加的空格是为了排版的需要！如果想要排版展示的文字和在浏览器窗口展示的一样，我们应该怎么办？常见代码如下：
<!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>,还有我们常说的书签标记：锚点展示代码形式如下
<!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>
<!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列数 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基础标签图片文本超链接列表表格介绍的更多相关文章
- Web开发——HTML基础（高级文本格式 列表/style）
文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...
- 2.html基础标签:无序+有序+自定义列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html基础标签-2-textarea文本域
textarea文本域 <!doctype html> <html lang='zh-cn'> <head> <meta charset='utf-8'> ...
- Html标签使用——文字、列表、表格、超链接
注:文章来源于传智播客毕向东老师使用课件和网络.整理学习如下: 一.Html内容 1. Html就是超文本标记语言的简写,是最基础的网页语言. 2. Html是通过标签来定义的语言,代码都是由 ...
- html body的属性 格式控制标签 内容容器标签 超链接标签 图片标签 表格
一.body的属性 <body bgcolor 页面背景色 background 背景壁纸.图片 text文字颜色 topmargin上边距 leftmargin左边距 rightmargi ...
- HTML基础-- 标签、表格
<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 2017.9.14 HTML学习总结---超链接标签图片标签
2.4 超链接标签 定义:它是指从一个对象指向另一个对象的指针,它可以是网页中的一段文字 也可以是一张图片,以实现从一个页面到另一个页面的跳转. 格式:<a href="url&qu ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
随机推荐
- 利用在线绘制3d几何图形工具分析投影变化
业余写了个在线绘制几何图形工具,工具链接如下: https://tinygltf.xyz/drawgeometry/ 通过脚本代码在可视化窗口添加对应的点,线段,成像平面推到投影后坐标的计算: 点A通 ...
- Linux中软件安装包的格式
一.Linux常用安装包及安装方法 1.安装包一般有四类: 1)tar包,如software-1.2.3-1.tar.gz.他是使用UNIX系统的打包工具tar打包的. 2)rpm包,如softwar ...
- 工具之awk
转自:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html awk是一个强大的文本分析工具,相对于grep的查找,sed的编 ...
- Spring注解开发系列Ⅱ --- 组件注册(下)
1.@Import注册组件 @Import主要功能是通过导入的方式实现把实例加入springIOC容器中, /** * 给容器注册组件 * 1.包扫描+组件标注注解(@Controller,@Serv ...
- python基础[1]——python运算符&python数据类型之数值型
python常用运算符&数字&布尔值 上节回顾 一.变量名和标识符 变量名的命名规范 (1)只能包含数字,字母和下划线 (2)只能以字母和下划线开头(不能以数字开头) (3)标识符是区 ...
- gRPC in ASP.NET Core 3.x -- Protocol Buffer（2）Go语言的例子（下）
第一篇文章(大约半年前写的):https://www.cnblogs.com/cgzl/p/11246324.html gRPC in ASP.NET Core 3.x -- Protocol Buf ...
- 使用nginx构建一个具备缓存功能的反向代理服务器
上游服务一般不提供公网访问. upstream模块,名字叫local 这个时候访问,都是由反向代理服务处理返回的. 有了反向代理服务后,拿变量和值会出错,tcp是有对端地址的,反向代理与客户端是一个t ...
- nginx适用哪些场景
1.静态资源服务 通过本地文件系统提供服务 2.反向代理服务 ningx的强大性能 缓存 负载均衡 3.API服务 openresty
- nginx+lua在我司的实践
导读:nginx是一个高性能的反向代理服务器,lua是一个小巧的脚本语言,这两个的巧妙结合会擦出怎样的火花呢. 关键词:nginx,lua,nginx+lua 前言 nginx,lua,nginx+l ...
- 使用小书匠及markdown here编辑博客和微信公众号
1. 使用小书匠连接Evernote并发布笔记到博客园 1.1 小书匠初探 我平时的信息收集的主要方法是采用Pocket+Evernote. 简单来说: 如果访问到非常有用,而且是必须要立刻记录的内容 ...