WEB前端开发工程师之HTML5标签笔记

07. September 2016 笔记 0

<input list=”lijian” autocoplete=”on”> //输入框下拉选择候选项,自动补齐候选项内容

</datalist>

figure元素表示网页中独立的一部分，移除之后不会对网页产生影响。figcaption必须在figure之后，唯一存在。

cite 引用，效果为文字斜体显示

<ol start="5" reversed> 序号从五开始倒叙，可以为负值

progress 和meter可以显示进度条

mark 着重显示

<details id="detail"> 显示小三角号，点击咱开关闭，布尔属性Open属性，展开和关闭下面详细信息。
    <summary>速度与激情</summary>
    <h1>111</h1>
    <h2>222</h2>
</details>

<input pattern="[A-Z]{3}" name="part">  pattern可以直接加入正则表达式，简直吊炸天

属性选择器 [title]{color:red} [title=te]{color:red}

function drawImage() { //图片加载完毕开始绘制
    var img = new Image();
    img.src="1.jpg";
    img.onload=function () {
        content.drawImage(img,0,0);
    }   
}

content.fillStyle="red";设置绘制属性
content.rotate(45);选择度数
content.translate(200,200);移动

document.body.innerHTML = "<canvas id=\"mycanvas\" width=\"800rem\" height='800px'></canvas>";
此方法可以直接向HTML页面中添加元素。很牛逼呢

content.beginPath();
content.closePath(); 开始绘制和关闭一起使用，缺乏关闭绘制路径，会重复绘制以上图像。

background-position:right 包含了两个属性，为right和center，正常据右显示可为background-position：right top;

background-attament:fixed 固定图片位置，不跟随滚动条滚动

background-size 调整背景图片大小

background-origin: padding-box|border-box|content-box; 背景图片位置

background-clip: border-box|padding-box|content-box; 背景图片剪裁

text-indent 首行缩进

text-transform 控制字母的大小写

@font-face{

font-family:

src:url()

} 自定义字体，下面可以直接引用。

超链接顺序 link,visited,hover,active

class 先加载样式，再去找结构内容，

Id是先加载结构内容，在加载样式。

list-style-position:inside|outside

border-collapse:collapse 表格折叠边框，有双边框变成单边框。

outline Css轮廓，突出文字，属性有outline-width,outline-color,out-style 和border用法差不多。

position:relevate,absolute,fixed,static ,static 偏移量和z-index都不起作用。

flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;

justify-content: center;主轴对齐方式;
align-items: center;侧轴对齐方式;
align-content: center;侧轴有空白时，对其方式;
order 控制弹性容器里子元素的顺序;

flex-grow: 1; 设置弹性子元素的扩赞比例;
flex-shrink: 1;设置弹性子元素的收缩比例;
flex-basis: 100%; 设置弹性子元素伸缩前的默认大小值,相当于width和height
flex 是 flex-grow,flex-shrink,flex-basis 集合;
align-self: auto;允许独立的弹性子元素覆盖弹性容器的默认对齐设置.

column-count: 4; //列数
column-gap: 20px; 列与列之间间隙
list-style-type: none;
column-rule: 10px dashed red; 边框

<picture>
    <source media="(max-width:480px)" srcset="img/1.jpg">
    <source media="(max-width:600px)" srcset="img/2.jpg">
    <source media="(max-width:800px)" srcset="img/3.jpg"  >
    <img src="4.jpg" alt="">
</picture>//根据不同屏幕尺寸，加载不同图片。
使用picturefill.js 可以更好的使用其他浏览器

Leave a Reply Cancel reply