整合营销服务商

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

免费咨询热线:

HTML教程(看完这篇就够了)

TML教程

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

在本教程中,您将学习如何使用 HTML 来创建站点。

HTML 很容易学习!相信您能很快学会它!

本教程包含了数百个 HTML 实例。

使用本站的编辑器,您可以轻松实现在线修改 HTML,并查看实例运行结果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孙叫兽的博客</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

HTML 文档的后缀名

.html

.htm

都可以。

  • HTML 简介

实例:

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孙叫兽的博客</title>
</header>
<body>
<h1>这是我的标题</h1>
<p>这是我的段落</p>
</body>
</html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset=“utf-8”> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面
  • HTML 标签
  • HTML 标记标签通常被称为 HTML

标签

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • <标签>内容</标签>

    html元素

    “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

    但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

    HTML 元素:

    <p>这是一个段落</p>

    web浏览器

    Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

    浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户

    html网页结构

    <html>
        <head>
            <title>页面标题</title>
        </head>
        <body>
            <h1>这是一个标题</h1>
            <p>这是一个段落。</p>
            <p>这是另外一个段落。</p>
        </body>
    </html>

    html的版本:

    <!DOCTYPE>声明

    <!DOCTYPE>声明有助于浏览器中正确显示网页。

    网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

    doctype 声明是不区分大小写的,以下方式均可:

    <!DOCTYPE html>
    <!DOCTYPE HTML>
    <!doctype html>
    <!Doctype Html>

    html5

    <!DOCTYPE html>

    html4

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
    http://www.w3.org/TR/html4/loose.dtd">

    xhtml1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    中文编码

    目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8。

    • :HTML 基本结构
    • <html> 标记放在 HTML 文件的开头,是一个形式上的标记;
    • <body> 标记称为主体标记,网页所要显示的内容都放在这个标记内,它是 HTML 文件的重要所在;
    • <head> 标记称为头标记,起的作用是放置关于此 HTML 文件的信息,如提供索引、定义 CSS 样式等;
    • <title> 标记称为标题标记,起的作用是设定网页标题;


    • 2:开发中常用的标签
    • <b>文字以粗体方式显示</b>
    • <i>文字以斜体方式显示</i>
    • <u>文字以加下划线方式显示</u>
    • <s>文字以加下删除方式显示</s>
    • <big>文字以放大方式显示</big>
    • <small>文字以缩小方式显示</small>
    • <strong>文字以加强强调方式显示</strong>
    • <em>文字以强调方式显示</em>
    • <address>地址标签:xxxxxx@一只快乐的小码农.com</address>
    • <code>代码块</code>
    • align 属性控制段落的水平位置
    • bgcolor 属性设置背景颜色
    • 无序列表 ul
    • 有序列表 ol
    • 2.1 段落标签<p>
    • 2.2 换行标签<br>
    • 2.3 标题标签<h1>~<h6>
    • 2.4 文字居中标签<center>
    • 2.5 文字段落缩进标签<blockquote>
    • <img src="">网页中嵌入图片(height+weigth属性调整图片大小)
    • <form action="" method="">表单提交
    • <align="">对齐方式-left+right+center...
    • <div></div>-设置块级元素
    • type="radio"-单选框
    • type="checkbox"-复选框
    • <select><option></option><select>-下拉菜单

    基本符号代码转化


    • 3:用 HTML 建立超链接
    • 3-1框架之间的链接
    • 3-1-1://frameset框架标签中用rows属性将窗口分为上中下三部分
    • <frameset rows="30%,10%,*">
    • <frame>
    • <frame>
    • <frame>
    • </frameset>
    • 3-1-2://用src属性在框架中插入网页
    • </head>
    • <frameset cols="30%,*">
    • <frame src="a.html">
    • <frameset rows="50%,*">
    • <frame src="b.html">
    • <frame src="c.html">
    • </frameset>
    • </frameset>
    • </html>
    • 3-1-3//框架之间建立链接
    • </head>
    • <frameset cols="30%,*">
    • <frame src="a.html">
    • <frame name="main">

    • </frameset>
    • </html>
    • 4:下一节我们讲css和js

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

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

    然后呢,我要说一句,关于“黑客”可能并不是大多数人所了解的那样。关于这些,可以参考:什么是黑客?什么是渗透测试?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,在网络江湖,从小刀客变成大侠。如果感兴趣,请关注我,私信我,可获得更多学习资料。