一、 HTML概念
HTML(HyperText Markup Language,简称HTML)是超文本标记语言。是用来描述网页的一种标准标记语言(有一套标记标签),HTML在浏览器上运行,由浏览器来进行解析。
二、HTML文档的后缀名
.html
.htm
以该两者作为后缀名的HTML文档没有本质上的区别,是一样的。
三、HTML标签
HTML标记标签通常被称为HTML标签,即HTML tag。
HTML标签是由尖括号包围的关键词,如 <html>
围堵(开放、闭合)标签: 一般来说HTML标签是成对出现的,第一个出现的标签是开始标签,第二个出现的标签是结束标签。如:<b></b>
(b标签的作用是加粗其所包围的内容)
自闭(自合)标签: 相对于围堵标签来说,是独立出现的标签。如:< br />
(该标签的作用是换一行)
标签的嵌套: 标签成对出现,是可以相互嵌套的。如:
<b><i>文本内容</i></b>
<!--
<i>标签的作用:将其围堵的内容变成斜体
<b>标签的作用:将其围堵的内容变成粗体
注意:
标签在要一一对应,不可以错位。
如<b><i>文本内容</b></i>是错误的!
-->
、
四、HTML元素
HTML文档由HTML元素定义。
- HTML元素以开始标签开始
- HTML元素以结束标签结束
- HTML元素内容是开始标签与结束标签之间的内容
- 没有内容的HTML元素被称为空元素
- 空元素实在开始标签中关闭的(即一开始标签的结束而结束)
- 大多数HTML元素可以拥有属性
- 大多数HTML元素可以进行嵌套(HTML文档就是由相互嵌套的HTML元素构成)
例子:
<p>这是一个段落</p>
<!--
该HTML元素的开始标签是<p>
该HTML元素的结束标签是</p>
该HTML元素的内容是开始标签和结束标签中的内容:这是一个段落
-->
<body>
<p>这是一个段落</p>
</body>
<!--
该HTML元素的开始标签是<body>
该HTML元素的结束标签是</body>
该HTML元素的内容是开始标签和结束标签中的内容:是另一个被嵌套的HTML元素
-->
<!--
注意:
1. 其实在写了开始标签后,不写结束标签,大多数浏览器也会正确地显示HTML,因为关闭标签是可选的。如<br>,但不可以依赖这种做法,忘记使用结束标签会产生不可娱乐的结果或错误。因此我们最好写成 <br />,将其在开始标签中关闭。
2. HTML标签对大小写不敏感,推荐使用小写。
-->
五、HTML属性
属性是HTML元素提供的附加信息。
- HTML元素可以设置属性。
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,如 name=“value”
注意:
- 属性的值应该始终被包括在引号内,双引号是最常用的,不过使用单引号也没有问题。(在某些特殊情况,比如属性值就含有双引号,那么必须使用单引号)
- 属性和属性值对带小写不敏感,推荐使用小写。
- class属性可以多用class=“ “(引号里面可以填入多个class属性);id属性只能单独设置id=”"(只能填写一个,多个无效
六、Web浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,火狐,safari),其用于读取HTML文件,并将其作为网页显示,浏览器并不是直接显示HTML标签,但可以使用标签来决定如何展现HTML页面内容给用户,
七、HTML版本
从网络诞生到目前为止,出现了许多HTML版本。
HTML自1991年发布;
HTML+自1993年发布;
HTML 2.0自1995年发布;
HTML 3.2自1997年发布;
HTML 4.01自1999年发布;
XHTML 1.0自2000年发布;
HTML5自2012年发布;
XHTML自2013年发布;
我们在编写HTML的时候,可以通过<!DOCTYPE>声明对应的HTML版本,有助于浏览器正确显示网页。(注:doctype声明不区分大小写)
八、基本结构解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是一个标题h1</h1>
<p>这是一个段落p</p>
</body>
</html>
<!--
一个HTML文件由两大部分组成,声明文档(DOCTYPE)和完整的HTML页面(由<html></html>标签组成)。对于完整的HTML页面,又可以分为头部元素(由<head></head>head>标签组成)和可见的页面内容(由<body></body>标签组成)。
具体说明:
1. <!DOCTYPE html>: 用来声明对应的HTML版本
2. <html>元素:HTML页面的根元素
其中lang属性是英语language的缩写,意思是语言 ,用于在浏览器在读取到页面语言和本地 计算机语言进行比较判断后,是否提示做出翻译的选项,因为搜索引擎无法判断页面中的内容是什 么语言,在他们看来都是二进制文件。
<html lang='en'></html> //英文
<html lang='zh'></html> //中文
<html lang='ja'></html> //日文
<html lang='en-us'></html> //美式英文
<html lang='fr'></html> //法文
<html lang='da'></html> //德文
<html lang='it'></html> //意大利文
<html lang='ko'></html> //韩文
<html lang='pl'></html> //波兰文
<html lang='ru'></html> //俄文
<html lang='es'></html> //西班牙文
不写lang属性,对于整个HTML文档的显示是没有任何问题的。
3. <head>元素包含了文档的元(meta)数据。
<meta charset="utf-8">:定义网页编码格式为utf-8
<title>:元素描述了文档的标题。
4. <body>元素包含了可见的页面内容
<h1>元素定义了一个大标题
<p>元素定义了一个段落
我们可以在浏览器中通过按F12进入开发者模式,查看当前页面组成的标签。
-->
meta标签的作用:
标签提供关于HTML文档的元数据(metadata),它不会显示在页面上,但是对于及其是刻度的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务。meta中的数据是供及其解读的,告诉及其该如何解析这个方法,还有一个用途是可以添加服务器发送到浏览器的http头部文件。
九、补充
1、Html和web窗体的区别
html是静态页面,可以用来写不需要和后台交互的、简单的页面;web窗体用来和服务器交互,实现动态,比较复杂的功能。
html的控件是普通控件,运行在客户端,如果想让他在服务器端可执行必须加上runat-server;web控件运行在服务端,书写格式简单,而且不用特意去加runat语句,它的实质仍是html控件,只不过是用别的方法重新封装了。
html页面使静态的,所以html页的加载速度是最快的(其也可以通过Ajax的时候实现动态的功能,并且会比.aspx更加灵活);web窗体上面的数据多是动态冲数据库中读取的,故加载慢,web窗体是一个动态网页的组合,分为.aspx和相应的.cs文件,.aspx文件可以用html标记语言实现网页前台,.cs则是服务器代码,永爱进行交互,web窗体可以直接利用vs各种服务器的空间,实现快速开发。
2、关于HTML5中 br、br/、br /三者的区别?
br
:在HTML写法。
br/
:在XHTML1.1时的写法,同样也是XML的写法。
br /
:是XHTML为兼容HTML的写法,同样也是XML的写法。
HTML5兼容XHTML写法,因此三种都可以使用,是没有区别的。其三者的本质区别的原因就是因为不同HTML版本对空的HTML元素的结束标识符的解决问题。
像<br />
这种写法是比较规范的!