WEB前端开发工程师之HTML5标签笔记
<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 可以更好的使用其他浏览器