HTML笔记
1.HTML基础知识
1.1什么叫做计算机语言
0,1二进制(计算机通过电压高低、电流的正负来表示“0”“1”);
人与人之间通过语言进行交流,那么人与计算机之间如何交流呢?计算机只知道“0”和“1”,所以我们就通过“0”“1”这种联系来和计算机交流,者就是计算机语言。
机器语言对于人来讲太难理解,编制程序太困难。
为了解决这些问题,我们将一串特定的“01”进行符号化,这就是汇编语言。
机器语言和汇编语言都是属于低级语言,即体现了机器的特性,而对于大多数不是计算机工程师的人来说,还是太困难了。
高级语言:用类似英语加数学的符号来描述,最大程度屏蔽了机器特性,是程序的阅读和编制越来越容易。
if(a>b){
c=a+1;
}else{
c=b;
}
常见的高级语言:C、C++、C#、PHP、JAVA
1.2什么是标记语言
什么是文本文件:只有文本内容,没有任何格式。举例:在记事本中输入“带你厨师,闯荡江湖!”,并设置相应的格式,但是在其它电脑生打开内容并没有显示改变的格式,证明其不能包含任何格式信息,查看文件大小文本显示20字节
在word中输入“带你厨师,闯荡江湖!”,同时设置样式,在另一台电脑上看到的是相同的内容和格式。同时查看文件大小
说明word文档中出了存储了文本信息,还包含了格式等信息,document.xml(ml就是标记语言MarkerLanguage的缩写),我们要学的HTML(HyperTextMarkerLanguage)也是一种标记语言。
超文本:不仅仅可以表示文本,还能表示音视频、格式等等信息。
浏览网页实际上就是将存储在服务器上得到HTML文档下载到本地,然后进行通过浏览器进行解析并呈现内容。
1.3HTML基本结构
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--head部分主要做些设置的工作,比如字符集、标题等-->
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>我的第一个网页</title>
</head>
<!--文档的主题部分,呈现给用户的信息都在此-->
<body>
带你出师,闯荡江湖!
</body>
</html>
注释:1、添加注释的快捷键:Ctrl+Shift+/
2、注释的形式:<!-- -->
3、作用:对代码进行说明,方便程序员阅读和理解。注释对于计算机的执行结果没任何影响。
注释很重要,代码正确是前提,但清晰也是一个非常重要的原则。程序员要养成写注释的习惯。
2.基础标签(<标签名></标签名>)
2.1标题标签
标题<>标签用于显示野蛮的标题信息,及包含了格式信息,同时提供了语意信息。
标题标签常用的标签<h1>-<h6>。
2.2段落标签
段落<>标签是用来标示页面的一个段落
<body>
<h3>登鹳雀楼</h3>
<p>白日依山尽</p>
<p>黄河入海流</p>
<p>欲穷千里目</p>
<p>更上一层楼</p>
</body>
2.3链接标签
链接标签<a>的作用是跳转,包括页面间的跳转和页内的跳转
(1)页间跳转
href属性指定了链接的目标地址
target属性指定打开目标的页面方式,其取值包括
_self:在当前页面中打开,默认
_blank:在新的页面中打开。
_parent: 在父框架集中打开被链接的文档,这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
_top: 这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
title属性指定提示信息
<body>
<a href="http://www.runoob.com/"target="_blank"title="我真的很菜!">菜鸟网</a>
</body>
(2)页内跳转
在目标标签处指定id=“...”,在链接处指出href=“#...”
id属性示页面元素一个唯一的标识
“锚点”:anchor
2.4图片标签
图片标签<image>
在网页中载入图片
src属性为图片源的URL地址,这个地址可以是本地的也可以是来自服务器的
<body>
<img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=ca5abb5b7bf0f736ccf344536b3cd87c/29381f30e924b899c83ff41c6d061d950a7bf697.jpg">
</body>
alt属性:alternative(可以替代的),即资源不存在时,可以替代显示的文字内容。
<body>
<img src="测试图片.jpg" alt="这个图片很漂亮">
</body>
路径:
相对路径:
绝对路径:
“..”:上一级目录
“.”:当前目录
在同一级目录:
<img src="测试图片.jpg" alt="这个图片很漂亮">
在上一级目录:
<img src="../测试图片.jpg" alt="这个图片很漂亮">
在下一级目录:
<img src="pic/测试图片.jpg" alt="这个图片很漂亮">
2.5杂项
<span>:可以将部分文本独立出来
<br>:
<hr>
<base>