cms网站内容如何自定义(什么是HTML代码？HTML组件的基础知识：自定义元素（custom）)

　　cms网站内容如何自定义(什么是HTML代码？HTML组件的基础知识：自定义元素（custom）)

　　组件是Web开发的方向。现在的热点是 JavaScript 组件，但未来 HTML 组件可能更有前景。

　　本文介绍了 HTML 组件的基础知识：自定义元素。

　　

　　文章 最后还有一个（包括React Native），欢迎关注。

　　一、浏览器处理

　　我们通常使用标准的 HTML 元素。

　　

<p>Hello World

</p>

　　在上面的代码中，

　　它是一个标准的 HTML 元素。

　　如果使用非标准的自定义元素会发生什么？

　　

Hello World

　　在上面的代码中，它是一个非标准元素，浏览器无法识别。运行这段代码的结果是浏览器照常显示Hello World，说明浏览器没有过滤这个元素。

　　

　　现在，设置自定义元素的样式。

　　

greeting {

display: block;

font-size: 36px;

color: red;

}

　　操作结果如下。

　　

　　接下来，使用脚本来操作这个元素。

　　

function customTag(tagName, fn){

Array

.from(document.getElementsByTagName(tagName))

.forEach(fn);

}

function greetingHandler(element) {

element.innerHTML = '你好，世界';

}

customTag('greeting', greetingHandler);

　　操作结果如下。

　　

　　这表明浏览器将自定义元素视为标准元素，只是没有默认样式和行为。这个处理方法是写出来的。

　　“用户代理必须将他们不理解的元素和属性视为语义中立；将它们留在 DOM（对于 DOM 处理器）中，并根据 CSS（对于 CSS 处理器）对它们进行样式设置，但不能从中推断出任何含义。”

　　上一段的意思是浏览器必须在DOM中保留自定义元素，但它没有任何语义。此外，自定义元素与标准元素一致。

　　实际上，浏览器提供了一个 HTMLUnknownElement 对象，所有自定义元素都是这个对象的实例。

　　

var tabs = document.createElement('tabs');

tabs instanceof HTMLUnknownElement // true

tabs instanceof HTMLElement // true

　　在上面的代码中，tabs 是一个自定义元素，同时继承了 HTMLUnknownElement 和 HTMLElement 接口。

　　二、HTML 导入

　　使用自定义元素，您可以编写具有非常好的语义的 HTML 代码。

　　

微博

微信

　　上面的代码可以一目了然地看到语义。

　　如果将该元素的样式和脚本封装在一个 HTML 文件 share-buttons.html 中，则该元素可以重复使用。

　　使用的时候先介绍一下share-buttons.html。

　　然后，它可以在网页中使用。

　　

Title

... ...

　　HTML导入的更多用法请参考教程（1，2）。目前只有Chrome浏览器支持这种语法。

　　三、自定义元素标准

　　HTML5 标准规定自定义元素是合法的。然后，W3C 开发了一个单独的自定义元素。

　　它与其他三个标准——HTML 导入、HTML 模板、Shadow DOM——统称为规范。目前，该规范仅适用于 Chrome 浏览器。

　　

　　自定义元素标准对自定义元素的名称施加了限制。

　　“自定义元素的名称必须收录破折号 (-)，因此是正确的名称，总和不正确。此限制允许 HTML 解析器区分哪些是标准元素，哪些是自定义元素。”

　　

　　请注意，一旦在名称中使用破折号，自定义元素就不是 HTMLUnknownElement 的实例。

　　

var xTabs = document.createElement('x-tabs');

xTabs instanceof HTMLUnknownElement // false

xTabs instanceof HTMLElement // true

　　自定义元素标准规定自定义元素的定义可以使用 ES6。

　　

// 定义一个

class MyElement extends HTMLElement {...}

window.customElements.define('my-element', MyElement);

　　上面代码中使用原生window.customElements对象的define方法来定义Custom Element。该方法接受两个参数，第一个参数是自定义元素的名称，第二个参数是一个 ES6 类。

　　该类使用 get 和 set 方法来定义自定义元素的某个属性。

　　

class MyElement extends HTMLElement {

get content() {

return this.getAttribute('content');

}

set content(val) {

this.setAttribute('content', val);

}

}

　　有了这个定义，就可以插入到网页中了。

　　

Hello

　　处理脚本如下。

　　

function customTag(tagName, fn){

Array

.from(document.getElementsByTagName(tagName))

.forEach(fn);

}

function myElementHandler(element) {

element.textConent = element.content;

}

customTag('my-element', myElementHandler);

　　操作结果如下。

　　

　　ES6 Class 的好处之一是您可以轻松编写继承的类。

　　

class MyNewElement extends MyElement {

// ...

}

customElements.define('my-new-element', MyNewElement);

　　今天的教程到此结束，更多使用请参考谷歌官方教程。

　　四、参考链接

　　（正文结束）

　　================================

　　以下是培训信息。

　　自从写了《React 技术栈教程系列》以来，有两种反馈：一种是内容不完整和深入，希望有更详细的介绍，另一种是求要添加的 React Native。我对此无能为力。我精力有限，无法继续投资。我只能推荐大家阅读官方文档。

　　昨天，优达学城的一个朋友联系了我。他们与 React Training 合作，正式推出了 React 培训课程。我希望我可以帮助推广它。

　　

　　我当时很兴奋，因为 React Training 是美国最专业的 React 培训机构，水平非常高。React 社区有几位讲师非常有名，React Router、unpkg 和 mustache.js 都是他们的作品。我相信在中国很难找到这种水平的老师和课程。

　　

　　事实上，此事在美国也备受关注，Techcrunch 对此进行了报道。

　　

　　整个课程与美国完全同步。它总共持续4个月，分为三个阶段。

　　

　　课程内容涉及整个React技术栈，PC端和移动端并重。学习后，您可以获得纳米*敏*感*词*书。

　　课程价格为RMB 3399。注意本课程不是零基础，要求学习者已经掌握了JavaScript的基本语法，所以有注册复习链接。

　　

　　想学习React/React Native的可以考虑。点击这里了解更多。注册将于 6 月 27 日结束。

　　（超过）