html自定义组件（自定义html代码块）

今天给各位分享html自定义组件的知识，其中也会对自定义html代码块进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、wp如何创建自定义html模块
• 2、组件name属性对应的值和html原生标签重名后,浏览器控制
• 3、HTML页面中怎么自定义标签
• 4、如何设置HTML自定义属性
• 5、html里怎么制作自定义控件
• 6、如何创建自定义的HTML元素

wp如何创建自定义html模块

1、找到wordpress在服务器上的安装目录

2、将自己的html文件保存至index.php所在文件夹

3、此时可通过域名加文件访问

4、wordpress外观-自定义链接添加目录，即可访问成功。

组件name属性对应的值和html原生标签重名后,浏览器控制

修改名称即可。

在home组件中引用我们自定义的组件header，由于html中已经存在header标签了，所以当你在home组件中再使用自定义的组件，vue就会默认为你写的是html标签，这样的话，你自定义的组件header就不会显示出来了。将自定义的组件名字改成myheader或者与html标签页不重复的就可以了，修改一下名称就可以了。

name通常为我们组件的名称（name属性值），我们在后台接收时可以通过这个名称来获取到它所对应的值。

HTML页面中怎么自定义标签

xml文件中可以自由的使用自定义标签，html文件中同样可以使用自定义标签，但有几个注意事项：

必需设置html标签的xmlns属性。例如，可以这样声明：html xmlns:article。

这是因为html文件有一个默认的“名字空间”，div,p等标签就处在这个默认的“名字空间”中.

很显然，这个默认的“名字空间”中并不包含我们的“自定义标签”，因此我们只能自己定义一个“名字空间”，让“自定义标签”处在这个自定义的“名字空间”中.

经过我的尝试，自定义名字空间不可以使用中文。例如，这样声明：html xmlns:名字空间是错误的

在使用自定义标签时，应该使用namespace:自定义标签这样的形式，不能写成自定义标签这样的形式。

也就是说，自定义标签的名称前一定要指明它所在的“名字空间”

自定义标签的样式，既可以在style标签中设定，也可以在使用时设定它的style属性（内联式设定）。

如何设置HTML自定义属性

首先在HTML元素中添加自定义属性，通过JavaScript进行访问，如果之前有尝试过，会发现，容易忽略标记验证，而HTML5可以为提供在有效的网页内创建并使用自己的元素属性的功能。

一，创建HTML5文件：

如果还没想好要使用哪一个，可以复制下面的代码：

在body中设置自定义元素，在head部分脚本区域利用JavaScript元素进行访问。

二，创建元素：

首先，添加一些简单的内容和自定义属性以及ID等元素，以便能够识别JavaScript示例。

正如所看到的那样，自定义属性的形式为：“data-*”，在“data-”部分设定名称或者选定的名称。在HTML5中使用自定义属性，这是唯一有效的方法。因此，如果想验证网页是否有效可才采用这种方法。

自定义属性允许以一种特殊的方式利用页面内的JavaScript代码来设置元素，例如，动画显示功能。如果没有标准的HTML元素，我们建议使用自定义属性。

三，添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件，前提是将下面的代码添加到页面中：

四，获取属性：

在JavaScript中访问属性最常用的方法是使用“getAttributes”，这也是要做的第一步。在页面的head脚本区域添加以下函数：

这里，为示例增加了alert 值，当然也可以根据自身需求在脚本中添加。

五，获取数据：

可以使用元素数据集来替代DOM “getAttributes”，这或许更有效，尤其是在某种情况下，代码通过多种属性进行迭代，然而，浏览器对数据集的支持依然非常低，所以牢记这一点，此代码与//后面的方法一样可执行相同的进程。

从属性名称开始在数据集中删除“data-”，它仍然包含在HTML中。

请注意，如果你的自定义属性名称中有一个连字符，当通过数据访问时这会呈现出camel-case形式，即（“data-product-category” 变成“productCategory”)。

六，其他模块、函数

我们已经获取该属性，脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。

html里怎么制作自定义控件

我想很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题，如：给A标签加上title属性过后，浏览的时候，却神奇般地发现title属性没有了。再次切换html源代码的时候，返现编辑器将title属性给删掉了。追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制。

一、如何控制kindeditor编辑器不过滤任何标签？

二、如何设置Kindeditor编辑器只保留某些标签和属性？

