前端工具
-
ps:测图 量图 修图
-
编辑器:vscode
-
浏览器:
-
主流浏览器:chrome谷歌,Firefox火狐,Safari,IE浏览器,Opera浏览器
-
最重要和最核心的组件:渲染引擎(浏览器内核)
-
IE浏览器:Trident内核
双内核-兼容模式 极速模式 webkit
-
Safari:Webkit内核
-
Firefox:Gecko内核
-
Opera:Presto内核->Webkit内核->Blink内核
-
Chrome:Blink内核
-
前端开发语言
- 技能三要素:HTML,CSS,JS
- HTML(HyperText Markup Language):超文本标记语言,[结构层]
- CSS(Cascading Style Sheets):层叠样式表,[表现层]
- JS(Java Script):脚本语言,[行为层]
HTML
-
HTML:文件扩展名.html 快速生成初始代码:html:5或者! +回车
-
< !DOCTYPE html >//文档类型声明(DTD) 不是一个标签,是一条命令
作用:告诉浏览器是什么类型的文件,以什么样的标准去解析文档; -
标签\标记:<>尖括号包围的关键字;
-
HTML元素:由开始标签到结束标签的整个元素
<head>...</head>
称为一个元素; -
html的作用:定义整个文档:
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 网站标题 --> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title> <!-- 网站描述 --> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/> <!-- 网站关键词 --> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/> </head> <body> </body> </html>
-
-
head头部文档:
-
包含的内容是文档相关信息;
2. meta定义文档的元信息:字符集charset,关键字,网站描述- 字符集charset
- 字符;
- 常见字符集(UTF-8万国码,GB2312国家标准-简体中文,GBK-简体和繁体)
- title:网页标题:标题栏,收藏夹,列表
- 字符集charset
-
body文档主体:ps设计稿内容
-
-
语法:
- 尖括号包括的关键字就是标签,通常是成对出现的;
- 开始的叫开始标签<…>,结束的叫闭合标签</…>,中间存放元素内容;
- 空标记:只有一个标记,例如
<meta charset="UTF-8">
-
HTML属性:
- 开始标签内部;
- 以属性名称=’‘属性值’'形式;
- 给标记添加附属信息
-
常用标签:
-
div:块,容器,用来组合文档结构(画块),没有语义;
-
h1~h6标题标签:(h1最大,h6最小)
- h1通常用在logo或者详情页的大标题;
- 注意事项:
- 通常包含文字,内联元素,图片;
- 有默认外边距,字号,加粗;
-
p:段落,大面积出现文字的地方
- 包含文字内容,图片,其他内联元素;
- 注意事项:
- 不能包含p元素;
- 犹豫div和p的选择是,优先p标签
- 有默认外边距
-
img图片:
<img src="" alt="" width="" height="" title="">
-
src=" ":包含资源路径地址:
- 绝对路径:带有完整于域名路径;
- 相对路径:相对于当前文件引起另一个文件路径关系
- 同级目录:(文件名.扩展名)即可;
- 上级目录…/文件名.扩展名;
- 上上级目录…/…/文件名.扩展名;
- 下级目录:下级文件夹名.文件名.扩展名;
- alt="":替换文本,当图片资源不能被正常加载时,才会显示文本文字;
- width="" height="’’:宽和高,指定其中一个,则图片按原比例缩放,默认为照片原本大小;
- title=’’’’ :工具提示,鼠标放在图片上会显示相关文本;
-
a标签超链接:
<a href="" target="" title="">
-
href="":包含资源路径地址:
- 绝对地址:完整域名路径;
- 相对地址:目录中的路径跳转;
-
target="":目标地址的打开方式:
- _self:当前窗口打开;
- _blank:新窗口打开;
- 默认为当前窗口打开
-
title="":文本提示,在有限的空间展示更多内容,优化用户体验
-
作用:
- 跳转到其他页面;
- 跳转到当前页面的某个部分-锚点连接:
- href=“id名称/name值”;
- div= “id名称”;
<a name="锚点名称">
;
- 跳转到其他页面的某个部分:
1. href=“页面text.html/xmm”
-
注意事项:不要包含其他交互元素,包括a,button,textarea,select
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <a href="#xyy">小岳岳</a> <a href="#xhr">小黄人</a> <a href="#xm">小猫</a> <h1>小岳岳</h1> <img src="上课素材/3.jpg" alt="" id="xyy" /> <h1 id="xhr">小黄人</h1> <img src="上课素材/pic.jpg" alt="" /> <h1 id="xm">小猫</h1> <img src="上课素材/pic1.jpg" alt="" /> </body> </html>
-
-
<br/>
换行标签:处理文字的 -
ul标签:无序列表
- 应用:新闻列表,产品列表,导航栏(主导航,两侧电梯导航),菜单,分页
- 注意事项:固定嵌套,只能放在
<li>..</li>
中,不能嵌套放div
-
-
ol标签:有序列表
-
应用:排行榜,面包屑导航
-
注意事项:固定嵌套,ol的直接子元素只能是li
-
dl标签:定义列表
- 定义:dt 定义-概要
- 描述:dd 描述
- 应用:有定义与描述,类目与具体的类目,概要与详情
-
注意事项:
-
dt通常用来包含文字,图片,其他内联元素;
-
固定嵌套:dl的直接子元素只能是dt和dd
-
-
-
<ul> <li>列表1</li> <li>列表2</li> </ul> <ol> <li>列表1</li> <li>列表2</li> </ol> <dl> <dt>HTML</dt> <dd>超文本标记语言</dd> </dl>
-
< hr /> 标签:水平线分割线;
-
span标签:没有具体语义,区分文本样式,进行细节处理(比如字体颜色等);
-
strong标签:着重强调,默认加粗,用来强调内容的重要性,紧迫性,严重型;
-
b标签:默认加粗;
-
em标签:默认斜体,着重强调,程度弱于strong,整个内容重音的变化;
-
i标签:默认斜体;
-
del标签:默认删除键,删除内容;
-
sub/sup标签:下标和上标
块元素
- 定义:独占一行的元素
- h标签,div,ul,ol,li,dl,dt,dd,hr
-
行级元素(内联元素)
- 定义:可以在一行并列显示
- a标签,img,span,b,strong,i,del,sub/sup