零基础学网页设计之HTML基础教程

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

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

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<head>
<title> 这是我的第一个页面</title>
</head><body>
<a href="https://wwww.baidu.com">点我进入百度</a></body>
</html>

<html> 与 </html>之间的文本描述网页

<head>与</head>之间是描述网页头部文件，不可见，浏览器读取

<body> 与 </body> 之间的文本是可见的页面内容

<a>与</a>超链接标签，实现页面之间的跳转。

代码写好之后保存文件扩展名为html，如：index.html

使用浏览器打开，效果如图

HTML 标题

HTML 标题（Heading）是通过 <h1> 到 <h6> 等标签进行定义的。其中h后面的数字越大，字体就越小。

<html>
<head>
<title> 这是我的第一个页面</title>
</head><body>
<h1>这是我的标题</h1>
<h2>这是我的标题</h2>
<h3>这是我的标题</h3>
<h4>这是我的标题</h4>
<h5>这是我的标题</h5>
<h6>这是我的标题</h6></body>
</html>

效果如图

HTML 段落

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

<html>
<head>
<title> 这是我的第一个页面</title>
</head><body>
<p>我是第一段,会自动换行</p>
<p>我是第二段,会自动换行</p>
<p>我是第三段,会自动换行</p></body>
</html>

效果图

HTML 链接

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

<html>
<head>
<title> 这是我的第一个页面</title>
</head><body>
<a href='https://www.taobao.com/'>淘宝</a>
</body>
</html>

其中<a>标签中href属性是指定要跳转到的网页链接

效果如下

HTML 图像

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

<html>
<head>
<title> 这是我的第一个页面</title>
</head><body>
<img src="https://t7.baidu.com/it/u=2168645659,3174029352&fm=193&f=GIF" width="104" height="142" />
</body>
</html>

<img>是单标签，不能写成<img></img>这种格式，正确的格式是<img />

src属性是图片的路径或者链接，图片可以来自本地图片，也可以来自网络图片。

width 设置图片的宽。height设置图片的高

效果图如下