2018年03月_ixygj197875

06月 04月 03月 02月 01月

原创 HTML5 address元素

address元素address元素用来定义整个页面、文章或区域的作者或拥有者的联系信息，可以包括作者或拥有者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。标记为联系信息后，可以让屏幕阅读器和搜索引擎找到地址或电话号码。address 一般放在 footer 中，有时也放在 header 中，视情况而定。大多数浏览器会在 address元素的前后添加一个换行符，当然，如果必要的话，...

2018-03-31 16:42:15 1196

原创 HTML5 footer元素

footer元素footer元素代表整个页面、文章或区域的页脚（或脚注），常常位于页面或内容块的结尾，通常包含页面或内容块的脚注信息，如作者、版权、相关文档的链接、联系信息等。如果 footer元素是 body 元素的子元素，它就成为整个文档的页脚，通常出现在页面的结尾，并包含一组链接、版权、许可协议等信息。如：<body><footer><p> <...

2018-03-31 16:41:30 3571

原创 html aside元素

aside元素aside元素代表跟文档的主内容区相关，但它又独立于主内容区，并且可以被单独拆分出来，而不会对整体内容产生影响。aside通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如，在经典的页面布局中，页面被分为 header、main、aside、footer 四个部分：<body><header>header</header><main&g...

2018-03-31 16:40:46 4963

原创 HTML section元素

section元素section元素代表文档或应用的一个一般的区块，一个区块通常是具体相同主题的一组内容通常会包含一个标题元素（h1~h6），通过标题元素来确定一个区块的主题。如：<article> <header> <h1>The Very First Rule of Life</h1> <p><...

2018-03-31 16:36:57 659

原创 HTML article元素

article元素article元素代表文档、页面、应用程序、或网站中一个独立的、完整的、可以独自被外部引用的内容，它可以是一篇论坛帖子、一篇文章、一篇新闻报道、一篇博客文章等任何独立的内容块，它通常有自己的标题、页脚等。因此，article元素里面可包含独立的 header、footer 等结构化元素。如：<article> <header> <h1&gt...

2018-03-31 16:36:06 9573

原创 HTML5 main元素

main元素main元素代表文档的主内容区，它应当与文档直接相关，或者是文档的中心主题的扩展，并且，应当是文档中独一无二的，不会在文档中其他任何地方（如，侧边栏、导航栏、版权信息、搜索框）重复出现的内容。如：<main> <h1>Skateboards</h1> <p>The ska...

2018-03-30 10:11:09 3251

原创 HTML5 nav元素

nav元素nav元素代表页面的导航区域，通常包含一组比较重要的导航链接，这些链接可以指向当前页面的其他部分，也可以指向其他页面或资源。如，使用 nav元素定义页面的主导航：<nav><ul> <li><a href="#">公司介绍</a></li> <li><a hr

2018-03-30 10:10:25 3545

原创 HTML5 header元素

header元素header元素是一种具有引导和导航作用的结构元素，通常表示整个页面或页面上的一个内容块的头部，它可以包含标题元素 h1 ~ h6（当并非必需的），也可以包含其他的内容，如导航、logo、搜索表单等等。如果一个页面上包含多个内容块，就可以为每个内容块分别加上一个header元素，也就是说，一个页面上可以有任意数量的 header元素，它们的含义可以根据上下文而有所不同。出现在页面的...

2018-03-30 10:09:36 2537

原创 HTML5 结构语义元素的标题h1～h6元素

h1～h6元素所谓语义元素，就是为元素（标签）赋予了某种意义，元素的名称就能能清晰表达元素的作用。使用结构语义元素，可以使页面结构清晰、易于维护，有助于屏幕阅读器和其他辅助工具的读取，有利于搜索引擎机器人快速了解页面结构，收集页面的信息。HTML4中的结构语义元素只有标题元素 h1~h6，HTML5中，又新增了article、section、nav、main、aside、header、footer...

2018-03-30 10:08:39 1122

原创动态网页技术

动态网页技术从网页的主要构成来说，一个标准的网页一般有4个部分组成：内容、结构、表现和行为。内容是网页中要传达的信息，包括文本、数据、图片、视频等，一般由HTML（XHTML）来完成，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；结构是使用结构化的方法对网页中用到的信息进行分类和整理，使内容更具条理性、逻辑性和易读性；表现是使用表现技术对已经结构化的信息进行表现上的控制，如版式、文本大小...

2018-03-30 10:07:25 4020

原创 HTML主体

HTML主体<body> 标签用于定义文档的正文内容，成对出现。在<body>... </body>之间的内容即为页面的主体内容，可以是文本、图像、音频、视频、表单及其他交互式内容，它们才是真正要在浏览器中显示，并让访问者看到的内容。由于HTML元素可以相互嵌套，通过元素层层嵌套，就构成了千变万化的网页。当一个元素包含另一个元素时，把外层元素称作父元素，内层元素...