面对这样一个问题，我们可以通过设置其htmlTags属性来得以实现。htmlTags指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，开始的属性表示style属性。

定义每个标签的保留属性，记住形如这样的类型font-size'主要是表示其属于标签内的style属性内的样式。形如’src'这一类的，就表示标签的直接属性。

综上所述，通过以上两种方式即可实现kindeditor编辑器的标签和属性过滤效果。

如何创建自定义的HTML元素

创建自定义的HTML元素

document.registerElement() 函数用来创建自定义的HTML元素。它将返回一个构造函数，其中有一个参数选项，用来声明自定义HTML元素的名称，另外有一个可选参数项，用来描述原型的对象，自定义功能的元素。

在下面的示例中，简单的创建了一个新的HTML元素 x-treehouse ，并且将它放入到页面中：

var XTreehouseElement = document.registerElement('x-treehouse');

document.body.appendChild(new XTreehouseElement());

下面的HTML就会插入 body 元素内：

x-treehouse/x-treehouse

自定义元素的名称 必须使用连字符 - ，这样浏览器就可以区分标准元素和自定义元素。这也意味着，你不会遇到一个新的HTML元素和你自己定义元素使用相同名称的问题。

给自定义元素创建JavaScript API

可以给自定义元素创建一个JavaScript API,这样自定义元素就具备一系列的方法和属性。要做到这一点，首先需要创建一个JavaScript对象。可以通过使用 Object.create() 方法。将 HTMLElement.prototype 传给这个方法，创建一个对象。这个对象和标准的HTML的方法和属性相同。

var XTreehouseProto = Object.create(HTMLElement.prototype);

可以像下面这样，在这个新对像上定义你的需要的方法：

XTreehouseProto.hello = function(){

alert('Hello!');

}

使用 Object.defineProperty() 方法给自定义元素定义一个属性。这个方法的第一个参数是需要定义属性的对象，第二个参数是需被定义或修改的属性名，第三个参数是需被定义或修改的属性的描述符。在这里你可以设置一个默认值指定属性是可写还是可读。

Object.defineProperty(XTreehouseProto, 'badges', {

value: 20,

writable : true

});

一旦给自完义元素定义好API，需要通过 document.registerElement() 来调用。使用自定义元素的名称作为第一个参数，然后给对象设置为一个名为 prototype 的属性。这个属性的值应该设置您在前面创建好的原型对象。

var XTreehouseElement = document.registerElement('x-treehouse', {

prototype: XTreehouseProto

});

一旦注册自定义元素，可以创建一个新元素，并将其添加到页面中。

var xtreehouse = new XTreehouseElement();

document.body.appendChild(xtreehouse);

可以像其他的HTML元素一样使用前面定义好的方法和属性。

xtreehouse.hello();

var badges = xtreehouse.badges;

扩展现有的元素

正如创建的自定义元素，还可以使用 registerElement() 方法来扩展现有的HTML元素的功能。比如我们可以扩展 img 元素来创建一个带变量的缩略图显示。

像之前那样先创建一个对象原型。不过这次，是从现有的HTML元素上来扩展对象原型。在这个示例中，扩展的是 HTMLImageElement 。

var ThumbImageProto = Object.create(HTMLImageElement.prototype);

接下来使用 createCallback 定义一个函数（回调函数），在创建元素时就定义了图像的 width 和 height 。

ThumbImageProto.createdCallback = function() {

this.width = '100';

this.height = '100';

};

还可以自定义自己的属性和方法：

ThumbImageProto.changeImage = function() {

this.src = 'new-image.jpg';

};

当你想扩展元素时，在 document.registerElement() 创建元素时，可以通过给对象添加 extends 属性。这个属性的属性值就是你需要扩展的元素名称。

var ThumbImage = document.registerElement('thumb-img', {

prototype: ThumbImageProto,

extends: 'img'

});

要使用自定义元素，可以给元素指定一个属性来扩展元素。这个属性的值是自定义的元素名称，可以告诉浏览器 img 使用了自定义的API： thumb-img 。

img is="thumb-img"

自定义元素回调方法

创建和管理自定义元素时有很多回调方法可使用：

createdCallback : 元素创建后调用

attachedCallback : 元素附加到文档后调用

detachedCallback : 从文档中移除元素后调用

attributeChangedCallback(attrName, oldValue, newValue) : 元素任一属性变更后调用

