search

博客列表 >HTML5

HTML5

一抹微笑
一抹微笑原创
2020年07月29日 09:54:11920浏览

1.HTML文档结构

  • 认识html文档结构小知识
  1. <!--告诉（客户端）浏览器这是一个html5的文档结构-->
  2. <DOCTYPE html>
  3. <!--<html>...</html>: 根标签，根元素，代表整个html文档-->
  4. <!--lang="en":属性，表示当前页面的编写语言，("en":表示英文)  (zh-cn":表示中文)-->
  5. <html lang="en">
  7. <!--<head>...</head>:头元素，它的内容不再页面中显示,这是给浏览器和搜索引擎使用，提供各种属性和信息给浏览器-->
  8. <head>
  9. <!-- 当前文档字符编码集，charcet:字符集(utf-8或者GBK)-->
  10. <meta charcet="UTF-8">
  12. <--viewport:视口，当前在浏览器中的可视区域-->
  13. <!--
  14. 1.width=device-width ：表示宽度是设备屏幕的宽度
  15. 2.initial-scale=1.0：表示初始的缩放比例
  16. 3.minimum-scale=0.5：表示最小的缩放比例
  17. 4.maximum-scale=2.0：表示最大的缩放比例
  18. 5.user-scalable=yes：表示用户是否可以调整缩放比例
  19. -->
  20. <meta name="viewport" content="widht=device-widht, initial-scale=1.0">
  22. <tiele>这里表示标题</tiele>
  23. </head>
  25. <!--<body>...</body>:主体元素，表示网页的主体部分，也是用户可以看到的内容-->
  26. <body>
  27. </body>
  28. </html>

2.元素和属性

  • 什么是元素和属性，元素和属性之间的关系。

    元素: 启始标签 + 结束标签 由双标签组成
    属性：描述标签内部的属性

  1.   <!--三大通用属性：style,class,id-->
  2.     <p>段落元素</p>
  3.     <p style="background: #000;color: #fff;border-radius: 8px;text-align: center;">
  4.       描述元素内部的属性
  5.     </p>
  7.     <style>
  8.         h1{          
  9.         background: #000;
  10.         color: red;
  11.         border-radius: 8px;
  12.         text-align: center;     
  13.         }
  14.     </style>
  15.     <p><h1>默认样式<内部样式</h1></p>
  16.     <p><h1>内部样式<内联样式</h1></p>
  17.     <p><h1 style="background:royalblue;color: seashell;">内联样式优先级最高</h1></p>

实列

3.语义化结构元素

  • html5：树状结构，结构化使用标签描述的文档

  • 语义化使用标签描述文档

    块元素：垂直排列，两端不允许有内容，独占一行，即使为空。
    内联元素：总是水平显示，顺序排列，当一行显示不下，就换行。

    小知识： div (通用块元素：容器) span (通用行内元素：通常不会暴露出来，应该放在一个块元素中)

  1. <!--页眉-->
  2. <header>
  3.     <!--导航-->
  4.     <nav>
  5.         <a href="#">分类1</a>
  6.         <a href="#">分类2</a>
  7.     </nav>
  8. </header>
  9. <!--主体-->
  10. <main>
  11.     <section class="#">轮播</section>
  12.     <article class="#">内容</article>
  13.     <section class="#">推荐</section>
  14. </main>
  15. <!--页脚-->
  16. <footer>
  17.     <!--导航-->
  18.     <nav>
  19.         <a href="#">baidu.com</a>
  20.         <a href="#">360.com</a>
  21.     </nav>
  22. </footer>

4.链接元素

  • 页面中的传递

    小知识：浏览器不检查id的唯一性，而js有依赖它的唯一性来获取元素。

    应用场景：
    1.锚点。
    2.表单元素中的控件。

  2. <1--target:打开方式-->
  3. <!--_self:默认值，当前窗口打开-->
  4. <a href="baidu.com" target="_self">百度</a>
  6. <!--_blank:新窗口打开,也是经典用法-->
  7. <a href="360.com" target="_blank">360</a>
  9. <a href="360.com" target="_parent">父窗口打开</a>
  10. <a href="360.com" target="_top">顶层窗口打开</a>
  12. <!--下载文件-->
  13. <a href="index.md" download="index.md">当页面不能解析:用download来指定一个文件名字触发下载</a>
  15. <!--打电话-->
  16. <a href="tel:138****0000">通过标识：tel唤起拨号软件</a>
  18. <!--发邮件-->
  19. <a href="mailto:912269888@qq.com">通过标识:mailto唤起邮箱</a>
  21. <!--锚点：在当前页面跳转-->
  22. <a href="#red">推荐</a>
  23. <h2 id="red">推荐</h2>
  24. <!--回到顶部-->
  25. <a href="#">回到顶部</a>

5.列表元素

  • 初步认识有序列表，无序列表，自定义列表
  1. <!--无序列表-->
  2. <ul>
  3.     <li>html</li>
  4.     <li>css</li>
  5.     <li>php</li>
  6.     </ul>
  8. <!--有序列表-->
  9. <!--start:指定启始编号-->
  10. <ol start="5">
  11.     <li>预习</li>
  12.     <li>学习</li>
  13.         <!--列表具有可嵌套性-->
  14.         <ul>
  15.             <li>练习</li>
  16.         </ul>
  17.     <li>复习</li>
  18. </ol>
  20. <!--自定义列表-->
  21. <!--define:定义； list:列表--  简写：dl>
  22. <dl>
  23.     <dt>列表项标题</dt>
  24.     <dd>通用的服务器编写语言</dd>
  25. </dl>

html5基础知识，完成简单页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>html5基础知识，完成简单页面</title>
  7.   </head>
  8.   <body style="background: #4e96a8;">
  10.     <style>
  11.       img {
  12.         width: 100%;
  13.         border-radius: 8px;
  14.       }
  15.       p {
  16.         font-size: 12px;
  17.         text-align: center;
  18.         margin: auto;
  19.       }
  21.     </style>
  22.     <!-- 页眉 -->
  23.     <header>
  24.       <!-- 导航 -->
  25.       <nav style="margin: 2px 0px; text-align: center; font-size: 22px;">
  26.         <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3753598509,2268083869&fm=26&gp=0.jpg" alt="" style="width: 22px;float: left;" />
  27.         <a href="#tj">推荐</a>
  28.         <a href="#dy">电影</a>
  29.         <a href="#dm">动漫</a>
  30.         <a href="android.apk" download="android.apk" style="float: right;">下载</a>
  31.       </nav>
  32.     </header>
  34.     <!-- 主体 -->
  35.     <main>
  36.       <!--重复区块-->  
  37.       <section>
  38.         <img
  39.           src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595982626924&di=3bd64703293d71566e848dc1281dd8ff&imgtype=0&src=http%3A%2F%2Fimages.sucaihuo.com%2Fjquery%2F6%2F632%2Fbig.jpg"
  40.           alt="隐姓亿万富豪"
  41.         />
  42.         <hr />
  43.       </section>
  45.       <!--内容区块-->
  46.       <article>
  47.         <div id="dy" style="height: 300px;">
  48.           <h4>电影</h4>
  49.           <a href="#" target="_blank" style="float: left;">
  50.             <img
  51.               src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3286410008,3346770103&fm=26&gp=0.jpg"
  52.               alt="当心福来敲门"
  53.               style="width: 150px;"
  54.             />
  55.             <p>当心福来敲门</p>
  56.           </a>
  58.           <a href="#" target="_blank" style="float: right;">
  59.             <img
  60.               src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3286410008,3346770103&fm=26&gp=0.jpg"
  61.               alt="当心福来敲门"
  62.               style="width: 150px;"
  63.             />
  64.             <p>当心福来敲门</p>
  65.           </a>
  66.         </div>
  68.         <div id="dm" style="height: 350px;">
  69.           <h4>动漫</h4>
  70.           <a href="#" target="_blank" style="float: left;">
  71.             <img
  72.               src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1052148271,2125335769&fm=26&gp=0.jpg"
  73.               alt="哪吒之魔童降世"
  74.               style="width: 150px;"
  75.             />
  76.             <p>哪吒之魔童降世</p>
  77.           </a>
  79.           <a href="#" target="_blank" style="float: right;">
  80.             <img
  81.               src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1052148271,2125335769&fm=26&gp=0.jpg"
  82.               alt="哪吒之魔童降世"
  83.               style="width: 150px;"
  84.             />
  85.             <p>哪吒之魔童降世</p>
  86.           </a>
  87.         </div>
  89.       </article>
  91.       <!--附加区块-->
  92.       <aside>
  93.         <section>
  94.           <h3
  95.             style="background: #ffeb3b; text-align: center; line-height: 70px;"
  96.           >
  97.             广告位招商
  98.           </h3>
  99.         </section>
  100.       </aside>
  102.       <!--重复区块-->
  103.       <section id="tj">
  104.         <h4>推荐</h4>
  105.         <p>
  106.           <img
  107.             src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1041601389,15453495&fm=26&gp=0.jpg"
  108.           />
  109.           <abbr>121931903</abbr>
  110.           <time style="float: right;">2020-07-29 00:00:00</time>
  111.           <img
  112.             src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1041601389,15453495&fm=26&gp=0.jpg"
  113.           />
  114.           <abbr>2132141241</abbr>
  115.           <time style="float: right;">2020-07-29 00:00:00</time>
  116.         </p>
  117.       </section>
  118.     </main>
  120.     <!-- 页脚 -->
  121.     <footer>
  122.       <!-- 导航 -->
  124.       <nav>
  125.         <h3>合作伙伴</h3>
  126.         <a href=""><mark>腾讯视频</mark></a>
  127.         <a href=""><mark>优酷视频</mark></a>
  129.         <a href=""><mark>腾讯视频</mark></a>
  130.         <a href=""><mark>优酷视频</mark></a>
  133.         <dl>
  134.           <dt>联系我们</dt>
  135.           <dd>
  136.             <a href="tel:138****0000">138****0000</a>
  137.           </dd>
  138.           <dd>
  139.             <a href="mailto:91***@qq.com">91***@qq.com</a>
  140.           </dd>
  141.         </dl>       
  142.       </nav>
  143.     </footer>
  144.   </body>
  145. </html>



上一条：使用表格元素制作排班考勤表，使用表单元素制作用户信息修改表下一条：PHP-第三节-运算符与流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多