【ZY带你学前端 1-2】HTML基础(一)

一、HTML简介

HTML的全称是“超文本标记语言”,英文全称是“Hyper Text Markup Language”。HTML不是一种编程语言,而是一种描述性的标记语言。而它负责描述的,正是网页中的“语义部分”。

二、简单示例

首先让我们来看这样一个例子:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单示例title>
head>
<body>
	<div>
		<h1>我是标题h1>
		<p>我是内容 <br /> 我是内容p>
		<img src="http://www.shadowingszy.top/homepage/assets/images/image1.jpg"/>
		<a href="http://www.shadowingszy.top">点我跳转网页a>
	div>
body>
html>

我们可以看到一个HTML文件其实是由多个标签嵌套而成的。而这些标签一般是成对出现的,比如上面示例中的

我是标题

。也有一部分自闭合标签,比如:
等。

每个标签都有其特有的属性,以上面例子中的a标签为例点我跳转网页href就是a标签的属性,用于定义点击该标签时跳转到的网页。各属性之间需要以空格隔开,属性值需要用双引号括起来。

三、HTML骨架标签

HTML规范中定义了各种各样的标签,他们都有不一样的作用。我们先来看一下构成HTML骨架的三个标签:

标签 说明
HTML文档的根标签
文档的头部,标签内的元素不会展现在页面上。在head标签中我们可以设置一些和文档相关的信息
文档的主体,标签内的元素包含文档的所有内容

3-1、文档说明头(DTD)

一个标准的HTML页面,第一行会是一个以开头的语句,也就是文档声明头(DocType Declaration),简称DTD。

现代网页的文档说明头一般都是,这是HTML5标准的DTD。

3-2、head标签

head标签定义了文档的头部。head区域的所有HTML标签,都不会在页面上留下直接的内容。下面介绍一些常用的head区域内的HTML标签。

1、title标签
网页的标题,会在浏览器的tab页上显示。
例如:我是网页标题

2、base标签
为页面上的所有链接规定默认地址或默认目标。
例如:

3、meta标签
提供有关页面的基本信息。

用途 作用
设置字符集
设置viewport
设置页面关键词(用于SEO)
设置页面描述(用于SEO)

4、:定义文档与外部资源的关系。
例如:

3-3、body标签

body标签定义了文档的内容。body标签内的HTML标签有非常多种,留到下一篇文章再仔细介绍吧。

四、XHTML规范

由于HTML本身比较松散,所以为了更规范地编写HTML,我们一般会使用可扩展超文本标记语言(eXtensible HyperText Markup Language)的规范去编写HTML文件,XHTML规范在语法上更加严格,具体的规范有:

1、文档开头必须要有DTD文档类型定义。
2、所有标记元素都要正确的嵌套,不能交叉嵌套。
3、所有的字母都必须小写。
4、所有的标签都必须闭合。
5、所有的属性必须有值。
6、所有的属性值必须加引号。

你可能感兴趣的:(ZY带你学前端,前端,html)