本文详细介绍了HTML的基础知识，包括文档类型<!DOCTYPE>的使用，页面语言lang的设定，字符集UTF-8的解释，以及常见的HTML标签如标题、段落、图像和链接的使用方法。同时讲解了标签属性、注释标签、路径概念以及特殊字符的表示。此外，还强调了在网页布局中排版标签如h1-h6、p、br、div和span的重要角色，以及如何通过img和a标签添加和链接图像及创建超链接。
1.文档类型<!DOCTYPE >
「文档类型」用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
2.页面语言lang
lang指定该html标签内容所用的语言
<html lang="en">
en 定义语言为英语 zh-CN定义语言为中文
3.字符集
「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
-
UTF-8（万国码）是目前最常用的字符集编码方式（GB2312（简体中文）、BIG5(繁体中文)、GBK（简体中文与繁体中文））
-
让 html 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。
-
在<head>标签内，可以通过<meta>标签的charset 属性来规定HTML文档应该使用哪种字符编码
4.HTML常用标签
「1. 排版标签」主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。
-
标题标签h(h1~h6)(<h1> 内容 </h1>)
-
特点：
-
加了标题的文字会变的加粗，字号也会因此变大
-
每个标题独占一行，后面不能加其他的东东，不显示
-
h1到h6标题从大到小递减，h4标题标签内容比原内容大，h5、h6比原内容小
-
有段落与段落间距的特点
-
段落标签p,可以把 HTML 文档分割为若干段落(<p> 内容 </p>,前面不会自动空两格)
-
特点：
-
文本在一个段落中根据浏览器窗口的大小自动换行
-
段落和段落之间保有空隙
-
水平线标签hr（<hr> 或 <hr/>）
-
特点：
-
单标签
-
<hr>前为内容
-
先强制换行再加水平线，这个线独占一行位置
-
换行标签br(<br />)
-
特点：
-
单标签
-
只是简单强制的开始新的一行
-
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。（<div> 内容 </div>）
-
特点：
-
都是双标签
-
div（division英文：分割，分区），一行只能放一个<div>，大盒子，如果后面再放内容自动换行输出内容
-
span横着盒子（span英文：跨距，跨度），多个span盒子在同一行显示，小盒子
「2. 排版标签/文本格式化标签」
-
b和strong 文字以粗体显示（<strong> 内容 </strong>）
-
i和em 文字以斜体显示(<em> 内容 </em>)
-
s和del 文字以加删除线显示(<del> 内容 </del>)
-
u和ins 文字以加下划线显示(<ins> 内容 </ins>)
另一个没写的用法和括号一样，但是推荐使用括号里面的，语义更加强烈
「3. 标签属性(行内式)」
使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
「4. 图像标签img」
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名(单标签)，也就是图片名
属性：就是属于这个图像标签的特性
图片名不对的时候，alt的作用(alt = "我是pink老师")
注意：
-
标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
-
采取 键值对 的格式 key="value" 的格式
-
一般宽度和高度修改一个，另一个会等比例缩放，如果自己改两个，可能会出现压扁的情况，学过PS能明显感知。
-
在后面写东东会在图片底层同行显示
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" />
「5. 链接标签(重点)」
在后面加东东会在同一行显示
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target="_self" 默认窗口弹出方式
target="_blank" 新窗口弹出
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
注意：
-
外部链接 需要添加 http:// www.baidu.com
-
内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页
-
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
-
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位：通过创建锚点链接，用户能够快速定位到目标内容。
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
<a href="#two">
「6. 注释标签」
<!-- 注释语句 -->
快捷键是： ctrl + /
或者 ctrl +shift + /
团队约定：注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
「7. 路径」
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需的相关素材，比如html文件，图片等等。（就是最外面的那个文件夹）
根目录：打开目录文件夹的第一层就是根目录
以上两个概念是为了vscode快速找到文件，以目录文件夹为主，然后点选择文件夹，新建文件夹会自动存放到根目录里面，以此体现出方便
相对路径：以引用文件所在的位置为参考基础（所用文件为参考点），而建立出的目录路径
这里就是图片相对于HTML页面的位置
以所用的html文件为参考点，下一级在同根目录文件内，上一级在同根目录文件外
「8. 特殊字符」
扫一扫
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
