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>… ...
随机推荐
- mysql--->权限管理原理和设置
mysql 权限管理 mysql权限检查原理 权限检查两个阶段 你有没有权限链接上来 你有没有权限执行此操作 服务器如何判断用户用户有没有权限连接上来? 通过mysql库下的user表 查看:sele ...
- STVP编译时遇到no default placement for segment .FLASH_CODE
最近编译STM8S003时需要使用flash库函数,看起来简单,实则折腾了超过1天.今天总结方法如下: 1.修改stm8s.h 156行 #define RAM_EXECUTION 注释去掉 如 ...
- Centos 7 最小化部署zabbix
前言 文章内容是作者本人编写,之前一直放在word文档中,突然有闲情转移到博客上来了,欢迎后续观看者有问题找我探讨~~~ 废话不多说,先说下原理吧 概述 工作原理 通过c/s模式采集数据,基于b/s模 ...
- flask插件全家桶集成学习---持续更新ing
不得不说flask的设计要比django要小巧精妙的多了,没有那么臃肿,只保留核心功能,其他的都需要自己引入,即各种各样的插件来满足我们的需求,我这里记录一下自己学习项目中用的插件使用方法和一些技巧总 ...
- 解决linux安装软件：/lib/ld-linux.so.2: bad ELF interpreter: 没有那个文件或目录
在linux系统中安装软件:/lib/ld-linux.so.2: bad ELF interpreter怎么解决 常用的安装因为系统软件位数问题,如:64位系统中安装了32位程序了, 是因为64位系 ...
- OpenCV3入门（二）Mat操作
1.Mat结构 1.1.Mat数据 Mat本质上是由两个数据部分组成的类: 矩阵头:包含信息有矩阵的大小,用于存储的方法,矩阵存储的地址等 数据矩阵指针:指向包含了像素值的矩阵. 矩阵头部的大小是恒定 ...
- python day01练习和作业
习题:1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型编译型语言:优点:执行速度快 缺点:维护成本高,跨平台性差解释型语言:优点:维护成本低,跨平台性好 缺点:执 ...
- 《剑指Offer》第二章（一）题3-8
为春招实习做准备,记录一下<剑指Offer>里面的面试题 第二章 面试题3:数组之中的重复数字. 这个题吧,虽然不难,但是不知道为什么就是看了很久,可能很久没有做算法题了.最后面一句话说的 ...
- postman之存储测试结果
前言 在Jmeter的随笔中,我跟大家讲过利用Jmeter工具存储测试结果,那么,postman工具要该如何存储测试结果呢?下面一起来学习吧! 一:添加一个登录请求,填入接口参数点击send 二:点击 ...
- NR / 5G - MAC Scheduler