一、写在前面的话:如果自学前端没有思路,可以参考以下方式
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