发表于: 2017-07-03 23:35:12
1 1031
一、今天完成的事:
1.熟悉任务6,查看angular基础知识;
2.整理小课堂ppt;
二、明天的计划:
1.继续任务6
三、遇到的问题:
1.暂无
四、收获:
1、angular基础知识:
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
ng-init 指令初始化应用程序数据。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-model 指令也可以:
- 为应用程序数据提供类型验证(number、email、required)。
- 为应用程序数据提供状态(invalid、dirty、touched、error)。
- 为 HTML 元素提供 CSS 类。
- 绑定 HTML 元素到 HTML 表单。
2、小课堂知识总结:
1.背景介绍
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。
在CSS 3 Generated Content工作草案中,content属性添加了更多的特征,例如:插入以及移除文档内容的能力,以创建脚注,结语,及段落注释。但是目前还没有浏览器支持content的扩展功能。
2.知识剖析
1.content属性与 :before 及 :after 伪元素配合使用生成文本内容
<code>
h1:before {
content: "添加到h1前面!";
}
h1:after {
content: "添加到h1后面!";
}
<h1>我是标题h1!</h1>
</code>
添加到h1前面!我是标题h1!添加到h1后面!
2.通过attr()将选择器对象的属性作为字符串进行显示
<code>
a:after {
content: attr(href);//当使用attr()获取标签属性名的时候,千万不要添加引号!
}
<a href="http://www.jnshu.com">此标签的href值是:</a>
</code>
此标签的href值是:http://www.jnshu.com
3.用计数器为文档添加序号
详见简书
3.常见问题
如何为不同的语言使用不同的标点符号?
4.解决方案
使用content可以使得不同的语言使用对应的一些字符。
<p lang="en"> <!--lang属性规定元素内容的语言。根据ISO 639-1语言代码 en指英语,zh指简体中文-->
Just do it.
</p>
<p lang="zh">
想做就做
</p>
</code>
<code>
/* 为不同语言指定引号的表现 */
:lang(en) {quotes:"~"" "~"";}
:lang(ch) {quotes:"“" "”";}
/* 在q标签的前后插入引号 */
p:before {content:open-quote;}
<!--添加开口引号-->
p:after {content:close-quote;}
<!--添加闭合引号-->
</code>
<a href="../demo/css-15content/css-15content-demo1.html" target="_blank">demo1</a>
5.编码实战
详见简书
6.扩展思考
content实际上很少的使用,它不可通过DOM使用,它只是纯粹的表象。
7.参考文献
详见简书
8.更多讨论
1、content是否可以添加图片?
2、content什么时候使用?
3、伪类和伪元素的区别?
评论