写这篇博客完全是为了记录自己前端学习的进度。
我是一名2019年退伍的8年小兵，兜兜转转一年，在一家IT公司做销售，工资还不错，但是出差太频繁，本来在部队陪伴家人的时间少，现在还经常出差，有些对不住家人，现在年纪也不小了（27，虽然我还认为我是个孩子），决定找个方向好好学学习，充充电。考虑了很多天，请教了很多网友，决定入行前端。（很多朋友跟我讲不要入，学别的，但是我认为还是事在人为吧，哪个行业都不好做，就算失败了，也当做是学一门技术，总是没错）
由于现在还在上班，每天只能拿出一些所需的时间慢慢学，从各种网站上找了许多视频资料，准备自学（开始也联系了不少培训机构，但是让我放下手中的工作，沉下心去学习还是比较难，现在就是想着，先自学，然后等后面难度加大了再找个培训机构好好的学一遍）。目前是在B站上面看Pink老师的视频资料在学习。
下面是我这两天天以来的学些笔记，希望能给一些同样刚入门的自学的小伙伴一点帮助吧。
加油，打工人！
网页的组成元素 图片 文字 视频 链接 声音 .html .htm
HTML 是超文本标记语言，是专门制作网页的语言，由标签组成。
是标记语言，不是编程语言。
超文本有两层含义
- 他可以加入图片，声音，文字
- 他可以从一个链接跳到另一个链接（超级链接文本） 超文本
浏览器内核（渲染引擎）负责读取网页内容，整理讯息，计算网页的显示方式并显示网页。
Webkit/Blink 内核
Web标准是由W3C指和其他标准化组织制定的一种一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
Web的优点：
- 让Web发展的前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更容易维护
- 体改页面的浏览速度
Web标准的组成主要由 结构 表现 行为 三个方面
结构主要用于对网页元素进行整理和分类
表现用于设置网页元素的板式，颜色，大小等外观样式
行为网页模型的定义以及交互的编写
Web标准中提出的最佳体验方案是结构，样式，和行为分离。
简单理解为：结构写到HTML中，表现写到CSS文件中，行为写到javascript。
标签一般都是成对出现的，有一些是单独出现的，很少。
<html>开始标签 </html> 结束标签 双标签
<br /> 单标签
标签的关系：包含关系和并列关系
HTML的基本结构标签：
<heml></html>页面中最大的标签，根标签
<head></head>文档的头部，注意head标签中我们必须设置的标签是title
<title></title>文档的标题，让一个页面拥有属于自己的网页标题
<body></body>文档的主体，元素包含的文档的所有内容，页面内容基本都是放在body里面。
<!DOCTYPE>文档类型声明，作用为告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>为当前最新HTML5类型
<html lang="en"> EN定义为英语，zn-ch定义为中文
在<head>标签中，可以通过charset属性来规定HTML文档中应该使用的哪种字符
<meta charset="UTF-8">字符集，以便计算机能够识别和存储各种文字 UTF-8,被称为万国码，基本包含了全世界所有国家需要用到的字符。
上面的代码必须要写，不然会出面乱码的情况，一般情况下使用”UTF-8”。
标签的语义：
根据标签的语义，在合适的地方给一个最合理的标签，可以让页面更加清晰。
标题标签：<h1> - <h6> head缩写
<h1> 我是一级标签</h1>
<h1> 标题一共六级选</h1>
<h2> 文字加粗一行选</h2>
<h3> 由大到小依次减</h3>
<h4> 从重到轻随之便</h4>
<h5> 语法规范书写后</h5>
<h6> 具体效果刷新见</h6>
Shift+alt+f 自动对齐 自动换行 alt+z
段落标签<p>我是一个段落标签</p> paragraph 段落 度阿诺与多乱之间，由较大的缝隙
换行标签<br />：单标签 只是另起一行
文本格式化标签 语义 突出重要性，比普通文字更重要
<strong></strong>或<b></b> 加粗 推荐strong
<em></em>或<i></i> 倾斜 推荐<em>
<del></del>或者<s></s> 删除线 推荐<del>
<ins></ins>或者<u></u> 下划线 推荐<ins>
<div>和<span>标签 是一个盒子 双标签
Div是divxision的缩写，意思是分割，分区，spon是跨度，跨距的意思
div独占一行 spon一行有很多
图像标签
<img src=”图片URL”/> 形成图片
image图片的意思
src是img的必须属性，用于指定图像文件的路径和文件名。
所谓属性：简单理解为属于这个图片的特性
src 图片路径 必须属性
Alt 文本 替换文本，图片不能显示文字
Title 文本 提示文本，鼠标放到图像上，显示文字
Width 像素 设置图像的宽度
Height 像素 设置图像的高度
Border 像素 是指图像边框的粗细
注意事项：
- 图像标签可以有多个属性，必须写在 标签名后面
- 属性之间不分前后顺序，标签名与属性，属性与属性之间要用空格隔开
- 属性采取键值对的格式，key=”value”的格式，属性=”属性值”。
路径
相对路径：是以引用文件所在的位置为参考，而建立的目录路径
简单来说，图片相当于HTML的页面位置
同一级直接写
下一级路径： /
上一级路径： ../
绝对路径：直接把路径拉过来（不经常使用，别人用不了）
超链接标签：<a>
语法格式：
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
href是必须属性 target是链接打开方式，其中_self为默认值，_blank为在新窗口中打开的方式
链接分类
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
锚点链接：点网页的某一位置，可以直接定位到页面的那个位置
- 在链接文本的hrefs属性中，设置属性值为#名字的形式，如<a herf=”two”>第2集</a>
- 找到目标位置标签，里面添加一个id属性=刚才的名字如<h3 id=”two”>第2集介绍</h3>
注释标签：HTML中的注释以”<!--”开头，以”-->”结束
快捷键 ctrl+/
特殊字符:
| 空格 | 空格 |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
表格标签：
作用：用来显示，展示数据，因为它可以让数据显示的非常规整，可读性较好，特别是后台展示数据的时候，能够熟练的试用书籍非常重要
表格不是用来布局也免得，而是展示数据的。
<table></table>用来定义表格标签
<tr></tr>用于定义表格中的行，必须嵌套在表格标签中
<td></td>用于定义表格中的单元格，必须嵌套在tr中
表头单元格：<th></th> table head 放在第一行，用来突出重要性（加粗，居中）
| 属性 | 属性值 | 描述 |
| align | left,center,right... | 规定表格的对齐方式 |
| border | 1或”” | 规定表格是否有边框，默认为””，表示没有 |
| Cellpadding | 像素值 | 规定单元边缘与内容之间的空白，默认1像素 |
| Cellspacing | 像素值 | 规定单元格之间的空白，默认像素 |
| Width | 像素或百分比 | 规定表格的宽度 |
表格结构标签：<thead></thead>是表格头部标签，内部必须有<tr>标签
<tbody></tbody>是表格主题标签，主要放数据本体
这样可以更好的分清结构。
合并单元格：
合并单元格的方式：跨行合并：rowspan=” 合并单元格个数”
跨列合并：colspan=”合并单元格个数”
目标单元格
合并单元格三部曲：1.先确定是跨列还是跨行
2.找到目标单元格，写上公式=合并单元格数量（<td colspan=”2”></ta>）
3.删除多余的单元格
列表标签：列表的作用是整齐，整洁，有序，它作为布局会更加自由和方便。
列表可分为三类：无序列表，有序列表和自定义列表
无序列表:<ul></ul> 列表项用<li></li>
3525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