2018-03-29 09:51:03 947

原创 HTML头部

HTML头部head元素用于定义文档的头部信息，出现在 <head>...</head> 标签之间的内容，是文档的头部信息。头部定义的内容不会在浏览器窗口的正文部分显示出来。head元素比较特殊，只有一些特定的标签才允许放在 <head> 标签内，它们分别是 <title>、<base>、<meta>、<scir...

2018-03-29 09:49:26 4910

原创 HTML根元素

HTML根元素HTML文档的根元素是 html 元素，从 <html> 标签开始，到 </html> 标签结束。根元素的作用就是告诉浏览器，在 <html> 和 </html> 之间的内容是HTML类型，浏览器便按HTML进行解析其中的内容。html 元素有两个属性，分别是 lang属性和 manifest 属性：lang属性指定页面内容所使用的默认...

2018-03-29 09:48:29 16122

原创 HTML文档结构

HTML文档结构HTML文档，也被称为网页，包括头部和主体两大部分。头部主要描述浏览器和搜索引擎所需要的信息，浏览器不会将这些信息呈现给访问者；主体是文档的正文，是网页中真正要传达的信息，这些信息将在浏览器窗口的正文部分呈现给访问者。HTML文档总是以 <html> 标签开始，以 </html> 标签结束，在 <head>...</head> 标签之...

2018-03-29 09:47:55 974

原创 HTML注释

HTML注释在HTML代码中，标签之间的文本是文档的注释，注释的内容不会被显示在浏览器页面上。只有在文本编辑器中，或浏览器的“查看源代码”选项打开文档时，才能看到注释。HTML中的注释有两种类型，一种是HTML代码注释，一种是IE条件注释。1、HTML代码注释在一个大文档中，通过注释来标明区块的开始合结束的位置，可以方便查找，也可以通过注释来阻止某些内容显示。当编写...

2018-03-29 09:47:07 12587

原创 HTML属性

HTML属性HTML属性包含了元素的额外信息，它总是出现在HTML开始标签中，并且，通常以名/值对的形式出现（空属性除外，它可以只有属性没有值）。属性的名称和值是大小写无关的，推荐使用小写。HTML属性的值有以下四种表现形式：1）空值：只有属性名称，隐含的意思是属性的值为布尔类型。在HTML5中，一切化繁为简，对于布尔型的属性，可以不提供属性的值。如果一定要提供一个值，值就是属性名本身。如：&lt...

2018-03-28 11:07:01 4148

原创 HTML基本语法

HTML基本语法HTML文档由HTML元素组成，一个HTML元素由一个标签和一组属性组成。一个标签可以有一个或多个属性，属性以名称和值成对出现。Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。HTML元素HTML 不是一种编程语言，而是一种描述性的标记语言，并使用HTML标签来描述HTML元素。HTML标签是由尖括号（“&lt...

2018-03-28 11:06:20 3765 1

原创 HTML初体验

HTML初体验学习任何一种语言，首先从编写一个简单程序，来对该语言有个初步认识，以增加学习的乐趣和信心。学习HTML语言也不例外。HTML文件是纯文本文件，因此，创建网页并不需要特殊的工具。你可以使用任何文本编辑器，如记事本、写字板、UltraEdit32、EditPlus、NotePad++等等。你也可以使用一些专业的所见即所得的 HTML 编辑器，如Dreamweaver等，这完全取决于你的个...

2018-03-28 11:05:40 255

原创 HTML发展史

HTML发展史HTML经历了HTML 2.0、HTML 3.2、HTML 4.0、HTML 4.01、HTML5，共5个版本。最新版本HTML 5于2014年10月28日成为W3C推荐标准。HTML 2.0于1995年11月作为RFC 1866发布，成为第一个正式规范。成为正式规范的目的是为了与当时的各种HTML标准区分开来，故使用2.0作为其版本号。HTML 2.0在RFC 2854于2000年...

2018-03-28 11:04:45 781

原创什么是HTML

什么是HTMLHTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的...

2018-03-28 11:02:49 5759

原创 Bootstrap 编码规范之编辑工具配置

编辑工具配置为了避免常见的代码不一致和差异，请按照下面的配置对你的代码编辑工具进行设置：用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。保存文件时，删除尾部的空白符。设置文件编码为 UTF-8。在文件结尾添加一个空白行。参照文档并将这些配置信息添加到项目的 .editorconfig 文件中。如，Bootstrap 中的 .editorconfig 实例。版权声明：本文出自歪...

2018-03-19 09:41:59 399

原创 Bootstrap CSS编码规范之代码组织规范

