整合营销服务商

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

免费咨询热线:

HTML的入门及结构组成

大家在浏览网页的时候,是否思考过这样一个问题:怎样才能制作出一个网页呢?制作出一个网页是很简单的,只要知道什么是HTML并掌握HTML的基础知识就可以制作出一个简单的网页,今天我就为讲解HTML的入门及结构组成。

一、什么是HTML?

1、在我们开始学习HTML之前我们需要知道什么是HTML?

HTML的全称为Hyper Text Markup Language,中文名称为超文本标记语言,阅览方式为网页浏览器,同时HTML也被称为网页。

2、一个简单的HTML文档

二、HTML编辑器

我们在可以使用TXT文本文档或者专业的HTML编辑器来编辑HTML。

1、记事本

① 创建一个TXT文本

② 输入HTML代码

③ 点击文件—另存为—输入名称+“html”的后缀名即可得到你的第一个HTML文件。

④ 然后双击这个文件运行。

运行结果

2、专业编辑器

① Sublime Text

② HBuilder

③ Adobe Dreamweaver

④ CoffeeCup HTML Editor

这其中我比较推荐HBuilder这款编辑器,界面简单,编辑起来很快。

三、HTML的组成部分

在上面的案例中我们可以看到HTML是由头部(head)和身体(body)所组成的。

1、头部(head)

通常包含标题(title),也就是一个网页的名称

网页标题

2、身体(body)

body的部分是整个网页的重要内容部分,让人一眼就浏览到这个网页的内容,可以插入文本、图片、多媒体等内容。

四、HTML元素

l HTML元素是指以开始标签起始,以结束标签终止的元素:元素内容即为开始标签与结束标签之间的内容。

l <head></head>、<body></body>、<p></p>、<h1></h2>等这些都是HTML元素,在上面的案例中就有六个元素。

l 也有部分元素只有开始标签,例如<br>,以开始标签的结束而结束。

五、HTML的属性

l 一般来说HTML的属性就是HTML元素的属性,属性可以在元素中添加附加信息。

l 属性总是以名称/值对的形式出现,比如:name=”value”。

l 属性一般描述于开始标签。

l style中会有更多的属性。

六、HTML格式化

HTML可定义很多供格式化输出的元素,比如粗体字和斜体字。

HTML文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字


运行结果示意图

HTML“计算机输出”标签

标签

描述

<code>

定义计算机代码

<kdd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

HTML引文、引用及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目

七、HTML超链接

超链接可以是图片、文字、多媒体也可以是一个网址

示例:

结果:

点击带有下划线的两个字就可以进入某度的网站

八、HTML CSS

1、CSS是一种层叠样式表,可以修饰html元素的样式并可以精确地进行排版

2、CSS有三种方式:

l 内部样式,在HTML元素中使用“style”属性

l 内部样式表,在头部<head>区域使用<style>元素来包含CSS

l 外部引用,引用带有后缀css的文件,示例:

html文档

css文档

如果你看到了这里,就说明你已经打开了制作网页的大门啦~

、www:

万维网,建立在internet上,全球性的、交互、多平台、分布的信息资源。

wwwf组成:

  • url:统一资源定位器,通俗来说就是访问地址
  • HTTP:超文本传输协议
  • HTML:超文本标记语言

2、网页的后缀名:html和htm

3、标签:

双标签:<标签名>内容</标签名>

单标签:<标签名 />

注释标签:<!-- 注释说明 -->

各种标签,以html文档结构来做:

<!doctype html> <!--文档类型标签-->
<html> --最外层的标签
<head> <!--头部标签,包含编码、标题等-->
	<title>标题</title> <!--标题标签-->
	<meta charset="utf-8"/> <!--编码格式-->
</head>
  <body> <!--主体标签,里面显示的内容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、标题标签

h1~h6,h1最大的,h6最小的

属性:align,对齐方式

属性值:left-左对齐,center-居中,right-右对齐

