网页制做的基本步骤和教程(0基础快速入门),引流条的使用方法

HTML简介

什么是 HTML?

HTML 是用来形貌网页的一种语言。

HTML 指的是超文本符号语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种符号语言 (markup language)

符号语言是一套符号标签 (markup tag)

HTML 使用符号标签来形貌网页

HTML 标签

HTML 符号标签通常被称为 HTML 标签 (HTML tag)。

HTML 文档形貌网页

HTML 文档包罗 HTML 标签和纯文本

HTML 文档也被称为网页

HTML 标签是由尖括号笼罩的关键词,好比 <html>

HTML 标签通常是成对泛起的,好比 <b> 和 </b>

标签对中的第一个标签是最先标签,第二个标签是竣事标签

最先和竣事标签也被称为开放标签闭合标签

HTML 文档 = 网页

HTML编辑器

我们可以使用专业的 HTML 编辑器来编辑 HTML:

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

下面我们用记事原本制作一个简朴的网页:

第一步,打开记事本

若何启动记事本:

最先

所有程序

附件

记事本

第二步,在记事本中编辑HTML语言,如图:

网页制作入门教程(一)

第三步,保留 HTML

在记事本的文件菜单选择“另存为”。

当您保留 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。

第四步,在浏览器中运行这个 HTML 文件

启动您的浏览器,然后选择“文件”菜单的“打开文件”下令,或者直接在文件夹中双击您的 HTML 文件。

效果应该类似这样:

网页制作入门教程(一)

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

HTML代码-题目

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

HTML 题目

题目(Heading)是通过 <h1> – <h6> 等标签举行界说的。

<h1> 界说最大的题目。<h6> 界说最小的题目。

网页制作入门教程(一)
网页制作入门教程(一)

注释:浏览器会自动地在题目的前后添加空行。

购物网站推广方案(非常适合商城推广的方法)

注释:默认情况下,HTML 会自动地在块级元素前后添加一个分外的空行,好比段落、题目元素前后。

HTML代码—水平线

HTML 水平线

<hr /> 标签在 HTML 页面中建立水平线。

hr 元素可用于分开内容。

网页制作入门教程(一)
网页制作入门教程(一)

提醒:使用水平线 (<hr> 标签) 来分开文章中的小节是一个设施(但并不是唯一的设施)。

HTML代码—注释

HTML 注释

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

注释是这样写的:

网页制作入门教程(一)
网页制作入门教程(一)

注释:最先括号之后(左边的括号)需要紧跟一个叹号,竣事括号之前(右边的括号)不需要。

提醒:合理地使用注释可以对未来的代码编辑工作发生辅助。

HTML代码—段落

HTML 段落

段落是通过 <p> 标签界说的。

网页制作入门教程(一)
网页制作入门教程(一)

注释:浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)

提醒:使用空的段落符号 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签取代它!(然则不要用 <br /> 标签去建立列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)

HTML代码-折行

折行有什么用呢?

固然折行的主要目的是调整网页结构,让它看起来更美观大方。

如果您希望在不发生一个新段落的情况下举行换行(新行),请使用 <br /> 标签:

网页制作入门教程(一)
网页制作入门教程(一)

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有竣事标签。

HTML样式-靠山颜色

background-color 属性为元素界说了靠山颜色:

网页制作入门教程(一)
网页制作入门教程(一)

<html><body style=”background-color:yellow”><h2 style=”background-color:red”>This is a heading</h2><p style=”background-color:green”>This is a paragraph.</p></body></html>

HTML样式-字体、颜色和尺寸

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

网页制作入门教程(一)
网页制作入门教程(一)

<html><body><h1 style=”font-family:verdana”>A heading</h1><p style=”font-family:arial;color:red;font-size:20px;”>A paragraph.</p></body></html>

HTML样式-文本对齐

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

下面我们看看中,右,左的三种对齐方式演示:

网页制作入门教程(一)
网页制作入门教程(一)
网页制作入门教程(一)
网页制作入门教程(一)
网页制作入门教程(一)

HTML引用

1.HTML <q> 元素界说短的引用

浏览器通常会为 <q> 元素笼罩引号

网页制作入门教程(一)
网页制作入门教程(一)

2.用于长引用的 HTML <blockquote>

HTML <blockquote> 元素界说被引用的节。

浏览器通常会对 <blockquote> 元素举行缩进处置。

网页制作入门教程(一)
网页制作入门教程(一)

HTML超链接

什么是超链接?超链接就是从一个页面到另一个页面之间跳转的方式。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部门。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中建立链接。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 – 建立指向另一个文档的链接
  2. 通过使用 name 属性 – 建立文档内的书签

<a href=”http://www.Baidu.com.cn/”>Visit Baidu</a>

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

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

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

链接属性

使用 Target 属性,你可以界说被链接的文档在那边显示。

网页制作入门教程(一)
网页制作入门教程(一)

本文来源于自互联网,不代表n5网立场,侵删。发布者:虚拟资源中心,转载请注明出处:https://www.n5w.com/70525.html

(0)
打赏 微信扫一扫 微信扫一扫
虚拟资源中心虚拟资源中心网络小白
上一篇 2020年6月21日 09:24
下一篇 2020年6月21日 09:25

相关推荐

联系我们

电话:

在线咨询:点击这里给我发消息

邮件:@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

公众号