HTML基础笔记-02
---恢复内容开始---
学习网站：W3School
一、HTML的认识
纯文本语言：只显示内容，不显示样式，也不能描述语义的文档，但是也不会乱码
语义：数据的含义就是语义，数据是符号，在这表示标签
文件格式：txt只保存内容，不显示样式，而doc不仅显示内容，也显示样式，两者在保存相同的内容时，doc的文件占用内存比较大
常见纯文本：记事本、Java、HTML、CSS、JavaScript等
二、 HTML的基础知识点
HTML是负责描述文档语义的一种标记语言
HTML有文本、图片、链接、视频、音乐等
注意：html没有样式，是用来添加语义的排版，实际上就是文本的嵌套使用，而CSS是用来定义样式的
HTML (hyperText Markup Language): 也叫超文本标记语言
超文本：是因为它可以导入超链接，将空间中不同的数据进行连接，所以叫超文本
基本骨架：
<html>
<head>
<meta charset="UTF-8">
<!-- 浏览器的标题 -->
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>:文档声明头，声明使用的是html的文档类型 (DocType Declaration)，任何一个标准的HTML页面，第一行一定是文档声明头
我们大多数学的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。
HTML和XHTML的区别：XHTML严格体现在小写标签、闭合、引号
Strict：表示当前模式的要求更加严格，指定有些标签不能使用，如U标签（是指加上下划线的标签，也就是样式，这和HTML就产生了冲突，HTML只负责语义，不负责样式的）
我们使用的一般是Transitional(普通的)的版本，没有严格要求
(U标签：)
基本标签：
<body></body>：里面显示文本、图片内容、链接等网页内容
<h1></h1>一级标题(主标题) <h2></h2>二级标题… h1->h6定义标题语义，显示不同的标题(headline)大小
<p></p>段落。里面的是内容
<a></a> 指向链接
<img src="" alt=“这里用来调用图片失败的识别说明”>图片
<br>换行
字符集（Character Set）：当前计算机不能识别汉字，而是通过二进制来存储编码，计算机记录的实际是根编码
eg： <meta charset="UTF-8"> meta(便签定义)--> 表示“元”，“元”配置 ：表示基础的配置项目
第一种：UTF—8
<meta http-equiv="content-type" content="text/html;charset=utf-8">
第二种：gb2312
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
第三种：gb2312的简写 gbk
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
其中UTF-8全球通用，涵盖了人类的所有语言
Gb2312是国标，是中国的字库，涵盖了汉语和常见的英文
UTF-8中的一个汉字存储3个字节，而gb2312存储两个字节，一般情况下使用的是UTF-8.但是有时在用户体验上要考虑到是否使用国标
2.3关键字和页面描述
mata除了可以设置字符集，还可以设置关键字和页面描述
页面描述（description：描述）
设置页面描述，在百度搜索，可显示当前页面描述的内容，这个技术叫做SEO（SEO：英文Search Engine Optimization， 中文叫“搜索引擎优化”）
eg：<meta name = “名字 ” content =“图片加载失败后显示的提示内容”>
关键字：告诉搜索引擎，这个网页是做什么，提高搜索的效率，让人快速的找到想要的信息，keyword就是“关键字”
保存编码格式：File--> Save With Encoding
CM(Command) ＋ S保存 CM ＋ N新建文件(File--> New) Tab点击出html的各种格式
HTTP协议：也叫超文本传输协议，个人的认识：用于Web浏览器和网站服务器之间的数据传输。它是以明文发送内容，不提供任何形式进行加密，攻击者很容易截取数据信息，可以直接看懂，所以它不适合传如卡号、密码等敏感信息
三、HTML的基本语法
<1、 html对换行（Tab键）、回车以及大小写都不敏感
- <div>这是一个div的盒子！
- <h3>这是一个三级标题</h3>
- <p>这是一个段落</p> </div>
等价于：
- <div>这是一个div的盒子！
- <h3>这是一个三级标题</h3>
- <p>这是一个段落</p>
- </div>
<div></div>存放内容或者嵌套其它标签使用，对换行不敏感
代码规范：<div>标签的嵌套的内容要依次缩进，增强代码的可读性
<2、html的空白折叠效果：html中的文字之间进行空格、换行、tab键都会折叠成一个空格
<3、标签要严格封闭(<>)
HTML、CSS实际上就是写代码，不是真正意义上"编程"，基本上不实现业务逻辑，但是思想和很多内容在编程上是相同的
四、标签的使用
HTML的标签分等级的，有二种类型：容器级、文本级
容器级的标签可以存放任何东西
文本级的标签只能放置文字、图片、表单元素
1、h标签
<h1></h1>一级标题(主标题) <h2></h2>二级标签…<h6></h6>六级标题
h1->h6定义标题语义，显示不同的标题大小 headline
p标签：<p></p>段落(Paragraph) 里面输入的是内容，p里面只能存放文字、图片、表单元素，其他一律不能放
eg：当源代码是
<p>
我是段落
<h1>我是主标题</h1>
</p>
但是在浏览器检查的时候显示的是
<p>
我是段落
</p>
<h1>我是主标题</h1>
<p> </p>
浏览器自己把P标签封闭，不让你去包裹h1
浏览器在p标签中遇到其它标签时，会自动添加</p>进行封闭，在另一个结束标签前面补上开始标签<p>，
3、 img标签
<img>插入图片 img(image：图片) Src (Source: 资源)
eg: <img src="" alt=“1.png”/>
能够插入的图片类型：jpg(jpeg)、gif、png、bmp，不能往网页里面插入的图片格式有：psd、ai
img的标签不需要反标签，是自封闭标签，也叫单标签
如：<img src="1.jpg"/> ，Src是img的标签属性，1.png是属性值(网址或文件路径)
alt属性：alt(altemate : 替代) 图片无法显示的时候，用文字来代替文件（但是有些浏览器不支持）
HTML页面不是直接插入图片的，而是插入引用的地址，所以也要把图片上传到服务器上
如果一直显示不出图片，最直接有效的办法是输入全路径加图片名，但是只能在自己的电脑上能看到，不推荐这样用。
HTML中插入图片，有二个文件，一个html文件，一个jpg文件
我们关心就是当前这二个文件的相对位置，即是这个网站项目，那U盘拷贝给别人，只要相对路径不变，图片就一定能正常显示，图片和html文件要在同一层级上
如果在上一个文件里，要加“../”如果在上二个文件里，就添加“../../”，以此增加或者输入全路径
如果图片在html文件里面，则输入“thml/”
4、a标签超级链接
写法：<a href="" title="这是什么样的title" targe="_blank" >这是一个超链接</a>
一个网站，是由多个html网页组成，html网页键通过超级链接相互跳转，形成一个“网”
如：<a href="08.html" title="这是什么样的title">title属性</a>
target属性
target：目标的意思
如：<a href="08.html" title="这是title" target="_blank ">target属性</a>
blank（空白）：块状的意思，代表新建一个新的空白窗口
如果没有target="_blank "，那么在相同的标签页打开，如果写了target="_blank "，就是在新的空白标签页中打开，并且跳转的标签页还是存在的
5、页面中锚点
锚点：就是一个小小的标记，用来实现页面跳转，不容易被用户察觉
a （anchor） 是"锚"的意思 a标签
title 鼠标悬停时的文本显示
target(属性) 如果有这行代码，就会在新的空白标签页打开，并且在跳转的标签页中还是存在的
页面中的锚点作用：当前内容很多的时候，想直接返回首页，用来跳转页面
如：锚点可以用name和id来设置属性
<a name="BWHL">这是第一个锚点</a>
<a name="second">这是第二个锚点</a>
如何点击跳转（前提是有一个超级链接，指向页面中的锚点，才能在页面内跳转）
<a herf="#BEHL">点击第一个锚点</a> #BEHL就是锚点
<a herf="#second">点击第二个锚点</a>
6、<br>换行标签
7、列表：
它会自动空格，分为：
有序列表：<ol><li>
无序列表：<ul><li>
可以在浏览器中检查代码：检查--> Console，有些浏览器可能不支持，常用的是Chrome和Firefix(有很多实用的插件，个人经常实用Firebug来检查元素)
