第一次HTMl笔记
这是个人做的HTML学习笔记啦,简单记录下学习过程,分成几次吧。内容应该算比较详细了,可以下饭。这次我们笔记包含了一点基本结构、发展以及标签、图片等等。
HTMl(一)
- HTML(Hypetext Markup Language)超文本标记语言。(文本指的是在纯文本编辑器【windows中的记事本、nodepad++等】中编写的内容!)
- 它负责网页的三个要素中的结构。
- HTML使用标签的形式,来标识网页中的不同组成部分。
- 所谓超文本,指的是超链接,使用超链接可以使我们从一个网页跳转到另一个。
HTML基本结构
-
首先要有根标签:(内容),所有的内容都要在根标签中,而且一个网页有且仅有一个根标签。
-
其次,要有子标签:
<html><head></head><body></body></html>
,html是head、body的父标签。为了清晰,我们使用缩进:<html> <head> <title>这是一个非常好的网页</title> </head> <body> <h1>这是我的第一个网页!</h1> </body> </html>
注意:
- < head >(内容)< /head >中的内容不会在网页中显示,而作用是:设置一些信息让浏览器看,浏览器通过信息解析网页。
- < title >(内容)< /title >中的内容不会显示在网页中,而是显示在标题栏。
- < body >(内容)< /body >表示网页中的主体,所有的内容都写在其中。
HTML注释
<!--html标签,一个网页只有一个根标签,所有内容都应该写在html标签内-->
<html>
<!--head标签,该标签中的内容不会直接显示在网页中,它用来帮助浏览器解析页面-->
<head>
<!--title网页的标题标签,默认会显示在浏览器的标题栏中,搜索引擎在搜索页面时,会首先检索title中的标题栏,它是网页中对于搜索引擎最重要的内容!会影响到网页在搜索引擎中的排名。一般又SEO设计,不用我们写。-->
<title>这是一个非常好的网页</title>
</head>
<!--body标签,用来设计网页的主题内容,网页中所有课件内容都应该在body中写!-->
<body>
<!--在这个结构中,可以用来编写HTML的注释
注释中的内容,不会在页面中显示,但是
在源代码中显示,从而帮助自己、其他开
发人员工作。
-->
<h1>这是我的第一个网页!</h1>
</body>
</html>
注意:注释要简单明了 ,写程序中要养成编写注释的好习惯,例如要写功能、作者、日期等。
HTML标签的属性
现在看来我们的网页十分单调,黑底白字,如果我们要单独给其中的一段字修改颜色应该如何操作呢?
<html>
<head>
<title>这是一个非常好的网页</title>
</head>
<body>
<!--
属性:
可以通过属性来处理标签.
可以在属性的开始标签中添加属性。
-->
<h1>这是我的<font color="red">第二个</font>网页!</h1>
</body>
</html>
现在的效果呢?
需要注意的是:属性需要写在开始标签中,实际上就是一个名值对的结构。
属性名 = “属性值”
而且一个标签中可以有多个属性,只要用空格隔开。
属性名 = “属性值” 属性名 = “属性值”
众多的属性可以参考菜鸟教程官网。
HTMl的发展
- 1993年6月,HTML第一个版本发布。
- 1995年11月,HTML2.0。
- 1997年1月,HTML3.2(W3C推荐)。
- 1999年12月,HTML4.01(W3C推荐)。
- 2000年底,XHTML1.0(W3C推荐)。
- 2014年10月:HTML5(W3C推荐)。
有这么多版本,那么网页如何区分我们使用的版本呢?
就是这个问题,HTML总共有那么多的版本,而且至少有三个在广泛使用,浏览器是如何知道我们在使用哪个版本的呢?
为了让浏览器知道我们使用的是那个版本,我们需要在网页的最上面添加一个doctype声明!
html4的doctype声明
这些东西也就看看,现在已经没人用了。
xhtml1.0的doctype声明
这些东西不仅不好看,而且根本记不住,那么html5的doctype声明呢?
html5的doctype声明
这就很好记忆了!
<!--
html5的文档声明,声明当前网页是按照HTML5的标准编写的,编写网页时一定要将h5的文档写在最上面!
如果不写文档声明,则会导致某些浏览器进入怪异模式,进入怪异模式以后,浏览器解析页面会导致页面无法正常打开,为了避免进入怪异模式,一定要写文档声明!
-->
<!doctype html>
<html>
<head>
<title>这是一个非常好的网页</title>
</head>
<body>
<h1>这是我的<font color="blue" size = "1">第二个</font>网页!</h1>
</body>
</html>
设计网页的编码字符集
每个浏览器都有默认的字符集,或许是中国的GBK、GB2312,或许是万国码UTF-8,也有ANSI指的是系统自动转换格式。但我们编码用的一般是UTF-8,若是浏览器的默认解码字符集是GB2312的话,我们写的网页就会出现乱码比如出现这些我们看不懂的字符:
那怎么办呢?
<doctype html>
<html>
<head>
<!-- 需要告诉网页我们的编码字符集。
meta标签用来设置网页的一些元数据。比如网页的字符集、关键字、简介。
meta是一个自结束标签。编写一个自结束标签,可以在开始标签中添加一个/
-->
<meta charset="UTF-8"/>
<title>我的网页</title>
</head>
<body>
<h1>这是一个非常漂亮的网页</h1>
</body>
</html>
我们需要像上面的代码中一样,添加一段meta标签,用来设置了浏览器的解码字符集。
自此,我们的html格式就算基本完备。
HTML常用标签
标题标签
<!--
标题标签:
-在html中,一共有六级标题标签
h1 ~ h6,在显示效果上看,h1最大,h6最小,但我们并不关心大小
使用HTMl标签时,关注的是语义,我们使用的标签都是语义化标签。
6级标签中,h1最重要,表示网页中的主要内容,h2~h6重要性一次下降。
对于搜索引擎来说,h1的重要性仅次于title!会影响到页面在搜索引擎中的排名。页面中只能写一个h1.
一般我们的页面中只是用 h1 ~ h3 其他基本不用。
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签
<!--
段落标签,段落标签用于表示内容中的一个自然段,
使用p标签来表示一个段落。
p标签中的文字默认会独占一行,并且段与段之间会有距离。
-->
<p>我是一个p标签,我用来表示一个段落</p>
<!--
HTML中字符之间写再多的空格,浏览器都会当成一个空格解析,
换行也会当成一个空格解析。
在我们的页面中可以使用br标签来换行,br标签是个自结束标签。
-->
<p>
锄禾日当午,<br/>
汗滴禾下土。<br/>
谁知盘中餐,<br/>
粒粒皆辛苦。<br/>
</p>
<!--
hr也是自结束标签,可以在我们的页面中生成一条水平线。
-->
<hr/>
<hr/>
实体
当我们写这样一段代码的时候会遇到一些问题
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>实体</title>
</head>
<body>
a<b>c
</body>
</html>
其实就是其中的我们想要得到的结果是ac,而实际上呢?
我们得到的是ac,其中的c还是加粗的字体,这是为什么呢?
因为我们的html中<b>
恰好是一个标签,意思就是加粗,所以我们的到的不是我们想要的结果。
注意:
- 在我们的html中,一些字符<,>是不能直接使用的。
- 需要使用一些特殊的字符来表示这些字符,这样的特殊字符我们称之为实体(转义字符)
- 关于实体语法:
- &实体的名字;
- 比如要写小于号<,我们就需要这样表示
<
(lt表示less than). - 要写大于号>,我们就需要这样表示
>
(gt表示great than). - 要写一个空格space,我们就需要这样表示
%nbsp;
(non-break space). - 要写一个版权声明符©,我们就需要这样表示
©
.
- 比如要写小于号<,我们就需要这样表示
- &实体的名字;
还有大量的实体需要我们了解,直接上菜鸟教程上就能查询到:实体语法
所以将我们上面的代码改写为下面这样的形式就能达到目的:
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>实体</title>
</head>
<body>
a<b>c
</body>
</html>
图片标签
接下来我们讨论如何在网页中引入一个外部的图片呢。
首先,将我们需要引入的图片与我们的html文件放在同一个文件夹下。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片,
img标签也是一个自结束标签。
属性:
src:设置图片的路径。
alt:设置图片的(描述)。
width:可以用来修改图片的宽度,px(像素)作为单位。
height:可以用来修改图片的高度,px(像素)作为单位。
(当宽度和高度我们只设置一个,另一个也会同比例改变,但是一般开发中除了自适应的 界面,不建议修改width和height,一般交给美工完成)
-->
<img src="1.jpeg" alt="小可爱" width="230px" height="300px">
</body>
</html>
这样我们打开我们的网页就能获得我们的图片了,但是问题来了,我们的描述呢,我们的alt怎么没起到作用呢?这里我们要注意咯,alt表示:在图片不能显示的时候,对图片的描述!(搜索引擎可以根据alt来判断我们的图片,如果不写alt搜索引擎不会对我们的图片进行收录!这才是alt的真正作用!)
路径:src
src属性配置的是图片的路径,目前(上面)我们所需要的路径全都是相对路径。而什么是相对路径?相对路径指的是:当前资源所在目录的位置。
控制相对路径:
- 进入下一级目录使用/。
- 返回上一级目录使用…/。返回几级目录就使用几个…/。
但是如果我们的图片和我们的html文件隔得太远,就得使用绝对路径了,使用绝对路径比较麻烦,所以我们一般使用相对路径。
图片格式问题
常见的图片格式
- JPEG(JPG):
- jpeg支持支持的颜色比较多,图片可以压缩,但是不支持透明。
- 一般使用jpeg格式保存照片等颜色丰富的图片(网络上的照片大多是jpeg格式)。
- GIF:
- GIF格式支持的颜色少,只支持简单的透明,支持动态图。
- 图片颜色单一,或者是动态图片,可以使用gif格式。
- PNG :
- PNG,支持的颜色多,并且支持比较复杂的透明。
- 可以显示颜色复杂的透明图。
图片的使用原则
效果不一致,使用效果好的。
效果不一致,使用小的。
这次就先记录到这里吧,这只是最最开始的一点基础了,希望能对小白有点帮助,就这样咯。