零基础学做网站培训介绍

当前位置:

HTML新手教程

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML已经经历了很多的版本,历界版本如下:
①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。 [5]
③HTML 3.2:1997年1月14日,W3C推荐标准。 [5]
④HTML 4.0:1997年12月18日,W3C推荐标准。 [5]
⑤HTML 4.01(微小改进):1999年12月24日,W3C推荐标准。 [5]
⑥HTML 5:HTML5是公认的下一代Web语言,极大地提升了Web在富媒体、富内容和富应用等方面的能力,被喻为终将改变移动互联网的重要推手。

相关课程:

为了让新手更好的学习HTML教程,下面是汇总的HTML新手教程。

第一节  HTML基础知识

1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2.CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3.标签的语法

(1)标签由英文尖括号"<"和">"括起来

(2)标签一般都成对出现,分开始标签和结束标签,结束标签比开始标签多了一个/

(3)标签与标签之间可以嵌套,但先后顺序必须保持一致

(4)标签不区分大小写,但建议小写

4.HTML文件基本结构

一个HTML文件有自己的固定结构


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

(1)<html></html>称为根标签。所有网页标签都在其中

(2)<head>标签用于定义文档头部,是所有头部元素的容器,头部元素有<title><script><link><meta>等

(3)<body>标签间的内容是网页的主要内容,如<hx><p><a><img>等,会在浏览器中显示出来

5.认识<head>标签

文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在<head>部分

head部分

6.认识<body>标签

<body>标签定义了HTML文档的主体,包含全部页面内容,在网页上要展示出来的页面内容一定要放在<body>标签中

7.HTML的代码注释

代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。


<!--这是HTML注释-->

第二节  HTML基础元素

1.HTML标题
HTML 标题是通过 <h1> - <h6> 等标签进行定义的。共有六个,依据重要性递减。


<h1>这是H1标题</h1>
<h2>这是H2标题</h2>
<h3>这是H3标题</h3>
<h4>这是H4标题</h4>

2.HTML段落

HTML 段落是通过 <p> 标签进行定义的

HTML段落

3.HTML链接
HTML 链接是通过 <a> 标签进行定义的


<a href="https://www.xuewangzhan.net/">学做网站论坛</a>

4.HTML图像
HTML 图像是通过 <img> 标签进行定义的


<img src="images/Course.jpg" alt="零基础建站培训教程介绍" width="480px" height="60px">

5.HTML表格
HTML表格是通过<table>标签进行定义的


<table width="300" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

注:表格的边框属性(相关知识:网页table表格样式设置方法
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格:

6.HTML列表
HTML支持无序、有序和定义列表
(1)无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。


<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>

(2)有序列表
有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。


<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>

(3)定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。


<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

第三节  HTML样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

1.外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

外部样式表

2.内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表 。

内部样式表

3.内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

内联样式

HTML的style属性:提供了一种改变所有 HTML 元素的样式的通用方法

(1)背景颜色
background-color 属性为元素定义了背景颜色:

背景颜色

(2)字体、颜色、尺寸 font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸:

字体、颜色、尺寸

(3)文本对齐
text-align 属性规定了元素中文本的水平对齐方式:

文本对齐

第四节  HTML格式化

1.文本格式化标签

<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。

2.计算机输出标签

<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

3.HTML引用标签

<abbr> 定义缩写或首字母缩略语。
<address> 定义文档作者或拥有者的联系信息。
<bdo> 定义文本方向。
<blockquote> 定义从其他来源引用的节。
<dfn> 定义项目或缩略词的定义。
<q> 定义短的行内引用。
<cite> 定义著作的标题。

第五节  表单标签

网站使用HTML表单(form)与用户进行交互。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。


<form action="a.php" method="get">
<input name="姓名" type="text">
<input name="性别" type="text">
<input name="提交" type="button">
</form>

* <form> :<form>标签是成对出现的,以<form>开始,以</form>结束
* action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
* method:数据传送的方式(get/post)

注:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间

1.文本输入框
当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可转化为密码输入框。


<input name="" type="text">

* type:当type="text"时,输入框为文本输入框
当type="password"时,输入框为密码输入框
* name:为文本框命名,以备后台程序ASP 、PHP使用
* value:为文本输入框设置默认值(一般起到提示作用)

2.文本输入域 当用户需要在表单中输入大段文字时,需要用到文本输入域


<textarea name="内容" cols="" rows=""></textarea>

* <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束
* cols:多行输入域的列数
* rows:多行输入域的行数
* 在<textarea></textarea>标签之间可以输入默认值

3.复选框


<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
复选框</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_1">
复选框</label>
<br>
</p>

单选框


<input name="单选" type="radio" value="单选一">
<input name="单选" type="radio" value="单选二">

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,HTML中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

* type:当type="radio"时,控件为单选框
当type="checkbox"时,控件为复选框
* value:提交数据到服务器的值(后台程序PHP使用)
* name:为控件命名,以备后台程序 ASP、PHP 使用
* checked:当设置 checked="checked" 时,该选项被默认选中

4.下拉列表框


<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选
(1)单选
* value:<option value='提交值'>选项</option>
* selected="selected":设置该属性,则该选项就被默认选中
(2)多选
在<select>标签中设置multiple="multiple"属性,就可实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用Command+单击),可以选择多个选项。

