HTML和CSS总结

前进之路  金牌会员 | 2022-6-23 10:54:07 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 834|帖子 834|积分 2502

HTML和CSS总结



HTML总结

1、简介

HTML是超文本编辑语言，而非编程语言，创建的HTML文件可以很直观的渲染到浏览器上展现出来。我们经常说的web主要有三方面构成：结构、表现和行为，实际上就分别对应我们所学的前端三剑客：结构写入HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

2、实操

2.1 整体架构

通常，我们打开一个html文件，首先输入英文感叹号‘!’，就会出现如下整体框架：

2.2 标题体验

HTML提供了从大到小六级标题：
  1. <h1>This is heading 1</h1>
  2. <p>This is some text.</p>
  3. <hr>
  4. <h2>This is heading 2</h2>
  5. <p>This is some other text.</p>
  6. <hr>
复制代码
效果如下：

2.3 图片路径

图片路径主要是注意src属性和alt属性的用法，以及图片文件路径的绝对路径和相对路径问题，最好放在项目文件里面的路径是最好的，而非通过本机D盘等路径，换台电脑可能就无法显示了。

效果如下：

换一个路径：

显示效果依旧如此：

CSS总结

1、简介

CSS就是一个在一个仅有骨架的HTML上起到一个美化的功能，让我们HTML页面变得更加好看。
2、实操

2.1 初步体验

没有CSS时的网页是平平无奇的，如下：

当添加了CSS之后，并且在指定路径下添加，具体操作为：

最后的效果展示，那不得了了，神奇的事情发生了：

具体代码：
HTML代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>HTML5</title>
  6.     <link rel="stylesheet" href="./css/html5.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <h1>头部</h1>
  11.     <h2>子标题</h2>
  12.     <h4>震撼HTML5</h4>
  13. </header>
  15.     <nav>
  16.         <h3>导航</h3>
  17.         <a target="_blank" href="http://www.google.com">Google</a>
  18.         <a href="http://www.baidu.com" target="_blank">百度</a>
  19.         <a href="http://www.dapenti.com" target="_blank">打喷嚏</a>
  20.     </nav>
  21.     <section>
  22.         <article>
  23.             <header>
  24.                 <h1>文章头部</h1>
  25.             </header>
  26.             <ul type="square">
  27.                 <li>当一个人只为维持生计而思维的时候，他的思想就难以高尚。 ——卢梭</li>
  28.                 <li>衣不如新，人不如旧</li>
  29.                 <li>井蛙不可语天，夏虫不可语冰</li>
  30.                 <li>有党性，没人性</li>
  31.             </ul>
  32.             <footer>
  33.                 <h2>
  34.                     文章底部
  35.                 </h2>
  36.             </footer>
  37.         </article>
  38.         <article>
  39.             <header>
  40.                 <h1>文章头部</h1>
  41.             </header>
  42.             <ol>
  43.             <li>不想解决人民提出的问题，老想解决提出问题的人民。</li>
  44.             <li>要不是美领馆按pm2.5标准向外公布空气检测结果，我们肯定还生活在“现在播报新闻，冬季来临，全国大部地区全天有大雾，空气质量良”的世界里。</li>
  45.             <li>某男问大师：“大师，我女朋友虽有优点，但缺点让我难以忍受，怎样才能让她只有优点没有缺点呢？”大师笑答：“方法很简单，不过若要我教你，你得先下山为我找一张只有正面没反面的纸回来。” 该男略一沉吟下山而去，很快又上山来，递给大师一张“人民日报” 。大师看后，从此遁入空门，不再过问世事。</li>
  46.             <li>人民对领导人情感的强烈程度，往往与领导人的牛逼程度无关，而是与人民的傻逼程度及国家的封闭程度成正比！</li>
  47.             </ol>
  48.             <footer>
  49.                 <h2>
  50.                     文章底部
  51.                 </h2>
  52.             </footer>
  53.         </article>
  54.     </section>
  55.     <aside>
  56.         <h3>边条</h3>
  57.         <pre>
  58. agony     痛苦    爱过你
  59. pregnant  怀孕    扑来个男的
  60. ambulance 救护车  俺不能死
  61. ponderous 肥胖的  胖的要死
  62. pest      害虫    拍死它
  63. ambition  雄心    俺必胜
  64. bale      灾祸    背噢
  65. admire    羡慕    额的妈呀
  66.         </pre>
  67.     </aside>
  68.     <footer>
  69.         <h2>底部</h2>
  70.     </footer>
  72. </body>
  73. </html>                    
