HTML和CSS的学习总结
更新日期:
琅琊榜首，天下我有！
一、HTML的基本格式
所有标签属性命名都要小写，属性值用双引号。
html文档包括两部分head和body.
head必须要有title和编码格式。
所有可见内容要放body里面。
正确格式：
<!doctype html>
<html lang="en"/>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
</body>
</html>
二、HTML里面一些常用的标签
- 标签分为行级标签和块级标签：
块级标签：div,a,h1-h6,ol,ul,p,table,form等。
- 行级标签：span,br,small,strong,img等（其中img标签比较特殊，虽然是行级标签，但是可以设置width、height)
- 默认值（body)
可以设边框、背景:
设置边框时，可设width、height.
设置背景时，背景撑满全屏，可修改body内容，但不会影响背景。
有默认margin:8px;
- 默认值（div)
继承父级width;
无默认高度，内容撑开高度；
默认样式：display:block;
- 默认值 (h1-h6)
有margin-top、margin-bottom;
字体加粗：font-weight:blod/bloder;
- 默认值 （ol、ul、dl）
默认有margin、padding、序列号
- 默认值 （table)
table:
display:table;
border-collapse:separate;
border-spacing:2px;
border-color:gray;
th:字体加粗、上下左右居中
border-collapse:collapse/separate
border-spacing:2px;
border-spacing:2px 3px;
text-align:left/center/right;
vertical-align:top/middle/bottom;
- 默认值 （a)
a标签：默认颜色、underline、内容撑开宽度
四个状态：link、visited、hover、active;
当a为行级时，margin可设置左右，可为负数；
padding可用上右下左，不可为负数；
当a为块级时，margin可设置上右下左，可为负数；
padding可用上右下左，不可为负数；
默认值 （img）
<img src="#" alt="#" title="#"/>
可以设置width、height;
在某些浏览器中图片加载不出来时会有边框。
- 默认值 （border）
border-color默认与字体一种颜色；
border-width默认3px、不可为负数；
border-style:solid;
三、css
css选择器：通配选择器，标签选择器，类选择器，id选择器，层级选择器，群组选择器。
css的三种引用方式：
1.<style>标签引入：在</head>上面添加<style>.....</style>
2.标签内部引入方式（行间样式）<div style="....">....</div>
3.外部引用：<link rel="stylesheet" type="text/css" href=""/>
对position的认识
position有三种类型：
relative 相对定位：对标签没有属性改变。设置left,right,top,bottom方向可以偏移位置。有z-index来提高级别，默认后面标签元素覆盖前面元素。
absolute 绝对定位：对标签有属性改变。float无效，有清除浮动的效果。内容撑开宽度，高度。有z-index层级样式。margin:0 auto；无效。默认后面标签元素覆盖前面元素。以父级标签设置relative或者absolute属性后为方向起点。没有父级设置，以body左上角为方向起点。
fixed 固定定位：和绝对定位相似，也改变元素属性。方向固定后，以浏览器窗口为起点定位，不会因为页面滚动而改变位置。
