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 国家标准 国标的意思）
https://baike.baidu.com/item/...
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.图像标签
单词缩写：image 图像
要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签<img/>一级相关的属性
语法如下：
img src="图像URL" />（单标签）该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必须属性
先给大家介绍一下都有那些相关属性：
<img />标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示内容
width 像素（XHTML不支持%页面百分比） 设置图像宽度
height 像素（XHTML不支持%页面百分比） 设置图像高度
border 数字 设置图像边框的宽度
注：border是css中的所以我们这里简单讲下讲解各个属性
注意：
1.标签可以拥有多个属性，必须写在开始标签中，位于标签后面
2.属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
3.采取 键值对 的格式 key="value" 的格式 （就是属性等于值如：width="100"）
此处有练习题
1.请说出 图像标签那个属性时必须要写的？ （src 只要有img必定有src）
2.请说出 图像标签中alt和title属性的区别？ （alt替换文本 title是标悬停时显示内容）
3.链接标签
单词缩写： anchor的缩写 基本解释 锚，铁锚
在HTML中创建超链接非常简单，只需要标签把文字包括起来就好
语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 作用
href 用于指定链接目标的url地址，（必须属性，不可省略）当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其取值有_self和_blank俩种，其中_self为默认值，_blank为在新窗口中打开方式注意：
1.外部链接，需要添加 http://www.51vv.com
2.内部链接，直接链接内部页面名称即可比如首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为"#"(即href="#"),表示该链接暂时为一个空连接
4.不仅可以创建文本超链接，在网页各种网页元素，如图像，表格，音频，视频等都可以添加超链接
讲一下target：
用于指定链接页面的打开方式，其取值有_self和_blank俩种，其中_self为默认值（当前窗口），_blank为在新窗口中打开方式
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。