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.字符集
|
字符集用meta标签定义,meta表示“元”。“元”配置,就是表示基本的配置项目。
中文能够使用的字符集两种:UTF-8和gb2312也可以写成gbk,UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。
3 关键字和页面描述
meta除了可以设置字符集,还可以设置关键字和页面描述。
设置页面描述:
|
只要设置的Description页面面熟,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO,search engine optimization,搜索引擎优化。
定义关键词:
|
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。
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页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
插入方法:
|
3 alt属性
alt属性:
|
alt是英语alternate“替代”的意思,就表示不管因为什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。
4 相对路径
HTML中插入图片,所以现在有两个文件,一个html文件,一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目,被用u盘拷给了别人,只要相对路径不变。图片一定能够正常显示。
如果是上两级:
|
../要么不写,要么就写在开头。
五、a标签
1.基本写法
|
a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。href是英语hypertext reference超文本地址的缩写
2 a标签的另外两个属性
title 悬停文本,就是鼠标悬停在图片上时所显示的。
target 是否在新窗口中打开target实际上是“目标”的意思。
|
blank就是“空白”的意思,就表示新建一个空白窗口。为毛有一个_ ,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了,就是在新的空白标签页中打开。
3 页面内的锚点
页面当中可以有锚点,所谓的锚点,就是一个小标记,这个小标记是用户不可察觉的,用户不知道这里有一个标记。
锚点用name属性来设置,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。
4 a是一个文本级的标签
比如一个段落中的所有文字都能够被点击,那么应该:
|