整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

七夕马上要到了,用HTML语言编写一个礼物,送给女朋友吧

给你女朋友一个惊喜吗?一步制作自己个性的程序送给她。下面的内容中文部分大家可以自己改成喜欢的.比如改为爱人的名字,想说什么自己写上复制这段代码:

<html><head><title>老婆我爱你</title><!--这里是标题,可以自己选择修改--><hta:application sysmenu=no scroll=no border=none>language=\"vbscript\">sub sub1me.closeend subme.resizeto 500,410 #39;这里设置窗口大小,单位为像素me.moveto 260,100 #39;这里设置窗口位置,单位为像素window.settimeout \"sub1\",100000 #39;这是设置时间,单位为毫秒,我这里设置为12秒</script><body><CENTER><FONT style=\"COLOR:#33FF00; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%\"><B>老婆我爱你</B></FONT></CENTER><hr><style type=\"text/css\">.3dfont { FILTER: glow(color=ffffff,strength=0) shadow(color=cccccc,direction:135); POSITION: relative; WIDTH: 100% } </style><table border=\"0\" width=\"100%\"><tr><td width=\"100%\" class=\"3dfont\"><font color=RED><CENTER> ☆☆☆☆☆☆ 最新通知 ☆☆☆☆☆☆</font><br><P align=left>★老婆你是世界上最漂亮的姑娘!</B><br><br>老婆我真的好爱你,真的真的好爱你!</B><br><br><MARQUEE>你的老公</body></html>

将该代码复制到新建的文本文档中(即TXT文件),同时将后缀名改为hta,双击该文件即可。

神奇吧!动起来,一起来写更生动的程序。

作背景

女朋友要我教她CSS,于是我就折腾了一周,终于完成了这篇长文…

然后,然后?然后当我发布这篇文章的时候,她会感动到哭吗?

熟悉HTML知识

HTML常见元素

head 部分

body部分

doctype的意义是什么

  • 让浏览器以标准模式渲染
  • 让浏览器知道元素的合法性

HTML、XHTML、HTML5的关系

  • HTML属于SGML(标记语言)
  • XHTML属于XML,是HTML进行XML严格化的结果
  • HTML5不属于SGML或XML,比XHTML宽松

HTML5有什么变化

  • 新的语义化元素
  • 表单增强
  • 新的API(离线、音视频、图形、实时通信、本地存储、设备能力)
  • 分类和嵌套变更

em和 i 有什么区别

  • em是语义化的标签,表强调
  • i 是纯样式的标签,表斜体
  • HTML5中 i 不推荐使用,一般用作图标

语义化的意义

  • 开发者容易理解
  • 机器容易理解(搜索、读屏、软件)
  • 有利用SEO
  • semantic microdata(语义微数据)例电影有评分

哪些元素可以自闭合

  • 表单元素 input
  • 图片 img
  • br hr
  • meta link

HTML和DOM关系

  • HTML是“死”的(字符串)
  • DOM是由HTML解析而来的,是活的
  • JS可以维护DOM

property 和 attritube 区别

  • attritube 是“死”的
  • property 是活的
  • 相互之间不会影响

form的好处

  • 直接提交表单
  • 使用 submit / reset 按钮
  • 便于浏览器保存表单
  • 第三方库可以整体取值
  • 第三方库可以进行表单验证

CSS精华(Cascading Style Sheet)层叠样式表

选择器

  • 用于适配HTML元素
  • 分类和权重
  • 解析方式和性能
  • 值得关注的选择器

选择器分类

  • 元素选择器 a{}
  • 伪元素选择器 ::before{}
  • 类元素选择器 .link{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{}
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox] + label{}
  • 否定选择器 :not(.link){}
  • 通用选择器 *{}

选择器权重(1)

  • ID选择器 #id{}+100
  • 类 属性 伪类 +10
  • 元素 伪元素 +1
  • 其它选择器 +0

例子:计算一个不进位的数字

#id.link a[href]
————————————————
计算过程:
#id +100
.link +10
a +1
[href] +0
结果:111
#id .link.active
————————————————
计算过程:
#id +100
.link +10
.active +10
结果:120

那么,我们怎么理解 不进位的数字 这关键字眼呢?用一个简单例子吧:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        #test1{
            color: red;
        }
        #test1.test1{
            color: blue;
        }
        .test2{
            color: red;
        }
        div.test2{
            color: blue;
        }
        #test3{
            color: red;
        }
        .c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{
            color: blue;
        }
    </style>
</head>
<body class="body" id="body">
    <div id="test1" class="test1">蓝色</div>
    <div class="test2">蓝色</div>
    <div id="test3" class="c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11">红色</div>
</body>
</html>

结果如下图所示:


