HTML即HyperText Mark-up Language ,意思是超文本标记语言。HTML不是一种编程语言,而是一种标记语言。超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,这种语言制作的文件保存的是一个文本文件,文件的扩展名为 .html 或者 .htm。html文档也叫 Web页面 ,其实就是一个网页。如果用浏览器打开 ,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
电脑中自带的记事本可以用于编写html,但是为了编写代码的效率和代码的可读性,我们通常要借助一些开发工具。我们常用的代码编辑工具很多,如SublimeText,WebStorm和VSCode等。本文以VSCode作为示范。
HTML文本的结构包括“头”部分(head)、和“主体”部分(body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容 ,它的标记语法是以“<”和">",主要有两种形式的标签,分别是双标签(<标签名字>标签内容<标签名字>)和单标签(<标签名字/>)。
标签中可以添加属性,格式为:<标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>
html文本的基本结构如下,在编辑器中可以通过"!"+回车键直接导出。
<!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>
</body>
</html>
html文档代码中可以插入注释,注释是对代码的说明和解释。
格式为:<!-- 注释内容-- >
<!-- 里面是注释嗷 -->
head标签作用于网页的头部,它的内容不会在正文中显示出来,主要完成对当前网页的各种设置
head中主要包含以下几种标签
常用的文本标签主要有如下几种
接下来我们通过一个案例来观察以上几种文本标签的使用方法和实际效果如何
html文本如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>⽂本标题示例</title>
</head> <body>
<h3>文本标签使用案例</h3>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<i>斜体</i> <br/>
<em>强调斜体</em> <br/>
<b>加粗</b><br/><br/>
<strong>强调加粗</strong><br/>
<del>删除线</del><br/>
<u>下划线</u> <br/><br/>
</body>
</html>
实际网页效果为:
(我们可以将这段html文本写在记事本中,并通过修改.txt文件的后缀,改为.html,即可通过网页来观察以上功能)
常用的格式化标签主要包括以下几种
接下来针对以上功能进行演示
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>格式化标签案例演示</title>
</head> <body>
<h3>HTML介绍</h3>
<p>HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式
统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。</p>
<p>“超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互
关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。</p>
<hr/>
<!-- 列表标签 -->
日程表
<ul>
<li>看书</li>
<li>看书</li>
<li>看书</li>
<li>玩游戏</li>
</ul>
<ol type="a">
<li>看书</li>
<li>看书</li>
<li>看书</li>
<li>玩游戏</li>
</ol>
<dl>
<dt>问:一加一等于几</dt>
<dd>答:不知道</dd>
<dt>问:HTML?</dt>
<dd>答:超文本标记语言</dd>
<dt>问:树上有些什么</dt>
<dd>答:金苹果</dd>
</dl>
<div>aaa</div>
<div>bbb</div>
<span>aaaa</span><span>bbbb</span>
</body>
</html>
它的实际显示效果如下:
在HTML网页中插入一张图片,使用img标签,他是一个单标签: img
主要包含以下几种常用属性
src: 图片名及url地址
alt: 图片加载失败时的提示信息
title:文字提示属性
width:图片宽度
height:图片高度
border:边框线粗细
演示实例:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<h3>图像标签实例</h3>
<img src="./你的名字.jpg" title="图片" width="300" />
<img src="./你的名字.jpg" width="280" border="2" />
</body>
</html>
实际效果:
href="链接目标url地址"显示文字
a标签的属性:
href: 必须,指的是链接跳转地址
target: 表示链接的打开方式:
_blank 新窗口
_parent 父窗口
_self 本窗口(默认)
_top 顶级窗口
framename 窗口名
title:文字提示属性(详情)
使用锚点链接时跳转地址为#加上标签的id
实例演示:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<h3>HTML标签实例--表格标签</h3>
<table border="1" width="700" cellspacing="0" cellpadding="4">
<caption><h3>学生信息表</h3></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>22</td>
<td>python04</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>22</td>
<td rowspan="2">python04</td>
</tr>
<tr>
<td>1003</td>
<td colspan="2">王五</td>
<!--<td>22</td>-->
<!--<td>python04</td>-->
</tr>
</table>
</body>
</html>
实际显示效果如下
文章浏览阅读142次。dumpbin使用查看lib导出函数https://blog.csdn.net/ermen2009/article/details/17964813_linux installer for c2000 cgt
文章浏览阅读479次。前言学习了Kotlin有一段时间了, 每次写项目/Demo的时候, 总是用到网络请求、MVP、MVVM、常用工具类、通用自定义View, 索性把这些整合到一起, 搭成一个Android的脚手架——KtArmor. 框架是我个人经验的积累, 总结. 如有不妥, 望各位大佬指出.什么是KtArmor ?KtArmor 寓意着 为Android 赋予战斗装甲, 方便开发者快速进行Android 开发。节..._android kt
文章浏览阅读2.1k次。原文链接:http://chengxu.org/p/541.htmlLinux 平台下的共享动态库,一般都是通过选项“-fPIC”编译出来。有些应用程序需要链接多个共享库,此时如果在这些共享库中存在相同作用域范围的同名静态成员变量,那么当程序访问完静态成员变量结束析构时,由于内存的 double free 会导致程序 core dump;该问题是由于 Linux 编译器的缺陷造成的,本文就此问题进..._全局变量跨dll 调用导致析构double free
文章浏览阅读2.4k次,点赞4次,收藏3次。尽管 Go 语言中装饰模式没有 Python 中应用的那么广泛,但是它也有其独到的地方。接下来就一起看下装饰模式在 Go 语言中的应用。_goland 装饰模式
文章浏览阅读1.2k次,点赞2次,收藏2次。文章目录概主要内容符号说明Y=Conv(K,X)Y=Conv(K,X)Y=Conv(K,X)的俩种表示Y=KX~Y=K\tilde{X}Y=KX~Y=KXY=\mathcal{K}XY=KXkernel orthogonal regularizationorthogonal convolutionWang J, Chen Y, Chakraborty R, et al. Orthogonal ..._orthognal convolution neural
文章浏览阅读7.3k次。我的Oracle 10g版本是10.2.0.1.0,选择高级安装,提示“程序异常终止,发生未知错误”。1.修改Oracle 10G\database\stage\prereq\db\refhost.xml在 后面添加 2.到install目录中找到oraparam.ini文件,把#Windows=4.0,5.0,5.1,5.2修_oracle10程序异常终止一 windows 2008
文章浏览阅读694次。1_使用fdisk对磁盘进行分区时,lvm分区的类型为
文章浏览阅读377次。在多任务操作系统中的每一个进程都运行在一个属于它自己的内存沙盘中。这个沙盘就是虚拟地址空间(virtual address space)。1 32位虚拟内存布局在32位模式下虚拟地址空间总是一个4GB的内存地址块。这些虚拟地址通过页表(page table)映射到物理内存,页表由操作系统维护并被处理器引用。每一个进程拥有一套属于它自己的页表,但是还有一个隐情。只要虚拟地址被使用,那么...
文章浏览阅读423次。Bootstrap 3 的目标是简洁、直观、强悍的前端开发框架,让 Web 开发变得更好、更快、更强壮,我们有必要先了解一下 Bootstrap 底层结构的关键部分。 HTML5文档类型Bootstrap使用了HTML5特定的元素和CSS属性,在使用Bootstrap的时候,所有HTML文档的第一行代码必须是 <!DOCTYPE html>。如:<!DOCTYPE h..._bootstrap3 权限选择样式
文章浏览阅读4.7k次,点赞24次,收藏89次。linux管道举例理解一、管道的定义:“|”二、查找2.1统计当前目录下有多少个文件2.2查看当前目录下的前n(3)个文件2.3查看wang.txt文件包含i的字符行2.4查看内存使用情况2.5查询进程三、更改一、管道的定义:“|”一般我们在进行操作的时候,命令很多,但我们只想要其中一部分,那么就可以使用管道了。管道是Linux中很重要的一种通信方式,是把一个前一个结果的输出直接连接到另一个..._linux中的管道举例
文章浏览阅读499次。http://acm.hdu.edu.cn/showproblem.php?pid=1686对于我这种刚开始学的人来说 刚开始我觉的很难 不会做哦 但是看了一下别人的一下子就知道了 还是不是太熟了 需要加强练习哦 呵呵 其实这是一道简单的kmp 的算法 只要你在index_kmp() 将 i 的值一直小于N 就可以了 还是看看我具体
文章浏览阅读2.1w次,点赞204次,收藏603次。没接触Linux的朋友不用害怕,跟着本篇文章一步步操作,安装Oracle如喝水般简单且标准。_liunxoracle11gr2