HTML01基础知识
1 HTML骨架
1.1 文档声明头
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6</head>
7<body>
8
9</body>
</html>
1.2 字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
charset就是charactor set“字符集”的意思。
中文能够使用的字符集两种:
第一种:UTF-8
第二种:gb2312 也可以写成gbk
UTF-8和gb2312。
UTF-8是国际通用字库,里面涵盖了所有地球上所有人类的语言文字,比如阿拉伯文、汉语、鸟语……
gb2312 是国标,是中国的字库,里面仅涵盖了汉字和一些常用外文,比如日文片假名,和常见的符号。
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节
1.3 关键字和页面描述
<meta name="Description" content="网易是中国领先的互联网技术公司。" />
只要设置的Description页面面熟,那么百度搜索结果,就能够显示这些语句
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。
Keywords就是“关键词”的意思。
1.4 title标签
title也是有助于SEO搜索引擎优化的.
2 HTML的基本语法特性
2.1 HTML对换行不敏感,对tab不敏感
HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。
换不换行、tab不tab,都不影响页面的结构。
2.2 空白折叠现象
HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
2.3 标签要严格封闭
3 h和p标签
3.1 h系列
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题
h是容器级的标签。理论上里面可以放置p、ul,只是法律上的允许,在语义上,不要这么写。
3.2 p标签
HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
顾名思义,容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。
p标签是一个文本级标签。从学习p的第一天开始,就要死死记住:p里面只能放文字、图片、表单元素。其他的一律不能放
4 图片
4.1 能用的图片类型
页面上可以插入图片,能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。
不能往网页中插入的图片格式是:psd、ai
4.2 语法
HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
<img src="baby.jpg" />
4.3 alt属性
当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)。
<img src="baby.jpg" alt="巴黎结婚照" />
4.4 相对路径
例如:
<img src="../../images/jiehunzhao/baby.jpg" alt="" />
5超级链接
5.1 基本写法
<a href="1.html">结婚照</a>
<a href="09_img.html" title="很好看哦">结婚照</a>
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>(新的空白标签页中打开。)
5.2 页面内的锚点
页面当中可以有锚点,所谓的锚点,就是一个小标记
锚点用name属性来设置,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。
1<a name="wdzp">我的作品</a>
2或者:
<a id="wdzp">我的作品</a>
如果有一个超级链接,指向页面中的锚点,那么就是:
<a href="#wdzp">点击我就查看我的作品</a>