属性 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
disabled disabled 规定禁用该下拉列表。
form form_id 规定文本区域所属的一个或多个表单。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
required required 规定文本区域是必填的。
size number 规定下拉列表中可见选项的数目。

5.提交按钮


<input name="提交" type="submit" value="提交">

* type:只有当type值设置为submit时,按钮才有提交作用
* value:按钮上显示的文字

6.重置按钮


<input name="重置" type="reset" value="重置">

当用户需要重置表单信息到初始时的状态时, 可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以

* type:只有当type值设置为reset时,按钮才有重置作用
* value:按钮上显示的文字

7.form表单中的label标签


<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

注:标签的for 属性中的值应当与相关控件的id 属性值一定要相同。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

  • HTML元素属性 (116973 次学习)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • HTML粗体标签:HTML b 标签b 标签-- 定义粗体文字 不符合标准网页设计的理念,不赞成使用. b标签是成对出现的,以<b>开始,以</b>结束 .
  • HTML换行标签:<BR/>br 是换行(Break)的缩写。文本会在这个标签的地方换行。在HTML代码里直接换行的话,按浏览器的不同可能显示为一个空格,或者
  • HTML 文本格式化:使用 pre 标签对空行和空格进行控制。“计算机输出”标签:这些标签常用于显示计算机/编程代码。引用标签:使用 blockquote 元素的
  • 在前面的建站教程中,我们介绍了CSS控制图片和文字在同一行对齐显示,下面我们来分享一下CSS控制图片与一段文字顶部对齐方法。做网站时,往往是在一
  • html 标签有哪些特点刚刚接触超文本,遇到的最大的障碍就是一些用“<”和“>”括起来的句子,我们称它为标签,是用来分割和标记文本的元素,以形成
  • 常用的HTML标签有哪些 (121526 次学习)
    什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符,就像一个人名字张三、李四代表人的姓名一样。这里说
  • CSS是控制网页HTML的显示效果,在网站制作过程中可以通过CSS的box-shadow属性来控制盒阴影。(相关教程:html入门教程)语法:box-shadow: h-shad
  • 我们在学习做网站时,HTML和CSS是最基本要学习的。但对于一些对英文不太熟悉的新手来说,遇到一些HTML/CSS英文代码不明白,为了解决这个问题,我们特
  • html怎么让ul内容居中 (11978 次学习)
    在做网站时,有些列表会使用到ul标签,里面会有很多的LI标签,由于li标签的数量不是固定的,所有无法设置ul标签的宽度,这就造成一个问题,我们无法设