当前位置:首页 > Web开发 > 正文

因为我们建新页面的时候会经常使用到它

2024-03-31 Web开发

可以的话,请想象一下互联网没有发现之前的日子。网站还不存在,纸质的书本是我们主要的信息来源,而在书本中盘问我们想要的资料会耗费相当多的精力和时间。
而如今,你打开个浏览器用搜索引擎搜索,任何你能想到的信息城市出此刻你的指间。并且有可能某人在某地成立了一个跟你心中实际要搜索内容一致的网站。
在接下来的一系列课程中, 我将引导你使用HTML和CSS构建一个属于你的网站。但在开始构站之旅前,我们需要重点的了解两个语言之间的差异,它们的语法和一些常见的术语。

什么是HTML&CSS

HTML(HyperText Markup Language) 超文本符号语言,通过符号报告浏览器如果去解析文本信息,好比解读为标题、 段落、图片等。
CSS(Cascading Style Sheets)层叠样式表,这是一种描述性语言,通过样式来修饰页面,好比设置文字的字体、巨细、颜色等。
这两种语言是相对独立的,我们在编写它们时也应该连结这种原则。CSS不应嵌入HTML文本中,反之亦然。
一般来说, HTML代表内容,而CSS代表内容的外不雅观。

HTML术语

在开始接触HTML时,你可能会遇到新的陌生的术语。别担忧,跟着接下来的学习你会对它们越来越熟悉。首先你需要了解三个常见的术语:元素,标签和属性。

元素(Elements)

元素是界说页面中东西的布局和内容的指示符。一些最常用的元素例如多级标题(<h1>...<h6>)、段落(<p>),还有<a>,<div>,<span>,<strong> 和<em>等等。
元素是使用小于号<和大于号>包裹元素名来标示。如下所示:

<a> 标签(Tags)

使用小于号<和大于号>包裹元素名形成标签,标签凡是都是成对呈现的,由开始标签和结束标签构成。
一个开始标签暗示一个元素的开始,它由 <+元素名+ >构成,例如<div>。
一个结束标签暗示元素的结束,它由小于号<+ /+元素名+ >构成 例如</div>。
在开始标签和结束标签中的内容为阿谁元素的内容。例如一个链接,拥有开始标签<a>和结束标签</a>,两个标签之间的内容为链接的内容,如下所示:

<a>...</a> 属性(Attributes)

属性用来为元素添加特别信息。最常用的属性例如id属性,用来标识元素;class属性将元素进行分类;src属性指向嵌入内容的来源。href属性供给对链接资源的引用。
属性界说在开始标签的标签名之后,属性凡是包罗一个属性名和一个属性值,格局是属性名=值。如下所示:

<a href="http://shayhowe.com/">Shay Howe</a>

示例中,文字Shay Howe会展此刻页面上,点击 Shay Howe 用户将访谒 。
超链接元素a通过用开始标签<a>和结束标签</a>包裹文本内容来声明。 超链接属性为href="http://shayhowe.com/"。

此刻你已经知道了什么是HTML元素(elements),标签(tags)和属性(attributes)。让我们一起来完成我们的第一张页面,如果在这里遇到了一些新的常识,别担忧,我们会将它们一一破解。

设置文档布局

HTML文档使用.html为扩展名。要开始编写HTML,你只需要使用纯文本编纂器, 请不要使用 Microsoft Word 和 Pages,它们属于富文本编纂器。 固然你也可以使用目前很风行的编纂器 Dreamweaver、Sublime Text。 或者选择免费的编纂软件 Windows中的Notepad++ 和 Mac 中的 TextWrangler 。

所有的HTML文档都有一个必须的布局,由以下元素组成:<!DOCTYPE html>,<html>,head 和 <body>

文档类型声明(<!DOCTYPE html>),报告浏览器使用的HTML版本,写在HTML文档最开始。由于我们使用的是最新版本的HTML,所以我们的声明只需写<!DOCTYPE html>,非常简便。文档类型声明之后,<html>元素暗示文档开始(根元素)。
<html>元素内,<head>为其第一个子元素,它包罗了文档标题(显示在浏览器窗口标题栏上),外部文件链接以及其他有用的元数据。<head>中的内容不会显示在网页上。
所有可视的内容都包罗在<body>元素中。范例HTML的布局如下所示:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html>

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31263.html