本笔记为无基础的小白在学习前端技术HTML、CSS、JavaScript过程中所做的笔记，既是对自己学习过程的一个记录，也希望能够给后面新来学习的朋友们提供参考和帮助。本学习笔记基于MOOC、CSDN、知乎、百度百科、b站up主“黑马程序员”等学习资源，综合总结为自己的无基础起步的学习笔记。
一、网页的概念
网页是一个包含HTML标签的纯文本文件，是超文本标记语言格式，文件扩展名为.html。网页通常包含、图片、链接、文字、声音、视频等元素组成，网页要通过网页浏览器来阅读。
二、Web的标准
| 标准 | 说明 |
| 结构(网页元素) | HTML主要是用于页面元素的整理、分类 |
| 表现(外观属性) | CSS用于构建、设置页面的各种属性，如版式、颜色、大小等外观样式 |
| 行为(交互逻辑) | JavaScript是基于对象的一种客户端脚本语言，用于页面交互逻辑的编写，可以让我们写的网页活动起来 |
三、HTML语法规格，HTML标签
1.HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签是通常成对出现的，例如<html>和</html>，我们称为双标签，这一对标签当中第一个标签称之为开始标签，第二个标签称之为结束标签。
3.有些特殊的、极少情况下的单独出现的标签，例如<br/>，我们称为单标签。
4.标签有两种特殊关系：包含关系和并列关系
包含关系（类似于套娃关系）
<head>
<title></title>
</head>并列关系（类似于兄弟关系）
<head></head>
<body></body>5.HTML的基本架构（注意好包含关系）
| 标签 | 定义 | 说明 |
| <html></html> | HTML标签 | 网页当中的最大标签，称为根标签 |
| <head></head> | 网页头部标签 | 在head标签当中必须设置包含一个title标签 |
| <title></title> | 网页标题标签 | 用于设置网页的页面标题标签 |
| <body></body> | 网页主体标签 | 网页包含的所有内容和元素都放在body标签当中 |
<html> //根标签
<head> //头部标签
<title>网页标题标签</title> //标题标签
</head>
<body>
网页主体标签（网页的基本内容） //主体标签
</body>
</html>四、基于VSCode工具的网页开发（基础代码框架）
1.<!DOCTYPE>网页文档类型声明标签，例如<!DOCTYPE html>用于声明当前代码开发的是HTML5版本的页面。声明位于开头，声明对象是浏览器，告诉浏览器执行的是哪一个HTML标准。但是这个标签本身不属于html标签！
2.lang是语言种类，用来定义当前文档显示的语言：
<html lang="en">①.en定义语言为英语
②.zh-CN定义语言为中文
但是其实无论是en还是zh-CN都可以编写、显示中文或者英文的页面内容，对搜索引擎有影响。
3.字符集在<head>标签内通过<meta>标签的charset属性来规定HTML文档应当使用哪种字符编码
其中我们最常用的是:
<meta charset="UTF-8" />charset常用的字符还有GB2312、GBK、BIG5、UTF-8等，其中UTF-8是最广泛的，因此被称为万国码，基本上包含了世界上所有国家所需要用到的字符。若不写标准字符节，页面可能乱码。
五、HTML常用标签
标签语义，因为在前端开发当中，HTML本身担任着排版的任务，在合适的位置添加合适的标签可以让我们的网页结构更清晰，例如：合适的设置标题标签和段落标签，在网页显示中可以让排版更合理，层次更清晰。
1.标题标签：为了让网页更具有语义化，HTML提供了6个等级的网页标签，<h1>-<h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
...... //h是head的缩写，标题依据重要性递减
<h6>六级标题</h6>特点：①.加了标题的文字会加粗，字号不同等级标题大小不同（一级标题最大，向后依次递减）
②.一个标题会单独占据页面的一行（页面空间的一行）
2.段落标签：在网页开发中，文档内容由键盘自动敲入空格和换行都只视为一个空格。因此，要使网页的条理化地显示出来，要将文字分段显示，HTML提供了<p>标签用于定义段落，可以用于将网页分隔成若干个段落。
<p>这是一个段落标签</p> //p是paragraph的缩写特点：①.文本在一个段落当中会根据浏览器窗口的大小自动换行
②.段落与段落之间保有空隙
3.换行标签：在HTML当中，一个段落的文档文字会从左到右依次排列，直至浏览年起窗口右端，直到窗口大小边界才会自动换行。如果希望强制换行，我们可以使用上文提到的特殊标签<br/>，特殊的单标签，作为我们的强行换行标签。
<br/> //br是break的缩写特点：①.<br/>是一个特殊的单标签
②.<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间是会有一些垂直间距的
4.（重点）<div>和<span>标签（盒子标签）：在HTML当中，<div>和<span>标签是没有语义的，他们类似于一个盒子，用来容纳内容的。
<div>盒子，用来装内容</div> //div是division的缩写，表示分割和分区
<span>盒子，用来装内容</span> //span是意为跨度、跨距特点：①.<div>标签用来布局，是一个大盒子，页面一行的空间只能有一个<div>
②.<span>标签用来布局，是一个小盒子，页面一行的空间能够有多个<span>
5.（重点）图像标签：在HTML当中，一个特殊的单标签，<img>标签用于定义HTML页面中的图像，可以将多种格式的图像文件添加到网页当中，成为网页的一个元素。
<img src="图片URL"/> //img是image的缩写,双引号内写文件路径其中src为<img>标签的必须属性，用于指向图像文件的路径和文件名，在<img>标签当中可以使用相对路径和绝对路径，相对路径需要把图片文件和代码文件同一个文件夹，绝对路径则并不需要。具体的绝对路径和相对路径内容请参考其他文献，此处不展开叙述。
<img>标签当中的属性
| 属性 | 属性值 | 说明 |
| src | 图片路径(相对路径 或 绝对路径) | 必要属性,指向文件路径 |
| alt | 文本 | 替换文本，图像错误则替换为文字 |
| title | 文本 | 提示文本，光标移动到图片上显示文字 |
| width | 像素宽度 | 设置图片的宽度 |
| height | 像素高度 | 设置图片的高度 |
| border | 像素粗细 | 设置图片的粗细 |
特点：①.<img>标签可以拥有多个属性，标签名属性必须写在前面，其余属性无论次序写后面
②.<img>标签的标签名和属性，多个属性与属性之间需要用空格分开
③.属性采用键值对的格式，例如key="value"的格式，即属性="属性值"
6.（重点）超链接标签：在HTML当中，<a>标签用于定义超链接，作用就是从一个页面到另外一个页面。
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或者图像 <a> //a是anchor的缩写其中href属性是必须属性，用于指向链接目标的URL地址
其中target属性是用于指定链接页面的打开方式，_self是默认值，_blank是在新窗口中的打开方式
链接分类:
①.外部链接，例如:
<a href="http://www.baidu.com">百度</a>②.内部链接，例如:
<a href="index.html">首页</a>③.空连接，例如:
<a href="#">暂时未知</a>④.下载链接，如果href里面的地址是一个文件或者压缩包,则会调动浏览器下载该文件
⑤.网页元素链接，网页当中各类元素，如文本，图像，音乐，视频都可以添加超链接
⑥.锚点链接，点击我们加入锚点链接的网页某个元素(例如文本),可以跳转到网页某个位置
**1.在链接文本的href属性当中,设置href属性值为#名字的形式，例如:
<a href="#one">第一集</a>**2.找到目标位置处的标签,里面添加一个id属性 = 第①步的名字，例如:
<h1 id="one">第一集简介</h1>通过上面两步即可完成锚点链接
六、HTML注释和特殊字符
1.注释标签: 如果需要在HTML文档当中添加一些用于理解和代码阅读，但是不会对网页产生任何影响的内容可以用注释标签
<!-- 注释语句 --> //快捷键: ctrl + /说白了就是，这句话是给程序员看的，不要执行这一段代码
2.特殊字符: 在HTML当中一些特殊的符号很难或者不方便直接使用的时候，我们可以用一些其他的特殊字符来替代
扫一扫
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
