文本

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>

Html5与Css3知识点拾遗(三)的更多相关文章

  1. Html5与Css3知识点拾遗(二)

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗(八)

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗(六)

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  4. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  5. Html5与Css3知识点拾遗(五)

    css3更新的颜色 RGBA:红.绿.蓝.不透明度 rgba(89,0,127,0.4); HSL和HSLA:色相.饱和度.亮度.不透明度 hsl(282,100%,25%); hsl(282,100 ...

  6. Html5与Css3知识点拾遗(九)

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  7. Html5与Css3知识点拾遗(四)

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  8. Html5与Css3知识点拾遗(一)

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. Flask-在Flask中跨请求传递数据资源

    利用 Flask的底层Werkzeug是有缓存支持的,不用使用redis等第三方. 原文地址如下: https://blog.csdn.net/yannanxiu/article/details/52 ...

  2. 【Selenium】各种方式在选择的时候应该怎么选择

    最后再总结一下,各种方式在选择的时候应该怎么选择: 1. 当页面元素有id属性时,最好尽量用id来定位.但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法. ...

  3. 203. 阿里jetcache

    [视频&交流平台] àSpringBoot视频:http://t.cn/R3QepWG à SpringCloud视频:http://t.cn/R3QeRZc à Spring Boot源码: ...

  4. leetcode33

    class Solution { public: int search(vector<int>& nums, int target) { //这个题是给一个排序数组,但是数组里面内 ...

  5. Sql Server数据库之事务,视图,索引

    一.事务的定义 事务是一种机制,包含一组操作指令,并将所有的命令作为一个整体一起向系统提交或撤销操作请求(要么都执行,要么都不执行) 二.事务的分类 显式事务:用Begin TRANSCATION开始 ...

  6. week06 12 后端utils cloudAMQP_client.py 安装pika

    我们回到后端 pika是专门处理RabitAMQP的包 或者你可以直接一步到位 我们不能一直让我们的网络爬虫一直爬信息 一是网络消耗很大(cpu) 二是容易被网站发现被禁ip self.connect ...

  7. cacti监控服务器

    1.Cacti基本概念详解 Cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户 ...

  8. centos下通过pid查看进程的绝对路径的方法

    例如: 我想要知道我执行中的mysql路径 netstat -nlp pid拿到15330,然后 cd /proc/15330 由于linux在启动一个进程时,会在/proc下创建一个以PID命名的文 ...

  9. Jenkins之定时任务

    H的用法: H 10 * * *  ,这里H不是小时的意思,符号H(代表“Hash”,后面用“散列”代替) 符号H 在一定范围内可被认为是一个随机值,但实际上它是任务名称的一个散列而不是随机函数,每个 ...

  10. Springboot学习05-自定义错误页面完整分析

    Springboot学习06-自定义错误页面完整分析 前言 接着上一篇博客,继续分析Springboot错误页面问题 正文 1-自定义浏览器错误页面(只要将自己的错误页面放在指定的路径下即可) 1-1 ...