前端开发基础
1.主要是开发用户操作界面,涉及的内容包括丰富的页面交互,提供良好的用户体验、配合服务端工程师处理复杂的业务逻辑和实现web多终端适配兼容。
2.多终端适配;
(1)网页内容较为复杂的情况,通过后台判断,渲染不同的模板进行输出的跳转;
(2)各终端的显示页面完全一致,页面布局等样式会根据终端大小进行自动切换。
3.发展历程
HTML5相比于其他版本增加了组多语义化标签,如header、nav等文档结构标签,音视频及canvas画布等标签
3.前端开发工具
DW(Dreamweaver)、Sublime、HBuilder、Webstorm
4.网页基本结构
<!DOCTYPE html>
<!--
文档类型声明,对一个页面的渲染很重要。浏览器对页面的渲染有怪异模式
(浏览器按自己的模式解析渲染)和标准模式(浏览器使用W3C官方标准解析渲染)
两种,如果使用DOCTYPE浏览器将按标准模式渲染,否则将按照怪异模式渲染。
-->
<html lang="en">
<!--
定义页面中的语言,搜索引擎首先自己无法判断自己抓取的页面中的内容是什么语言,因为在它看
来都是二进制文件,那么这时就需要我们告诉它这个页面中的内容是什么语言,进而它才能知道下
一步该干嘛,也就是说,当你把lang设置为”en”时,无论你网页中是什么语言的内容,在它看来都
是英语,如果本地浏览器的默认语言不是英语,就会提示上面的选项,问您是否需要翻译。
简体中文 lang="zh-cmn-Hans";繁体中文:lang="zh-cmn-Hant". -->
<head>
<title>页面标题</title>
<!--设置网页标题,一来告诉访客网页的,二来用于搜索引擎索引 -->
<!-- 可以看到在头部中,标题,网页描述信息,关键字对SEO有着很大的作用.-->
<!-- 更多关于meta介绍请参照fex.baidu.com/blog/2014/10/html-head-tags/?qq-pf-to=pcqq.c2c -->
<!--
<meta>定义文档元数据,使用键值对形式表示,它一般用于描述当前页面的特性,它主要有以下用途:
1.设置字符集:没有设置或设置不正确时会导致页面内容和标题显示乱码;
2.设置关键字:便于搜索引擎搜索设置的,对于SEO优化尤为重要,一般10个,过多分分散关键字优化,排名下降
3.设置网页描述信息:概述性的描述页面的主要内容,对关键字的补充,作为搜索结果返回给用户
-->
<meta charset="UTF-8">
<!--H5对字符集的设置,定义了字符集为“utf-8”——万国码,它几乎涵盖了地球上几乎所有地区的文字-->
<meta name="keywords" content="HTML5,CSS3,前端基础,前端开发,keywords">
<!-- 设置了网页关键字可以用,或空格分隔 -->
<meta name="discription" content="这是一篇关于HTML5页面基本结构介绍的网页,它是前端开发最基础的部分">
<!-- 设置了网页描述信息,一般70~100字-->
<meta name="author" content="author name" />
<!-- 定义网页作者 -->
<meta name="robots" content="index,follow">
<!--
搜索引擎索引方式,robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:
none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->
<meta http-equiv="refresh" content="0;url=">
<!--
页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,
则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
-->
<meta http-equiv="Pragma" content="no-cache">
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
优化移动浏览器的显示,如果不是响应式网站,不要使用initial-scale或者禁用缩放。
width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
height:高度(数值 / device-height)(范围从223 到10,000)
initial-scale:初始的缩放比例 (范围从>0 到10)
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩 (no,yes)
minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)
注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要
手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,
则用户将不能放大/缩小网页来看到全部的内容。
-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 优先使用优先使用 IE 最新版本和 Chrome-->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!--通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,
往你的身上贴狗皮膏药的广告,为此可在 head 内添加-->
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;
url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。
-->
</head>
<body>
<!-- 代表了页面的主体部分,它是放置页面内容的地方 -->
</body>
</html>
补充:移动端meta:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->
参考资料:
页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”