当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第六天

2020-04-07 00:36前端开发基础 人已围观文章来源:成都SEO文章作者:小成站长

简介效果如下----------------------------------------------- 沁园春长沙 【毛泽东】 独立寒秋, 湘江北去 ,橘子洲头。 看万山红遍...

效果如下-----------------------------------------------

沁园春·长沙

【毛泽东】

独立寒秋, 湘江北去,橘子洲头。

看万山红遍,层林尽染, 漫江碧透,百舸争流。


鹰击长空,鱼翔浅底,万类霜天竞自由。

怅寥廓,问苍茫大地,谁主沉浮?携来百侣曾游,忆往昔峥嵘岁月稠。

恰同学少年,风华正茂;书生意气,挥斥方遒。

指点江山,激扬文字,粪土当年万户侯。

曾记否,到中流击水,浪遏 飞舟?

--------------------源码-----------------------------------

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01多彩诗句</title>
  <style>
   
  .biancu {
  font-size: 22px;
  color: blue;
  }
  span {
  color: green;
  }
  p {
  color: red;
  font-weight: 700;
  }
   
  </style>
  </head>
  <body>
  <h1>沁园春·长沙</h1>
   
  <p ><span>【毛泽东】</span></p>
   
  <p class="biancu">独立寒秋, <span>湘江北去</span>,橘子洲头。</p>
   
  <p class="biancu">看万山红遍,层林尽染, <span>漫江碧透</span>,百舸争流。</p><br>
   
  <p>鹰击长空,<span>鱼翔浅底</span>,万类霜天竞自由。</p>
   
  <p>怅寥廓,<span>问苍茫大地,谁主沉浮?</span>携来百侣曾游,忆往昔峥嵘岁月稠。</p>
   
  <p>恰同学少年,风华正茂;书生意气,挥斥方遒。</p>
   
  <p>指点江山,激扬文字,粪土当年万户侯。</p>
   
  <p>曾记否,到中流击水,浪遏 <span>飞舟?</span></p>
  </body>
  </html>

效果如下--------------------------------------------------------

 
 
 
 
  •  
  •  
  •  
 

 

 
 
 
 
 
 
 
你好呀
我不喜欢文字
我不喜欢文字
我不喜欢文字
我不喜欢文字
我不喜欢文字
1
2
3
4
5

源码-------------------------------------------------------------------
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02.Emmet语法</title>
  </head>
  <body>
  <!-- 快速生成标签 div Tab = <div></div> -->
  <div></div>
  <!-- 生成多个相同标签 div*3 Tab =<div></div> -->
  <div></div>
  <div></div>
  <div></div>
  <!-- 3.父子关系标签 可以用 > 例如 ul > li*4 Tab =<ul></ul> -->
  <ul>
  <li></li>
  <li></li>
  <li></li>
  </ul>
  <!-- 4.兄弟关系标签 div+p Tab -->
  <div></div>
  <p></p>
   
  <!-- 5. 生成类名或者id名字 div.demo div#one -->
  <div class="demo"></div>
  <div id="one"></div>
   
  <!-- 6.生成递增 div.great$*5 -->
  <div class="great1"></div>
  <div class="great2"></div>
  <div class="great3"></div>
  <div class="great4"></div>
  <div class="great5"></div>
   
  <!--7. div{你好啊} -->
  <div>你好呀</div>
  <div></div>
  <!-- 8.div{我不喜欢文字}*5 -->
  <div>我不喜欢文字</div>
  <div>我不喜欢文字</div>
  <div>我不喜欢文字</div>
  <div>我不喜欢文字</div>
  <div>我不喜欢文字</div>
   
  <!--9. div{$}*5 -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
   
   
   
  </body>
  </html>

-----------------------------------笔记--------------------------------------
4.5行间距
 
line-height:
 
行间距 = 上间距+文本高度+下间距
 
color 文本颜色
text-align 文本对齐
text-indent 文本缩进 2em
text-decoration 文本修饰
line-height 行高
-------------------------------------
CSS引入方式
 
1.内部样式表
 
2.行内样式表
 
3.外部样式表
 
Chrome 调试工具
 
点击相应的样式  如果没有,说明 类样式写错了
 
ctrl + 0 恢复当前浏览器比例大小
 
调好类样式, 复制粘贴到 外部样式表中去
------------------------------------------------
Emmet  语法
 
快捷生成结构代码
 
1.快速生成标签 
div Tab = <div></div>
 
2.多个相同标签
div*3 Tab       =<div></div>
<div></div>
<div></div>
 
3.父子关系标签 可以用 > 例如
ul > li*4 Tab =<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
 
4.兄弟关系标签
 
div+p Tab <div></div>
<p></p>
 
5. 生成类名或者id名字 .demo #one
<div class="demo"></div>
<div id="one"><div>
 
6.生成递增 div.great&*5
 <!-- 6.生成递增 div.great$*5 -->
    <div class="great1"></div>
    <div class="great2"></div>
    <div class="great3"></div>
    <div class="great4"></div>
    <div class="great5"></div>
 
7. 默认带上文字
 
div{你好啊}
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们