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>