一、写在前面的话：如果自学前端没有思路，可以参考以下方式
1.第一个月 html+css（四周）静态页面
html （超文本标记语言）网页骨架 结构层
css（层叠样式表） 修饰网页
html5+css3 提供了更加漂亮交互更好的样式 移动端 手机端 电脑端pc
2.第二个月（4-5周）：JavaScript 脚本语言 面试题较多
3.第三个月 （3-4周）；php/node.js 前后端交互 ajax、git 搭建一个服务器
4.第四个月 （四周） vuejs框架（市面比较主流）
5.第五个月 reactjs框架 小程序 大数据可视化 简历 就业课 项目题
学完前端工程师发展路线图 技术方向 初级工程师-中级-全栈（也可技术总监）-产品经理-技术总监-项目总监-CEO首席技术官
管理方向 前端组长-技术主管（也可技术总监、产品经理）
二、1.浏览器
1.1浏览器分类（五大浏览器）
IE、 Google Chrome 、Firefox、 safari 、opera(欧朋手机浏览器）
1.2浏览器内核
1.Trident(IE内核)
浏览器的新版本是双核甚至多核，一个是Tridents是兼容浏览器模式，其他内核是高速浏览模式
2.Gecko(Firefox内核)
Mozilla Firefox
3.Webkit(Safari内核，Chrome内核原型，开源）
360极速浏览器、搜狗高速浏览器、Apple Safari
2.网页与网站
2.1网页分类
- 网站首页
- 主页
2.1网站分类
1.门户网站( 腾讯、新浪)
2.行业网站(大前端、博客园)
3.功能性质网站
4.企业网站（教育机构）
5.个人网站(推荐学习阮一峰、张鑫旭）注：阿里云可以购买域名
3.HTML概念
超文本标记语言(Hyper Text Markup Language) ,制作网页的最基本的语言，
可以直接由浏览器执行。注：
- 用来描述网页的一种语言
- 超文本标记语言
- 是标记语言，不是编程语言
- 标记语言是一套标记标签markup tag
- 使用标记标签来描述网页
- 文档包含了HTML标签及文本内容
- 文档也叫web页面
4.HTML的基本结构
注：<!DOCMENT HTML> 指的是HTML5文档声明
meta元数据标签，meta中content网站描述不超过150字
charset字符集设置utf-8万国码 gbk、gb2312
网页标签页的标题<title></title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>5.HTML标签
5.1标签分类
双标记标签<标签>内容</标签> <p></p><h1>一级标题</h1><h6>六级标题</h6><title></title><ul></ul><ol></ol><li></li><dl></dl><dt></dt><dd></dd>
单标记标签 <标签名> <img><br><hr>
5.2常见标签
1.超链接<a href=""></a>
- cursor可以改变图标 pointer小手 wait help
- 无值时是刷新本页面，有链接时可以跳转，会改变颜色
- 在<a></a>里面写入target=“_blank" 新窗口打开超链接
- head中<base href="">都跳到同一个网站,流氓广告采用此方式，如果body中有链接的话跳转到自己的链接，没有的话跳转到head中设置的链接
- head中<base target="_blank">这样设置的话文中所有都不用再次设置_blank,就可以在新页面显示,打开新窗口
- 任何一个标签上都可以有一个id属性，id值是唯一的，id的命名 字母或字母+数字 字母+符号 最好是英文
2.锚链接#加上id值，在其他标签里面写上id=“top1”,然后在超链接href里面写上"#top1"
3.<h1></h1>....<h6></h6>
相同点：都加粗，独占一行,块元素
不同点：字号大小依次减小 网页中一个em默认16像素px
h4就是16font-weight 字体粗细 bold 加粗
4.<img>单标记标签，需要属性名和属性值
alt图片路径加载失败的替代文本，成功时不出现文字
- width设置宽度 height高度
- 不加东西默认px,可以加%，是浏览器的百分比，会随浏览器变化
- 属性title=""，鼠标移到标签上的提醒文本，任何标签都可以用
- <p>输入lorem按下tab键，可以出现一些文字
- 行内块元素;能和其他元素在同一行显示，还可以改变高度和宽度
5.<br>换行，单标记标签
6.<ul></UL>无序列表，与列表项<li></li>搭配使用，其他的放在li里面。ul块元素，默认是disc实心小圆点
7.有序列表<ol></ol>,搭配li使用，有先后顺序，也是块元素，默认为数字，其他元素放到li里面
8.<dl></dl>定义列表,<dt></dt>定义列表项。<dd></dd>解释内容。一般不用，也是块元素。土黄色是外边距，绿色内边距
9.有强调意味的话加粗用<strong></strong>,行内元素<b></b>仅表示加粗(font-weight：bold )
10.<i></i>倾斜或<em></em>主指表强调，引入图标
11.<big></big>大字体，不推荐用 <small></small>小字体可以用
112.<hr/>水平线，块元素，默认方式居中对齐 align =“”水平方向对齐方式，center 水平居中 left 居左对齐 right居右对齐 color="red" 设置如何对齐时需要设置宽度
6.图片分类
- gif 色彩表现少，解析速度快，支持动图，支持透明，是网页中修饰类图片的首选
- jpg 色彩表现较多，不支持动图，不支持透明，网页中内容图片的首选
- png 支持透明效果好
- webp 支持有损压缩和无损压缩，同等质量的图片，体积更小
7.元素分类
7.1块元素（display；block）
1,独占一行2.宽度不设置时，默认受浏览器影响3.块元素里面可以嵌套任何元素（p元素除外,不能再p元素内部放块元素)
<p></p> <h1></h1> ......<h6></h6> <ul></ul> <ol></ol> <body></body> <hr><div></div>
7.2行内元素
1.可以和其他元素在一行显示2.宽度只受内容影响3.内外边距和行高只有部分受影响4.行内元素里可以嵌套行内元素，行内块元素以及文本
<b><strong><i><em> <sup></sup>上标 <sub ></sub>下标 <small></small><span></span><a href=""></a>
7.3行内块元素(diaplay:inline-block)
<iframe src="'></iframe><img src=""> 可以改变宽度和高度，还可以在一行显示
8.框架
行内框架
<iframe src="引入路径“></iframe>
里面设置框架边框frameborder="0"时无边框，1有边框
scrolling=no时没有滚动条,yes有滚动条
9.表格基本结构
<table></table>基本框架
<tr></tr>定义表格的行
<td></td>行内的单元格,默认居左
<th></th>单元格标题或者表头，默认文字加粗，居中显示
如何进行设置
border=""就会显示边框，设置table的边框。
cellspacing="0"单元格与单元格之间无缝隙
cellpadding内容与单元格四周的距离
宽度width和高度height也可以设置
align可以设置水平方向对齐方式
valign 垂直方向对齐方向(middle垂直居中对齐，top垂直居上，bottom垂直居下 )
bgcolor 背景色
bordercolor边框颜色
rules规定内侧边框那部分可见( none均不可见 ,rows位于行之间的线条可见 ,cols位于列之间的线条可见 ,all 位于行和列的线条都可见)
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>10.单元格合并(让谁合并就在谁里面加)
colsapn=“合并的单元格个数” 左右合并单元格，即水平合并
rowspan="单元格个数“上下合并单元格，即垂直合并
11热点区域map
area区域 shape形状 rect矩形 circle圆形 poly多边形 coords 坐标
当shape="rect" coords="x1 y1 x2 y2"
当shape="circle" coords="x1 y1 r"
当shape="poly" coords="x1 y1 x2 y2..."
在dw里面进行设置，首先插入图片，在设计视图下进行操作，打开属性，选择区域进行绘画
会自动生成坐标，加入超链接，点击某个区域就可以进行跳转。
<img src="hh.png" alt="" width="1345" height="1948" usemap="#Map"/>
<map name="Map">
<area shape="circle" coords="234,864,214" href="https://baike.baidu.com">
</map>
12.特殊符号
- <指的是<
- > >
- 空格：从上到下空格依次变大
-
-  
- &emsp（两个 等于一个 等于一个汉字）
- × x
- •是小圆点
- ©版权符号
13.图片引入路径方法
src引入图片路径
绝对路径：仅限于自己的路径，一般不用
相对路径：参照自身的位置 ./当前目录
1.HTML文件与图片在同一个目录下，src的值是 图片名称或./图片名称
2.当HTML文件与图片所在文件夹在同一个目录下，src的值是先写图片文件夹名称，在写图片名称 <img src="图片文件夹名称/图片名称">或<img src="./图片文件夹名称/图片名称">
3.当html文件夹与图片在同一个目录下，src的值是先通过../跳出当前目录，再写图片名称<img src="../图片名称>
4.当HTML文件夹与图片文件夹在同一个目录下，src的值先通过../跳出当前目录，再写图片文件夹名称，最后写图片名称<img src="../图片文件夹名称/图片名称> 只能同一项目相互访问
14.快捷键及学习手册
注释<!-- -->Ctrl+/
../去上一级目录 ./当前目录
（手册指南：W3school、菜鸟教程、mdn）
（做笔记软件 csdn 幕布 简书 掘金 语雀 markdown）
（html预习视频：
https://www.bilibili.com/video/BV1dZ4y1G75D?share_source=copy_web
css预习视频：
https://www.bilibili.com/video/BV1bV411y7LH?share_source=copy_web）
在hbuilder中按着ctrl键不动，鼠标单击左键，将光标依次放在其他位置，可以批量修改
插入表格时也可以table>tr*3>td*4>{单元格}，按下tab键
div>p*3>a*2