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

07. September 2016 笔记 0

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

<datalist id=”lijian” style=”display:none” >

<option></option>

</datalist>

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

small 标签放在正文内容之外,用户法律声明,注意事项以及版权声明

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

Your email address will not be published. Required fields are marked *