<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title> <xxx></xxx>这是一个成对标签，</xxx>表示该标签的结束标签。
<style type="text/css"> </style>/*这个标签，<style>标签用于为HTML定义样式。type 属性是必需的，定义 style 元素的内容。唯一的可能值“text/css”*/
/*在HTML中，Style内包含选择器，选择器有，标签选择器、类选择器、ID选择器、子选择器、包含（后代）选择器、通用选择器以及最后的伪类选择符和分组选择符。*/
/*标签选择器：这个是最简单的选择器，只需要在style内添加 标签｛样式｝如在h1标签中让字体变为红色：h1{ color:red;}
类选择器：它的组成部分，.stren{ 各类样式 如 color:red;} 然后使用class=“stren”（这里的stren是类选择器名称，可以用任意英文代替，但不能是汉字以及拼音。）为标签设置一个类，如<span class="stren"></span> 注：该选择器可以单独使用，也可以与其他元素结合使用。例：。.stren{font-size:20px} <span class="stren" ></span>。
ID选择器：ID选择器，与类选择器相同也不同，它的组成部分，#stren{各类样式},然后他不想类选择器那样用CLASS而是直接<span id="stren"></span>(这里的stren也是选择器名称，和类选择器一样。)注：ID选择器只能使用一次。也就是说，同一个选择器名称只能出现一次。而类选择器同一个名称可以使用N次、
子选择器：子选择器用于选择指定标签元素的第一代子元素 语法如下.food>li{border:1px solid red;} <ol class="food"><li><ol><li></li></ol></li></ol>这里子选择器只制定第一个<li></li>的样式，它的第二代元素<li></li>样式不会改变。
后代选择器：语法为.first span{color:red;} 后代选择器包含所有的第一代以及后代的样式。<p class="first"></p>.p标签中，所有的标注标签span内的第一代一级后代的样式。<ul class="fist"></ul>也一样适用。
通用选择器：通用选择器和标签选择器差不多，只是标签选择器，选择器是文本中的标签。而通用选择器，选择器用*｛｝表示。它的作用是匹配HTML中所有的标签元素，很强大，用一个通用标签改全部。
伪类选择符：它是给HTML中不存在的标签设置样式，这里不存在的标签表示“标签中的某种状态”。比如说，我们给HTML中一个标签元素的鼠标滑过状态来设置字体颜色。不过目前为止，可以兼容所有浏览器的伪类选择符就是A标签上实用：hover。语法为a:hover{color:red;}这样设置后，<a href="地址连接">文字</a> 添加了伪类选择符，你鼠标划过“文字”会发现字体变成红色。
分组选择符：如果你想给两个标签选择器添加同一种样式，那么可以使用分组选择符。比如h1{ color:red;} span{ color:red;} 把这两个用分组选择符就是h1,span{color:red;}