HTML笔记
HTML的基础知识
1.1什么是计算机语言?
人与人之间是通过语言进行交流,那么人和计算机之间如何交流呢?计算机只知道“0”和“1”,所以我们就通过“0”和“1”这种语系来和计算机交流,这就是机器语言。在其中用电压高低来表示“0”和“1”。
机器语言:对于人类讲太难理解,编制程序太困难。为了解决这个问题,我们将一串特定的“01”进行符号化,这就是汇编语言。比如:ADD3,6
机器语言和汇编语言都是属于低级语言,即体现了机器的特性,而对于大多数不是计算机工程师的人来说,还是太困难了。
高级语言:用类似英语加数学的符号来描述,最大程度屏蔽了机器特性,使得程序的阅读和编制变得越来越容易。
如:if(a>b){
c = a;
}else{
c = b;
}
常见的高级语言:C、C++、C#、Java
1.2 什么是标记语言
①什么是文本文件?
只有文本内容,没有任何的格式。举例:在记事本中输入“带你出师,闯荡江湖!”,并设置相应的格式,但是在其他电脑上打开并没有显示相同的格式,说明其中不包含任何格式信息查看文件大小显示20字节。
在word中输入同样的语句,同时设置格式,在另一台电脑上会显示同样的内容和格式。
说明Word文档中除了存储内容,还存储了格式等信息(document.xml) ml就是标记语言(Markup Languaage)的缩写,我们要学的HTML(Hyper Text Markup Languaage)也是一种标记语言(是一种超文本的标记型的语言)
②超文本:不仅仅能表示文本信息,还能表示音视频、格式等等信息。
浏览网页实际上就是将存储在服务器上的HTML文件下载到本地,然后通过浏览器(IE、Chrome等)进行解析并呈现内容。
HTML基本结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- head部分主要做一些设置工作,比如字符集、标题等-->
<head>
<meta http-equiv="Content-Type"content="text/html;charset=gb2313">
<title>第二个演示网页</title>
</head>
<!--文档的主体部分,呈现给用户的信息都在这里-->
<body>
带你出师,闯荡江湖!
</body>
</html>
<html>:是整个文档的根节点,它包含两个子节点;
<head>:主要描述文档的设置信息,比如:字符集、标题等;
<body>:是文档的主体部分,需要呈现的内容都安排在其中。
注释的作用:
① 快捷键:Ctrl+Shift+/
② 形式:<!-- -->
③ 作用:对代码进行说明,方便程序员阅读和理解。注释对计算机的执行结果没有任何影响。
注释非常重要,代码正确是前提,但清晰也是一个非常重要的原则,要养成写注释的习惯。
基础标签
2.1 标题标签
<标签名></标签名>
标题标签用于显示页面的标题信息既包含了格式信息,同时提供了语义信息
<h1>-<h6>(从大到小)
<!--标题标签演示--> 这是没使用标签的标题 <h1>这是使用h1标签的标题</h1> <h2>这是使用h2标签的标题</h2>
2.2段落标签
段落(paragraph)标签标示页面的一个段落。
<!--段落标签演示--> <h2>登鹳雀楼</h2> <h3>白日依山尽;</h3> <h3>黄河入海流;</h3> <h3>欲穷千里目;</h3> <h3>更上一城楼。</h3>
2.3链接标签
链接标签<a>的作用的跳转,包括页面跳转和页内跳转
href属性制定链接的目标URL地址
(1) 页间跳转
<!--链接标签跳转的演示-->
<a href="http://www.runoob.com" target="_blank" title="努力成功">菜鸟网</a>
target属性指定打开目标页面的方式,其取值包括,
_self在当前页面打开,默认
_blank在新的页面中打开
_parent
_top
title属性指定提示信息
(2)页内跳转
在需要跳转的目标标签处指定id=”......”,在链接出指定href=”#......”
id属性是页面元素的唯一标识
“锚点”:anchors
2.4图片标签(img)
在网页中嵌入图片
①src:source,图片资源的URL地址,可以是本地的,也可以是远程的,
<img src="可爱.jpg" width="1200" height="750">
②alt属性:(altemative可替代的),即当资源不存在时,替代显示的文字内容
③ 路径:
相对路径
绝对路径
“../”:表示上一层目录、“./”:表示当前目录
在同一级目录:<img src="可爱.jpg">
在上一级目录:<img src="../可爱.jpg">
在下一级目录:<img src="pic/可爱.jpg">
不在同一文件下:imgsrc="../chapter1/pic/可爱.jpg">
2.5杂项
<span>:可以将部分文本独立出来;
<br>:换行;
<hr>:可以加横线分隔上下内容;
<base>:用来指定该页面的绝对路径。