文章目录
HTML(上)
1、网页
什么是网站？
网页是网站中的“一页”，通常是HTML格式的文件，主要通过浏览器来阅读。
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读
什么是HTML？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
2、基本结构标签（骨架标签）
< html ></ html >:页面中最大的标签，“根标签”。
< head ></ head >:文档的头部，在head标签中必须要设置的标签是title。
< title ></ title >:文档的标题，让页面有一个属于自己的网页标题。
< body ></ body >:文档的主体，元素包含文档的所有内容，页面内容基本都是放在body标签里。
HTML文档的后缀必须是.html或.htm
3、VScode骨架结构解读
输入！后按下Tab键自动生成骨架结构（注意在英文模式下输入！）
- < !DOCTYPE >:文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。< !DOCTYPE html >代表采用HTML5版本。
- < html lang=“en” >：lang代表language，用来定义当前文档显示的语言。en为英文（也可以显示中文），zh-CN为中文。
- < meta charset=“UTF-8” >：规定HTML文档应该使用哪种字符编码，作用是防止乱码。charset代表字符集，UTF-8为万国码,基本包含了全世界所有国家需要用到的字符。
4、HTML常用标签
4.1标签语义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰
4.2标题标签< h1 >—< h6 >
1-6代表六个等级的网页标题，重要性依次递减。
特点:
- 加了标题的文字会加粗，字号也会变大，大小依次递减
- 一个标题 独占一行
4.3段落和换行标签
< p ></ p >标签用于定义段落，它可以将整个网页分为若干个段落。
落和换行标签***
< p ></ p >标签用于定义段落，它可以将整个网页分为若干个段落。
< br />标签用于强制某段文本换行。这是单标签。
4.4文本格式化标签
为文字设置粗体：< strong ></ strong >或< b ></ b >，推荐使用< strong >
为文字设置斜体：< em ></ em >或< i ></ i >，推荐使用< em >
为文字设置下划线：< del ></ del >或< ins ></ ins >或< s ></ s >或< u ></ u >
4.5< div >和< span >标签
它们相当于盒子，用来装内容、布局网页，没有语义。
< div >：分割，独占一行
< span >：跨度，跨行显示
4.6图像标签和路径
4.6.1图像标签
< img >标签用于定义HTML页面中的图像。
< img src=“图像URL” /> : src是必须属性，用于指定图像的文件名和路径。
< img src=“图像URL” alt=" "/> : 当图片无法显示时，用alt属性中的文字替代。
<body>
<img src="baidu.gif" alt="熊猫简笔画"/> <!--当图片显示不了时，会出现文字：熊猫简笔画-->
</body>
< img src=“图像URL” title=" "/> : 鼠标放在图片上提示title属性中的文字。
<body>
<img src="baidu.gif" title="兔子简笔画"/> <!--当鼠标放在图片上时，会出现文字：兔子简笔画-->
</body>
如果想要设置图像高度和宽度，需要width（宽度）属性和height（高度）属性。
< img src=“图像URL” width=“ ”/> ： 可以更改图像的宽度，width里面填数值。
< img src=“图像URL” height=“ ”/>： 可以更改图像的高度，height里面填数值。
一般情况下，修改其中一个就可以了。
如果想要给图像设定边框，需要border属性。
< img src=“图像URL” border=“ ”/>
注意 :
- 图像标签可以拥有多个属性，必须写在标签名后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采用键值对的格式。即 key=“value” 形式，属性=“‘属性值”。
4.6.2路径
路径分为相对路径和绝对路径。
（1）目录文件夹和根目录：需要一个文件夹来管理文件。
根目录为打开目录文件夹的第一层。
（2）VScode打开目录文件夹。后期更方便管理文件。
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
- 同一级路径：图像文件位于HTML文件同一级。eg:< img src=“baidu.gif” />
- 下一级路径：图像文件位于HTML文件下一级。eg:< img src=“image/baidu.gif” />
- 上一级路径：图像文件位于HTML文件下一级。eg:< img src=“**…/**baidu.gif” />
绝对路径（很少使用）：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。eg:“D：\web\img\logo.gif”
4.7超链接标签
< a >标签用于定义超链接，作用是从一个页面链接到另一个页面。
4.7.1链接的语法格式
格式：
< a href=“跳转目标” target=“目标窗口的弹出方式”> 文本或图像 </ a >
href是必须属性，用于指定链接目标的URL地址。
target用于指定链接页面的打开方式。分为两种方式：
- self：为默认值，跳转目标在当前窗口打开。
- blank：为新窗口打开方式，跳转目标在新窗口打开。
4.7.2链接分类
-
外部链接：其他网站的链接。
<body> <a href="http://www.qq.com">腾讯</a> <!--运行调试后的效果是“腾讯”字体变蓝，有下划线，点一下会跳转到腾讯网页面--> </body> -
内部链接：网站内部页面之间的相互链接，直接写链接内部页面名称即可。
<body> <a href="index.html">首页</a> </body>
3.空链接：如果当时没有确定链接目标，使用< a href=“#” >首页</ a >
4.下载链接:如果href里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。
步骤：（1）在链接文本标题的href属性中，设置属性值为**#名字**的形式，如：< a href=“#名字”> 第二集 </ a>
（2）找到目标位置标签，里面添加一个id=“刚才的名字”，如：< h3 id=“名字” > 第二集介绍 </ h3 >
5.HTML中的注释和特殊字符
5.1注释
为了便于开发人员理解和阅读，更好地解释代码功能，又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“< !–”开头，以“–>”结束
快捷键：CTRL+/
5.2特殊字符
经常使用：
- 空格符： ；（一个完整字符），一个字符是一个空格，需要几个空格就使用几个完整字符。
- 小于号：<；
- 大于号：>；
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
