html_css总结

Posted 2021-02-13 iam-ironman

html：超文本标记语言
web应用（crm）

HTML有且只有一个HTML根标签。
HEAD标签代表文件头。
BODY标签代表网页主体。

如何编写HTML？
HTML文件的后缀名.html。

常用标签：
基本标签：
   HTML
   HEAD
   BODY
   HR: 分割线
   BR：换行
   PRE: 原样输出
   H1~H6：标题
   
格式化标签：
   SUB: 下标
   SUP：上标
   
字体标签：
   <font>
   <strong>：加重点
   <b>：加粗
   <i>：斜体

列表标签：
   ol和li：有序列表
   ul和li：无序列表
   dl、dt和dd：定义列表
   
超链接标签：a
   1）链接其他资源；
   2）锚点定位；
   3）当做一个按钮使用；
   
   href：
      1）如果是http协议，那么浏览器就会启用http解析器解析网页内容；
      2）如果没有任何协议，默认就是file协议；
      3）如果是其他协议（mailto、javascript），浏览器就会查询注册表是否存在处理该协议的软件
      。如果有就启用该软件处理协议。
   target：指定资源的打开方式。
      _self: 在当前窗口中打开资源；
      _blank: 在新窗口中打开资源；
      framename: 在指定框架中打开资源；
      
图像标签：img
   src：指定图片资源的路径 
   alt：指定可替换文本
   
表格标签：
   <table>：定义一个表格
      <caption>：表格标题
      <tr>: 定义一行
         <td>: 定义单元格
         <th>：定义标题的单元格
      <thead>：表格头，可以没有
      <tbody>：表格主体，至少出现一次
      <tfoot>：表格底部，可以没有
      
   表格相关的属性：
      border：定义表格边框
      width: 定义表格的宽度
      height: 定义表格的最小高度
      cellspacing: 指定单元格之间的间隔
      align: 表格的对齐方式，例如：居中center、左对齐left、右对齐right、两边对齐justify；
      
   指定行或列的对齐方式：
      align: 表格的对齐方式，如果放在tr标签中，那么该行中所有单元格都有效；
      如果放在td标签中，那么只对该单元格有效；
   
框架标签：把一个网页切割成不同部分，每一个部分都是一个框架。
   frameset：框架集，负责把页面中所有框架包含起来；
      cols: 指定每一个框架的宽度（垂直排列）;
      rows: 指定每一个frame的高度（水平排列）；
   frame：框架，一个框架代表一个页面；
   
   注意：frameset不能够与body同时存在。
   
      

   
CSS: 层叠样式单，美化网页。
   编写方式：1）在style标签中编写CSS；2）在外部的CSS文件中编写CSS，然后把CSS文件引入到HTML页面；
      3）在HTML元素中定义style属性（优先级最高）；

   选择器：标签选择器、类选择器、ID选择器、伪类选择器、通用选择器、交集选择器、并集选择器。
   CSS样式：
      1）背景样式：
         background-color: 背景色
         background-image: 背景图
         background-repeat：no-repeat 不平铺
         background-position：背景图的位置
         background-attachment: fixed  固定背景图

      2）字体和文本样式：
         font-size: 字体的大小
         color: 字体的颜色
         text-indent: 文本缩进
         text-decoration: 修饰文本
         text-align: 文本对齐方式
         text-transform: 转换大小写

      3）表格样式：
         border-collapse: 合并单元格的边框；
         border-spacing：设置单元格边框的距离；

      4）边框样式：设置元素边框的宽度、颜色和风格。
         border-开头

      5）盒子模型：设置元素的内边距和外边距。
         内边距：元素内容与边框的距离；
            注意：元素实际宽度=元素的width + 左右padding
               元素的实际高度=元素的height + 上下padding
         外边距：元素边框以外的部分；
            margin-left：-10px

      6）定位：
         相对定位：相对于元素原先位置的定位；
         绝对定位：相对于屏幕的位置而言；
         固定定位：跟绝对定位一样，但是不会随着屏幕滚动而滚动；
            postion：relative|absolute|fixed
            left：元素左上角的横坐标
            top：元素左上角的纵坐标

         浮动定位：
            float：设置向哪个方向浮动；