代码组织应该按照以下规范组织代码：以组件为单位组织代码段。制定一致的注释规范。使用一致的空白符将代码分隔成块，这样利于扫描较大的文档。如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动。/* * Component section heading*/.element { ... }/* * Component section heading * * S...

2018-03-19 09:40:55 411

原创 Bootstrap CSS编码规范之选择器使用规范

选择器选择器应该遵守以下规范：对于通用元素使用 class ，这样利于渲染性能的优化。对于经常出现的组件，避免使用属性选择器（如，[class^="..."]）。浏览器的性能会受到这些因素的影响。选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 个。只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（如，不使用带前缀的 class 时 -- 前缀类似于命...

2018-03-19 09:40:05 354

原创 Bootstrap CSS 编码规范之Class 命名规范

Class 命名规范Class 应该遵守以下命名规范：class 名称中只能出现小写字符和破折号（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（如，.btn 和 .btn-danger）。避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。class 名称应当尽可能短，并且意义明确。使用有意义的名称。使用有组织的或目的明确的名...

2018-03-19 09:38:50 2354 1

原创 Bootstrap CSS 编码规范之注释

注释代码是由人编写并维护的。请确保你的代码能够自描述、注释良好，且易于他人理解。好的代码注释能够传达上下文关系和代码意图。不要简单地重复组件或 class 的名称。对于较长的注释，务必书写完整的句子；对于一般性注解，可以书写简洁的短语。/* Bad example *//* Modal header */.modal-header { ...}/* Good example *//* Wrapp...

2018-03-18 21:29:28 926

原创 Bootstrap CSS 编码规范之Less 和 Sass 中的操作符

2018-03-18 21:27:45 402

原创 Bootstrap CSS 编码规范之Less 和 Sass 中的嵌套

Less 和 Sass 中的嵌套避免不必要的嵌套。这是因为虽然你可以使用嵌套，但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内（也就是后代选择器），并且存在多个需要嵌套的元素的时候，才使用嵌套。// Without nesting.table > thead > tr > th { … }.table > thead > tr > td { … }//...

2018-03-18 21:26:59 530

原创 Bootstrap CSS 编码规范之简写形式的属性声明

简写形式的属性声明在需要显式地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况如下：paddingmarginfontbackgroundborderborder-radius大部分情况下，我们不需要为简写形式的属性指定所有的值。如，HTML 的 heading 元素只需要设置上、下边距（margin）的值。因此，在必要的时候，只需覆盖这两个值就可以。过度使用简...

2018-03-18 21:26:07 540

原创 Bootstrap CSS 编码规范之单行规则声明

单行规则声明对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。这样做的关键因素是为了错误检测。如，CSS 校验器指出在 183 行有语法错误。如果是单行单条声明，你就不会忽略这个错误；如果是单行多条声明的话，你就要仔细分析避免漏掉错误了。/* Single declarations on one line */.span1 {...

2018-03-18 21:25:06 386

原创 Bootstrap CSS 编码规范之带前缀的属性

2018-03-18 21:24:10 833

原创 Bootstrap CSS 编码规范之媒体查询的位置

媒体查询的位置遵守就近原则，将媒体查询放在相关规则的附近，不要将他们打包放在一个单一样式文件中，或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例：.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) { .element { ...} ....

2018-03-18 21:23:20 680

原创 Bootstrap CSS 编码规范之不要使用 @import

不要使用 @import与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。有以下几种替代方案：使用多个 <link> 元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能<!-- Use link e...

2018-03-18 21:22:21 784

原创 Bootstrap CSS 编码规范之属性声明顺序

声明顺序相关的属性声明应当归为一组，并按照下面的顺序排列：PositioningBox modelTypographicVisual由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。.decl...

2018-03-18 21:21:28 386

原创 Bootstrap CSS 编程规范之语法规范

语法规范CSS语法规范：用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致表现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是...

2018-03-18 21:20:10 664

原创 Bootstrap HTML 编码规范之JavaScript生成的标签

2018-03-16 10:11:28 261

原创 Bootstrap HTML编码规范之减少标签的数量

减少标签的数量编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。请看下面的案例：<span class="avatar"> <img src="..."></span><img class="avatar

2018-03-16 10:10:17 330

原创 Bootstrap HTML 编码规范之布尔型属性

布尔型属性XHTML 规范要求为布尔型属性赋值，到了HTML5，一切化繁为简。HTML5 规范规定：元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。因此，在声明布尔型属性时，不用赋值。实例：<input type="text" disabled><input type="checkbox" value="1" checked><select&g..

2018-03-16 10:09:21 420

原创 Bootstrap HTML编码规范之属性顺序

属性顺序为了确保代码的易读性，HTML 属性应当按照以下顺序依次排列：classid, namedata-*src, for, type, href, valuetitle, altrole, aria-*class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。<a class="..." id="..." data-...

2018-03-16 10:08:29 622

原创 Bootstrap HTML 编码规范之实用为王

2018-03-16 10:07:34 251

原创 Bootstrap HTML编码规范之引入 CSS 和 JavaScript 文件

引入 CSS 和 JavaScript 文件根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。实例：<link rel="stylesheet" href="code-guide.css"><!...

2018-03-16 10:06:46 590