个人学习
前言
HTML的基础学习，为前端开发打下坚实基础，代码部分均在VScode中编译，本博客仅为个人学习，其中多有不足和缺陷还请各位指正。
一、HTML的基本框架
在VScode中输入英文的感叹号“!”再选中弹出的“!”快速创建HTML的基本框架：
选中后自动生成的html基本框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>：文档类型声明，告诉浏览器用哪种HTML版本来显示网页，document type 的缩写形式，为文档类型，必位于首句。
<html lang="en"> </html>：内容框架，其中包含<head></head>和<body></body>两个部分。
<html lang="zh-CN">：lang语言集合，定义当前文档显示的语言，主要用于浏览器打开时的翻译提示信息（像我们打开网页时经常弹出的“是否翻译成中文”），双引号中即为使用的语言，“en”为English英文，“zh-CN”为中文，代码中各类型文字混用。
<head></head>：类似于人体的头部，<meta charset="UTF-8">字符集的类型，utf-8万国码，未定义字符集会出现乱码现象，其中的<title>网页名</title>指定了网页名称。
<body></body>：类似于人的身体躯干，代码的主要部分在其中编写。
<p></p>:段落定义，里面为一段内容
二、标签的应用
VScode中注释：
<!--用 ctrl+/键 添加注释，不在运行结果中显示！ -->
标签：
HTML标签是由尖括号包围的关键词，<>；
HTML标签通常成对出现，例如<html>和</html>，我们称之为双标签，是开始/结束标签；某些特殊标签必须是单个标签（极少情况），<br/>：为单标签。
1.标题标签
一共有6种标题标签，大小不同；
代码及运行结果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<br/>另起一行
<br/>另起一行
</body>
</html>运行后各级标签标题：
<br/>：标签后的文字自行另起一行。
文字的加粗、倾斜、加删除线、加下划线：
| 文字加粗 | <strong>加粗</strong>、<b>加粗</b> |
|---|---|
| 文字倾斜 | <em>倾斜</em>、<i>倾斜</i> |
| 文字加删除线 | <del>删除线</del>、<s>删除线</s> |
| 文字加下划线 | <ins>下划线</ins>、<u>下划线</u> |
<strong>加粗strong/b</strong>
<ins>下划线ins/u</ins>
<del>删除线del/s</del>
<em>倾斜em/i</em>
2.图像标签
图片的使用：
同一级相对路径：
<img src="img.jpg"/>直接写图片名
相对于下一级：
<img src="images/img.jpg"/>先写图片文件夹的名字，再写上下一级的图片名
相对于上一级：
<img src="../img.jpg"/>在图片名称前加上../，表示图片在html文件的上一级中
绝对路径（从盘符开始）：
<img src ="\目录中下的位置\ img.jpg"/>在电脑中的位置可直接复制粘贴再加上图片名，注意该路径中为右下斜杠符号“\”
网页中的绝对地址：
<img src ="http:....."/>复制某图片网址，右击图片复制图片链接即可
图片的属性：
| title | 提示标签，鼠标放在图片上，图片上会提示该文字 |
|---|---|
| alt | 替换文本，当img出错找不到该图片时显示该内容 |
| width | 利用width给图像设定宽度 |
| height | 利用height给图像设定高度 |
| border | 利用border给图像设定边框 |
代码（示例）：
<img src="img.jpg" alt="对不起，出错了"/> //路径下没有该图片，替换显示文本内容
<img src="桌面.jpg" title="某某某公司" alt="出错了！"/>
<img src="桌面.jpg" width="500"/>
<img src="桌面.jpg" height="500"/>
<img src="桌面.jpg" width="500" height="500"/>
<img src="桌面.jpg" border="5"/>
注意：
1. 同时设定高度和宽度（可能会出现图像失帧问题，即图片会出现压缩现象）；
2. 图像标签可以拥有多个属性，需要写在标签名后面，属性无先后顺序，属性间用空格分开。
3.超链接标签
各种网页元素都可以添加超链接（文本、图像、表格、音频、视频等都可以添加超链接）
超链接标签的语法格式：
<a herf ="跳转目标" target ="目标窗口的弹出方式" >文本或图像内容</a>
herf后接上网址，target后接窗口打开方式，默认值是_self：当前窗口打开，即覆盖当前窗口；_blank：新窗口打开，在当前页面的基础上新展开一个页面。
3.1外部链接
引用外部某些网址作为链接，点击文本或图像到达该网址：
用腾讯网页为例：
<a href ="http://www.qq.com" target="_blank">腾讯</a><a href ="http://www.qq.com" target="_blank">腾讯</a>，外部链接需要用http://加上网址，运行后点击腾讯则跳转至腾讯官网；
3.2内部链接
网站内部页面之间的互相连接：
<a href="about.html" target="_blank">关于我们</a><a href="about.html" target="_blank">关于我们</a>，html文件为网页文件，使用后可以实现网页之间的跳转功能。
3.3空链接
<a href="#"> 公司主页</a>跳转目的网页未确定时可用空链接占位，后续有需要再进行更改。
3.4下载链接
<a href="xxxx.zip">下载文件</a>下载链接地址链接的是文件.exe zip等压缩包的形式
3.5锚点链接
可以快速定位到页面的某个位置：
<a href="#gongneng">主要功能</a>
<br />
<h4 id="gongneng">主要功能</h4>需要点击的标签利用href=#+名称，跳转的地方用id=名称，id后接的是目标位置。
总结
这里仅简单介绍html的基础标签使用部分，包含标题标签、图像标签和超链接标签，主要用于记录学习，后续会不定时更新。
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
