前端学习11.13
1、课程中用到的开发工具
学自：http://www.cnblogs.com/best/p/6096476.html
HBuilder、IntelliJ IDEA、MySQL、NodeJS、Spring MVC、PHP、Photoshop
HBuilder：www.dcloud.com，其它（webstorm,sublime...）
MySQL：http://www.cnblogs.com/best/p/6517755.html
NodeJS：https://nodejs.org/
前端工具官网：http://www.dcloud.io/
2、案例
学习标签的应用
在HTML4.01中div被广泛用于各种布局环境在，没有明确的定义，HTML5为了SEO将div语义化了，新增加结构标签如下：
a)、section元素
表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。例：HTML5中<section>……</section>;HTML4中<div> ……</div>。
b)、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
c)、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
d)、header元素
表示页面中一个内容区块或真个页面的标题。
e)、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
f)、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
g)、nav元素
表示页面中导航链接的部分。
h)、figure元素
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如：
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常写作
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>
示例：
示例中不熟悉的语句： container：容器 header：标题 定义 section 或 page 的页眉。 section：部分 定义 section。 article：文章 定义文章。 hgroup：使用 <hgroup> 标签对网页或区段（section）的标题进行组合 main：主要的 aside：一边 定义页面内容之外的内容。 footer： 页脚 定义 section 或 page 的页脚。 nav： 导航 定义导航链接。 margin：边缘 padding：填充物 font-family：字体类型 list-style: 列表 风格 margin: 0 auto;边缘：居中显示 line-height：行高 font-weight: normal：粗细:正常 margin-bottom：边缘 底 text-indent：正文 缩进 overflow: hidden;：溢出:隐藏; clear: both;清除 两者 text-align: center;文本对齐 中心; display: inline-block：显示：内联块 margin-right：; 边缘 右边
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML案例</title> <style type="text/css"> *{ margin: 0; padding: 0; font-family: "microsoft yahei"; } ul li{ list-style: none; } #container{ width: 900px; margin: 0 auto; } header{ height: 80px; line-height: 80px; background: chartreuse; color: #FFFFFF; padding: 0 20px; } header h1{ font-size: 30px; font-weight: normal; } #main{ font-size: 14px; } #main article{ float: left; width: 70%; margin-right: 3%; } #main article hgroup{ height: 70%; } #main article p{ line-height: 22px; margin-bottom: 5px; text-indent: 26px; } #main aside{ float: left; width: 27%; } #main aside li{ height: 26px; line-height: 26px; overflow: hidden; } #main aside li a:hover{ background:orangered; color: white; } footer{ clear: both; height: 70px; line-height: 70px; background: #FF4500; color: #FFFFFF; text-align: center; } footer nav li{ display: inline-block; margin-right: 8px; } </style> </head> <body> <div id="container"> <header> <h1>header定义 section 或 page 的页眉。</h1> </header> <section id="main"> <article> <hgroup> <h2>section：部分 定义 section。</h2> <h3>article文章 定义文章。</h3> <h4>hgroup：使用 <hgroup> 标签对网页或区段（section）的标题进行组合</h4> </hgroup> <section> <p> 京东董事会今年5月份批准了针对公司董事长兼CEO刘强东的一项为期10年的薪酬计划。计划规定，10年内，刘强东每年只能领到1元现金形式底薪和零元现金形式奖金。难道刘强东就因此连杯奶茶也买不起了吗?这么想就太天真了。根据京东的股权激励计划，刘强东被授予涉及2600万股京东A级普通股的购买权，涉及股票规模约占京东总股本的0.9%，只有当每股ADS达到或超过33.4美元(相当于京东股价不低于16.7美元)时，刘强东才能将这部分股权进行套现。</p> <p> 按每股16.7美元计算，刘强东获得的这部分股权将价值4.34亿美元，相当于27.8亿人民币。在这10年内，公司不得再向刘强东授予额外股权。其实“一元年薪”不仅并非刘强东首创，甚至已经成为企业面临危机时的一种常见路数。诸多企业都采取过“一元年薪”，比如三一重工。2008年经济危机时，三一重工[微博]全体董事降薪90%，并接受高管自愿降薪申请，三一重工[微博]董事长梁稳根甚至主动申请将自己的年薪降至一元。 </p> <p>对于目前并没有表现得很困难的京东来说，中国电子商务协会研究中心专家委员唐兴通认为，“一元年薪”只是对于团队管理上的一种姿态而，并没有什么特别实际的用处。而上述股权激励计划更多的是为了稳定投资者的信心稳定投资者信心或许是为了缓解其在最新一期财务报告中持续亏损所带来的负面影响8月7日，京东发布了2015年第二季度财报。据财报显示，虽然京东第二季度交易总额为1145亿元，同比增长82%，净收入则达到459亿元，同比增长61%。</p> <p> 尽管京东业绩增长强劲，但其似乎还没有找到有效的盈利模式。在去年第二季度净亏损5.825亿元的京东，今年该季度依然净亏损5.104亿元，净利润率为-1.1%。该公司在2015年第二季度非美国通用会计准则下净亏损为1570万元人民币(约250万美元)，净利润率为-0.03%。但事情却未向着京东期望的方向发展。据资料显示，以8月5日京东收盘价34.32美元计，至8月12日，短短5个交易日，其最低价格下探至25.64美元，最大跌幅高达25.29%;按其总股本27.35亿股计，5个交易日，京东蒸发市值237亿美元，蒸发比例高达39%。</p> </section> </article> <aside> <ul> <li> <a href="zt/2015zhifu/">让红包再多飞一会——新春土豪玩转红包 霸主地位花落谁家</a> </li> <li> <a href="zt/2015taobao/">淘宝PK国家监管部门“假货“争议引发“史上最大危机”？</a> </li> <li> <a href="zt/2015expectation/">2015电子商务展望</a> </li> <li> <a href="zt/2014pandian/">2014年度中国电子商务产业链系列盘点专题 </a> </li> <li> <a href="zt/20141111/">六年历程、上市首秀：电商鏖战“双11”全程直播大型专题报道 </a> </li> <li> <a href="zt/2014shcb/">2014上半年电商上市公司财报解读</a> </li> <li> <a href="zt/wganq/">全国百家电商牵手质检机构 保障网购产品质量与安全行动计划</a> </li> <li> <a href="zt/sn818/">苏宁打响“百日会战” 电商再掀促销“风暴”</a> </li> <li> <a href="zt/dssj/">从电商平台第三方卖家奢侈品售假 揭电商假货之觞 引行业地震</a> </li> <li> <a href="zt/2014World_Cup/">足球盛宴 电商角逐“世界杯经济”</a> </li> <li> <a href="zt/jdipo/">京东启动赴美IPO 优势与挑战并存</a> </li> <li> <a href="zt/anl_al2014/">阿里巴巴集团提交IPO招股书 招股书背后的机遇与挑战</a> </li> <li> <a href="zt/jmipo/">聚美优品向美提交上市申请 招股书背后机遇与挑战并存</a> </li> <li> <a href="zt/7twlytui/">电商VS消费者 电商7天无理由退货大阅兵</a> </li> <li> <a href="zt/jdtx/">腾讯战略投资京东 国内B2C电商市场格局将迎 "寡头时代"</a> </li> <li> <a href="zt/jdo2o/">京东零售业O2O战略万家便利店ERP供应商签约仪式</a> </li> <li> <a href="zt/yhty/">聚焦"7天无理由退货" 专家解读《网络交易管理办法》、《新消法》</a> </li> <li> <a href="zt/2014lh/">聚焦2014两会——鼓励电子商务创新发展 互联网金融掀新一轮颠覆潮</a> </li> <li> <a href="zt/2014315/">倡导阳光 诚信 安全网购 迎接电商立法元年</a> </li> <li> <a href="zt/anl_wxqb/">微信红包引发移动端支付争夺战 占据高地为时尚早</a> </li> </ul> </aside> </section> <footer> <nav> <ul> <li>关于我们</li> <li>联系我们</li> <li>投稿撤稿</li> <li>友情链接</li> <li>免责声明</li> <li>人才招聘</li> <li>独家专题</li> <li>中心微信</li> </ul> </nav> </footer> </div> </body> </html>
六、作业
PC端：https://www.mi.com/index.html
移动端：https://m.mi.com
