整合营销服务商

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

免费咨询热线:

html自学教程(一)初识html

html是什么?html文档基本结构

html(hyper text markup language):超文本标记语言.它不是一种编程语言,而是一种标记语言,它有一套标记标签(markup tag).html使用标记标签来描述网页.html文档也叫web页面

你可以使用html来建立自己的web站点.

网页主要由3部分组成:

■html:结构(structure)

■css:表现(presentation)

■javascript:行为(behavior)

html实例:

<!doctype html>

<html>

<body>

<h1>我是第一个标题</h2>

<p>我是第一个段落</p>

</body>

</html>

●<html>元素定义了整个html文档,这个元素有个开始标签<html>,有个结束标签</html>

●<head>元素必须包含文档的标题(title),可以包含脚本,样式,meta信息以及其他更多的信息

●<body>元素定义文档的主体,<body>元素包含文档的所有内容(比如文本,超链接,图像,表格和列表等等)

二 创建你的第一个html页面

html文件是文本文件,因此你可以使用任何文本编辑器来创建你的第一个网页.

给大家推荐几款常用的编辑器:

●Notepad++

●Sublime Text

●HBuilder

●EditPlus

在编辑器中输入:

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p>我的第一个段落.</p>

</body>

</html>

保存为first.html(后缀名也可以是.htm,推荐使用.html)

注意:对于中文网页需要使用<meta charset="utf-8">声明编码,否则会出现乱码.有些浏览器会设置GBK为默认编码,则你需要设置为<meta charset="gbk">

<title>标签定义了html文档的标题,在所有html文档中是必需的

<title>元素:

●定义浏览器工具栏中的标题

●提供页面被添加到收藏夹时的标题

●显示在搜索引擎结果的页面标题

<html>

<head>

<meta charset="utf-8">

<title>我的第一个页面</title>

</head>

<body>

<p>我的第一个段落.</p>

</body>

</html>

在editplus中运行的结果:

TML(超文本标记语言)中的元素可以分为两类:块级元素和内联元素。块级元素会自动占据一行,并且可以设置宽度和高度。内联元素不会自动占据一行,而是根据文本内容的长度自动调整宽度。块级元素可以包含其他元素,包括文本、图像、链接等。内联元素通常不包含其他元素。

1. 块级元素具有以下特点:

  • 块级元素会自动占据一行,并且可以设置宽度和高度。
  • 块级元素可以包含其他元素,包括文本、图像、链接等。
  • 块级元素可以设置背景颜色、边框、字体等样式属性。

以下是一些常见的块级元素:

  • <div>:用于定义一个块级容器,可以包含其他元素。
  • <p>:用于定义段落,通常包含文本内容。
  • <h1>到<h6>:用于定义标题,从h1到h6分别表示从大到小的标题级别。
  • <table>:用于定义表格,包含多个行和列。
  • <form>:用于定义表单,包含输入框、按钮等元素。
  • <ul>和<ol>:用于定义无序列表和有序列表,包含多个列表项。
  • <img>:用于定义图像,用于在网页中显示图片。

这些块级元素可以通过设置 CSS 样式属性来实现不同的布局和样式效果,例如设置背景颜色、边框、字体、大小、颜色等。同时,块级元素还可以通过设置 CSS 定位属性来实现定位和浮动效果,例如设置position: relative;、float: left;

2. 内联元素具有以下特点:

  • 内联元素不会自动占据一行,而是根据文本内容的长度自动调整宽度。
  • 内联元素可以设置字体、颜色、大小等样式属性。
  • 内联元素通常不包含其他元素,而是直接嵌入文本内容中。

以下是一些常见的内联元素:

  • <a>:用于定义超链接,通常用于链接到其他网页或文件。
  • <em>:用于定义强调文本,通常呈现为斜体效果。
  • <strong>:用于定义加粗文本,通常呈现为粗体效果。
  • <span>:用于定义自定义样式的文本,通常用于应用特定的 CSS 样式。
  • <img>:用于定义图像,通常用于在网页中显示图片。

这些内联元素可以通过设置 CSS 样式属性来实现不同的样式效果,例如设置字体、颜色、大小等。同时,内联元素还可以通过设置 CSS 定位属性来实现定位和浮动效果,例如设置position: relative;、float: left。

<img> 元素在 HTML 中既可以是块元素,也可以是内联元素,这取决于它的 display 属性的值。

默认情况下,<img> 元素是内联元素,它会根据文本的流动方式进行布局。这意味着如果在一行中放置了多个 <img> 元素,它们会在一行中排列,并且不会自动换行。

但是,如果将 <img> 元素的 display 属性设置为 block,那么它就会成为块元素。块元素会占据一行,并且可以设置宽度和高度。在这种情况下,多个 <img> 元素会自动换行,并且可以通过设置 margin 属性来调整它们之间的间距。

html

<img src="image.jpg" alt="图片描述" style="display: block;">

在上面的示例中,<img> 元素的 display 属性被设置为 block,这会使它成为一个块元素。你可以根据需要调整图片的宽度和高度,以及 margin 属性来控制图片之间的间距。

TML简介

HTML基本标签

HTML表单标签

HTML内联框架标签和其他