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>… ...
随机推荐
- （初学JS）JS基础——ATM机终端程序编写<1.0>
初步学习了JS基础,为了更好地将所学知识熟练运用,我进行了银行ATM存取款机的模拟程序编写,主要通过VScode终端实现系列操作. 我的ATM程序包括6个主要功能:1.查询余额 2.存钱 3. 取钱 ...
- 华硕win10U盘重装系统进入pe
1.先要制作一个U盘的PE启动盘,建议使用WIN8 PE 2.将制作好的PE启动盘接上电脑,开机按F2键进入BIOS ,先将[Secure]菜单下[Secure Boot Control]选项设置为[ ...
- 关于STM32串口接收中断中只能接收一个字节
最近调试STM32的串口接收时发现例程中只能接收一个字节 例程如下: //初始化串口1 void uart_init(u32 bound){ //GPIO端口设置 GPIO_InitTypeDef G ...
- Redis入门，Jedis和常用命令
一.Redis简介 1．关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...
- 推荐一本学习Groovy的书籍Groovy程序设计!
有朋友公司在用groovy开发,于是推荐我学习一下,搜到了这本书: 花了一个月时间读完了这本书!写的很棒,几乎没有废话,全书都是很重要的知识点和很好的讲解,确实像封面说的那样,使用的好可以提高开发效率 ...
- NanUI | NanUI 0.7 正式发布
2020年2月10日 NanUI 0.7版正式发布. 回顾过去的一年,浑浑噩噩.生活上.工作上太多的压力和变数让我身心疲惫,目睹亲人被病痛的摧残的痛苦,无法释怀的生死别离令我沉沦许久:公司业务的变动, ...
- Hibernate(四)
==================================投影(查询)=============================投影查询:查询一个持久化类的一个或多个属性值 1.将每条 ...
- LR中解决接口请求中包含中文字符，服务器不识别的问题
在LR中,直接写的接口请求,如果请求字段包含中文字段,服务器会不识别,这个时候就要用到lr_convert_string_encoding这个函数: 具体用法: lr_convert_string_e ...
- Linux的总结
Linux学习总结: 1.需要熟练掌握各种命令,这是保证工作效率的基础.经常使用的命令 1)tar 解压 2)pwd查看所在的根目录 3)mkdir touch cp cat... 4) mv 移 ...
- Git的指令
一,访问本地Git 上一节我们已学会了如何注册GitHub和安装Git 现在先打开电脑终端或Git Bash,首先和Git打个招呼,输入Git 二.新建文件/进入文件夹 mkdir + 文件名 ...