整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

最全的HTML基本语法总结 值得收藏!

最全的HTML基本语法总结 值得收藏!

HTML文档由HTML元素组成,一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性,属性以名称和值成对出现。Web 浏览器读取HTML 文档,并以网页的形式显示出来,浏览器不会显示 HTML 标签,而是通过标签来解释网页的内容。

HTML(Hyper Text Mark-up Language超文本标记语言):不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、大小来显示等,这些都是利用Html标记来实现。

HTML标签是由尖括号(“<”和“>”)包围的关键词,如标签 <p>。标签不区分大小写,故 <p> 和 <P> 的含义相同,不过推荐使用小写。

HTML标签通常成对出现,一个是开始标签,一个是结束标签。开始标签告诉浏览器,从这里开始执行该标签所表示的功能;结束标签告诉浏览器,该功能到这里结束。在开始标签前加一个斜杠(/)即成为结束标签。如,html 元素的开始标签是 <html>,结束标签是</html>。也就是说,一个HTML 元素由开始标签、内容、结束标签组成。开始标签是放在一对尖括号中的元素名称及可能包含的属性,结束标签是放在一对尖括号中的斜杠加元素的名称。语法格式为:<开始标签>内容</结束标签>。如,em 元素的开始标签为<em>,结束标签为 </em>,在<em> 和 </em> 标签之间是元素的内容。如下图所示:


HTML的文档结构

所有的网页文件,通过都是四对标记来构成文档的骨架,它们是:

小结:

<html>…</html>标识网页文件的开始与结束,所有的Html元素,都要放在这对标记中。

<head>…</head>标识网页文件的头部信息,如标题、搜索引擎关键字等

<title>…</title>标识网页文件的标题

<body>…</body>标识网页文件的主体部分


常见的HTML的标记语法

1. 单标记

一.<标记名称>

单一型,无属性值

如:<br/>——表示换行符

二.<标记名称属性=”属性值”>

单一型,有属性值

如:<hr width=”80%”/>

2. 双标记

三.<标记名称>…</标记名称>

没有属性值

如:<title>…<title>

四.<标记名称属性=”属性值”>…</标记名称>

有属性值

如:<body bgcolor=”red”>…</body>

注释

格式:

<!—注释内容-->

Body属性

<body bgcolor=”背景颜色” background=”背景图像” text=”文本颜色” link=”链接文本颜色” vlink=”访问过的文本颜色” alink=”激活的连接文本颜色” leftmargin=”左边界”>


<font>标记

语法:

<font color=”文本颜色” size=“字号”>文本</font>

字符格式

段落标记

格式:

<p align=“对齐方式”>…</p>

HTML中的特殊字符

修饰标记

水平直线<hr/>


觉得不错的朋友关注下哩,后面会分享HTML标签属性、描点、表单等更多干货。

TML针对不同的内容有不同类型的标记,这些标记是HTML5文档的基础,你知道有哪些吗?

1.单标记和双标记

为了方便学习和理解,通常将HTML5标记分为两大类,即双标记和单标记。

a.双标记:

双标记双标记也称为体标记,分为开始标记和结束标记,其基本语法为:

<标记名>内容</标记名>

如:

<p>我是一个双标记</p>

b.单标记:

单标记也称空标记,是指用一个标记就可以完整的描述某个功能,其基本语法为:

<标记名/>

如:

<hr/>

上面hr标记表示一条水平线,后面会提到

2.注释标记

注释标记是HTML的一种特殊标记,它是一段便于阅读理解的不需要在页面中显示的注释文字。其基本语法格式为:

<!-- 注释语句 -->

如:

<p>这是一段文本</p>   <!-- 这是注释文本,不会在页面中显示 -->

上图即为浏览器中的结果。

3.标记的属性

HTML标记的默认样式是无法满足页面开发的需求的,如果想要为某段文本设置特定的样式,就需要用到HTML标记的属性了,其基本语法格式为:

<标记名 属性1="属性值1" 属性2="属性值2" 属性3="属性值3"...>内容</标记名>

下面以一个例子来展示:

网页第一行是一个二级居中的标题,第二行是一个局中的段落,第三行是一个大小为2px,颜色为灰色的水平线,第四行是一段正常的段落,部分词语被加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 align="center">我是居中的二级标题</h2> 
    <p align="center">我是居中的段落</p> 
    <hr size="2" color="#ccc"/>
    <p>我是一个正常的段落,这是<strong>关键字</strong>,其他的都是正常内容。<p/>
</body>
</html>

效果如图所示:

?

多学一招(键值对):

“键值对”简单地说即为对“属性”设置“值”

