1 / 24
文档名称:

web前端规范.docx

格式:docx   大小:57KB   页数:24页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

web前端规范.docx

上传人:mh900965 2017/12/20 文件大小:57 KB

下载得到文件列表

web前端规范.docx

文档介绍

文档介绍:web前端规范
通用规范

因为在不同系统的编辑工具对tab解析不一样,windows下的tab键是占四个空格的位置,而在linux下会变成占八个空格的位置(除非你自己设定了tab键所占的位置长度)。
";"(分号)
方便压缩工具"断句"。
HTML规范
HTML5 doctype
为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
:::html
<!DOCTYPE html>
<html>
<head></head>
</html>
字符编码
通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(约定一致采用UTF-8编码)。
:::html
<head>
<meta charset="UTF-8">
</head>
文档模板
:::html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Sample page</title>
<link rel="stylesheet" href="css_example_url" />
<script src="js_example_url"></script>
</head>
<body>
<section id="page">
<header id="header">
页头
</header>
<section id="body">
主体
</section>
<footer id="footer">
页尾
</footer>
</section>
<script>
// 你的代码
</script>
</body>
</html>
IE 兼容模式
IE 支持通过特定的<meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
:::html<meta http-equiv="X-patible" content="IE=Edge">
元素

section 表示文档中的节、区段,可以和h1-h6一起来显示文档结构
article 表示一块比较独立的内容或者主题内容,块级元素,比如blog的内容,报纸的文章
aside 表示article以外的内容,而且应该和article有一定的关系,块级元素
hgroup 表示一个文档、区段(section)的标题组合
header 表示页眉,页头
footer 表示页脚
nav 表示导航内容
figure 表示以相对独立的或外引的元素,如img video
figcaption 表示 figure内容的标题
:::html
<!-- hgroup 示例-->
<hgroup>
<h1>文档主标题</h1>
<h2>文档副标题</h2>
</hgroup>
<!-- figure 示例-->
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
<figure>
<img src="img" alt="Example image" />
<figcaption>Example image</figcaption>
</figure>

p 表示段落。只能包含内联元素,不能包含块级元素;
div 本身无特殊含义,可用于布局。几乎可以包含任何元素;
br 表示换行符;
hr 表示水平分割线;
h1-h6 表示标题。其中 h1 用于表示当前页面最重要的内容的标题;
blockquote 表示引用,可以包含多个段落。请勿纯粹为了缩进而使用 blockquote,大部分浏览器默认将 blockquote 渲染为带有左右缩进;
pre 表示一段格式化好的文本;

title 每个页面必须有且仅有一个 title 元素;
base 可用场景:首页、频道等大部分链接都为新窗口打开的页面;
link link 用于引入 css 资源时,可省去 media(默认为all) 和 type(默认为text/css) 属性;
style