HTML5页面元素及属性

来源：互联网发布：淘宝代运营公司收费编辑：程序博客网时间：2024/06/04 19:56

HTML5页面元素及属性

1.无序列表—ul元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>ul元素的使用</title></head><body><ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul></body></html>

2.有序列表—ol元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>ol元素的使用</title></head><body><ol><li>苹果</li><li>香蕉</li><li>橘子</li><li>柠檬</li></ol></body></html>

3.定义列表—dl元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>dl元素的使用</title></head><body><dl> <dt>计算机</dt>               <!--定义术语名词--> <dd>用于大型运算的机器</dd>   <!--解释和描述名词--> <dd>可以上网冲浪</dd> <dd>工作效率非常高</dd></dl></body></html>

4.对列表的嵌套的使用

<!doctype html><html><head><meta charset="utf-8"><title>列表的嵌套应用</title></head><body><h2>饮品</h2><ul><li>咖啡    <ol>                    <!--有序列表的嵌套-->        <li>拿铁</li>            <li>摩卡</li>        </ol>    </li>    <li>茶        <ul>                    <!--有序列表的嵌套-->         <li>碧螺春</li>            <li>龙井</li>        </ul>    </li></ul></body></html>

首先定义了一个包含两个列表项的无序列表，然后在第一个列表项中嵌套一个有序列表，在第二个列表项中嵌套一个无序列表，方法为在<li></li>中定义有序或无序列表。

5.header元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>header元素的使用</title></head><body><header><h1>秋天的味道</h1><h3>你想不想知道秋天的味道？它是甜、是苦、是涩...</h3></header></body></html>

6.article元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>article元素的使用</title></head><body><article><header><h2>第一章</h2></header><section><header><h2>第1节</h2></header></section><section><header><h2>第2节</h2></header></section></article><article><header><h2>第二章</h2></header></article></body></html>

7.aside元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>aside元素的使用</title></head><body><article><header><h1>标题</h1></header><section>文章主要内容</section><aside>其他相关文章</aside></article><aside>右侧菜单</aside></body></html>

定义了两个aside元素，其中第1个aside元素位于article元素中，用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。

8.section元素的使用

<!doctype html><html><head><meta charset="utf-8"><title>section元素的使用</title></head><body><article><header><h2>小张的个人介绍</h2></header><p>小张是一个好学生，是一个帅哥……</p><section><h2>评论</h2><article><h3>评论者：A</h3><p>小张真的很帅</p></article><article><h3>评论者：B</h3><p>小张是一个好学生</p></article></section></article></body></html>

header元素用来定义文章的标题，section元素用来存放对小张的评论内容，article元素用来划分section元素所定义的内容，将其分为两部分。

9.figure和figcaption元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>figure和figcaption元素的使用</title></head><body><p>信阳师范学院所在地——信阳市，位于河南省南部，东邻安徽，南接湖北，是江淮河汉间的战略要地，鄂豫皖区域性中心城市。山水秀丽，气候宜人，素有“北国江南，江南北国”之美誉，是中国著名的宜居之城、旅游之城、创业之城。学校坐落在信阳市贤山北麓、浉水之滨，西临“长淮明珠”南湾湖，南望“云中公园”鸡公山，校园四季有花，四季有绿，郁郁葱葱，高低错落，青山绿水，诗情画意，被誉为“河南省最美的校园”、“中国最美的大学之一”。</p><figure><figcaption>信阳师范学院</figcaption><p>2017欢迎你的到来</p><img src="D:\17416.jpg" alt="123"></figure></body></html>

figcaption元素用来定义文章的标题，section元素用来存放对小张的评论内容，article元素用来划分section元素所定义的内容，将其分为两部分。

10.hgroup元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>hgroup元素的使用</title></head><body><header><hgroup><h1>69小石头</h1><h2>69小石头</h2></hgroup><p>开心快乐每一天</p></header></body></html>

11.hgroup元素与figcaption结合使用

<!doctype html><html><head><meta charset="utf-8"><title>hgroup元素与figcaption元素的结合使用</title></head><body><hgroup><figcaption>《致橡树》</figcaption><p>《致橡树》是舒婷创作于1977年3月的爱情诗。是朦胧诗派的代表作之一，作为新时期文学的发轫之作，《致橡树》在文学史上的地位是不言自明的。 作者通过木棉树对橡树的“告白”，来否定世俗的，不平等的爱情观，呼唤自由，平等独立，风雨同舟的爱情观，喊出了爱情中男女平等，心心相印的口号，发出新时代女性的独立宣言，表达对爱情的憧憬与向往。</p><figcaption>《再别康桥》</figcaption><p>《再别康桥》是现代诗人徐志摩脍炙人口的诗篇，是新月派诗歌的代表作品。全诗以离别康桥时感情起伏为线索，抒发了对康桥依依惜别的深情。语言轻盈柔和，形式精巧圆熟，诗人用虚实相间的手法，描绘了一幅幅流动的画面，构成了一处处美妙的意境，细致入微地将诗人对康桥的爱恋，对往昔生活的憧憬，对眼前的无可奈何的离愁，表现得真挚、浓郁、隽永，是徐志摩诗作中的绝唱。</p><figcaption>《无怨的青春》</figcaption><p>《无怨的青春》是台湾著名女诗人席慕蓉的诗，澄明热烈，真挚动人，充满了田园式的牧歌情调和舒缓的音乐风格。她多写爱情、人生、乡愁，写得美极，淡雅剔透，抒情灵动，饱含着对生命的挚爱真情，充满着对人情、爱情、乡情的领悟。</p></hgroup></body></html>

