Html5与Css3知识点拾遗（三）

文本

small：包括免责申明、注意事项、法律限制、版权信息，只适用于短于，常包含在页面级的footer里
H5对i和b的重新定义
b：提醒文字。不传达任何额外的语气。文档摘要关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语
（默认为粗体）
i：具有不同语态或预期。分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称
（默认为斜体）

创建图

figure
figcaption
figure元素包含多个内容块。不管figure里有多少内容，只允许有一个figcaption

<figure>
<figcaption>01图</figcaption>
<img src="01.jpg"/>
</figure>

浏览器在默认情况下会为figure添加40px的宽的左右外边距

收缩和展开

details
summary

<script>
function detail_onclick(detail){
var p=document.getElementById("pid");
if(detail.open){
 p.style.visibility="hidden";
 }else{
 p.style.visibility="visible";
 }
 }
</script>

<details id="detail" onclick="etail_onclick(this)">
<summary>速度与激情</summary>
<p id="pid" style="visibility:hidden">是一个商业大片</p>
</details>

指明引用或参考

cite：指明对某内容源的应用或参考。戏剧、脚本或图书标题，歌曲、电影、照片或雕塑，演唱会或音乐会，规范、报纸或法律文件.

引述文本

blockquote：单独存在的引述，一般是长引用
q：短引述。属性lang=“xx”表示页面语言
都可使用可选属性url=“”，提供引述内容来源

指定时间与微格式

time：可选的属性datetime
只显示time的内容，不显示datetime的内容；datetime为机器识别，前提是合法的日期和时间格式
不能嵌套，也不能在没有datetime属性的time元素包含其他元素
（有效的时间格式：YYYY-MM-DDThh：mm：ss）
（世界时UTC格式：YYYY-MM-DDThh：mm：ssZ）

<time datetime="2017-6-30">July 6,2017</time>       //显示July 6,2017
<time datetime="2017-6-30T20:00">July 6,2017</time>
<time datetime="2017-6-30T20:00Z">July 6,2017</time> //UTC标准时间
<time datetime="2017-6-30T20:00+9:00">July 6,2017</time> //时差

pubdate属性：布尔型

<article>
<header>
<h1>Apple</h1>
<p>发布日期
<time datetime="2017-6-30" pubdate="pubdate">July 6,2017</time>
</p>
<p>过期日期
<time datetime="2017-7-30" >July 7,2017</time>
</p>
</header>
</article>

解释缩写词

abbr：属性tltle=“expansion”，expansion是缩写词的全称
Firefox会显示虚下划线，其他浏览器通过abbr[title]{border-bottom:1px dotted #000;}

<abbr title="National Football League">NFL</abbr>

定义术语

dfn：包围要定义的属于，不用包围定义。dfn元素必须与定义挨在一起。
可以在适当情况下抱住其他元素，如abbr

<p><dfn>pleonasm</dfn>means "a redundant word or expression"</p>
<p>A <dfn><abbr title="Junior">Jr.</abbr></dfn>is a son with the same full name as his father</p>

创建上标和下标

会扰乱行间距，可以用normalize.css调整

添加作者联系信息

address:用于在文档中呈现联系信息，包括作者或文档维护者名字、网站链接、电子邮箱、真实地址、电话号码

<address>
<a href="#">地址</a>
<a href="#">联系方式</a>
</address>
<footer>
<div>
<address>
<a href="#">地址</a>
</address>
<time datetime="2017-07-07">2017-07-07</time>
</div>
</footer>

标注编辑和不再准确的文本

del：标记以删除的内容，表现删除线
ins：代表添加的内容，表现下划线
s：标记不再准确不再相关的文本，表现删除线
都支持cite（提供一个URL）和datetime（提供编辑时间）属性

标记代码

code：表示代码或文件名，显示等宽
kbd：标记用户输入指示，显示等宽
samp：指示程序或系统的示例输出，显示等宽
var：表示变量或占位符的值，显示斜体

突出高亮显示文本

mark：默认加上黄色背景，也可以制定简单样式

<p>这是一个<mark>mark</mark>元素</p>
<mark>.greenText</mark>{
    color:green;
}

创建span

属性class、dir、id、lang、title

其他元素

u：为文本添加下划线，用于非文本注解
wbr：不会前置换行，而是让浏览器根据需要进行换行
ruby：旁注，（日文和中文）表现生僻字的发音
子表记：rt、rp
bdi和bdo：将dir属性设置为ltr（由左至右），rtl（由右至左）
meter：表示分数的值或已知范围的测量结果，会显示进度条；title表示鼠标悬停的提示。
属性value：必须写的值
属性min、max：默认为0和1.0
属性low、high、optimum：低、中、高

<p>Miles walked during harf-marathon:<meter min="0" max="100" value="40" title="Miles"></meter></p>

progress:当前任务完成情况

/*简单的进度条*/
<script>
function btn(){
var i=0;

function thead_one(){
if(i<=100){
 i++;
 updateprogress(i);
 }
 }
 setInterval(thead_one,100);
 }
function updateprogress(newVlaue){
var progressBar=document.getElementById("pgid");
 progressBar.value=newValue;
 progressBar.getElementByTagName("span")[0].textContent=newValue;
 }
</script>
<section>
<h2>progress元素</h2>
<p>完成进度<progress style="background-color:#e8e8e8e" id="pgid" max="100"><span>0</span>%</progress></p>
<input type="buttom" onclick="" value="点击">
</section>

秒客网