美文网首页
html + css 学习备忘(持续更新)

html + css 学习备忘(持续更新)

作者: 合肥黑 | 来源:发表于2019-01-17 10:03 被阅读15次

1.document.createElement
参考
HTML DOM createElement() 方法
document.createElement()的用法
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

        <script type="text/javascript">
            var board = document.getElementById("board");
            var e = document.createElement("input");
            e.type = "button";
            e.value = "这是测试加载的小例子";
            var object = board.appendChild(e);
        </script>

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。
oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,refChild);
</script>

效果:这个例子将在x1节点前面插入一个新的节点

2.页面加载的时候是从上往下执行的,即先执行<head>再执行<body>
javascript写在head和body里的区别
网页 head 标签中的 JS 和 CSS,哪种文件放在前面,哪种放在后面比较好

3.span和div
健康、富裕、聪颖这六个字会变成红色:

<p>早睡早起使人
<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聪颖</span>。
</p>
//相应的CSS代码如下
span.benefit {
        color:red;
    }

span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本增添视觉效果。当然,你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的,如果采用id的话,你必须为这三个span元素各自分别指定一个唯一的id。
span的使用局限在一个块元素内,而div可以被用来组织一个或多个块元素。除去这点区别,div和span在组织元素方面相差无几。

    <div id="democrats">
    <ul>
    <li>富兰克林·D·罗斯福</li>
    <li>哈利·S·杜鲁门</li>
    <li>约翰·F·肯尼迪</li>
    <li>林登·B·约翰逊</li>
    <li>吉米·卡特</li>
    <li>比尔·克林顿</li>
    </ul>
    </div>

    <div id="republicans">
    <ul>
    <li>德怀特·D·艾森豪威尔</li>
    <li>理查德·尼克松</li>
    <li>杰拉尔德·福特</li>
    <li>罗纳德·里根</li>
    <li>乔治·布什</li>
    <li>乔治·W·布什</li>
    </ul>
    </div>
//相应的CSS代码如下
    #democrats {
        background:blue;
    }

    #republicans {
        background:red;
    }

4.javascript:void(0) 含义
为什么要使用href=”javascript:void(0);”

5.style="visibility: hidden" 和 style=“display:none”区别
visibility="visible|hidden"
display 属性分别为block, inline, none
display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。
另参考display:inline-block,block,inline的区别与用法

6.style position
relative 生成相对定位的元素,相对于其正常位置进行定位。
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

7.transform-origin transform: matrix(a,b,c,d,e,f)
理解CSS3 transform中的Matrix(矩阵)

8.DIV层的五条叠加法则
DIV层的五条叠加法则
css层的定位position、absolute、relative层叠加的五条叠加法则
法则一:同辈元素定位方式相同,且无z-index设置时,html靠后者居上。

9.CSS3 pointer-events:none应用举例及扩展

10.input,output
html5中关于input用法
[原]<button>和<input type="button"> 的区别

11.button和input button的区别
参考
input type="submit" 和"button"有什么区别?
button和input button的区别

<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里,而是包含在标签中。如:<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。

你可以这样写:<button><strong>OK</strong>, I do.</button>,甚至是插入图片:<button><img src="http://jianzhong5137.blog.163.com/blog/button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">,但是显然强大多了。

end

相关文章

  • html + css 学习备忘(持续更新)

    1.document.createElement参考HTML DOM createElement() 方法docu...

  • 前端学习相关名词

    前端学习需要了解熟悉的相关名词如下:持续更新 html/html5:CSS:JavascriptEMCA5ECMA...

  • CSS学习第一天--样式

    HTML基础知识已经学习完了,接下来就学习CSS设置样式的知识了,笔记练习会持续更新。。。。 CSS样式--内联式...

  • 前端面试手册

    分别从HTML、CSS、JavaScript、综合四个方面总结,后续持续更新 HTML部分 Doctype的作用?...

  • 前端面试总结

    前端重要知识点总结,以供学习参考,持续更新,若有错,请各位大佬指点。 HTML/CSS部分 1.doctype的作...

  • laya 学习备忘(持续更新)

    1.默认的name把一个图片的name命名为mask,真的就遮罩了类似的还有list的cell中如果出现selec...

  • 前端学习心得-持续更新

    2017年6月1日 持续更新 我对前端最大的感受就是碎片化太严重了。首先,学习前端要学习三门语言,HTML,CSS...

  • 面向编程----造轮子

    Tags组件(jsbin) HTML CSS JS Dialog组件(jsbin) HTML CSS JS 持续更...

  • sublime插件和常用快捷方式

    持续更新中。。。。。。。。 一:插件 1. HTML-CSS-JS Prettify格式化工具下载方法:输入pre...

  • html+css备忘

    html: 1、label标签 css: 1、标签显示模式: block,inline, inline-block...

网友评论

      本文标题:html + css 学习备忘(持续更新)

      本文链接:https://www.haomeiwen.com/subject/tvcdtxtx.html