网页制作入门教程,让你从此爱上HTML

2022-06-19

悟源网(5yuwl.com)今日最新资讯:

HTML简介

HTML 是用来描述网页的一种语言。指的是超文本标记语言 (HyperTextMarkupLanguage),它不是一种编程语言,而是一种标记语言 (markup language)。或许你有迷惑了,什么是标记语言呢?标记语言是一套标记标签 (markup tag),而HTML 使用标记标签来描述网页。HTML 文档也被称为网页,包含 HTML 标签和纯文本。HTML 标签是由尖括号包围的关键词,比如 。HTML 标签通常是成对出现的,比如 。标签对中的第一个标签是开始标签,第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。也就是说,网页=HTML标签语言。

HTML编辑器

简单地说,我们应在哪些专业专业里面做网页呢?小编在这里推荐三款专业的HTML编辑器来编辑HTML:Adobe Dreamweaver、Microsoft Expression Web、Coffee Cup HTML Editor。下面我们将用记事本来做一个最简单的网页:

首先打开记事本(开始所有程序Windows附件记事本),第二步是在记事本中编辑HTML语言,如下图:

网页制作入门教程,让你从此爱上HTML(图1)

第三步,保存文档为HTML格式(在记事本的文件菜单选择另存为)。当保存HTML文件时,既可以使用.htm,也可以使用.html扩展名。

第四步,在浏览器中运行这个HTML文件(启动浏览器,然后选择文件菜单的打开文件命令,或者双击该HTML文件),结果如下:

网页制作入门教程,让你从此爱上HTML(图2)

这样,一个简单的网页就做成了。

HTML代码

一、标题

网页制作时用什么来表示标题呢?下面我们来看看:

标题(Heading)是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

网页制作入门教程,让你从此爱上HTML(图3)

注释:浏览器会自动地在标题的前后添加空行。注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

二、水平线


标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

网页制作入门教程,让你从此爱上HTML(图4)

提示:使用水平线 (


标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。

三、注释

可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。

注释是这样写的:

网页制作入门教程,让你从此爱上HTML(图5)

注释:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。提示:合理地使用注释可以对未来的代码编辑工作产生帮助。

四、段落

段落是通过

标签定义的。

网页制作入门教程,让你从此爱上HTML(图6)

注释:浏览器会自动地在段落的前后添加空行。(

是块级元素)提示:使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它!(但是不要用
标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

五、折行

折行的主要目的是调整网页布局,让它看起来更美观简洁。

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
标签:

网页制作入门教程,让你从此爱上HTML(图7)


元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

HTML样式

一、背景颜色

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

网页制作入门教程,让你从此爱上HTML(图8)

代码为:

This is a heading

This is a paragraph.

二、字体、颜色以及尺寸

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

代码为

A heading

A paragraph.

三、文本对齐

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

居中对齐:

网页制作入门教程,让你从此爱上HTML(图9)

左对齐:

网页制作入门教程,让你从此爱上HTML(图10)

右对齐:

网页制作入门教程,让你从此爱上HTML(图11)

HTML引用

1、HTML 元素定义短的引用。

浏览器通常会为 元素包围引号。

网页制作入门教程,让你从此爱上HTML(图12)

2、用于长引用的 HTML

HTML

元素定义被引用的节。浏览器通常会对
元素进行缩进处理。

网页制作入门教程,让你从此爱上HTML(图13)

HTML超链接

什么是超链接?超链接就是从一个页面到另一个页面之间跳转的方式。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。我们通过使用 标签在 HTML 中创建链接。

上面这行代码显示为:Visit Baidu

点击这个超链接会把用户带到 Baidu 的首页。

提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

链接属性:使用 Target 属性,你可以定义被链接的文档在何处显示。

网页制作入门教程,让你从此爱上HTML(图14)

查看结果:

网页制作入门教程,让你从此爱上HTML(图15)

HTML图像

在我们制作的网页中如何插入图片或视频?我们进入下面的学习。

图像标签()和源属性(Src)

在 HTML 中,图像由 标签定义。

是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

替换文本属性(Alt):alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。即图片在网络不佳时,图片加载不出来就用替换文本代替。

网页制作入门教程,让你从此爱上HTML(图16)

上图是图片插入及其大小的调整。

网页制作入门教程,让你从此爱上HTML(图17)

上图展示了替换文本。

HTML图片链接

这节中我们把前面两节联合起来,直接在图片上链接。下面看看例子:

网页制作入门教程,让你从此爱上HTML(图18)

HTML表格

如何在网页中创建表格呢?这是我们接下来要看到的内容。

表格由标签来定义。每个表格均有若干行(由标签定义),每行被分割为若干单元格(由

标签定义)。字母td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

网页制作入门教程,让你从此爱上HTML(图19)

HTML表格属性

1.表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

2.表格的表头

表格的表头使用

标签进行定义。

3.表格中的空单元格

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

网页制作入门教程,让你从此爱上HTML(图20)

上面用一个例子说明上面三个属性:两个表一个有边框,一个没有,原因是第二个表格没有设置边框属性;表头有横竖之分,一目了然;空单元格应该是图一红点处加   。

HTML列表

第一,无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于

    标签。每个列表项始于

第二,有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于

    标签。每个列表项始于
  1. 标签。

上面是一个无序的嵌套列表,代码稍做改动就有了下面有序和无序的嵌套列表。

网页制作入门教程,让你从此爱上HTML(图21)

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML css样式

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

第一,外部样式表

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

第二,内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过

加入收藏 打赏

感谢您的支持,我会继续努力的!

打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!

首页 > 新闻资讯 网页制作入门教程,让你从此爱上HTML https://5yuwl.com/article/xinwenzixun/307.html

相关文章

评论
预留评论插件