1 什么是HTML
HTML其实是Hypertext Markup Language的缩写，即超文本标记语言。
HTML的后缀名：.html
html文件
那么什么是超文本标记语言？
2 HTML的作用
给纯文本添加语义。其实就是告诉浏览器，我要表示的是什么。
第一步：我们可以新建一个文本，复制一段名人的介绍
新建txt文本
第二步：修该文本的后缀名，以浏览器方式打开
修改它的后缀名打开后，发现没有任何版式可言
第三步：再使用文本打开，在开头与结尾添加如下标签
<h1>内容</h1>，<p>内容</p>
使用HTML的语法修改一下
第四步：保存修改后的文本，使用浏览器打开，发现样式好看了很多。
在浏览器中发现相当漂亮
结论：<p>内容</p>用来描述其他文本语义的文本，我们称为标签。这些用来描述文本语义的标签是不会在浏览器中显示的。我们称这些文本为超文本，这些文本又叫做标签，所以就称HTML为超文本标记语言。
注意点：
刚才使用<h1>内容</h1>只是用来给文本添加语义，告诉浏览器这是标题文本，而不是修改了文本的样式，加粗等。所以学习的童鞋要注意。。。
3 HTML发展史
在1993年6月作为[互联网]工程工作小组IETF工作草案发布并非标准
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。
HTML发展史
4 第一个HTML程序
第一个HTML5程序
基本结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
切记要修改它的后缀名.html
5 HTML标签详解
<html> // HTML开始标签
<head> // 头部开始标签
<title></title>
</head> // 头部结束标签
<body> // 内容开始标签
</body> // 内容结束标签
</html> // 结束标签
- html标签
- 作用：
告诉浏览器这是一个网页，即是一个HTML文档 - head标签
- 作用：
用于给网站添加一些配置信息，这部分内容都不会给用户看 - 例如：
- 百度网址的标题/小Logo等
- 还有携带一些文件（css/js）
-
警告，添加一些浏览器安全组件等
没有回车之前
回车之后
最终显示
- title标签
- 作用：
- 专门用于网站的标题
- 例如：
我们保存网站的时候，会出现一个标题，这个标题就是title的内容
- 作用：
效果
具体写法
- body标签
- 作用：
就是展示给用户看的内容（文字/图片/音/视频），在学习这个标签后，要将内容写入这个body中，而且在<html>标签中，只能有一个body标签
6 HTML字符集问题
其实很多情况下，我们会遇到乱码问题。这个就是字符集问题，即编码问题
image.png
这是什么意思？表示编码格式
看完应该明白了
- meta标签的作用就是制定网页的字符集
- 要解决乱码问题，就需要在head标签中添加
<meta charset="GBK"/> - 常见的字符集GBK/UTF-8
- GBK(GB2312)里面的汉子比较少，还存储了一部分常用外文
- UTF-8里面存储的世界上所有的文字，所以以后直接使用它就可以了
例如百度网址的head
关于UTF-8的一些问题
-
如果使用UTF-8编码格式，那么必须在保存的时候选择UTF-8格式，否则即便制定了字体，也无法正常显示。
image.png
两者一样即可
7 标签认识
- 单标签
- 有开始标签没有结束标签，也就是由一个<>组成的
<meta charset="utf-8"/>
- 双标签
- 有开始和结束标签，也就是由一个<>和</>组成
<html>
</html>
- 标签关系
- 并列关系
<head>
</head>
<body>
</body>
- 嵌套关系
<head>
<title>
</title>
</head>
8 DOCTYPE文档声明
- 因为HTML有很多个版本，一般在HTML文件的第一行告诉浏览器我们用的是什么版本
- 不同的HTML版本都有不同的DTD文档声明
<!DOCTYPE html> // 这是HTML5版本的文档声明，可以使用小写，向下兼容，所以以后就写着一句就可以了
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
关于DOCTYPE声明
参考资料：W3C
9 CSS了解
如果在一些版本中不支持下面的写法，就需要使用CSS写法
-
设置字体为7号，颜色为红色
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>雷潮博客-886</title>
</head>
<body>
<font size=7 color= red>雷潮</font>
</body>
</html>
- CSS写法,修改字体样式
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>雷潮博客-886</title>
<style type="text/css">
p{
font-size: 100px;
color: red;
font-family: "黑体";
}
</style>
</head>
<body>
<font size=7 color= red face="宋体">雷潮</font>
<p>这是雷潮886</p>
</body>
</html>
10 .htm和.html的区别
其实就是DOS系统只支持长度为3的后缀名，不支持4位后缀名。而Windows下.html是长文件命名
11 XHTML和HTML与HTML5的区别
- XHTML
标签必须小写，必须严格闭合，属性必须用引号加注等 - HTML
语法宽松容 - HTML5
HTML的下一个版本，非常宽松容错率强，同时增加了很多特性
网友评论