注：本笔记根据bilibili-黑马程序员pink老师前端入门教程编写
目录
/* HTML骨架格式 */
<!-- 页面中最大的标签 根标签 -->
<html>
<!-- 头部标签 -->
<head>
<!-- 标题标签 -->
<title></title>
</head>
<!-- 文档的主体 -->
<body>
</body>
</html>1. HTML 语法规范
1.1 基本语法规范
① HTML 标签是由尖括号包围的关键词，例如<html>。
② 双标签：HTML 标签通常是成对出现的，
例如<html>和</ html>，第一个是开始标签，第二个是结束标签。
③ 单个标签：有些特殊标签必须是单个标签（极少情况），例如<br/>，我们称之为单标签。
1.2 标签关系
标签：单标签<br/> 和 双标签
标签关系：包含关系(父子关系) & 并列关系(兄弟关系)
2. HTML 基本结构标签
每个网页都有一个基本的结构标签，页面内容都是在这些基本标签上书写。
HTML 页面也叫 HTML 文档。
① vscode打开，新建文件ctrl+N，保存文件ctrl+s【.html文件】
② 骨架自动生成：“!”
③ 代码运行：安装open in browser库
字体大小：ctrl + ”+” 放大
| 插件 | 作用 |
| Chinese (Simplified)Language Pack for vs Code | 中文(简体)语言包 |
| Open in Browser | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，都会自动格式化js css和html代码 |
| Auto Rename Tag | 自动重命名配对的HTML/ XML标签 |
| CSS Peek | 追踪至样式 |
3. 开发工具
<!DOCTYPE html> /*文档类型声明标签：html版本*/
<html lang="en"> /*lang 语言种类：en英语，zh-CN中文*/
<head>
<meta charset="UTF-8"> /*【必须写】charset 字符集：UTF-8万国码*/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>写代码很快乐</body>
</html>4. HTML 常用标签
4.1 标签语义
标签语义：标签的含义。
根据标签的语义，再合适的地方给一个最合理的标签，可以让页面结构更清晰。
4.2 标题标签 h1-h6（重要）
为了使网页具有语义化，经常使用标题标签，HTML 提供 6 个等级的网页标题标签即 <h1>-<h6>。单独另起一行
<h1>标题标签</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>单词为 head 简写，从 h1-h6 依据重要性递减。
4.3 段落和换行标签（重要）
① <p>我是一个段落标签</p> 分割为若干段落。
② <br /> 是 break 缩写，强制换行。
<br />CPU发展已经有40多年的历史了。
4.4 文本格式化标签
| 语义 | 标签 | 说明 | 例子 |
| 加粗 | <strong></strong> 或<b></b> | 推荐<strong> | 我是<strong>加粗</strong的 |
| 斜体 | <em></em> 或 <i></i> | 推荐<em> | |
| 删除线 | <del></del> 或 <s><s/> | 推荐<del> | |
| 下划线 | <ins></ins> 或 <u></u> | 推荐<ins> |
4.5 div 和 span 标签
<div> 和 <span> 没语义，它们是一个盒子，用来装内容的。
<div>这是头部</div> 大盒子，一行只能一个 division
<span>今日价格</span> 小盒子，一行可以多个 span
4.6 图像标签和路径（重点）
4.6.1 图像标签
<img src="图像URL" />
<img scr=”Dylan.jpg”/>
src 是标签的 必须属性，指定图像文件的路径和文件名。
图像标签的其他属性 key=”value” 属性=“属性值”
| 属性 | 属性值 | 说明 | 实例 |
| Src(一定要写) | 图片路径 | 必须属性 | <img src=” img.jpg”/> |
| alt | 文本 | 替换文本，当图片不显示时显示文字 | <img src=”img.jpg” alt="图片无法显示" title=”图片的提示文字”/> |
| title | 文本 | 提示文本。鼠标放到图像上显示文字 | |
| width | 像素 | 图像宽度 | <img src=”img.jpg” width=”500”/> |
| height | 像素 | 图像高度 | |
| border | 像素 | 图像边框粗细 |
4.6.2 路径
以引用文件位置为参考基础，而建立出来的目录路径。是相对于 HTML 页面的位置。
| 路径分类 | 符号 | 说明 |
| 同一级路径 | 只需输入文件的名称即可 <img scr=”baidu.gif”/>
| |
| 下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下 <img scr=”images/baidu.gif”/>
|
| 上一级路径 | “../” | 在文件名之前加入“../”，如果是上两级，则需要使用“../../” <img scr=”.../baidu.gif”/>
|
目录下的绝对位置，直接到达目标位置，常是从盘符开始的路径/完整的网络地址。
e.g. D:\前端\HTML\xxx.docx
4.7 超链接标签
在 HTML 标签中，<a/>标签用于从一个页面链接到另一个页面。
4.7.1 链接的语法格式
a：anchor 的简写，锚的意思。
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
| 属性 | 作用 |
| href | 指定链接地址 url，为必须属性。 |
| target | 指定页面打开方式，_self当前页面打开，_blank为在新窗口中打开 |
4.7.2 超链接分类
| 分类 | 内容 | 说明 |
| 外部链接 | 跳转外部链接 | <a href=”http://www.qq.com” target=”_blank”>腾讯</a> |
| 内部链接 | 网站内部页面之间的相互链接。 | <a href=”inder.html”> 公司简介 </a> |
| 空链接 | # | <a href=”#”> 公司地址 </a> |
| 下载链接 | 地址链接的是文件.exe、压缩包.zip 等。 | <a href=”img.zip”>下载文件</a> |
| 网页元素链接 | 网页中的各种网页元素。文本、图像、表格、音频、视频等。 | <a href=”http://www.baidu.com”> <img src=”img.jpg”/></a> 点击图片跳转网页 |
| 锚点链接 | 点击链接，可以快速定位到页面中的某个位置。 | 1.在链接文本的href属性中，设置属性为 #名字的形式 <a href =”#two”>第二集</a> 2.找到目标位置标签，里面添加一个 id 属性 = 名字 <h3 id=”two”>第二集介绍</h3> |
Tip：阻止 a 链接跳转，课可给 href 属性设置 javascript:void(0); 或者 javascript:;。
5. HTML 中的注释和特殊字符号
注释: <!--注释--> VSCode 中快捷键：Ctrk + /
特殊字符:
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
