CSS学习Day01
<h1 class="md-end-block md-heading"><span class="md-plain md-expand">1、什么是CSS</span></h1><p class="md-end-block md-p"><span class="md-plain">如何学习</span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">CSS是什么</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">CSS怎么用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-pair-s"><strong>CSS选择器（重点+难点）</strong></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">美化网页（文字、阴影、超链接、列表、渐变）</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">盒子模型</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">定位</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页动画（特效效果）</span></p>
</li>
</ol>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.1什么是CSS</span></h2>
<p class="md-end-block md-p"><span class="md-plain">Cascading Style Sheet 层叠级联样式表</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS：表现（美化界面）</span></p>
<p class="md-end-block md-p"><span class="md-plain">字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...</span></p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.2 发展史</span></h2>
<p class="md-end-block md-p"><span class="md-plain">CSS1.0</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.0 DIV（块）+CSS ，HTML与CSS结构分离的思想 网页变得简单，SEO</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS2.1 浮动，定位</span></p>
<p class="md-end-block md-p"><span class="md-plain">CSS3.0 圆角，阴影，动画... 浏览器兼容性</span></p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.3快速入门</span></h2>
<p class="md-end-block md-p"><span class="md-plain">style</span></p>
<p class="md-end-block md-p"><span class="md-pair-s "><strong>基本入门</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-comment"><!--<style> 每一个声明最好分号结尾<br> <span> <span class="cm-comment">语法：<br> <span> <span class="cm-comment">选择器{<br> <span> <span class="cm-comment">声明1；<br> <span> <span class="cm-comment">声明2；<br> <span> <span class="cm-comment">声明3；<br> <span> <span class="cm-comment">}<br> <span> <span class="cm-comment">--><br> <span> <span class="cm-tab"> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color:<span class="cm-keyword">red;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">建议使用这种规范</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220312134718257.png"><img alt="image-20220312134718257" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-pair-s "><strong>CSS的优势：</strong></span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">内容和表现分离</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">网页结构表现统一，可以实现复用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">样式十分丰富</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">建议使用独立于html的css文件</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">使用SEO，容易被搜索引擎收录</span></p>
</li>
</ol>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.4CSS导入方式</span></h2>
<p class="md-end-block md-p"> </p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <!--内部样式--><br> <span> <style><br> <span> h1{<br> <span> color: greenyellow;<br> <span> }<br> <span> </style><br> <span><span><br> <span> <!--外部样式--><br> <span> <link rel="stylesheet" href="css/style.css"><br> <span></head><br> <span><body><br> <span><span><br> <span><!--优先级：就近原则--><br> <span><!--行内样式：在标签元素中，编写一个style属性，编写样式即可--><br> <span><h1 style="color: red">我是标题</h1><br> <span><span><br> <span></body><br> <span></html></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">扩展：外部样式两种写法</span></p>
<ul class="ul-list" data-mark="+">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">链接式：</span></p>
<p class="md-end-block md-p"><span class="md-plain">html</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment"><!--外部样式--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css"<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></pre>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">导入式：</span></p>
<p class="md-end-block md-p"><span class="md-plain">@improt是CSS2.1特有的！</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment"><!--导入式--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-def">@import <span class="cm-atom">url(<span class="cm-string">"style.css");<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
</li>
</ul>
<p class="md-end-block md-p"> </p>
<h1 class="md-end-block md-heading"><span class="md-plain">2、选择器</span></h1>
<p class="md-end-block md-p"><span class="md-plain">作用：选择页面上的某一个或者某一类元素</span></p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">2.1 基本选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、标签选择器：选择一类标签 --》标签{}</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*标签选择器，会选择到页面上所有的这个标签的元素 */<br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-atom">#0b79ed;<br> <span> <span class="cm-property">background: <span class="cm-keyword">skyblue;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">24px;<br> <span> }<br> <span> <span class="cm-tag">p{<br> <span> <span class="cm-property">font-size: <span class="cm-number">80px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>学Java<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>学Java<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>听杨神说<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">2、类选择器 class：选中所有class属性一致的标签，跨标签 --》.类名{}</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/* 类选择器的格式.class的名称{}<br> <span><span class="cm-comment"> 好处：可以多个标签归类，是用一个class<br> <span><span><br> <span><span class="cm-comment"> */<br> <span> <span class="cm-qualifier">.yangting{<br> <span> <span class="cm-property">color: <span class="cm-keyword">red;<br> <span> }<br> <span> <span class="cm-qualifier">.yangshen{<br> <span> <span class="cm-property">color: <span class="cm-keyword">darkorchid;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"yangting"<span class="cm-tag cm-bracket">>标题1<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"yangshen"<span class="cm-tag cm-bracket">>标题2<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"yangting"<span class="cm-tag cm-bracket">>标题3<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"yangting"<span class="cm-tag cm-bracket">>p标签<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">3、id选择器：全局唯一！--》#id名{}</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*id选择器:#id名称{}<br> <span><span class="cm-comment"> id必须保证全局唯一<br> <span><span class="cm-comment"> 优先级：<br> <span><span class="cm-comment"> 不遵循就近原则，是固定的：<br> <span><span class="cm-comment"> id选择器> class选择器>标签选择器<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-builtin">#yangting{<br> <span> <span class="cm-property">color: <span class="cm-keyword">brown;<br> <span> }<br> <span> <span class="cm-qualifier">.style1{<br> <span> <span class="cm-property">color: <span class="cm-atom">#0b79ed;<br> <span> }<br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-keyword">chartreuse;<br> <span> }<br> <span><span><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">id=<span class="cm-string">"yangting"<span class="cm-tag cm-bracket">>标题1<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"style1"<span class="cm-tag cm-bracket">>标题2<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"style1"<span class="cm-tag cm-bracket">>标题3<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>标题4<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>标题5<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>注：优先级： id > class > 标签</strong></span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">2.2层次选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*后代选择器*/<br> <span><span class="cm-tag">body <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-keyword">brown;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">2、子选择器 一代，儿子</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*子选择器*/<br> <span><span class="cm-tag">body><span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-atom">#0b79ed;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">3、相邻兄弟选择器 同辈</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*相邻兄弟选择器： 只有一个，相邻（向下）*/<br> <span><span class="cm-qualifier">.active + <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-keyword">green;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">4、通用选择器</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/<br> <span><span class="cm-qualifier">.active~<span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-keyword">greenyellow;<br> <span>}</span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">2.3结构伪类选择器</span></h2>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><<span class="cm-keyword">!DOCTYPE <span class="cm-tag">html><br> <span><<span class="cm-tag">html <span class="cm-tag">lang=<span class="cm-string">"en"><br> <span><<span class="cm-tag">head><br> <span> <<span class="cm-tag">meta <span class="cm-tag">charset=<span class="cm-string">"UTF-8"><br> <span> <<span class="cm-tag">title><span class="cm-tag">Title</<span class="cm-tag">title><br> <span><span><br> <span> <<span class="cm-keyword">!--避免使用，<span class="cm-tag">class和<span class="cm-tag">id选择器--><br> <span> <<span class="cm-tag">style><br> <span> <span class="cm-comment">/*ul的第一个子元素*/<br> <span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">first-child{<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> }<br> <span><span><br> <span> <span class="cm-comment">/*ul的最后一个子元素*/<br> <span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">last-child{<br> <span> <span class="cm-property">background: <span class="cm-keyword">darkorchid;<br> <span> }<br> <span><span><br> <span> <span class="cm-comment">/* 选中 p1 : 定位到父元素，选择当前的第一个元素<br> <span><span class="cm-comment"> 选择当前p元素的父级元素，选中父级元素的第一个<br> <span><span class="cm-comment"> 并且是当前元素才生效<br> <span><span class="cm-comment"> 按照顺序选择<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-child(<span class="cm-number">1){<br> <span> <span class="cm-property">background: <span class="cm-keyword">yellow;<br> <span> }<br> <span><span><br> <span> <span class="cm-comment">/*选中父元素下的p元素的第二个<br> <span><span class="cm-comment"> 按照类型选择<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<br> <span> <span class="cm-property">background: <span class="cm-keyword">red;<br> <span> }<br> <span> <span class="cm-comment">/*a:hover{*/<br> <span> <span class="cm-comment">/* background: yellow;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> </<span class="cm-tag">style><br> <span><span><br> <span></<span class="cm-tag">head><br> <span> <<span class="cm-tag">body><br> <span><span><br> <span><<span class="cm-keyword">!-- <<span class="cm-tag">a <span class="cm-tag">href=<span class="cm-string">""><span class="cm-number">123456</<span class="cm-tag">a>--><br> <span><<span class="cm-tag">p><span class="cm-tag">p1</<span class="cm-tag">p><br> <span><<span class="cm-tag">p><span class="cm-tag">p2</<span class="cm-tag">p><br> <span><<span class="cm-tag">p><span class="cm-tag">p3</<span class="cm-tag">p><br> <span><<span class="cm-tag">ul><br> <span> <<span class="cm-tag">li><span class="cm-tag">li1</<span class="cm-tag">li><br> <span> <<span class="cm-tag">li><span class="cm-tag">li2</<span class="cm-tag">li><br> <span> <<span class="cm-tag">li><span class="cm-tag">li3</<span class="cm-tag">li><br> <span></<span class="cm-tag">ul><br> <span><span><br> <span></<span class="cm-tag">body><br> <span></<span class="cm-tag">html></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220312203323942.png"><img alt="image-20220312203323942" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">2.4属性选择器</span></h2>
<p class="md-end-block md-p"><span class="md-plain">id + class 结合</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-qualifier">.demo <span class="cm-tag">a{<br> <span> <span class="cm-property">float: <span class="cm-atom">left;<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">10px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> <span class="cm-property">color: <span class="cm-keyword">brown;<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">margin-right: <span class="cm-number">5px;<br> <span> <span class="cm-property">font:<span class="cm-atom">bold <span class="cm-number">20px/<span class="cm-number">50px <span class="cm-variable">Arial;<br> <span> }<br> <span><span><br> <span> <span class="cm-comment">/* 属性名 or 属性名=属性值（正则）<br> <span><span class="cm-comment"> = 绝对等于<br> <span><span class="cm-comment"> *= 包含这个元素<br> <span><span class="cm-comment"> ^= 以这个开头<br> <span><span class="cm-comment"> ￥= 以这个结尾<br> <span><span class="cm-comment"> */<br> <span><span><br> <span> <span class="cm-comment">/*存在id属性的元素a[]{} */<br> <span><span><br> <span> <span class="cm-comment">/*id=first的元素*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/* background: yellow;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*class中有links的元素*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/* background: yellow;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-comment">/*选中href中以http开头的元素*/<br> <span> <span class="cm-comment">/*a{*/<br> <span> <span class="cm-comment">/* background: yellow;*/<br> <span> <span class="cm-comment">/*}*/<br> <span><span><br> <span> <span class="cm-tag">a[<span class="cm-tag">href$=<span class="cm-tag">pdf]{<br> <span> <span class="cm-property">background: <span class="cm-keyword">yellow;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"demo"<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.baidu.com" <span class="cm-attribute">class=<span class="cm-string">"links item first" <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>1<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.kuangstudy.com" <span class="cm-attribute">class=<span class="cm-string">"links item active" <span class="cm-attribute">target=<span class="cm-string">"_blank" <span class="cm-attribute">title=<span class="cm-string">"test" <span class="cm-tag cm-bracket">>2<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.html" <span class="cm-attribute">class=<span class="cm-string">"links item active"<span class="cm-tag cm-bracket">>3<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.png" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>4<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.jpg" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>5<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>6<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/a.pdf" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>7<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/abc.pdf" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>8<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abc.doc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>9<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abcd.doc" <span class="cm-attribute">class=<span class="cm-string">"links item last"<span class="cm-tag cm-bracket">>10<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220312222313060.png"><img alt="image-20220312222313060" data-local-refresh="true"></span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"> </p>
<h1 class="md-end-block md-heading"><span class="md-plain">3.美化网页元素</span></h1>
<h2 class="md-end-block md-heading"><span class="md-plain">3.1为什么要美化网页</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、有效的传递页面信息</span></p>
<p class="md-end-block md-p"><span class="md-plain">2、美化网页，页面漂亮才能吸引用户</span></p>
<p class="md-end-block md-p"><span class="md-plain">3、凸显页面的主题</span></p>
<p class="md-end-block md-p"><span class="md-plain">4、提高用户的体验</span></p>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">span标签：重点要突出的字，使用span套起来</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-builtin">#title1{<br> <span> <span class="cm-property">font-size: <span class="cm-number">50px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span>欢迎学习 <span class="cm-tag cm-bracket"><<span class="cm-tag">span <span class="cm-attribute">id=<span class="cm-string">"title1"<span class="cm-tag cm-bracket">>Java<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">3.2字体样式</span></h2>
<p class="md-end-block md-p"> </p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment"><!--<br> <span> <span class="cm-comment">font-family:字体<br> <span> <span class="cm-comment">font-size： 字体大小<br> <span> <span class="cm-comment">font-weight：字体粗细<br> <span> <span class="cm-comment">color：字体颜色<br> <span><span class="cm-comment">--><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">font-family: <span class="cm-string">"Arial Black", 楷体;<br> <span> <span class="cm-property">color: <span class="cm-keyword">chocolate;<br> <span> }<br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">font-size: <span class="cm-number">30px;<br> <span> }<br> <span> <span class="cm-qualifier">.p1{<br> <span> <span class="cm-property">font-weight: <span class="cm-atom">bold;<br> <span> }<br> <span><span><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">3.3文本样式</span></h2>
<p class="md-end-block md-p"><span class="md-plain">1、颜色 color rgb rgba</span></p>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>2、文本对齐方式 text-align = center</strong></span></p>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>3、首行缩进 text-indent: 2em;</strong></span></p>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>4、行高 line-height;</strong><span class="md-plain"> 单行文字上下居中！ line-height = height</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">5、装饰 text-decoration;</span></p>
<p class="md-end-block md-p"><span class="md-plain">6、文本图片水平对齐 vertical-align: middle;</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-comment"><!--<br> <span> <span class="cm-comment">颜色：<br> <span> <span class="cm-comment">单词<br> <span> <span class="cm-comment">RGB0~F<br> <span> <span class="cm-comment">RGBA A:0~1<br> <span> <span class="cm-comment">text-align: 排版，居中<br> <span> <span class="cm-comment">text-indent: 2em;段落首行缩进<br> <span> <span class="cm-comment">height: 300px;<br> <span> <span class="cm-comment">line-height: 300px;<br> <span> <span class="cm-comment">行高，和块的高度一致，就可以上下居中<br> <span> <span class="cm-comment">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-atom">rgba(<span class="cm-number">0,<span class="cm-number">255,<span class="cm-number">255,<span class="cm-number">0.4) ;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> }<br> <span> <span class="cm-qualifier">.p1{<br> <span> <span class="cm-property">text-indent: <span class="cm-number">2em;<br> <span> }<br> <span> <span class="cm-qualifier">.p3{<br> <span> <span class="cm-property">background: <span class="cm-keyword">darkorchid;<br> <span> <span class="cm-property">height: <span class="cm-number">300px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">300px;<br> <span> }<br> <span> <span class="cm-comment">/*下划线*/<br> <span> <span class="cm-qualifier">.l1{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">underline;<br> <span> }<br> <span> <span class="cm-comment">/*中划线*/<br> <span> <span class="cm-qualifier">.l2{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">line-through;<br> <span> }<br> <span> <span class="cm-comment">/*上划线*/<br> <span> <span class="cm-qualifier">.l3{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">overline;<br> <span> }<br> <span> <span class="cm-comment">/*超链接去下划线*/<br> <span> <span class="cm-tag">a{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> }<br> <span> <span class="cm-comment">/*<!--*/<br> <span> <span class="cm-comment">/*水平对齐需要参照物a,b*/<br> <span> <span class="cm-comment">/*-->*/<br> <span> <span class="cm-tag">img,<span class="cm-tag">span{<br> <span> <span class="cm-property">vertical-align: <span class="cm-atom">middle;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">""<span class="cm-tag cm-bracket">>123<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"l1"<span class="cm-tag cm-bracket">>123123<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"l2"<span class="cm-tag cm-bracket">>123123<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"l3"<span class="cm-tag cm-bracket">>123123<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>诗介绍<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p1"<span class="cm-tag cm-bracket">><br> <span> 假如我是一只鸟，<br> <span> 我也应该用嘶哑的喉咙歌唱：<br> <span> 这被暴风雨所打击着的土地，<br> <span> 这永远汹涌着我们的悲愤的河流，<br> <span> 这无止息地吹刮着的激怒的风，<br> <span> 和那来自林间的无比温柔的黎明……<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> ——然后我死了，<br> <span> 连羽毛也腐烂在土地里面。<br> <span> 为什么我的眼里常含泪水？<br> <span> 因为我对这土地爱得深沉……<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p3"<span class="cm-tag cm-bracket">><br> <span> If I were to fall in love，It would have to be with youYour eyes，<br> <span> your smile，The way you laugh，The things you say and do。Take me to the places<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"images/3.png" <span class="cm-attribute">alt=<span class="cm-string">"" <span class="cm-attribute">width=<span class="cm-string">"300px" <span class="cm-attribute">height=<span class="cm-string">"200px"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>you are so beautiful!<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p><span><span class="cm-tag cm-bracket"> </span></span></p><br><br>
来源：https://www.cnblogs.com/yangitng666/p/15999302.html
頁:
[1]