前端开发概述
什么是前端开发
前端也叫做web前端开发,它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。
什么是互联网产品
互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务,百度搜索、QQ、网易邮箱等都是互联网产品。
前端开发需要哪些技术
前端工程师参照产品的效果图来开发页面(也可叫界面),效果图是由UI工程师用Photoshop(少量设计师用firework)来设计的,为了方便与UI设计师对接工作,前端需要掌握一些Photoshop的技能,Photoshop还可以辅助页面开发。把效果图布局成页面,需要用到HTML语言和CSS语言,页面功能的开发需要用到javascript,为了快速开发和系统开发,还需要学习一些前端的javascript库和框架。
HTML文档概述和基本结构
html概述
HTML是Hyper Text Mark-up Language的首字母缩写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个标签组成,用这种语言制作的文件保存的是文本文件,文件的扩展名为html或htm,一个文件就是一个页面,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网页可以从一个网页连接另外一个网页。
html基本结构
在sublime中新建文件index.html,输入html,然后按tab键,会自动补齐框架,如下所示:
html5大法好
你好,世 界
你好,世 界
HTML文档类型
常用的两种文档类型是xhtml1.0和html5
xhtml 1.0是html5之前的一个常用的版本
目前最常用的是html5
学习html其实就是学习标签的用法
html标签
网页上显示的内容都是放在body标签里面
html中多个标签可以嵌套,通常写的时候外层和内层间有缩进,但是其实是为了好看,不缩进也行
body内
html标题标签
这里是一级标题
这里是二级标题
这里是三级标题
html段落标签
即p标签,p:paragraph
中间可以放一个段落
字符实体
常用的3个:
空格:&nmsp;
尖括号>:>
尖括号<:<
换行标签
块标签
div就表示一块内容,
没有语义
行内元素,表示一行中的一小段内容,没有具体的语义。它本身不带任何的样式,所以如果是仅html中使用这个标签,看不出来差别,往往结合样式使用
含样式和语义的标签
标签的语义通常用在面试上,用的时候常常不怎么注意
:行内元素,表示语气中的强调,em:emphasize,本身带样式——倾斜,其实只是为了给样式而已
:行内元素标签,表示专业词汇,本身带样式——倾斜
:行内元素,表示文档中的关键字或产品名,本身带样式——加粗,b:bold
:行内元素,表示非常重要的内容,通常是把一段非常重要的内容包起来,本身带样式——加粗
语义化的标签
语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网页的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签表示是标题,p标签表示是段落,ul,li标签表示列表,a标签表示链接,dl,dt,dd表示定义列表等,语义化的标签不多
html图像标签
标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有:
1. src="./images/pic.png",定义图片的引用地址
2. alt="",定义图片加载失败时显示的文字,搜索引擎会使用这个文字收录图片,盲人读屏软件会读这个文字让盲人识别图片,所以此属性相当重要
具体用法:
绝对路径和相对路径
相对路径:相对于网页文件本身,./表示当前路径,可以省略
绝对路径:文件迁移能力差,一般不用,相对于磁盘的位置,eg:C:\users...\pic.png
html链接标签
标签可以在网页上定义一个链接地址,它的常用属性有:
1. href属性 定义跳转的地址
2. title属性 定义鼠标悬停时弹出的提示文字框
3. target属性 定义链接窗口打开的位置,有_self:缺省值,新页面替换原来的页面,在原位置打开;_blank:新页面会在新开的一个浏览器窗口打开
具体用法:
跳转到百度
列表
列表分为有序列表和无序列表
- 有序列表
实际开发过程用得不多
-
列表文字一
-
列表文字二
-
列表文字三
- 无序列表
一般用在新闻列表
-
新闻标题1
-
新闻标题2
-
新闻标题3
关于标签li的记忆:list,ol:ordered list,ul:unordered list
- 定义列表
定义列表通常用于术语的定义。
标签表示列表的整体。标签定义术语的题目。
标签是术语的解释。一个dl中可以有多个题目和解释,代码如下:
前端三大块
- html
- 负责页面的结构
- css
- 负责页面的体现
- javascript
- 负责页面的行为