HTML5学习（三）：认识HTML

2017-05-21 本文已影响0人元宇宙协会

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写法,修改字体样式