HTML骨架和基本语法
骨架抽象出来:
<html>
<head>
</head>
<body>
</body>
</html>
网页的最外层的标签对儿是<html></html>标签对儿,里面有两部分,分别是head和body。
head标签中,描述网页的配置;body中的内容,才是用户可以看见的内容。
完整的骨架:
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>哈哈哈</title>
6 </head>
7 <body>
8 <h1>我是一个主标题</h1>
9 <p>我是一个小段落</p>
10 </body>
11 </html>
第1行,就是网页的声明头,这行语句,千万不要背诵,谁背谁傻。术语叫做DocType Defintion,文档类型定义,简称DTD。这行语句非常的复杂,里面暗含了一个网址。W3C就是出web规范的组织机构。html、css、js的规范都是W3C定义发布的。world wide web coalition , 国际万维网联盟。网页声明头可以告诉浏览器,这是一个什么标准的页面。
第2行,是最大的html标签,所有的网页内容,都要包裹在这个标签对儿里面。
我们发现,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>哈哈哈</title> 网页的标题,可以显示在浏览器的标签栏中。
第7行,body标签就是网页的内容,用户能够看见。
文档声明头
任何一个标准的HTML页面,第一行一定是一个以
<!DOCTYPE ……
开头的语句。
这一行,就是文档声明头,DocType Declaration。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
而HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了
<!DOCTYPE html>
字符集
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta标签定义,meta表示“元”。“元”配置,就是表示基本的配置项目。
charset就是charactor set“字符集”的意思。
浏览器就是通过meta来看你是什么字符集的,比如你保存的时候meta写的,和声明的不匹配,那么浏览器就是乱码。
关键字和页面描述
meta除了可以设置字符集,还可以设置关键字和页面描述。
设置页面描述:
只要设置的Description页面面熟,那么百度搜索结果,就能够显示这些语句,这个技术叫做SEO,search engine optimization,搜索引擎优化。
抽象一下:
1
name就是“名字”的意思,content是“内容”的意思。
也就是说,我们定义了一个名字是“Description”(描述)的meta。内容是网易是中国领先……
定义关键词:
1
这些关键词,就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。让别人能够找到你,搜索到你。
Keywords就是“关键词”的意思。
所以,一个比较完整的骨架是这样:
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 <meta name="Keywords" content="牛逼,很牛逼,特别牛逼" />
6 <meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
7 <title>Document</title>
8 </head>
9 <body>
10
11 </body>
12 </html>
第4行 : 字符集设置
第5行: 关键词
第6行: 描述
title标签
<title>网页的标题</title>
title也是有助于SEO搜索引擎优化的:
网页的head标签里面,表示的是页面的配置,有什么配置?
字符集、关键词、页面描述、页面标题。
今后我们还能看见一些配置:IE适配、视口、iPhone小图标等等……
HTML的基本语法特性
1.HTML只在乎标签的嵌套结构,嵌套的关系。谁嵌套了谁,谁被谁嵌套了,和换行、tab无关。
换不换行、tab不tab,都不影响页面的结构。
所以:格式不影响显示
<div>
<h3></h3>
<p></p>
</div>
完全等价于:
<div>
<h3></h3>
<p></p>
</div>
也就是说,HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。但是,我们发现有良好的缩进,代码更易读。要求大家都正确缩进标签。
2.HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。
3.标签要严格封闭
h和p标签
1.h系列(标题标签)
<h1> 到 <h6> 都是标签:
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题
2.p标签(段落)
段落,是英语paragraph“段落”缩写。
HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
顾名思义,容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。
p标签是一个文本级标签。从学习p的第一天开始,就要死死记住:p里面只能放文字、图片、表单元素。其他的一律不能放。
Chrome浏览器 是世界上HTML5支持最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。
Chrome的英语原意“硅”,是谷歌公司的产品,所以也叫作谷歌浏览器。