Web Components 标准非常重要的一个特性是，它使开发者能够将html页面的功能封装为 custom elements（自定义标签）,本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签
1. 创建自定义标签
<script>
class PopUpInfo extends HTMLElement {
constructor() {
super();
// 在此定义自定义标签 我顶一个icon和text并列的
// Create a shadow root
let shadow = this.attachShadow({
mode: ‘open‘
});
// 创建我们需要的标签
let wrapper = document.createElement('div');
let iconBox = document.createElement('div');
let textBox = document.createElement('div');
// 为标签添加样式
wrapper.setAttribute('class', 'wapper');
iconBox.setAttribute('class', 'icon');
textBox.setAttribute('class', 'text');
let text = this.getAttribute('text'); // 获取标签里面传递的值
textBox.textContent = text;
let imgUrl;
if(this.hasAttribute('img')) {
imgUrl = this.getAttribute('img');
} else {
imgUrl = 'default.png'; // 设置一个默认图片
}
var img = document.createElement('img');
img.src = imgUrl;
iconBox.appendChild(img);
// 书写样式
var style = document.createElement('style');
let lStyleStr = '.wrapper { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px;}'
lStyleStr += '.icon {margin-right: 10px; width: 50px; height: 50px;}'
lStyleStr += '.icon img { width: 100%; height: 100%;}'
lStyleStr += '.text { flex: 1; font-size: 14px; color: #333; line-height: 50px;}'
style.textContent = lStyleStr;
// 将样式和dom元素挂载到页面
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);
}
}
</script>2. 注册自定义标签
<script>
customElements.define(‘popup-info‘, PopUpInfo);
</script>3. 使用自定义标签
<body>
<popup-info img="you_picture.jpg" text="你的文字"></popup-info>
</body>Html中a标签用法总结：创建email，电话，描点链接等。以及防止链接被搜索引擎收录
a标签是我们常用的一个标签之一，这篇文章主要讲解如何使用a来创建email，电话，描点链接等。以及防止链接被搜索引擎收录。
web标签语义化的理解_web语义化是什么意思
Web语义化，使用语义恰当的标签，可以让页面具有良好的结构，页面元素具有良好的含义，从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容
HTML中<base>标签的正确使用
<base> 标签必须位于 <head> 元素内部，在一个文档中，最多能使用一个 <base> 标签，使用了<base>标签的链接后，其他链接必须在<base>标签的链接里面，不然将无法找到。
使用Map标签指定点击区域时的兼容性问题
因为map标签用的较少，而常用的label标签中的for属性，是不需要加#的，加上了反而会有错。当然，label和map中的用法也不同，不论如何，引以为戒
html 标签优化_如何优化网站HTML标签代码优化
如何优化网站HTML标签代码优化？选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等
js动态添加html标签和属性_手动插入meta、script、div、img等标签
web网页是由 html标签一层层组成的，js也可以动态添加对应的标签，比如mate标签、script标签、div标签、img标签等，动态创建的方法基本都差不多，下面将简单介绍下如何实现
head里两个重要标签base和meta
<base>我们并不常用的一个标签，但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签，分为3类：具有charset属性的meta 、带有http-equiv 属性的 meta
JSTL学习总结
在mvnrepository中，直接搜索jstl，，找到下载量最高的，下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展，使用需导jar包
<script>标签的属性
src定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。
10 个不常用但你有必要知道的 html 标签
HTML 也被称为超文本记语言（ hyper text markup language ）是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息，如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!