HTML的概述和基本语法

北战南征 提交于 2020-11-03 15:50:15

HTML概述

明确什么是HTML?

​ html即是一种超文本标记语言(Hyper Text Makeup Language),是一种标识性语言。
​ html主要是包含一系列的标签,通过标签将网络上的文档格式统一,将分散的internet资源连接成一个逻辑整体。
所谓超文本就是一种信息的组织方式,就是通过超链接将文本的中的文字、图表与其他信息媒体相关联。这种组织信息的方式就是将分布在不同位置的信息资源用随机方式进行连接,为人们查找、检索信息提供方便。
举个例子:A召唤师在地球,被他标记的B、D、E…等召唤兽分布在太阳系各处,当A召唤师与某个敌人对战时,不可能跑到星系各处去先带着召唤兽前往决斗,所以A召唤师就会使用召唤法阵(超链接)将召唤兽从各地召唤而来,这时C召唤兽确无法进行战斗,因为C召唤兽之前生活的环境与A召唤师所战斗的环境有很大差异,为此,A召唤师创造了一种环境适应法术(标签),可以帮助召唤兽变成在召唤师所在环境下可以正常生存的状态。


HTML可以做什么?

​ HTML作为网页基础,它的首要功能就是制作网页,当然它的主要作用还是制作静态网页,而更多更酷炫的功能就需要CSS和JavaScript来实现了。

HTML的基本语法

HTML的基本框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>

声明当前 html 的语言版本为 html 5。

​ 2.

<html> </html>

html 标签,所有代码都要在这个标签内写入。

​ 3.

<head></head>

head 标签,头部标签,内容一般不在浏览器主界面显示,可以通过CSS和Javascript来制作浏览器主界面的样式。

​ 4.

<meta >

meta 标签,用来设置字符集,告诉浏览器,这个网页中的汉字是用什么编码解析的。

​ (1)utf-8 多国语言编码,每个国家语言都能正常显示。

​ (2)GB2312 简体中文编码,一共对6763个汉字进行编码。

​ (3)GBK 简体中文编码,一共对2.3万个汉字进行编码。

​ (4)JIS 日文编码。

​ (5)BIG5 简体中文编码。

​ 5.

<title>***</title>

title标签,网页的标题。

​ 6.

<body>***</body> 

body标签,网页的正文内容,一般会在浏览器的主界面显示。

​ 7.

<!-- 注释 --> 

注释。一般为ctrl + /。

标签分类

​ 1.闭合标签(双标签):开始 标签内容 结束 例:

<b> 标签内容 </b> --->加粗字体

​ 2.自闭和标签(单标签):标签名 内部结束 完成某个特定功能

<link href="icon地址" rel="icon" /> --->引入一个小图标

标签属性

​ 1.定义:通过标签对内容样式做进一步修改。

​ 2.语法:<标签 属性=“属性值”>xxx</标签> 例:

<p align="center">内容</p>  --->内容文本居中

基本常用标签

​ 1.标题标签:由大到小依次为< h1 >内容< /h1 >…< h6>内容< /h6> 例:

<h1>文本</h1>  --->文本内容字体为1号

​ 2.段落标签:< p>内容< /p> 将文本内容分段。 例:

<p>啊,大海呀!全是水。</p>
<p>蛤蟆呀,四抬腿!</p>

​ 3.换行标签:可以对一长段文字进行换行。< br />

<p>我爱你<br />中国</p>

​ 换行标签针对一段话需要分两行以上描述时使用,这将会是你在学习HTML中最常使用的标签。

4.列表标签:列表标签分为有序标签< ol>< li> < /li>< /ol>和无序标签< ul>< li> < /li>< /ul>,需注意这个标签中的有序和无序指的是序号。

<!-- 有序标签 -->
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>

<!-- 无序标签 -->
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>

5.超链接:< a>< /a>通过超链接中的href属性引入需要跳转链接的地址。例

<a href="www.baidu.com" target="_blank">点击打开百度</a>

​ 可以看到在上面例子中的标签内除了href属性之外还有一个target属性,这个属性是决定你打开超链接时在哪里窗口打开。

target="_self":这个属性值表示在自己本身的窗口通过超链接打开新的界面;

target="_blank":这个属性值表示打开一个新窗口,在新窗口中通过超链接打开一个新的界面。

这里我们只介绍target属性的两种属性值,剩下的三种我们会在HTML内联框架中进行讲解。

6.图片标签:< img > 通过src属性引入图片地址,达到显示图片的功能。例:

<img src="图片.png" />

7.通过超链接制作锚点:这时一个关于超链接的小技巧,我们知道超链接可以引入地址让我们直接打开一个新窗口,那么当我们在同一个界面给超链接一个类似地址的准确定位时,我们是不是就可以准确到达当前网页的一个位置中了呢。

<a href="#内容1">内容1</a>
		
<a name1="内容1">内容一</a>

可以看到我们在超链接标签属性href中引入的是第二个超链接的name属性,这样做的目的就是当我们点击上面"内容1"时,会触发超链接直接跳转到"内容一",学会制作锚点,就可以让我们在制作一个很长的页面时制作目录,使用者就可以通过相应的的目录指示直接跳转到相应的位置,给用户更好的使用体验。

后面我们会持续更新,敬请期待!!!!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!