HTML与CSS

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。

1.html的基本标签

标题标签： h1-h6 h1最大，h6最小
段落标签： p
换行标签： br
水平线标签： hr
加粗标签：strong
斜体标签：em
删除线：del
上下标 sup，sub
超链接标签：a
 -herf ：链接

2.html列表标签

1 无序 ul-> li
2 有序 ol-> li
3 自定义 dl-> dt-> dd

3.表格标签

table ：表格标签
tr：换行标签
th：定义表格标题
td：定义表格单元格

4.表单

<form action="服务器地址" method="get/post" name="formname">
 <input type="text/password/radio||checkbox/submit/reset/file/hidden"
 name="表单元素的名称" value="表>
可以将name和value看做是 map表中的键和值

5.input标签

input的属性：（即value的属性）
只读 readonly： 放在定义好的value后 ，表示只读不能修改
禁用 disabled： 放在定义好的value后，表示禁用
size： 表示输入框的宽度
最大长度 maxlength： 表示输入框的最大长度
文字提示内容 placeholder： 表示输入框的提示信息
必须填写 required： 表示输入框必须填写

CSS

css:级联样式表
1.样式的使用
1.1 内联样式（行内样式）： 直接在标签中使用style属性来定义样式
1.2 内部样式表： 在head标签中使用style标签来定义样式
1.3 外部样式表： 在head标签中使用link标签来引入外部样式表
对于外部样式来说，在定义好的css文件中，我们可以使用<link rel="stylesheet" href="css文件的路径">来引入外部样式表

2.样式的优先级
2.1 内联样式 > 内部样式表 > 外部样式表
2.2 样式的优先级是按照从上到下的顺序进行加载的
2.3 样式的优先级是按照从左到右的顺序进行加载的
当几个样式同时作用在一个元素上时，优先级高的样式会覆盖优先级低的样式

3.基本选择器：
选择器：选择对应的元素设置对应样式效果
eg: div{
    width: 100px;
    height: 100px;
    background-color: red;
}
选择器的分类：
1. 标签选择器： 选择对应的标签设置样式
2. 类选择器： 选择对应的类设置样式 （以.开头的选择器 运用时用class=“?”）
3. id选择器： 选择对应的id设置样式（以#开头 运用时用id=“?”） ---一个标签只能有一个id选择器
一个id选择器也只能被一个标签所使用
4.通配选择器* 优先级很低 *{margin:0px pandding:0px}
5.群组选择器
ID选择器>类选择器>标签选择器>通配选择器

6.层次选择器
    E F ：选择E元素中的后代F元素设置样式
    E>F ：选择E元素的子元素F设定样式
    E+F ：选择E元素的相邻兄弟元素F设定样式
    E~F ：选择E元素的所有兄弟元素F设定样式

7.结构伪类选择器
    先选择第N个儿子，再看元素是否为要设定的元素
    E： first-child
    E： last-child
    E： nth-child
    先选择元素，再选择儿子
    E： first-of-type
    E： last-of-type
    E： nth-of-type

8.超链接伪类选择器
a：link使用前的效果
a:visited 点击后的效果
a:hover 触碰到时的效果
a:active 点击不松开后的效果

CSS常用样式

背景属性：
  background-color
  background-image
  background-repeat背景平铺 no-repeat不平铺
  background-position 背景定位
文本属性：
   color文本颜色
   text-align 文本对齐
   text-decoration:文本修饰
   line-height行高
   letter-spacing 字母间距
   world-spacing 文字间距
   text-shadow文本阴影(X,Y,模糊半径)
   text-indent文本缩进
字体属性：
    font-size
    font-family字体系列
    font-style字体风格
    font-weight字体粗细(100px-900px)
    font:风格，粗细，大小，系列
列表属性：
     list-style-type:列表风格类型
     list-style-image：列表风格图片
     list-style-position：列表标志定位
     list-style
元素分类
   1.块元素 p,hx,div,ul,li....
   特点独占一行，有宽度和高度
   2.内联元素strong，em，img
   特点不会独占一行，没有高度和宽度

元素类型转换(display)
   block
   inlin
   block-inlin
网页布局
  1.盒子模型+浮动
  2.定位
盒子模型
  盒子构成：内容+内边距+边框
  内边距：内容与边框的距离
  外边距：边框以外的距离

块元素居中 margin 0px auto

边框border
   border-color
   border-style
   border-width
   综合 border color width style
   圆角边框 border-radius：半径(50%)
   水平居中text-align: center;
   垂直居中 vertical-align: middle;
浮动
    float left right non
    clear 去除浮动
    夫边框塌陷解决方案
    .father:after{
    display:block
    content:""
    clear:both;(right left)
    }

定位
    position定位标签
    static
    absolute绝对定位
    fixed
    relativehtml