复制代码
CSS代码：
  1. body{
  2.     background-color: #cccccc;
  3.     font-family: "Microsoft Yahei","SimHei";
  4.     margin: 0 auto;
  5.     max-width: 900px;
  6.     border: solid #FFFFFF;
  7. }
  8. header{
  9.     background: #F47D31;
  10.     display: block;
  11.     color: #FFFFFF;
  12.     text-align: center;
  13. }
  14. header h2{
  15.     margin: 0;
  16. }
  17. h1{
  18.     font-size: 72px;
  19.     margin: 0;
  20. }
  21. h2{
  22.     font-size: 24px;
  23.     margin: 0;
  24.     text-align: center;
  25.     /*color: #F47D31;*/
  26. }
  27. h3{
  28.     font-size: 18px;
  29.     margin: 0;
  30.     text-align: center;
  31.     color: #F47D31;
  32. }
  33. h4{
  34.     color: #F47D31;
  35.     background-color: #FFFFFF;
  36.     -webkit-box-shadow:2px 2px 20px #888;
  37.     -webkit-transform:rotate(-45deg);
  38.     -moz-box-shadow: 2px 2px 20px #888;
  39.     -moz-transform:rotate(-45deg);
  40.     position: absolute;
  41.     padding: 0 150px;
  42.     top: 50px;
  43.     left: -120px;
  44.     text-align: center;
  45. }
  46. nav{
  47.     display: block;
  48.     width:25%;
  49.     float:left;
  50. }
  51. nav a:link, nav a:visited{
  52.     display:block;
  53.     color: #F47D31;
  54.     border-bottom: 3px solid #FFFFFF;
  55.     padding: 10px;
  56.     text-decoration: none;
  57.     font-weight: bold;
  58.     margin: 5px;
  59. }
  60. nav a:hover{
  61.     color: white;
  62.     background-color: #F47D31;
  63. }
  64. nav h3{
  65.     margin: 15px;
  66.     color: white;
  67. }
  68. #container{
  69.     background-color: #888888;
  70. }
  71. section{
  72.     display: block;
  73.     width: 50%;
  74.     float:left;
  75. }
  76. article{
  77.     background: #eee;
  78.     display: block;
  79.     margin: 10px;
  80.     padding: 10px;
  81.     /*
  82.     -webkit-border-radius: 10px;
  83.     -moz-border-radius: 10px;
  84.     */
  85.     border-radius: 10px;
  86.     /*-webkit-box-shadow:2px 2px 20px #888;*/
  87.     /*-webkit-transform:rotate(-10deg);*/
  88.     /*-moz-box-shadow:2px 2px 20px #888;*/
  89.     /*-moz-transform:rotate(-10deg);*/
  90.     transform:rotate(-10deg);
  91.     box-shadow: 2px 2px 20px #888;
  92. }
  93. article header{
  94.     border-radius: 10px;
  95.     padding: 5px;
  96. }
  97. article footer{
  98.     border-radius: 10px;
  99.     padding: 5px;
  100. }
  101. article h1{
  102.     font-size: 18px;
  103. }
  104. aside {
  105.     display: block;
  106.     width: 25%;
  107.     float: left;
  108. }
  109. aside h3{
  110.     margin: 15px;
  111.     color: white;
  112. }
  113. aside p{
  114.     margin: 15px;
  115.     color: white;
  116.     font-weight: bold;
  117.     font-style: italic;
  118. }
  119. footer{
  120.     clear:both;
  121.     display: block;
  122.     background: #F47D31;
  123.     color: #FFFFFF;
  124.     text-align: center;
  125.     padding: 15px;
  126. }
  127. footer h2{
  128.     font-size: 14px;
  129.     color: white;
  130. }
复制代码
2.2 盒子模型

初步感受盒子模型中的padding和margin的区别，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>盒子模型</title>
  7. </head>
  8. <body>
  10. <h2>盒子模型演示</h2>
  12. <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
  14. 这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。
复制代码
效果如下：

如果我们去掉padding一行：

效果为：

可以看出，去掉padding一行，灰色部分长宽都缩小了25px。
如果我们去掉margin一行，显示效果：

可以看出，里浏览器页面的25px距离没有了。
由上可以看出，padding的变化决定了盒子内边距的变化，而margin的变化是对比浏览器而决定它的边距变化。
2.3 float浮动

浮动，简单来说就是让我们的元素按照我们希望的排列顺序进行排列，例如图片的任你喜欢的方式排放。
  1. //HTML代码
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.         <meta charset="UTF-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.         <title>Document</title>
  10.         <link rel="stylesheet" href="./css/html5.css">
  11. </head>
  13. <body>
  14.        
  15.                 <img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
  16.                 <img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
  17.                 <img class="fly" src="https://blog.csdn.net/./images/big.jpg" alt="">
  18.        
  19. </body>
  21. </html>
复制代码
当没有进行浮动时的效果：

添加浮动语句后：


实现了右浮动。
参考链接

参考文档

来源：https://blog.csdn.net/m0_46275263/article/details/125299345
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

前进之路

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表