HTML初识
- HTML指的是超文本标记语言(Hyper Text Markup Language)是用来描述网页的一种语言。
- HTML不是一种编程语言，而是一种标记语言(Markup Language)
- 标记语言是一套标记标签(Markuo tag)
即：网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析就可以显示给用户了。
所谓超文本，有两层含义：
1.因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
2.不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件相连（超级链接文本）
HTML总结：
- HTML是超文本标记（标签）语言
- 我们学习HTML主要学习HTML标签
- 我们用HTML标签描述网页元素。比如图片标签、文字标签、链接标签等等
- 标签有自己的语法规范，所有的HTML标签都是用<>表示的
1.HTML标签
1.1HTML骨架标签
HTML的语法骨架格式
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|---|---|
| html标签 | HTML标签 | 页面中最大的标签，我们称为“根标签” |
| head标签 | 文档的头部 | 在head标签中我们必须要设置的标签是title |
| title标签 | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| body标签 | 文档主体 | 元素包含文档的所有内容，页面内容基本都是body里的 |
1.2HTML元素标签分类
1.常规元素
<标签名>内容</标签名>，比如<boay>我是内容</body>
- 该语法中“<标签名>”表示该标签的作用开始，一般称为开始标签。“</标签名>”表示该标签的作用结束，一般被称为结束标签。
- 和开始标签相比，结束标签只是在前边加了一个关闭符"/"
2.空元素
<标签名/>，比如<br/>
- 空元素用单标签表示，简单地说就是里面不需要包含内容，只有一个开始标签不需要关闭
1.3HTML标签关系
主要针对于双标签
1.嵌套关系
<head>
<title></title>
</head>
ps.如果是嵌套关系，子元素前要缩进。
2.并列关系
<head></head>
<body></body>
1.4HTML常用标签
1.标题标签
共有六个等级标题，根据重要性依次递减
<h1>标题文本</h1>
<h2>标题文本</h2>
<h3>标题文本</h3>
<h4>标题文本</h4>
<h5>标题文本</h5>
<h6>标题文本</h6>
2.段落标签
可以把HTML文档分割成若干段落
<p>文本内容</p>
3.水平线标签
使用一条水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。
<hr/>是单标签
4.换行标签
在HTML中，一个段落中的文字会从左至右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文字强制换行显示，就需要使用换行标签。
<br/>是单标签
5.div和span标签
div和span是没有语义的，是我们网页布局主要的两个盒子。
div就是division的缩写，分区的意思。span是跨度，跨距；范围。
语法格式：
<div>这是内容</div>
<span>这是内容</span>
他们两个都是盒子，用来装饰我们网页元素的，只不过他们有区别。
- div标签：用来布局，但是现在一行只能放一个div
- span标签：用来布局，一行上可以放好多span
暂时只记住这些，后续内容在显示模式时补充。
以上为排版标签，接下来为文本格式化标签
6.文本格式化标签
在网页中，有时需要为文字设置粗体。斜体或者下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 显示效果 |
|---|---|
| b标签 strong标签 | 文字以粗体方式显示(XHTML推荐使用strong标签) |
| i标签和em标签 | 文字以斜体方式显示(XHTML推荐使用em) |
| s标签和del标签 | 文字以加删除线方式显示(XHTML推荐使用del) |
| u标签和ins标签 | 文字以加下划线方式显示(XHTML不赞成使用u) |
区别：
b只是加粗，strong除了加粗还有强调的意思，语义更强烈。
其余同理。
1.5标签属性
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1="属性值1" 属性2=“属性值2” ...> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">内容</手机>
1.6图像标签img
语法如下：
<img src="图像URL"/>
该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素(XHTML不支持页面百分比) | 设置图像的宽度 |
| height | 像素(XHTML不支持页面百分比) | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
注意：
1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后边。
2.属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3.采取键值对的格式即key = "Value"格式。
1.7链接标签
在HTML中创建超链接非常简单，只需要用标签把文字包括起来就好。
语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式 |
注意：
1.外部链接需要添加http://.......
2.内部链接直接连接内部页面名称即可
比如 <a href="index.html">首页</a>
3.如果当时没有确定链接目标时，通常将连接标签的href属性值定义为“#”(即href='#')，表示该链接暂时为一个空链接
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
1.8注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
简单解释：
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时可以看到。
语法格式：
<!--注释语句--> 快捷键是：ctrl + / 或者:ctrl + shift + /
2.HTML路径
2.1相对路径
以引用文件之间网页所在位置为参考基础而建立出的文件路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
2.2绝对路径
绝对路径是以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。一般不提倡使用绝对路径。
3.补充
3.1锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点分为两步：
1.使用相应的ID名标注跳转目标的位置。(找目标)
<h3 id="two">第二季</h3>
2.使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
3.2 base标签
语法：
<base target="_blank"/>
1.base可以设置整体链接的打开状态。
2.base写到head标签之间
3.把所有的链接都默认添加target="_blank"
3.3预格式化文本pre标签
pre标签可定义预格式化的文本
被包围在pre标签元素中的文本通常会保留空格和换行符。而文本也会显现为等宽字体。
<pre>
此例演示如何使用pre标签
对空行和空格
进行控制
</pre>
所谓的预格式化标签就是按照我们预先写好的文字格式来显示页面，保留空格和换行等。 有了这个标签，里边的文字会按照我们书写的模式显示，不需要段落和换行标签了。但是比较少用，因为不好整体控制。
3.4特殊字符
一些特殊的字符在HTML中很难或者不方便直接使用，我们此时可以使用下面的代替代码。
总结：
1.是以运算符&开头以分号;结尾
2.他们不是标签，而是符号
3.HTML中不能使用小于号“<”和大于号“>”特殊字符，浏览器会将它们作为标签戒子，若要正确显示，在HTML源代码中石油字符实体。
