分类目录归档:前端技术

HTML5新增文档结构元素

1.  简介:

相比HTML4在HTML5中有一个比较重大的变化就是新增了很多新的结构元素,例如article、section、aside、nav、header等。

这些元素和div的元素有类似的功能,但是具有更强的语义表示。
总结一句话就是:“见其名知其意”。

2.  为什么要引入语义元素呢?

在这里很多朋友就会产生疑问了,这些新语义元素既然和div的元素具有类似的功能为什么还要引入这些语义元素呢?
以上面这案例为例进行比较:

20200229141513339

20200229142732211

3.  新增语义标签简介:

20200229213000949

区块标签:article、section、nav、aside、header、footer、figure、figcaption、main
内联标签:time、i、b、em、stromg

  • article ———-定义文章
  • section——— 定义页眉:一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)
  • nav —————定义导航:表示页面的导航,可以通过导航连接到网站的其他页面,或当前页面的其他部分
  • aside————–定义文章的侧边栏:包含的内容不是页面的主要内容,具有独特性,是对页面的补充
  • header ———–定义页眉:一般放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题、简介等信息
  • footer ————-定义页脚:一般被放置在页面的底部,或者页面中某个区块元素的底部
  • figure ————–标签规定独立的流内容(图像、图表、照片、代码等等)
  • figcaption ——–figure的子元素 用于对figure的内容 进行说明
  • main —————-显示页面的主题内容,每个页面只能包含一个main标签,main标签中不包含网站标题、logo、主导航、版权声明等信息

4. 新增语义标签的使用:

使用article的例子:

  • 一篇博客
  • 一个论坛帖子
  • 一篇新闻报道
  • 一个用户评论
  • 20200229214753623

header标签的使用:

一篇文档中可以包含多于一个的header标签
header标签不一定非要显示在页面的上方,它的内容决定这里需要使用header标签,位置并不重要
可以为body、article、section、aside、添加header元素

20200229214944992
footer标签的使用:

20200229215057875

nav标签的使用:

20200229215134583

aside标签的使用:

  • 页面测边栏
  • 广告
  • 友情链接
  • 文章引语(内容摘要)
  • 20200229215220680

section标签的使用:

20200229215303754

main标签的使用:

20200229215430743
五、案例实现:

20200229220502771

HTML5+CSS代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<title>测试</title>
<meta charset="UTF-8">
<style type="text/css">
body{
width: 80%;
background-color: white;
margin: 0 auto;
text-align: center;
font-size: 40px;
color: white;
}
header{
width: 100%;
height: 100px;
background-color: #009dda;
}
nav{
width: 19%;
height: 300px;
background-color: #90c840;
float: left;
}
section{
width: 60%;
height: 300px;
background-color: #dbdb00;
float: left;
margin-left: 1%;
}
aside{
width: 19%;
height: 300px;
background-color: #ec1f85;
margin-left: 81%;
}
footer{
width: 100%;
height: 80px;
background-color: limegreen;
}
section>header{
height: 60px;
background-color: lime;
width: 80%;
margin: 0 auto;
}
section>article{
height: 60px;
background-color: mediumvioletred;
width: 80%;
margin: 0 auto;
}
section>footer{
height: 60px;
background-color: lavender;
width: 80%;
margin: 0 auto;
}
section>header,
section>article,
section>footer,
header,
nav,
section,
section,
aside,
footer{
margin-top: 10px;
}
</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>section
<header>header</header>
<article>article</article>
<footer>footer</footer>
</section>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html>

HBuilder快捷键以及快速生成代码行

HBuilderX快捷键

HBuilderX快捷键

快速生成代码行

1.在body内输入div.abc按下tab键

效果:<div class=”abc”></div>

2.在body内输入div#abc按下tab键

效果:<div id=”abc”></div>

3.在body内输入ul>li{小花}*3按下tab键

效果:<ul>
                 <li>小花</li>
                 <li>小花</li>
                 <li>小花</li>
         </ul>

 

4.在body内输入div>a[href='#']{小花}*3按下tab键

效果:<div>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
        </div>

 

5.在body内输入select>option{$}*5按下tab键

效果:<select name=”” id=””>
                 <option value=””>1</option>
                 <option value=””>2</option>
                 <option value=””>3</option>
                 <option value=””>4</option>
                 <option value=””>5</option>
          </select>

