一、基本概念
1.1 什么是HTML
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言(markup language).
标记语言是一套标记标签(markup tag)。
所谓超文本，有2层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。
⒉.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。
1.2 Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
W3C(万维网联盟)是国际最著名的标准化组织.
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。 |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript。 |
1.3 VSCode工具生成骨架标签新增代码
1.!DOCTYPE标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是:当前页面采取的是HTML5版本来显示网页.
<!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前。<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
2.lang语言
用来定义当前文档显示的语言。
<html lang="en">
- en定义语言为英语
- zh-CN定义语言为中文
3.charset字符集
字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UFT-8">
charset常用的值有：GB2312、BlG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
二、HTML常用标签
2.1 标题标签、段落标签和换行标签
<h1>~<h6>由大到小以此减，文字加粗一行显。
<p>单词paragraph的缩写，意为段落。标签语义∶可以把HTML文档分割为若干段落。
<br />是个单标签。表示强制换行。只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
2.2 自闭合标签
| 标签名 | 说明 |
|---|---|
<br /> | 换行标签 |
<hr /> | 水平线标签 |
<meta /> | 定义网页的信息（供搜索引擎查看） |
<link /> | 引入“外部CSS文件” |
<img /> | 图片标签 |
<input /> | 表单标签 |
2.3 文本格式化标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
2.4 div和span标签
<div>和<span>标签是没有语义的，它们就是一个盒子，用来装内容的。div是division的缩写，表示分割、分区。span意为跨度、跨距。
区别：
- div标签是块级元素，拥有块级元素的特点。每对div标签里的内容都可以占据一行，不会其他标签在一行显示；div标签总是从新行开始显示。
- span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示。
- div标签可以通过css样式来设置自身的宽度（当没有使用css自定义宽度时，div标签的宽度为其的容器的100%）、高度，且还可以设置标签之间的距离（外边距和内边距）。
- span标签的宽度、高度都无法通过css样式设置，它的宽高受其本身内容（文字、图片）控制，随着内容的宽高改变而改变；span标签无法控制外边距和内边距，虽然可以设置左右的外边距和内边距，但上下的外边距和内边距无法设置。
<div>
<span>span标签</span><span>span标签</span><a href="#">a标签</a><a href="#">a标签</a>
<p>p标签</p>
<div>div标签</div>
</div>
2.5 图像标签和路径
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性。用于指定图像文件的路径和文件名 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<img src="img.jpg" alt="图片显示失败" title="我爱学习" width="500" border="15"/>
img标签属性注意点︰
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即key= "value"的格式，属性=“属性值”。
- 图像底部存在间隙
路径之相对路径
相对路径:以引用文件所在位置为参考基础，而建立出的目录路径。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级如<img src="baidu.gif" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级如<img src="images/baidu.gif" /> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级如<img src="../baidu.gif" /> |
路径之绝对路径
绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.baidu.com”。
2.6 超链接标签
1.链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<a>单词anchor的缩写，意为∶锚。
两个属性的作用如下:
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self(默认值)为当前窗口打开页面，_blank为在新窗口中打开方式, |
⒉.链接分类:
1．外部链接:例如<a href="http:// www.baidu.com ">百度</a>
2．内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可，例如<a href=" index.html">首页</a>
3．空链接:如果当时没有确定链接目标时，<a href="#">首页</a>
4．下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
5．网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接，例如 <a href="http://www.baidu.com"><img src="img.jpg"/></a>
6.锚点链接:点我们点击链接,可以快速定位到页面中的基个位置.
在链接文本的href属性中(通常在目录)，设置属性值为#名字的形式，如 <a href="#two">第2集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如:<h3 id="two">第2集介绍</h3>
三、注释标签和特殊字符
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。<!--注释语句-->快捷键 Ctrl + /
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2(上标2) | ² |
| ³ | 立方3(上标3） | ³ |
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
