一。hello world<!--根标签--><html> <!--头部--> <head> <!--标题标签--> <title>中国好声音</title> <!--设置编码--> <meta charset="utf-8"> </head> <!--主要内容--> <body> <div>你好,中国好声音</div> </body> </html> 二。HTML中创建的标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常见的HTML中的标签</title></head><body> <!--标题标签--> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签</h3> <h4>我是h4标签</h4> <h5>我是h5标签</h5> <h6>我是h6标签</h6> <!--线条标签--> <hr>
<!--1.表单标签(输入框)--> <input placeholder="请输入你的名字"><br> <input value="我是默认的文字"><br> <input type="date"><br> <input type="button"><br> <input type="file"><br> <input type="color"><br> <input type="radio"><br> <input type="checkbox"><br>
<!--练习--> <form action="form_action.asp" method="get"> First name:<input type="text" name="fname" /> last name:<input type="text" name="lname" /> <input type="submit" value="Submit" /> </form>
<!--2.段落标签--> <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签 <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签 <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签 <p>我是段落标签,我是段落标签,我是段落标签,我是段落标签,我是段落标签
<!--3.图像标签--> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="这是一张图片"> <!-- 相对路径:资源在当前的项目中 ./ ..// ././ 绝对路径:资源不在当前的项目中,网络上.本地 http:/ /https:// file:// --> <img src="image/1.png" alt="记得记得记得记得" height="100" width="150">
<!--4.换行标签--> <br>
<!--5.容器地 :div , span-->
<!--6.表格:table, tr , td (现在几乎不用)-->
<!--7.列表:ul , ol , li (包括有序列表和无序列表)--> <!--无序列表--> <ul> <li>我是一个无序列表</li> <li>我是一个无序列表</li> <li>我是一个无序列表</li> <li>我是一个无序列表</li> <li>我是一个无序列表</li> </ul> <!--有序列表--> <ol type="i"> <li>我是一个有序列表</li> <li>我是一个有序列表</li> <li>我是一个有序列表</li> <li>我是一个有序列表</li> <li>我是一个有序列表</li> </ol>
<!--界面直接的调整--> <!--超链接标签(#表示跳到当前的界面(刷新))--> <a href="#">我是超链接</a><br> <a href="http://www.baidu.com" target="_blank">百度一下你就知道</a> <a href="http://www.baidu.com" target="_blank"> <img src="image/1.png" alt="记得记得记得记得" height="100" width="150"> </a>
<!--8.div标签(容器标签)--> <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div> <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div> <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div> <div>我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div> <div> <div> <p>我是容器标签</p> </div> </div>
</body></html>
三。HTML5中新增的标签
<!--HTML5新增的标签 HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签,级块性标签,行内语义性标签,交互性标签 1.结构性标签:负责Web上下文结构的定义,确保HTML文档 包括:article:文章主体内容(一篇博客,一段论坛帖子,一段用户评论,插件) header:标记头部区域的内容 footer:标记脚步区域的内容 section:区域章节表述 nav:菜单导航,链接导航
2.级块性标签:完成Web页面区域的划分,确保内容的有效分隔,(不常用) 包括:aside:注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容 figure:对多个元素组合并展示的元素,常与figcaption联合使用 code:表示一段代码块 dialog:人与人之间的对话,
3.行内语义性标签:完成Web页面具体内容的引用和表述,丰富展示的内容, 包括:meter:特定范围内的数值,如工资,数量,百分比,电池的用量 time:表示的时间(但是现在所有的游览器都不支持 ) progress:进度跳,可用做max, min,step进行控制,完成对进度跳的表示和监听 video:视屏元素,用于对视屏的播放,支持缓冲预加载和视屏媒体格式 audio:音频元素,用于音频播放,支持缓冲预加载和音频播放格式
4.交互性标签:功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础(用的不多) 包括:details:表示一段具体的内容,默认不显示,通过某种方式(单击)和legend交互才会显示 datagrid:控制客户端的数据和显示,可用于动态脚本及时更新 menu:用于交互菜单 command:用来处理命令按钮
-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>中国好声音</title></head><body> <!--文章--> <article> <!--头部--> <header> <h2>人生若只如初见</h2> <h4>何事秋风悲画扇</h4> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/12541d052e91cd0e4689dfeb0c32d266_121_121.jpg"> </header> <!--主要章节--> <section> <h3>61 个回答</h3> <p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。
作者：简叔 链接：http://www.zhihu.com/question/21151468/answer/17968032 来源：知乎 著作权归作者所有，转载请联系作者获得授权。</p> <p>年9月份，一个算不上华丽的转身，我们暂停了 EC [1] 这个项目，全面转向「简书」。简书的诞生其实非常意外，自我喜欢上 Markdown 起，我就发现，这个世界上还没有一个支持 Markdown 的笔记本产品，于是我就打算自己做一个，当时正好有个实习生刚刚加入我们团队，于是我做了第一个设计稿，就让实习生去做开发了。当时这个产品还不叫简书，我们给它起了一个自认为很好的名字，叫 Maleskine，是 Markdown 和 Moleskine 的整合。
作者：简叔 链接：http://www.zhihu.com/question/21151468/answer/17968032 来源：知乎 著作权归作者所有，转载请联系作者获得授权。</p> </section> <section> <h3>百度云官方网站——云上的日子 你我共享</h3> <p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.</p> <p>百度云是由百度公司出品的一款云服务产品,不仅为用户提供免费存储空间,还可以将视频、照片、文档、通讯录数据在移动设备和PC端之间跨平台同步、备份等,百度云还支持添加好友、创建群组,和伙伴们快乐分享, 目前已上线:Android、iPhone、iPad、百度云管家、网页端等.。</p> </section> <!--尾部--> <footer> <h3>郑科宁苦逼IT男 25 人赞同 又是软文，笔记功能不及印象笔记的百分之一，团队自问自答的演戏能力不错啊，至于美文，呵呵呵呵</h3> <p>发布于 2013-10-02 4 条评论 感谢 分享 收藏 • 没有帮助 • 举报 • 作者保留权利 </p> </footer> </article>
</body>
四。HTML5常用的标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
<meter value="60" max="100" min="0">浏览器兼容</meter><br> <progress value="30" max="100"></progress>
<!--音频--> <audio src="source/刘德华%20-%2017岁.mp3" controls = @"controls"></audio> <!--ship--> <video src="source/04.全局队列.mp4" controls = @"controls"></video></body></html>
时间： 2024-10-07 03:36:19