HTML和CSS基础知识分享

HTML和CSS基础知识分享
  一、简介
 
  HTML指的是超文本标记语言,使用标记标签来描述网页,标签是由尖括号和关键词组成,并且是成对出现,例如<html></html>。
 
  二、一个完整的html网页
 
  <!DOCTYPE html> ?<!-- 有助于浏览器中正确显示网页 -->
 
  <html> ?<!-- html页面开始标签 -->
 
  <head>
 
  <meta charset="UTF-8"> ?<!-- UTF-8编码 ?-->
 
  <title>周杰伦</title> <!-- 标签页显示的内容 -->
 
  </head>
 
  <body>
 
  <img src="1.webp"> <!-- 插入一张图片 -->
 
  <h1>《说好不哭》</h1>
 
  <h3>词:方文山 ? 曲:周杰伦</h3>
 
  <h3>演唱:周杰伦/五月天阿信<h3><!-- h1-h5不同大小字体 -->
 
  <hr> <!-- 水平线 -->
 
  没有了联络 ?后来的生活 ?我都是听别人说<br><!-- 换行标签 -->
 
  说你怎么了 ?说你怎么过 ?放不下的人是我<br>
 
  人多的时候 ?就待在角落 ?就怕别人问起我<br>
 
  </body>
 
  </html> <!-- html页面结束标签 -->
 
  效果如下:
 
  三、其他标签介绍
 
  1、div和span标签
 
  div是一个块级元素,它包含的元素会自动换行。
 
  span是行内元素,在它的前后不会换行
 
  <div style="color:#0000FF">你们怎么了 ?你低着头</div> ?护着我连抱怨都没有
 
  <span style="color:#0000FF">电话开始躲 ?从不对我说</span> ?不习惯一个人生活
 
  2、a标签,超链接
 
  href:指定要跳转的地址
 
  target:指定方式打开新地址,默认当前页面打开,_blank在新页面打开
 
  <a href="" target="_blank">百度一下</a>
 
  3、<img>标签,插入图片
 
  本级目录
 
  父级目录
 
  也可以直接添加网络上的一张图片
 
  <img src=""> <!-- 插入一张图片 -->
 
  <img src=""> <!-- 插入一张图片 -->
 
  <img src=""><!-- 插入一张图片 -->
 
  四、CSS样式, 用于渲染HTML元素标签的样式
 
  1、内联样式
 
  span,将所有span标签内的文字都统一样式
 
  <style type="text/css">
 
  span{
 
  background-color:#000000; <!-- 黑底 -->
 
  color:#00FF00;<!-- 绿字 -->
 
  }
 
  </style>
 
  <span>离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
 
  <span>都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
 
  <span>拼命解释着 ?不是我的错 ?是你要走</span>
 
  id选择器,为一个样式起个别名,通过id引用
 
  <style type="text/css">
 
  #TS{
 
  background-color:#000000; <!-- 黑底 -->
 
  color:#FF00FF; ? ? ? ? ? ?<!-- 粉字 -->
 
  }
 
  </style>
 
  <span>离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
 
  <span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
 
  <span>拼命解释着 ?不是我的错 ?是你要走</span>
 
  类选择器,为一个样式起个别名,通过class引用
 
  <style type="text/css">
 
  #TS{
 
  background-color:#000000;<!-- 黑底 -->
 
  color:#FF00FF;<!-- 绿字 -->
 
  }
 
  。ST{
 
  background-color:#000000;<!-- 黑底 -->
 
  color:#00FFFF; ?<!-- 蓝字 -->
 
  }
 
  </style>
 
  <span id="TS">离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
 
  <span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
 
  <span>拼命解释着 ?<span class="ST">不是我的错</span> ?是你要走</span>
 
  2、外引样式
 
  新建一个aiyou.css文件,内容为
 
  #TS{
 
  background-color:#000000;
 
  color:#FF00FF;
 
  }
 
  。ST{
 
  background-color:#000000;
 
  color:#00FFFF;
 
  }
 
  在html源码中引用
 
  <link rel="stylesheet" type="text/css" href="aiyou.css">
 
  <span id="TS">离开我以后 ?要我好好过 ?怕打扰想自由的我</span>
 
  <span id="TS">都这个时候 ?你还在意着 ?别人是怎么怎么看我的</span>
 
  <span>拼命解释着 ?<span class="ST">不是我的错</span> ?是你要走</span>

推荐阅读