HTML基本结构，HTML发展简单介绍，HTML（一）
第一次HTMl笔记
- HTMl(一)
- HTML基本结构
- HTML注释
- HTML标签的属性
- HTMl的发展
- 有这么多版本，那么网页如何区分我们使用的版本呢？
- html4的doctype声明
- xhtml1.0的doctype声明
- html5的doctype声明
- 设计网页的编码字符集
- HTML常用标签
- 标题标签
- 段落标签
- 实体
- 图片标签
- 路径：src
- 图片格式问题
- 常见的图片格式
- 图片的使用原则
这是个人做的HTML学习笔记啦，简单记录下学习过程，分成几次吧。内容应该算比较详细了，可以下饭。这次我们笔记包含了一点基本结构、发展以及标签、图片等等。
HTMl(一)
- HTML（Hypetext Markup Language）超文本标记语言。（文本指的是在纯文本编辑器【windows中的记事本、nodepad++等】中编写的内容！）
- 它负责网页的三个要素中的结构。
- HTML使用标签的形式，来标识网页中的不同组成部分。
- 所谓超文本，指的是超链接，使用超链接可以使我们从一个网页跳转到另一个。
HTML基本结构
-
首先要有根标签：(内容)，所有的内容都要在根标签中，而且一个网页有且仅有一个根标签。
-
其次，要有子标签：
,html是head、body的父标签。为了清晰，我们使用缩进：<html> <head> <title>这是一个非常好的网页title> head> <body> <h1>这是我的第一个网页！h1> body> html>注意：
- < head >（内容）< /head >中的内容不会在网页中显示，而作用是：设置一些信息让浏览器看，浏览器通过信息解析网页。
- < title >（内容）< /title >中的内容不会显示在网页中，而是显示在标题栏。
- < body >（内容）< /body >表示网页中的主体，所有的内容都写在其中。
HTML注释
<html>
<head>
<title>这是一个非常好的网页title>
head>
<body>
<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声明
这就很好记忆了！
<html>
<head>
<title>这是一个非常好的网页title>
head>
<body>
<h1>这是我的第二个font>网页！h1>
body>
html>
设计网页的编码字符集
每个浏览器都有默认的字符集，或许是中国的GBK、GB2312，或许是万国码UTF-8，也有ANSI指的是系统自动转换格式。但我们编码用的一般是UTF-8，若是浏览器的默认解码字符集是GB2312的话，我们写的网页就会出现乱码比如出现这些我们看不懂的字符：
那怎么办呢？
<doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>我的网页title>
head>
<body>
<h1>这是一个非常漂亮的网页h1>
body>
html>
我们需要像上面的代码中一样，添加一段meta标签，用来设置了浏览器的解码字符集。
自此，我们的html格式就算基本完备。
HTML常用标签
标题标签
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
段落标签
<p>我是一个p标签，我用来表示一个段落p>
<p>
锄禾日当午，<br/>
汗滴禾下土。<br/>
谁知盘中餐，<br/>
粒粒皆辛苦。<br/>
p>
<hr/>
<hr/>
实体
当我们写这样一段代码的时候会遇到一些问题
<head>
<meta charset="utf-8">
<title>实体title>
head>
<body>
a<b>c
body>
html>
其实就是其中的我们想要得到的结果是ac,而实际上呢？
我们得到的是ac,其中的c还是加粗的字体，这是为什么呢？
因为我们的html中恰好是一个标签，意思就是加粗，所以我们的到的不是我们想要的结果。
注意：
- 在我们的html中，一些字符<,>是不能直接使用的。
- 需要使用一些特殊的字符来表示这些字符，这样的特殊字符我们称之为实体（转义字符）
- 关于实体语法：
- &实体的名字;
- 比如要写小于号<,我们就需要这样表示
<（lt表示less than）. - 要写大于号>,我们就需要这样表示
>（gt表示great than）. - 要写一个空格space,我们就需要这样表示
%nbsp;(non-break space). - 要写一个版权声明符©,我们就需要这样表示
©.
- 比如要写小于号<,我们就需要这样表示
- &实体的名字;
还有大量的实体需要我们了解，直接上菜鸟教程上就能查询到：实体语法
所以将我们上面的代码改写为下面这样的形式就能达到目的：
<head>
<meta charset="utf-8">
<title>实体title>
head>
<body>
a<b>c
body>
html>
图片标签
接下来我们讨论如何在网页中引入一个外部的图片呢。
首先，将我们需要引入的图片与我们的html文件放在同一个文件夹下。
<html>
<head>
<meta charset="UTF-8">
<title>图片标签title>
head>
<body>
<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，支持的颜色多，并且支持比较复杂的透明。
- 可以显示颜色复杂的透明图。
图片的使用原则
效果不一致，使用效果好的。
效果不一致，使用小的。
这次就先记录到这里吧，这只是最最开始的一点基础了，希望能对小白有点帮助，就这样咯。