6.在body内输入select>option[value='花香']{$}*5>a[href='#']{小花}按下tab键

效果:<select name=”” id=””>
                 <option value=”花香”>1<a href=”#”>小花</a></option>
                 <option value=”花香”>2<a href=”#”>小花</a></option>
                 <option value=”花香”>3<a href=”#”>小花</a></option>
                 <option value=”花香”>4<a href=”#”>小花</a></option>
                 <option value=”花香”>5<a href=”#”>小花</a></option>
        </select>
属性值用[ ]填充,文本内容用{ }填充,*数字:代表生成的元素个数

Markdown笔记

如果你是有一个佛(lan)系(duo)的心,但又很文(zhuang)艺(suan)的程序员,并且你对其他Markdown编辑器的使用效果感觉不是很好的话,就用Typora吧……

整理了一下学习笔记~先这二个吧~有空再写~

1.first day 2.The third day

 

 

中国首届React开发者大会大咖们的演讲~

中国首届React开发者大会于2018年08月18日在广州举办。由w3ctech、前端圈主办。本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊React。

kejun

克军
前端布道者、阿里云CSFE前端团队负责人

演讲者:克军
如何把业务逻辑这个故事讲好 – 有限状态机与React开发

开发如同拍电影,组件、框架、工具如同演员和道具,工程师就是导演,其中指导拍摄的是什么呢,演员如何出场,如何演绎喜怒哀乐,场景如何切换等等。对,是剧本。开发中什么是剧本,是PRD还是设计稿,其实都不贴切。开发中的剧本就是一个产品的业务逻辑。如何清晰准确的表达,并成为代码的一部分,或许会成为新一代的开发模式。这就是状态机在前端开发中可以发挥的作用。

Vladimir Grinenko
Yandex JavaScript developer, more than 12 years experience.

vladimir

Vitaly Harisov
Yandex JavaScript developer, more than 12 years experience.

vitaly-yandex

Vitaly Harisov
Yandex JavaScript developer, more than 12 years experience.

演讲者:Vladimir Grinenko && Vitaly Harisov
React组件开发精髓

让我们来看一看如何使 React 组件开发更具有表达性。
你将学会如何不依靠 if 语句来修改组件的行为,就像我们在 CSS 里做的那样。
你将学习到如何:
创建灵活的且拥有不同配置(甚至是不同标签)的组件,它们可以被随机组合成不同的实例(instance)
做低成本的 AB-测试 和实验
将组件转换为跨环境/平台的可复用代码

演讲者:工业聚
Functional programing in React

主要讲解 React 里的函数式编程,包含高阶组件,Functional setState,Render props,以及 Algebraic effects 和 RxJS 在 React 里的应用。
待定
演讲者:蔡斯杰
一种数据契约驱动的 React + Redux 编程方式

React + Redux 的思想是数据驱动和函数式,分享一种在特定场景下,基于数据契约的抽象方式。包括如何制定契约,如何实现 Model,划分和定义组件,如何应对变化,最后达到系统的高复用和灵活性。
待定
演讲者:郭远飞
蚂蚁金融业务的React实践

将根据原技术栈遇到的问题和挑战,以及React优势分析和大家谈谈为什么从Zepto切换到React?
通过解决React资源加载问题、React静态资源离线、引入Preact降级、业务数据状态管理和antd-mobile等方面分享React在业务研发中的最佳实践
除此之外,还将给大家分享目前React在蚂蚁集团业务的现状,以及后续在React层面(如数据化、基于JSX的多渠道部署等)的规划
待定
演讲者:黄琼
从React渲染原理看性能优化

相信很多人都用过 React ,那么大家是否遇到过海量 DOM render 卡顿的问题?
React 16 对渲染机制做了大改动,很大的提升了交互体验,背后的原理又是什么?
实践出真知,本次分享深入挖掘 React 的渲染机制,同时结合实例来解决实践中遇到的性能问题,从而写出高性能的 React 应用。
待定
演讲者:题叶
Virtual DOM 方案几个有意思的探索

Virtual DOM 是 React 核心的功能。基于 Virtual DOM 还能设计一些有意思的方案,这个分享会介绍基于 Virtual DOM 的想法在服务端等场景的一些探索。项目的代码用了 ClojureScript,会有一些来自函数式编程的思考。