前端开发基础
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”
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
