内容将从html5,css3模块安排,内容涉及html5常用标签,常用样式等
人靠衣裳马靠鞍,一看长相二看穿。
网页展现两主体,一是标签二样式。
解释:一匹🐎包含马头(耳朵,眼睛,鼻子等)、马身(主体,四肢)、马尾,配什么样的鞍其骑着的效果很不相同,而一个人各个部位画什么样的妆容,穿什么样的衣服也会体现出一个人的品位及内涵。
网页如是。
html(Hyper Text Markup Language 超文本标记语言)标签用来标记一个元素快,样式作用的最小单元。语意化标签用来标记网页的各个组织。
css(Cascading Style Sheets 层叠样式表)样式用来美化元素快,综合表现于网页,样式既可以控制大小,位置,距离,文本内容展现,多维变换,运动动画过程,也可以控制一些交互行为。
1. Html5部分
- 1.1 常见的标签
empty: area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr
block: a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video
inline: abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var
closeSelf: colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr
fillAttrs: checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected
special:wxxxcode-style,script,style,view,scroll-view,block
- 1.2 webComponent(shadowDom)
{
<user-card
image="https://semantic-ui.com/images/avatar2/large/kristy.png"
name="User Name"
email="yourmail@some-email.com"
></user-card>
<template id="userCardTemplate">
<style>
:host {
display: flex;
align-items: center;
width: 450px;
height: 180px;
background-color: #d4d4d4;
border: 1px solid #d5d5d5;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.image {
flex: 0 0 auto;
width: 160px;
height: 160px;
vertical-align: middle;
border-radius: 5px;
}
.container {
box-sizing: border-box;
padding: 20px;
height: 160px;
}
.container > .name {
font-size: 20px;
font-weight: 600;
line-height: 1;
margin: 0;
margin-bottom: 5px;
}
.container > .email {
font-size: 12px;
opacity: 0.75;
line-height: 1;
margin: 0;
margin-bottom: 15px;
}
.container > .button {
padding: 10px 25px;
font-size: 12px;
border-radius: 5px;
text-transform: uppercase;
}
</style>
<img class="image">
<div class="container">
<p class="name"></p>
<p class="email"></p>
<button class="button">Follow John</button>
</div>
</template>
class UserCard extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({ mode: 'closed' });
var templateElem = document.getElementById('userCardTemplate');
var content = templateElem.content.cloneNode(true);
content.querySelector('img').setAttribute('src', this.getAttribute('image'));
content.querySelector('.container>.name').innerText = this.getAttribute('name');
content.querySelector('.container>.email').innerText = this.getAttribute('email');
shadow.appendChild(content);
}
}
window.customElements.define('user-card', UserCard);
- 1.3 DocumentFragment
DocumentFragment 表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染的操作(reflow) ,且不会导致性能等问题
DocumentFragment 接口表示文档的一部分(或一段)。更确切地说,它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。 DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。 不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。
2. css3部分
- 2.1 css单位
长度单位包括包括:相对单位和绝对单位。
相对长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin, %
绝对长度单位包括有: cm, mm, q, in, pt, pc, px
1.px:绝对单位,页面按精确像素展示
2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font - size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
3.rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome / firefox / IE9 + 支持。
4.vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1 %。
5.vh:viewpoint height,视窗高度,1vh等于视窗高度的1 %。
6.vmin:vw和vh中较小的那个。
7.vmax:vw和vh中较大的那个。
8.%:百分比
9.in:寸
10.cm:厘米
11.mm:毫米
12.pt:point,大约1 / 72寸
13.pc:pica,大约6pt,1 / 6寸
14.ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox / chrome / safari / opera / ios safari / android browser4.4 + 等均需属性加么有前缀)
15.ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10 +, chrome31 +, safair7.1 +, opera26 +, ios safari 7.1 +, android browser4.4 + 支持) 1ch = 1个英文 = 1个数字
16.q:1/4毫米(quarter-millimeters)。绝对长度单位。 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
- 2.2 var()、calc() 用法
body{
--width : 200px;
--height : 200px;
--color : red;
--fontSize : 18px;
--bgColor : #3c3c3c;
}
body{
display: flex;
justify - content: space - around
}
div{
width: var(--width);
height: var(--height);
line - height: var(--height);
background - color: var(--bgColor);
text - align: center;
}
.div - 1{
color: var(--color);
font - size: var(--fontSize);
}
.div - 2{
color: yellow;
font - size: calc(var(--fontSize) + 4px);
}
.div - 3{
color: green;
font - size: calc(var(--fontSize) + 8px);
}
style="--sev: #0080ff;"
style="background-color: var(--sev);"