第一次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，支持的颜色多，并且支持比较复杂的透明。
- 可以显示颜色复杂的透明图。
图片的使用原则
效果不一致，使用效果好的。
效果不一致，使用小的。
这次就先记录到这里吧，这只是最最开始的一点基础了，希望能对小白有点帮助，就这样咯。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
