HTML5学习-第二课

写出html文档结构,并解释每个成员的功能与作用

<! DOCTYPE html>  
<!--声明为html5文档-->
<html lang="zh-cn">  
<!--语文为中文-->
<head>  <!--网页头部信息-->
<meta charset="UTF-8"/>   <!--字体编码为UTF-8-->
<title>页面标题</title>
<body>  <!--网页主体-->
    这里是网页主要内容
</body>
</head>
</html>

演示布局元素,重点是 tag+class

<h1 class="H1">我是一级标题</h1>
<h2 class="H2">我是二级标题</h2>
<h3 class="H3">我是三级标题</h3>
<h4 class="H4">我是四级标题</h4>
<h5 class="H5">我是五级标题</h5>
<h6 class="H6">我是六级标题</h6>
<p class="p">我是段落标签</p>
<div class="div">我是通用标签</div>

演示图文的语义化解决方案

<figure>
  <a href="">
  <img src="https://msn-img-nos.yiyouliao.com/inforec-20230116-048206e6504ff8e1858a6a15c088c021.jpg" alt="" />
  </a>
  <!--上面是图片+链接-->
  <!-- 下面文字 -->
  <figcaption>第二十二期_前端开发</figcaption>
</figure>

演示图像,链接与列表元素

 <img src="这里是图片链接地址" alt="如果图片不显示时，显示我"/>
 <a herf="链接地址">显示的内容，与链接绑定</a>
 <ul> <!--无序列表-->
     <li>1</li>
     <li>2</li>
 </ul>
 <ol> <!--无序列表-->
     <li>1</li>
     <li>2</li>
 </ol>

相关文章