不妨发现,最后一个 div,尽管我们类选择器有11个,加起来有110,但是依旧没有 id 选择器优先级高,正是因为这个不进位的数字,简单说:你大爷还是你大爷!

先,事情开始于一道面试题

<script>

function A(){

this.name="";

this.age=18;

}

var a1=new A();

a1.name="尼古拉斯•屌";

var a2=a1;

a2.name="blue";

console.log(a1.name); //变成blue了

var str1="尼古拉斯•屌";

var str2=str1;

str2="blue";

console.log(str1); //没变,还是尼古拉斯•屌

</script>

简单来说

a2=a1;

a2.name=xxx; //a1.name会变

str2=str1;

str2=xxx; //str1不会变


欢迎觉得废话太多的同学直接翻到最后看“技术流解释”哈,那么我们开始:

套用一句比较俗的话:“道理我都懂,可是为什么字符串就不会变呢”,JavaScript作为高级语言并没有指针的概念,但却又总被这事儿困扰,今天我就想试试让大家理解这个概念,如果要弄明白这个事情,请先来弄明白一个特别简单的事情:

假设你有女朋友叫梦琪,喜欢带黄色帽子,你帮她买了顶红色帽子,请问:梦琪带什么颜色的帽?

答:红色

假设你有女朋友叫梦琪,喜欢带黄色帽子,你直接换了个喜欢带红色帽子的女朋友,请问:梦琪带什么颜色的帽子?

答:还是黄色,没变

如果我们理解了上面这个花心萝卜和戴帽子的女朋友的问题,那么问题就变得非常简单,用代码再表示一遍:

//情况1:换帽子

你.女朋友=梦琪;

你.女朋友.帽子=红色;

console.log(梦琪.帽子); //红色

//情况2:换女朋友

你.女朋友=梦琪;

你.女朋友=安易;

console.log(梦琪.帽子); //黄色,没变

简单来说,你换女朋友了,关人家帽子啥事,对吧


为了彻底弄明白问题的步骤1/2:

让我们把这个本就混乱的关系搞得更乱一些吧[捂脸]

假设张三和李四,都找了同一个女朋友,张三给她买了一顶帽子,请问:李四的女朋友换帽子了没?

答:换了

假设张三和李四,都找了同一个女朋友,张三扛不住了,又新找了个女朋友,请问:这跟李四女朋友的帽子有关系吗?

答:有毛关系啊

上面这个混乱的关系,用程序表述出来就是:

//情况1.换帽子

张三女朋友=李四女朋友; //传说中的引用:第一次见到能把出轨说的这么清新脱俗的

张三女朋友.帽子=绿色的帽子;

console.log(李四女朋友.帽子); //变了,绿的

//情况2.跟帽子有毛关系

张三女朋友=李四女朋友;

张三女朋友=新的女朋友;

console.log(李四女朋友.帽子); //不知道什么颜色,反正没变


为了彻底弄明白问题的步骤2/2:

直接上代码了,解释见注释哈

//情况1:帽子

var 张三女朋友=new 女朋友(); //太方便了有没有

var 李四女朋友=张三女朋友; //又引用了

张三女朋友.帽子=红的;

console.log(李四女朋友.帽子); //红的,变了

//情况2:跟帽子有毛关系

var 张三女朋友=new 女朋友();

var 李四女朋友=张三女朋友;

张三女朋友=另一个;

console.log(李四女朋友.帽子); //没变,跟帽子有毛关系


所以,现在请跟随我再来重新看一遍上面的问题

//情况1

var a1=new A();

var a2=a1;

//注意:在这个时候,a1和a2就是同一个东西,引用嘛,你懂的

a2.name="blue"; //你给女朋友,买了顶新的帽子

console.log(a1.name); //她的帽子是Blue色的

//情况2

var str1="aaa";

var str2=str1;

//注意:这个时候,str1和str2也是同一个东西,也是引用

str2="blue"; //你直接换了个女朋友

console.log(str1); //你原先女朋友没啥变化

人上了年纪就会很啰嗦,直接上图多好:

情况1:a2.name="blue"

情况2:str2="blue"


==========================纯技术流分隔线==========================

1.指针:代表一个变量或属性指向谁

2.赋值:代表改变变量或属性的指向

合起来用:

a1=a2;

a2.name='blue';

//改变a2.name指向了'blue';但a1和a2依然指向同一个对象,所以:a1.name=>'blue'

str1=str2;

str2='blue';

//改变str2指向了'blue';这时str1和str2不再指向同一对象,所以:str1不变

========================end of 纯技术流分隔线==========================


结论:

1.都说人上了年纪废话就是多,看来是真的

2.另外,我一直好奇有多少人会看到文章的最后,所以想做个简单的实验。

智能社撰稿,更多知识请关注微信号zhi_neng_she