HTMLCSS基础知识点

HTML：
超文本标记语言
超文本：文字 图片 音频 超链接等；
标记： <> 单标记  </>双标记
标记语言：将特定的英文单词放在标记中 这个标记就有了特殊含义，这个标记也可以叫做标签
1，HTML基础结构：
①<!DOCTYPE html> 文档头声明
②<html> </html>根元素：
<head> </body> :头 head标签内部的内容绝大部分是不可见的
<body> </body>: 身体 主要书写页面中的内容，用于搭建html结构
<div> </div> ：称为区隔标记，作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。
<div>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，
示例代码：
<!--文档头（类型）的声明-->
<!--<!DOCTYPE html>; 代表HTML的标准
注意：文档头声明 不是标签-->
<!DOCTYPE html>
<html>
<!--代表了HTML的根元素-->
<head>
    <!--head:标签内部的内容绝大部分是不可见的 修饰性的不可见-->
    <!--title:定义文档的标题，在页面中是可见的-->
    <!--mate: 定义HTML页面的元数据 -->
    <title>清茶煮酒</title>
    <meta charset="uft-8">
    <!--meta中的charset属性针对搜索引擎和解析格式的属性-->
    </head>
    <body>
        <!--主要书写页面中的内容 用于搭建HTML结构-->
        <!--历史上最常用的标签div -->
        <div></div>
    </body>
    </html>
    <!--
        放在外面的是父标签
        放在里面的是子标签
        父子关系时候需要用tab进行缩进
        -->
——————————————————————————————————————————————————
 
CSS
1.内联样式表
作为属性 直接书写在标签内部
<div style="width: 100px; height:100px;</div>
注：前端中基础单位都是像素：px
width:宽度   height:高度   background-color:背景颜色
优点：优先级非常高
缺点：非常繁琐，冗余代码非常多；维护困难
使用场景 ：确定样式，书写后不需要修改
 
2.内部样式表
CSS选择器
①标签选择器：作用范围是所有相同的标签
网页中所有的div标签都会具有样式
  div{
  color: pink; 声明 ：需要设置的样式
  background-color: green;最后一条声明的;可以省略 建议写上  }
②类名选择器：用于选择一类具有相同特征的标签
在一个页面中可以有N个 .class对应的属性值可以重复
  .word{
  color: pink;   
    }
③ID选择器：用于选择第一个具有特定ID名称的标签
在一个页面中只能有1个 #id对应的属性值不能重复 
  #s{
  color: pink;
  }
 
 
④群组选择器：
选择器1，选择器2 {}
中间用逗号，不涉及优先级问题
 
后代选择器：
选择器1  选择器2{}
中间用空格，针对左右的后代，优先级是相加的
 
子代选择器：
选择器1 > 选择器2
中间用大于号，只针对子集由小，优先级大于后代选择器
 
动态伪类选择器：
1.用来添加一些选择器的特殊效果
  1.  a:link {}   用于定义未访问的连接
  2. a:visited{} 用于定义被访问过的链接
  3. a:hover{}  用于定义鼠标在当前标签内部移动的时候
  4. a:active{}  用于定义被选中的链接
ICE原则：用于计算选择器的优先级：
标签名：1   class: 10   ID:100   内联：1000
优点：加载速度快，没有服务器的请求压力
缺点：单个文件过大，维护起来有点困难
使用场景：大型网站的首页
 
3.外部样式表：
使用link标签重新引入HTML文档
优点：便于维护，可以重复使用
缺点：垃圾代码多，加载速度慢，会造成服务器的额外压力
使用场景： 多用于大型网站的二三级页面
 
选择器优先级：
ID选择器>类选择器>标签选择器  
如果样式直接写在标签内部，那么它的优先级是1000
 
样式表优先级：
内联样式>内部样式表>外部样式表
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
<head>
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>
两种方式：
选择器优先级相同时，谁后加载谁生效
选择器优先级不同时，谁优先级高谁生效
 
CSS样式具有继承性：
继承性是指指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性，例如下面的代码，div中包含2个p标签，1个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。
示例代码：
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>  
  7.         div {  
  8.             color: red;  
  9.         }  
  10.     </style>  
  11. </head>  
  12. <body>  
  13.     <div>  
  14.         <p>苹果</p>  
  15.         <p>香蕉</p>  
  16.         <span>葡萄</span>  
  17.     </div>  
  18. </body>  
  19. </html>  
显示结果如下：
苹果
香蕉
葡萄
 
posted @ 2017-12-05 14:40  散步旳猫  阅读(132)  评论(0)  编辑  收藏  举报