示例:

<h1 align="left">标题左对齐</h1>

5、段落标签:

<p>内容</p>

属性:

-title:提示信息

-style:行内样式

-dir:文字方向,默认从左向右,ltl或者rtl

示例:

<p title="这是提示信息" dir="ltl"></p>

6、换行标签:<br/>

7、水平线标签:<hr/>

属性:

align:对齐方式,默认center居中对齐

color:颜色

width:宽度,可以取值百分比或者像素

size:高度,只能取值像素

noshade:取消阴影

示例:

<hr color="red" width="50%" size="10"/>

8、强调标签:加粗字体

<b></b>和<strong></strong>

9、图片标签:<img />

属性:

src:图片路径

alt:图片加载错误时提示信息

title:鼠标放在图片上提示信息

width:宽度

border:边框

示例:

<img src="1.jpg" alt="图片加载失败" title="提示信息"/>

10、超链接:<a>文本</a>

属性:

href:要跳转的地址

示例:

<a href="https://www.baidu.com">百度一下</a>

联网目前已经在 web2.0 在向 web3.0 在发展的路上。

那么你知道你所访问的网页格式又有些什么区别吗?这一次,我们就来简明得盘一盘它。

大多数人 应该都知道一个词 :“HTML” 。确实,Html 基本就是网页的代名词。当你把网页下载下来的时候,就能看到其后缀名就是 ". HTML"。

但如果足免细心的你还会发现,浏览器地址栏上有时还会出现一些其它的的网页后缀名。

一般来说,网页分为静态网页和动态网页。

前者就等于是一个超文本,里面的信息都是事先写好然后通过浏览器下载来显示。

而后者则是所有的数据信息都是通过服务器端来处理,网页本身并没有事先保存任何信息。

打个比方,静态网页就像饮水机里的常温水。打开开关直接就把原先水桶里存着的水直接放出来。而动态网页则像是饮水机要放热水,在水放出来之前还要先经过一些升温处理才能得到的“热水”一样。

那么静态网页的格式除了最基本的”.Html"外,还包括:

  • CSS 是一种网页样式库文件。很多好看的特效和框架就可以被HTML页面调用。
  • JS 是javascript 脚本文件,可以让网页实现很多交互和功能。就像很多个小程序一样被调用。
  • Dhtml 具有动态特性的html,一般是 CSS + JS+ html 的组合页面
  • Shtml 这是基于 SSI 技术,是一种可动态编程的html 技术。
  • Xhtml 这其实就是 XML ,是一种可扩展标记语言的网页。这个格式现在的网页上用得还是挺多的,等于是一个简单的数据库,比如日历,通讯录等。其原始信息都是以XML格式来保存。这是因为 XML 相当于庞大的数据为而言,去除了索引和附件等等信息,只保留最原始的文本格式,并通过语法来让浏览器知道在什么地方应该显示什么内容。具备解析速度快,容量小的优点。

而动态网页是包括:

  • ASP 这是基于 JavaScript 或 VBScript和 C#
  • JSP 这是基于 JAVA编写。这是 SUN 公司推出的格式。什么都能用 Java 来实现,但就是比较耗费资源。
  • ASPX 和 JSPX 都是在原有的基础上再兼容 XML语法。
  • PHP 这个在之前也是非常火的一种格式,是一种开源的语言,是“超文本预处理”的方法来运行。只是近年来有没落的趋势。
  • CGI 这是一个公共网关接口。稍微知道一下就行。

其实说了这么多,对于普通用户而言仅仅是大概知道几种常见的分类就行。HTML就是网页文件,是一种静态网页。而动态网页则有基于 JavaScript 的ASP 和基于JAVA 的JSP就可以了。因为真的细究网页技术的水还是很深的。像 Ajax 同步和异步等等。

好了,希望本篇文章能让你大致了解在浏览器地址栏最后一个小数点后缀名的网页含义。