python全栈1-Html基础

HTML：超文本传输协议，Hypertext Transfer Protocol。

这是一个文件的传输协议，我们上网的时候，所有的文件都是通过HTTP这个协议，从服务器上传输到客户的电脑里面的。

一、HTML基础

1.文档声明头

任何一个标准的HTML页面，第一行一定是一个以 <!DOCTYPE...> 开头的语句。

这一行，就是文档声明头，DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

首先我们先确定一件事儿，我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开开始兼容的。但是IE6、7、8这些浏览器还不能过早的淘汰，所以这几年网页还是应该用HTML4.01来制作。

大规范

里面的小规范

HTML4.01

Strict        严格的，体现在一些标签不能使用，比如u

Transitional   普通的

Frameset     带有框架的页面

XHTML1.0

严格体现在小写标签、闭合、引号

Strict          严格的，体现在一些标签不能使用，比如u

Transitional    普通的（我们学习的版本）

Frameset      带有框架的页面

2.字符集

1. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

字符集用meta标签定义，meta表示“元”。“元”配置，就是表示基本的配置项目。

中文能够使用的字符集两种：UTF-8和gb2312也可以写成gbk，UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

3 关键字和页面描述

meta除了可以设置字符集，还可以设置关键字和页面描述。

设置页面描述：

1. <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置的Description页面面熟，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO，search engine optimization，搜索引擎优化。

定义关键词：

1. <meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

Keywords就是“关键词”的意思。

4 title标签

title也是有助于SEO搜索引擎优化的

二、HTML的基本语法特性

1 HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。

换不换行、tab不tab，都不影响页面的结构。

2 空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

3 标签要严格封闭

三、h和p标签

1 h标签

<h1> 到 <h6> 都是标签：

2 p标签

段落，是英语paragraph“段落”缩写。

HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。

顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放

四、图片

5.1 能用的图片类型

页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。

不能往网页中插入的图片格式是：psd、ai

5.2 语法

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

插入方法：

1. <imgsrc="baby.jpg"  />

3 alt属性

alt属性：

1. <img src="baby.jpg" alt="巴黎结婚照" />

alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。

4 相对路径

HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。

我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。

如果是上两级：

1. <img src="../../shizi.jpg" alt="" />

../要么不写，要么就写在开头。

五、a标签

1.基本写法

1. <a href="1.html">跳转到1.html</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语hypertextreference超文本地址的缩写

2 a标签的另外两个属性

title 悬停文本，就是鼠标悬停在图片上时所显示的。

target 是否在新窗口中打开target实际上是“目标”的意思。

1. <a href="09_img.html" title="很好看哦" target="_blank">自拍照</a>

blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。

3 页面内的锚点

页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。

锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。

4 a是一个文本级的标签

比如一个段落中的所有文字都能够被点击，那么应该：

1. <p>
2. <a href="">段落段落段落段落段落段落</a>
3. </p>