指定这些回调函数的原型对象，并传递给 document.registerElement() 。

var XTreehouseProto = Object.create(HTMLElement.prototype);

XTreehouseProto.createdCallback = function() {}

XTreehouseProto.attachedCallback = function() {}

XTreehouseProto.detachedCallback = function() {}

XTreehouseProto.attributeChangedCallback = function(attrName, oldValue, newValue) {}

var XTreehouse = document.registerElement('x-treehouse', { prototype: XTreehouseProto });

使用Shadow DOM创建自定义元素

自定义元素真正的威力就是如何和 Shadow DOM 一起使用。使得它很容易创建可重用的组件。

在接下来的内容中将看看如何使用Shadow DOM自定元素，来创建一个网上商店可展示的商品。这里的想法是，Web开发人员可通过添加一行HTML标签来轻松的创建产品。需要显示的产口所有信息都通过自定义的 data- 属性来完成。

x-product data-name="Product Name" data-img="image.png" data-url=""/x-product

首先基于 HTMLElement.prototype 创建一个新的原型对象。

// Create a new object based of the HTMLElement prototype

var XProductProto = Object.create(HTMLElement.prototype);

接下来，我们需要设置一个 createdCallback 函数。我们将要创建一个 img 和a 元素，用来显示产品。先把代码展示一下，再详细介绍：

// Set up the element.

XProductProto.createdCallback = function() {

// Create a Shadow Root

var shadow = this.createShadowRoot();

// Create an img element and set it's attributes.

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

img.alt = this.getAttribute('data-name');

img.src = this.getAttribute('data-img');

img.width = '150';

img.height = '150';

img.className = 'product-img';

// Add the image to the Shadow Root.

shadow.appendChild(img);

// Add an event listener to the image.

img.addEventListener('click', function(e) {

window.location = this.getAttribute('data-url');

});

// Create a link to the product.

var link = document.createElement('a');

link.innerText = this.getAttribute('data-name');

link.href = this.getAttribute('data-url');

link.className = 'product-name';

// Add the link to the Shadow Root.

shadow.appendChild(link);

};

首先创建一个新的Shadow DOM。如果你对Shadow DOM不熟悉，可以先阅读之前的文章。然后创建一个 img 元素，并设置其 alt 、 src 、 width 和 height 属性指定 x-product 元素的一些信息。

注：回调函数， this 指的是自定义元素的标记。

接下来将 img 和 a 元素添加到Shadow root下面。并设置元素的属性值从自定义元素的 data- 属性获取。

现在我们需要注册自定义元素，并且将 x-product 元素传给 document.registerElement() ，同时指定对象原型为 XProductProto :

// Register the new element.

var XProduct = document.registerElement('x-product', {

prototype: XProductProto

});

为了让项目展示更好，需要添加一些CSS代码：

x-product {

display: inline-block;

float: left;

margin: 0.5em;

border-radius: 3px;

box-shadow: 0 1px 3px rgba(0,0,0,0.3);

font-family: Helvetica, arial, sans-serif;

-webkit-font-smoothing: antialiased;

}

x-product::shadow .product-img {

cursor: pointer;

background: #FFF;

margin: 0.5em;

}

x-product::shadow .product-name {

display: block;

text-align: center;

text-decoration: none;

color: #08C;

border-top: 1px solid #EEE;

font-weight: bold;

padding: 0.75em 0;

}

为了显示产品，我们需要将 x-product 元素添加到HTML模板中。使用 data-name ， data-img 和 data-url 属性指定产品相关数据。当页面加载时，自定义元素就会通过 createCallback 来调用它们。

x-product data-name="Ruby" data-img="" data-url=""/x-product

x-product data-name="JavaScript" data-img="" data-url=""/x-product

x-product data-name="Python" data-img="" data-url=""/x-product

就是这样，你现在已经使用Shadow DOM自定义了一个元素，显示一系列的产品。

浏览器支持自定义HTML元素

Chrome 33+和Opera支持自定义元素。然而有一个强大的 polyfill 可以让其他的浏览器，比如说 Polymer 和 X-tags 。

可以使用 registerElement() 方法检测 document 对象是否被浏览器支持：

if ('registerElement' in document) {

// Supported.

} else {

// Not supported.

}

html自定义组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于自定义html代码块、html自定义组件的信息别忘了在本站进行查找喔。