HTML从入门到精通-基础篇

天开始小编将会给大家讲解HTML的入门知识以及做项目会遇到的某些问题以及如何解决此类问题的方法。说道网页设计，HTML是我们必不可少的一部分。基础网页的构成，无论怎么变幻，都是由原声的HTML代码组成构成网页。

下面我就根据工作中所用和看过的书籍一点一点总结下我们常用的HTML格式和代码。

一、什么是HTML。

HTM不是一段编程语言，而是一款标记语言，本身不能显示在浏览器中。经过浏览器的编释和编译，才能正确反映HTML标记语言的内容。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，已经成为了一款非常成熟的标记语言。

二、HTML文件的基本结构

<!doctype html>

<html>文件开始标记

<head>文件头开始的标记

</head>文件头结束

<body>文件主题的内容

</body>文件主题的结束

</html>文件结束的标记

这里主要说明title和meta(元信息)

三、HTML主要常用标签

3.1标题

3.2 标题字对齐属性align

默认情况下，标题文字是左对齐的。在网页制作过程中，常常需要选择对其他的方式，这时我们就需要用到align属性。

3.3 段落标记p

段落标记是文档中最常见的标记，<p>用来起始的一个段落。

3.3 换行标记

换行标记<br>作用是在不另起一段的情况下将当前文本强制换行。

3.4 不换行标记nobr

<nobor>表示的是不换行的标记</nobor>

3.5 水平线

<hr/>

四、建立超链接

与自身网站页面有关的连接被称为内部连接

4.1绝对路径

绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常精确地找到，除非是目标文档的位置发生变化，否则连接不会失效。

4.2相对路径

为了避免绝对路径的缺陷，对于在同一站点之中的连接来说，使用相对路径是一个很好的方法。

4.3 内部连接

属性值

含义

-self在当前页面中打开连接

-blank在一个全新的空白窗口中打开连接

-top在顶层框架中打开连接，也可以理解为在根框架中打开连接

-parent在当前框架的上一层里打开连接

4.4 锚点连接

锚点到本页面中的位置

<a neme="2">XX产品特点</a>

锚点到其他页面的位置

<a href="index.html#1"></a>对应连接到index.html中name=1的位置

4.5 连接到外部网站

在设置友情链接时，需要打开HTTP协议进行外部连接访问。

4.6 连接到E-mail

4.7 连接到FTP

FTP代表文件传输协议，一个FTP站点通常包含一些上传和下载文件的文件目录。

大部分FTP网站需要使用用户名和密码来登录。

当然还有其他的一些连接方式，例如文件下载，连接到Telnet等。这些都会可以用a标签实现。

HTML基础就先讲到这里，后面退出DIV设计网页格式已经网页分框的实现。

多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开HTML这个词语，HTML是HyperText Markup Language的简称，想学习HTML语言，先得了解一些基本知识，今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么？

一般我们说HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的语言。

如何查看HTML？

拿最常见的网页为例，如果用大家熟悉的IE浏览器的话，直接在网页上点右键，选择“查看源”即可查看当前网页的HTML源码；如果是其他浏览器的话，多数情况下点击右键，选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用？

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来，方便用户浏览。对于我们来说，HTML是学习网页制作的基本功，熟练掌握HTML这项基本功，可以为以后的学习和工作打下良好的基础。

HTML如何入门？

要学习任何编程语言，都不好好高骛远，HTML的入门很简单，但是也要遵循学习的基本步骤，选择一本入门书籍，循序渐进地去学习每一张的内容。一边学习，一边查看网页代码对照来学，提升入门速度。

HTML案例

下面就是最基本的HTML案例，在这个案例中，用的是HTML5，

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 描述了网页的标题
<body> 元素包含了可见的页面内容，因为下面是最简单的案例，所以只有几行，实际网页一般都有很多行。
<h1> 定义一个大标题
<p> 元素定义一个段落，也就是大家常说的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

如何编辑HTML?

这个就很多了，比如最出名的Dreamweaver，当然如果熟练之后，可以选择任意自己喜欢的编辑器，一些小的改动或者一小段代码的话，也可以用各种常见的文本编辑器来处理，比如我们在wodows系统上常见的记事本，总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课，首先保持一个良好的心态来学习，有好的心态，知识方面只要循序渐进，学会就是水到渠成的事情了。

网页制作从入门到精通》

我自认为我网页制作，尤其是静态页面的制作，已经是很牛逼的了，但是嘛--有时候好能力不如烂笔头，写出来总是好的。

今天看到书柜很多书，先简单的拿来一本基础的《网页制作从入门到精通》，复习下-》写下自己认为需要记下来或总结的认知，能帮助你的话，我也开心。

1、HTML基础

HTML是搭建网页的基础语言。

2、HTML基本标记

1）元信息标记meta，主要用于描述网页，以便搜索引擎查找、分类

<head>
<meta charset="UTF-8">
<!--编码gb2312「中文简体」 gbk「gb2312的扩展，包括了繁体字」 Unicode万国码，UTF-8是Unicode一种具体的编码实现。UTF-8是在互联网上使用最广的一种Unicode的编码规则 -->
<meta content="服装" name="keywords" />
<!--关于网站的关键字-->
<meta content="这是一个你穿了就不想脱的衣服" name="description" />
<!--描述-->
</head>

2）设置网页的定时跳转

<meta http-equiv="refresh" content="2;url=https://www.toutiao.com/"/>
//refresh表示网页刷新，2表示2秒，url表示刷新后的地址

3、文字与段落标记

1）标题字h1-h6

<h1>标题的重要性最高，整个首页只有一个h1就好，放logo，便于网络爬虫的抓取。

插入一疑问SEO？我们为什么要考虑SEO呢？
就是为了提高网站的权重，增加搜索引擎的友好度，达到提高排名，增加流量，促进知名度的作用。

2）标记标签sup/sub

 <p>（a+b)<sup>2</sup></p>
		<p>	H<sub>2</sub>SO<sub>4</sub>	</p>

4、使用图像

关于这章节，没什么需要备注的东西，根据需求使用图片，图片在网页中的运用太广泛了。如何使用也不是很难的吧。

做一个善良，正能量的人儿～～

在线咨询

上一篇：小而美的一页式网页，零成本如何搭建？
下一篇：在网页开发中，我们需要掌握的常用HTML标签有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML从入门到精通-基础篇

网页制作从入门到精通》

您的项目需求