web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现
function addMeta(name,content){//手动添加mate标签
let meta = document.createElement('meta');
meta.content=content;
meta.name=name;
document.getElementsByTagName('head')[0].appendChild(meta);
}
function addScript(src){//手动添加script标签
let script=document.createElement("script");
script.type="text/JavaScript";
script.src= src;
document.getElementsByTagName('head')[0].appendChild(script);
}
function addDiv(pid,html,attr){//动态添加元素div
attr=attr || {};
let parent = document.getElementById(pid);
let div = document.createElement("div");//添加 div
for(let i in attr){//设置 div属性
div.setAttribute(i,attr[i]);
}
div.innerHTML = html;
parent.appendChild(div);
}
addDiv("pid","<p>动态添加的div</p>",{"id":"newDiv"});//调用
function addImg(pid,src,attr){//动态添加元素img标签
attr=attr || {};
let parent = document.getElementById(pid);
let img = document.createElement("img");//添加 div
for(let i in attr){//设置 div属性
img.setAttribute(i,attr[i]);
}
img.src = src;
parent.appendChild(img);
}
前端当然要从 HTML 开始,我们来聊聊在 script 标签中加上 async/defer 时的功能及差异。我们都知道,浏览器解析 HTML 是一行一行按照顺序向后读取的,在传统的写法中,当浏览器读到 <script> 时,便会暂停解析 DOM,同时立即开始下载 <script> 中定义的资源
块级元素总是在新行上开始,高度、行高以及上下边距都可控制,宽度默认是容器的100%,除非设定宽度。行内元素和其他元素都在一行上,高、行高、以及上下边距不可变,宽度就是它的文字和图片的宽度,不可改变。
最近一个项目,多次遇到target=\\\'_self\\\', target=\\\'_blank\\\'的用法, 再次总结一下:<a>标签;<form>标签;window.open;target的所有取值以及它们的含义:
<progress> 标签表示任务的进度(进程),例:可定义完成多少工作,还有多少工作可以下载等等。该标签可与JavaScript结合使用,来显示任务的进度,创建动态的进度条。注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。
比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:
普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。
h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值
关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处
Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签
这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!