HTML语义化的案例分析（试图）

一、head部分

1.mata

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

mata标签： utf-8是代表本网页使用的一种可变长度字符编码，在各个网页中都最优先采用的编码，是head中必有的一部分。 ps:UTF-8使用一至四个字符编码，包含有128个US-ASCLL字符、拉丁文、希腊文、阿拉伯文等等各种字符，覆盖面很广。

第二句话的意思是可以改变360兼容模式下以何种版本的IE去渲染页面。

<title>首页 - 洛谷 | 计算机科学教育新生态</title>

title标签： 表示的是title标题显示的文字，也就是页面最上面的小框框里显示的文字，简洁表示页面的内容

<link rel="stylesheet" href="<https://cdn.luogu.com.cn/css/katex.min.css>"/>

link标签： rel=“stylesheet” href=“....css” 是外部格式链接，用来引入CSS样式，href后面写的是css的链接

<script src="<https://cdn.luogu.com.cn/js/jquery-2.1.1.min.js>"></script>

script标签： script标签是用来写JS(JavaScript)的部分，其中src是从外部引入JS的链接

二、body部分

<div id="app"></div>

div标签： 块级标签，是使用最多的一种标签，类似盒子，自己独占一行，，可以调整高度和宽度，在标签中可以添加各种标签，页面就是用多个div盒子分割成的各个部分

<ul class="am-slides">  
<li><a target="_blank" href = ""> <img src=''/> </a></li>
<li><a target="_blank" href = ""> <img src=''/> </a></li>
<li><a target="_blank" href = ""> <img src=''/> </a></li>
</ul>

ps：简化版，原版太长了

ul标签： 表格双标签，用来表示表格的开始与结束，ul标签中包含多个且只包含 li标签 ，li标签就是一个个小表格，li标签中可以添加各种标签

a标签： 超链接双标签，其中href属性是必须的，用来表示超链接跳转的具体位置，如果暂时决定跳转目标，可以用 ‘#’ 暂时代替

img标签： 图片单标签，src属性是必须属性，用来承装图片的路径，路径分为相对路径和绝对路径，相对路径中的图片是在文件夹中的位置，而绝对路径是浏览器链接

<span class="lg-punch-small ">七月大</span>

span标签： 行级双标签，与div相似，且相对的盒子，不独占一行，不能设置高度和宽度，也可以在里面添加各种标签

<p> 
<button class="am-btn am-btn-danger am-btn-sm" name="goto">跳转</button>          
<button class="am-btn am-btn-primary am-btn-sm" name="gotorandom">随机跳题</button> 
</p>

p标签： 段落双标签，一种块级标签，里面大多加文本

button标签： 按钮双标签，一个圆形的按钮，可选中

洛谷网站的HTML结构 | 青训营

一、head部分

1.mata

二、body部分