HTML基础模板+常用基础标签
张东红 发布于 3 月 9 日
HTML初识
·HTML指的是超文本标记语言是用来描述网页的一种语言 （Hyper Text Markup Language）
·HTML不是一种编程语言，而是一种标记语言
·标记语言是一套标记标签（我们学HTML主要学的就是HTML标签）
·HTML作用就是网页是由网页元素组成的（网页元素就是一个面中的图片文字链接等等），这些元素时利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了）
HTML基础模板
1.双标签的相互关系分为俩种：（1）一种是嵌套关系（也称为父子关系） （head为父title为子）
<head>
<title></title>
</head>
（2）另一种是并列关系(它俩是上下关系也称为兄弟关系)
<head></head>
<body></body>
温馨提示：如果俩个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的大小，如果是并列关系，最好上下对齐
<html>(爷爷)
<head>（爸爸|大儿子）
<title></title>（儿子|孙子）
<head>
<body>（爸爸|二儿子）
</body>
</html>课堂一练:~~~~
请问下面哪些标签关系是错误的
1.<head></head><body></body>
2.<div></div>
3.<head><title></head></title>(分不清了 穿插关系)
4.<body><div></div></body>
HTML基本骨架
<!DOCTYPE html>
<html lange="en">
<head>
<meat charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> (位置：必须写在第一行代码其它地方不能写 doc是document type 文档类型 列如你用的是什么手机呀 我用的是苹果11 苹果11就是一个型号 DOCTYP就是一个型号 !DOCTYPE html5的版本号 为什么没有5呢 !DOCTYPE html 就代是版本5）
<html lange="en"> （lange语言 en english英文 指定html语言种类 最常见的俩个就是en英文 zh-CN 中文 考虑到浏览器和操作系统的兼容性，目前仍然使用zh-CN 中文 一般就是中文或英文为主）
<head>
<meat charset="utf-8">
（例如我们写的页面要给你外国人看 外国人看不懂中文怎么办呢 这就涉及到了存储问题 就用到我们的meat（曼特） charset 查三特（全拼character set） cha是字符 rest是集合 叫字符集 什么是字符集 就是多个字符的集合 计算机要准确的处理各种字符集文字，也能按照中文来进行识别，以便计算机能够识别和存储各种文字）
<title></title>
</head>
<body>
</body>
</html>
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和GB2312
1.GB2312简单中文，包括6763个汉字 （g guo b biao 国家标准 国标的意思）
2.BIG5 繁体中文 港澳台等用
3.GBK包含全部中文字符 是GB2312的扩展 加入对繁体字的支持 兼容GB2312 （如果是港澳同胞的朋友打开我们的页面一看到GBK 他们会按照GBK的编码来显示我们的文字 然后既可以正常显示了 还有一种问题就是奥巴马看到我们的网站了 奥巴马电脑上是没有GBK 那我们就会想到有没有一种方法是能够存储各种语言的那就是我们的utf-8了
4.UTF-8则基本包含全世界所有国家需要用到的语言（世界各地都能看懂我们的网站了）温馨提示 <meat charset="utf-8">是必须要加的 如果不加别的国家解析出来的文字都是乱码的
HTML常用标签
·首先HTML和CSS是俩种完全不同的语言，我们学的是结构，就是写HTML标签（HTML标签有很多，这里给大家讲的就是常用的有不足的地方大家可以补充）
1.排版标签
排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签
排版标签分为
（1）标题标签h（熟记）
（千万不要和这俩个搞混）单词缩写：head头部.标题 title 文档标题 （加图片说明那里是头部那里是h标题）
为了使用网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题
基本语法结构如下：
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
示意效果如下：（加图）小结：
·加了标题的文字会变得加粗，字号也会一次变大
·一行是只能放一个标题
（2）段落标签p（熟记）
缩写单词：paragraph段落 （无须记这个单词只是给大家了解一下）
作用语义：
1.可以把HTML文档分割为若干个段落
2.在网页中要把文字有条理的显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，段落的标签就是
<p>文本内容</p>p是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行
（3）水平线标签hr（认识）
单词缩写：horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明，这些水平线可以通过插入图片实现，也可以简单地通过标签完成，<hr/>就是创建横跨网页水平线的标签，基本语法格式如下：
<hr />是单标签
+示意图（4）换行标签br（熟记）
单词缩写：break 打断.换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签
<br />
温馨提示：这时如果在word中直接敲回车键换行就不起作用咯
+示意图（5）div和span标签（重点）
1.div span 是没有语义的 是我们网页布局主要的2个盒子
2.div 就是 divsion的缩写 分割，分区的意思 现在我们每个页面必不可少的就是div
3.span 跨度，跨距；范围
<div>这是头部</div> <span>这是内容</span>4.他们俩个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我就给大家讲使用方法和特点
（上下在写div）
(1).div标签 用来布局的，但是现在一行只能放一个div（如果放了多个影响视觉不美观但是浏览器还是会给分开）
(2).span标签 用来布局的，一行上可以放好多个span
排版标签总结:
标签名 定义 说明
<hx></hx> 标题标签 作为标题使用，并且依据重要性递减
<p></p> 段落标签 可以把HTML，文档分割为若干段落
<hr/> 水平线标签 没啥可说的，就是一条线
<br/> 换行标签 强制换行
<div></div> div标签 用来布局的，但是现在一行只能当一个div
<span></span> span标签 用来布局的，一行上可以放多个标签
2.图像标签
3.链接标签
张东红
张东红
宣传栏
目录
HTML初识
·HTML指的是超文本标记语言是用来描述网页的一种语言 （Hyper Text Markup Language）
·HTML不是一种编程语言，而是一种标记语言
·标记语言是一套标记标签（我们学HTML主要学的就是HTML标签）
·HTML作用就是网页是由网页元素组成的（网页元素就是一个面中的图片文字链接等等），这些元素时利用HTML标签描述出来，然后通过浏览器解析，就可以显示给用户了）
HTML基础模板
1.双标签的相互关系分为俩种：（1）一种是嵌套关系（也称为父子关系） （head为父title为子）
<head>
<title></title>
</head>
（2）另一种是并列关系(它俩是上下关系也称为兄弟关系)
<head></head>
<body></body>
温馨提示：如果俩个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的大小，如果是并列关系，最好上下对齐
<html>(爷爷)
<head>（爸爸|大儿子）
<title></title>（儿子|孙子）
<head>
<body>（爸爸|二儿子）
</body>
</html>课堂一练:~~~~
请问下面哪些标签关系是错误的
1.<head></head><body></body>
2.<div></div>
3.<head><title></head></title>(分不清了 穿插关系)
4.<body><div></div></body>
HTML基本骨架
<!DOCTYPE html>
<html lange="en">
<head>
<meat charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> (位置：必须写在第一行代码其它地方不能写 doc是document type 文档类型 列如你用的是什么手机呀 我用的是苹果11 苹果11就是一个型号 DOCTYP就是一个型号 !DOCTYPE html5的版本号 为什么没有5呢 !DOCTYPE html 就代是版本5）
<html lange="en"> （lange语言 en english英文 指定html语言种类 最常见的俩个就是en英文 zh-CN 中文 考虑到浏览器和操作系统的兼容性，目前仍然使用zh-CN 中文 一般就是中文或英文为主）
<head>
<meat charset="utf-8">
（例如我们写的页面要给你外国人看 外国人看不懂中文怎么办呢 这就涉及到了存储问题 就用到我们的meat（曼特） charset 查三特（全拼character set） cha是字符 rest是集合 叫字符集 什么是字符集 就是多个字符的集合 计算机要准确的处理各种字符集文字，也能按照中文来进行识别，以便计算机能够识别和存储各种文字）
<title></title>
</head>
<body>
</body>
</html>
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和GB2312
1.GB2312简单中文，包括6763个汉字 （g guo b biao 国家标准 国标的意思）
2.BIG5 繁体中文 港澳台等用
3.GBK包含全部中文字符 是GB2312的扩展 加入对繁体字的支持 兼容GB2312 （如果是港澳同胞的朋友打开我们的页面一看到GBK 他们会按照GBK的编码来显示我们的文字 然后既可以正常显示了 还有一种问题就是奥巴马看到我们的网站了 奥巴马电脑上是没有GBK 那我们就会想到有没有一种方法是能够存储各种语言的那就是我们的utf-8了
4.UTF-8则基本包含全世界所有国家需要用到的语言（世界各地都能看懂我们的网站了）温馨提示 <meat charset="utf-8">是必须要加的 如果不加别的国家解析出来的文字都是乱码的
HTML常用标签
·首先HTML和CSS是俩种完全不同的语言，我们学的是结构，就是写HTML标签（HTML标签有很多，这里给大家讲的就是常用的有不足的地方大家可以补充）
1.排版标签
排版标签主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签
排版标签分为
（1）标题标签h（熟记）
（千万不要和这俩个搞混）单词缩写：head头部.标题 title 文档标题 （加图片说明那里是头部那里是h标题）
为了使用网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题
基本语法结构如下：
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
示意效果如下：（加图）小结：
·加了标题的文字会变得加粗，字号也会一次变大
·一行是只能放一个标题
（2）段落标签p（熟记）
缩写单词：paragraph段落 （无须记这个单词只是给大家了解一下）
作用语义：
1.可以把HTML文档分割为若干个段落
2.在网页中要把文字有条理的显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，段落的标签就是
<p>文本内容</p>p是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行
（3）水平线标签hr（认识）
单词缩写：horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明，这些水平线可以通过插入图片实现，也可以简单地通过标签完成，<hr/>就是创建横跨网页水平线的标签，基本语法格式如下：
<hr />是单标签
+示意图（4）换行标签br（熟记）
单词缩写：break 打断.换行
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就需要使用换行标签
<br />
温馨提示：这时如果在word中直接敲回车键换行就不起作用咯
+示意图（5）div和span标签（重点）
1.div span 是没有语义的 是我们网页布局主要的2个盒子
2.div 就是 divsion的缩写 分割，分区的意思 现在我们每个页面必不可少的就是div
3.span 跨度，跨距；范围
<div>这是头部</div> <span>这是内容</span>4.他们俩个都是盒子，用来装我们网页元素的，只不过他们有区别，现在我就给大家讲使用方法和特点
（上下在写div）
(1).div标签 用来布局的，但是现在一行只能放一个div（如果放了多个影响视觉不美观但是浏览器还是会给分开）
(2).span标签 用来布局的，一行上可以放好多个span
排版标签总结:
标签名 定义 说明
<hx></hx> 标题标签 作为标题使用，并且依据重要性递减
<p></p> 段落标签 可以把HTML，文档分割为若干段落
<hr/> 水平线标签 没啥可说的，就是一条线
<br/> 换行标签 强制换行
<div></div> div标签 用来布局的，但是现在一行只能当一个div
<span></span> span标签 用来布局的，一行上可以放多个标签
2.图像标签
3.链接标签