例如:

color="red";width:"200px";

上面的color和width就相当于属性1和属性2,red和200px就是对应的属性值1和属性值2,如果顺序出错,是没有效果的

总结:

在HTML开始标记中,可以通过 属性=“属性值”的方式为标记添加属性,其中“属性”和“属性值”是以“键值对”的形式出现的

4.HTML5文档头部相关标记(拓展)

1.title

一个HTML文档只能含有一对<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中。

基本语法格式:

<title>网页标题名称</title>

2.meta

meta定义页面元信息:

设置网页关键字》》》<meta name=”keywords” content=”JAVA、php”/>

设置网页描述》》》<meta name=”description” content=”IT培训教育”/>

设置网页作者》》》<meta name=”author” content=”传智播客”/>

设置字符集》》》<meta http-equiv=”Content-Type” content=”text/htm; charset=utf-8l”/>

设置页面自动刷新与跳转》》》<meta http-equiv=”refresh” content=”10;url=http://www.itcast.cn”/>

3.link

基本语法格式:

<link 属性=”属性值” />

属性名

常用属性值

描述

href

URL

指定引用外部文档

rel

stylesheet

指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表

type

text/css

引用外部文档的类型为CSS

type

text/javascript

引用外部文档的类型为JavaScript脚本

4.style

基本语法格式:

<style 属性=”属性值”>样式内容</style>

在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式

位小伙伴好,黑客技术离不开代码,做为一个渗透测试工程师,也一定要有一些代码基础。网络安全行业,现在人才缺口大,再加上就业形势又很严峻,介于这些,我们想培养一批优秀的网络安全人才,将对网络安全行业、黑客技术,以及渗透测试技术感兴趣的小白培养成精英。

跟随我们,不管你有多白,都可以逐步进入网络安全行业,并最终在这个行业找到高薪职业。

然后呢,我要说一句,关于“黑客”可能并不是大多数人所了解的那样。关于这些,可以参考:什么是黑客?什么是渗透测试?2分钟看完这800多字你就懂了

那么,我们就先从代码基础——HTML的基本语方开始。

首先给大家描述三个概念:语言、程序、代码之前的关系。

语言

首先我们就要搞清楚什么是语言?可能说HTML语言不太好理解,那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流,是不是叫做汉语呢?所以说汉语就是一门语言。

那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合,包括我们如何发音,如何写字,这些字如何拼在一起,能够产生具体的意义,有一定的含义,这些所有所有的集合在一起,形成了一套规则,然后大家都去遵循这套规则,就能够彼此交流,那么这就叫做语言。

我们再举一个例子,比如说英国人或者美国人,他们也有自己的语言,叫做英语,那么我在这里就是换了另一种语言,

代码

了解了语言之后,我们就再来看一看,什么是代码,那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢?

我们还是拿汉语来做比喻哈,我们说汉语就是一种交流沟通的一种规则,它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文,对吧。那么我们上语文课的时候,就要学一些最基础的有关语言的东西,比如说汉语拼音生字词,当时要记很多的这种生字生词,那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构?

那么英语呢?我们在学习英语的时候也会去记一些东西啊,就比如英文字母,紧接着就是背各种各样的单词,是不是当我们单词量有了一定的积累之后,我们对这个语言呢就掌握得更深刻了。

那么汉语要背生字词,英语呢要背单词,这些最基本的组成结构。那么在程序语言里面,代码就可以理解成是生字词或者是单词。

程序

最后,我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起,能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。

那么我们对照一下自然的这种语言,比如说汉语英语呢它是什么样?好多的文字放在一起,是不是句子?或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书,

那么汉语能写文章,用英语英文也能写文章,这个文章可大可小,可能几千字能大一点儿的一本书,也可以理解成是文章,那么用生字词组成的这种集合就成了文章了。然后我们再谈程序,它是什么呢?对照一下大家可能就理解了,它就是一个由代码组成的文章。

HTML叫做超文本标记语言

那么回过头来我们看我们要学的HTML语言,它也是一门语言,只不过呀它跟我们理解的汉语和英语有一定的区别。

汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛,是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言,只不过它不是人和人之间去交流的语言,那么它到底是做什么用的呢?我们来看一下HTML的概念。

HTML中文名称叫做超文本标记语言,用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台,使用HTML语言将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件翻译成可以识别的信息,即现在所见到的网页。

那么从中我们能看到什么呢?首先我们知道它的中文名称了。HTML叫做超文本标记语言。

那么再往下我们看他提到了。