12.details和summary元素

<!doctype html><html><head><meta charset="utf-8"><title>details和summary元素的使用</title></head><body><details><summary>显示列表</summary><ul><li>列表1</li><li>列表2</li></ul></details></body></html>

13.progress元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>progress元素的使用</title></head><body><h1>我的工作进展</h1><p><progress min="0" max="100" value="50"></progress></p></body></html>

value值设为50，max值设为100，因此进度条显示到50%

14.meter元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>meter元素的使用</title></head><body><h1>学生成绩列表</h1><p>小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br/>小明：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter><br/>小李：<meter value="75" min="0" max="100" low="60" high="80" title="75分" optimum="100">75</meter><br/></p></body></html>

15.time元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>time元素的使用</title></head><body><p>我们早上<time>9:00</time>开始上班</p><p>今年的<time datetime="2015—10—01">十一</time>我们准备去旅游</p><time datetime="2015—08—15" pubdate="true">本消息发布于2015年8月15日</time></body></html>

16.mark元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>mark元素的使用</title></head><body><h3>小苹果</h3><p>我种下一颗<mark>种子</mark>，终于长出了<mark>果实</mark>，今天是个伟大日子。摘下星星送给你，拽下月亮送给你，让太阳每天为你升起。变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜。你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃。你是我的小呀<mark>小苹果儿</mark> 怎么爱你都不嫌多。红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火。你是我的小呀<mark>小苹果儿</mark> 就像天边最美的云朵。春天又来到了花开满山坡 种下希望就会收获。</p></body></html>

17.cite元素的用法

<!doctype html><html><head><meta charset="utf-8"><title>cite元素的使用</title></head><body><p>也许愈是美丽就愈是脆弱,就像盛夏的泡沫。</p><cite>——明晓溪《泡沫之夏》</cite></body></html>

被元素cite标注的文字，以斜体的样式显示在了网页中。

18.draggable属性的应用

<!doctype html><html><head><meta charset="utf-8"><title>draggable属性的应用</title></head><body><h3>元素拖动属性</h3><article draggable="true">这些文字可以被拖动</article>可拖动的图片<img src="images/td.jpg" draggable="true"></body></html>

19.spellcheck属性的应用

<!doctype html><html><head><meta charset="utf-8"><title>spellcheck属性的应用</title></head><body><h3>输入框语法检测</h3><p>spellcheck属性值为true<br/><textarea spellcheck="true">html5</textarea></p><p>spellcheck属性值为false<br/><textarea spellcheck="false">html5</textarea></p></body></html>

20.contenteditable属性的应用

<!doctype html><html><head><meta charset="utf-8"><title>contenteditable属性的应用</title></head><body><h3>可编辑列表</h3><ul contenteditable="true"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li></ul></body></html>

21.综合案例

<!doctype html><html><head><meta charset="utf-8"><title>弄着玩</title></head><body><header>  <h2 align="center">信阳师范学院</h2>    <p align="center">        <img src="D:\images\1.png">    </p></header><nav>      <P align="center">        <img src="D:\images\2.jpg">        <img src="D:\images\3.jpg">        <!--img src="D:\images\4.jpg"-->        <img src="D:\images\5.jpg">        <img src="D:\images\6.jpg">      </P></nav><article>      <details>            <summary ><img src="D:\images\7.png"></summary>            <ul contenteditable="true" >                <li>                    <figcaption>学校简介</figcaption>                    <p><mark>信阳师范学院</mark>所在地——信阳市，位于河南省南部，东邻安徽，南接湖北，是江淮河汉间的战略要地，鄂豫皖区域性中心城市。山水秀丽，气候宜人，素有“北国江南，江南北国”之美誉，是中国著名的宜居之城、旅游之城、创业之城。学校坐落在信阳市贤山北麓、浉水之滨，西临“长淮明珠”南湾湖，南望“云中公园”鸡公山，校园四季有花，四季有绿，郁郁葱葱，高低错落，青山绿水，诗情画意，被誉为“河南省最美的校园”、“中国最美的大学之一”。</p>                    <img src="D:\images\9.png">                </li>                <li></li>                <li>                       教育教学：<meter value="65" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>                <li>                       科学研究：<meter value="90" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>                <li>                       图书文献：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>            </ul>      </details>      <details>            <summary><img src="D:\images\8.png"></summary>            <ul contenteditable="true" >                <li>                    <figcaption>计算机与信息技术学院</figcaption>                    <p>学院历来重视师资队伍建设，现有教职工50余人，其中教授7人，副高级职称18人，博士17人；有全国优秀教师1人，河南省教学名师1人，河南省科技创新人才2人，河南省教育厅学术技术带头人4人，省优秀中青年骨干教师4人，河南省教学标兵3人，校长教学质量奖获得者1人。学院高度重视教育教学质量，不断修订和完善人才培养方案，优化课程结构，规范教学管理，积极开展教学改革与研究，人才培养质量不断提高，形成了“重基础、强能力、讲质量、重实践”的办学特色。近年来，获省优秀教学成果奖5项，我院教师多次在学校组织的教师教学竞赛中获奖。《高级语言程序设计》为河南省精品课程。</p>                    <img src="D:\images\10.jpg">                </li>                <li></li>                <li>                       教育教学：<meter value="85" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>                <li>                       科学研究：<meter value="70" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>                <li>                       图书文献：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>                </li>            </ul>            <hr size="3" color="#ccc">      </details>   </article>      </body></html>

阅读全文

0 0