在这里浏览器是吧?提到了浏览器,那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码,那么写这些代码的目的是什么呢?目的就是为了和浏览器去交流,只要我们写的这个东西浏览器能看得懂,他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。

HTML的语法规则

(1)HTML中的各种元素都是通过标记(标签)来表示。

(2)HTML当中的标签分为单标签和双标签。

(3)单标签格式为<名称/>,双标签格式为<名称></名称>。

(4)HTML对大小写不敏感。


然后,我们可以对照一下HTML的基本结构

HTML网页基本结构需要如下标签组成:

(1)<html></html>

(2)<body></body>

(3)<head></head>

(4)<title></title>


首先,我们打开一个记事本。

单击窗口图片,在列表中找到记事本

然后在记事本中输入<html></html>,这表示告诉浏览器,这是一个标准的HTML网页。

在记事本中输入<html></html>

那么为什么是两个呢?前面1个,后面1个,这就有点类似于我们标点符号里边的括号,前面有一个开始,左半边括号后面有一个结束。右半边括号在这里也是前面的HTML表示网页从这儿开始,那么后边这个-html表示网页呢至此结束。

那我们网页这才刚开始就结束了呢,别着急,我们来看我在这里敲了几次回车把它分开了。那么表示什么意思呀?表示中间呀是有很多内容的,就是在网页开始到网页结束的中间是会有其他的东西的。

分开html开始和结束标签

我们接着往下看,第二个标签呢叫做<body></body>,里面的单词呢表示的是身体,那么它呢表示的就是网页的主体,这个网页的主体也属于基本结构,那么它在哪儿呢?注意啊网页的主体也属于网页,那么它呀要放在<html></html>的中间。

将<body></body>标签插入到<body></body>中

下面,我们开始将第3个标签<head></head>写入记事本,它代表头部。他表示头是吧?我们可以想象一下,这个脑袋注意它和身体之间到底应该是个什么样的关系呢?就我们想象有一个人站在那儿,脑袋应该是在上面,身子应该是在下边哈。所以注意我们这个<head>标签呀要放在<body></body>标签的上方。注意!它们之间没有包含关系!是一上一下的。

在<body></body>标签的上方插入<head></head>

最后一个叫做<title></title>这个单词的意思呢叫做标题。那么这个标题你应该放在哪?告诉大家,它属于网页的头部,在头部的里边。

好了,整理一下格式

插入<title></title>标签

我们来看4个基本结构的组成标签,我们都已经写到了这个文档里面了。

大家需要注意的是,我写的这种结构啊这个包含的关系非常重要。最外边是html表示网页开始,到网页结束,中间呢有头、身子,还有标题,那么头和身子是一上一下的关系,那么标题呢属于头部里边儿。要记住这个格式!

那么到现在为止呀我们这个网页的基本结构就算是真正写完了,我们把它保存一下。现在这个文档里边啊我们写的是网页的程序,虽然很简单,但它也是一个完整的网页了。

那么既然是一个网页,那我们如何能打开它看这个网页呢?注意这个HTML写出来的这个程序啊需要放在HTML文件里边,

那么我们怎么做呢?直接把这个记事本改后缀,他现在是个.txt文档,我们把这个文件的后面的txt扩展名改成html。

将.txt格式改成.html格式

双击“网页.html”,就会打开一个网页。

用代码创建的第1个初始网页

果然是用浏览器打开的一个网页,但是里边呢还没有东西是吧?空白的。

那么我们就来看一下,重新用记事本的方式把它打开。

我现在要想在里边简单的写点文字,哎我看看我这个网页是否能够正常显示。

那么在哪儿能够写文字呢?跟大家说一下,

在我们这个基本结构里啊有两个地方是可以写内容的,一个就是<body></body>主体,另外一个呢就是<title></title>标题,这两个地方中是可以写文字内容的。

右键单击这个html文件,选择打开方式→打开其他应用,然后找到记事本,用记事本打开。

用记事本打开html文件

然后在<title></title>中间写上“我的第一个网页”,<body></body>中间写上“这里是主体文字”

标签中间插入文字,让网页中有内容

好了,写完之后我们再保存。关闭这个窗口,重新打开看一下效果。那么大家看这会儿在网页里面显示出来了。首先呢在网页主体里边显示出了“这里是主体文字”,并且在页面的上方的标签呢显示的是“我的一个网页”。

用代码创建的第1个网页

那么我们今天的讲解你看懂了么?

带你学代码、学编程、学语言、学网络安全、学黑客技术、学渗透技术,逐步成为网络高手,拿到年薪30W+的offer,在网络江湖,从小刀客变成大侠。如果感兴趣,请关注我,私信我,可获得更多学习资料。