# HTML+CSS # —— 常用知识整理

一、前端介绍

HTML：用来勾勒出页面的结构和显示的内容
CSS：用来美化页面的
JavaScript：给页面添加动态的效果和内容
jQuery：用来简化JavaScript代码的框架

二、 HTML

2.1 介绍

Hyper Text Mark Language：超文本标记语言
什么是超文本：不仅仅包含文本，还包括文本的字体效果，多媒体相关（音频、视频）
学习html主要学习的就是有哪些标签，标签内部有哪些属性,标签和标签间的嵌套关系
XML中的标签可以自定义，HTML中的标签是提前定义好的

2.2 创建html文件

html是一种文本文件，新建文本文件改成html类型即可
或者在IDE中，新建html文件

2.3 HTML页面结构

2.4 文本标签

h1-h6 内容标题标签，内容独占一行属性：align=left/right/center
p 段落标签内容独占一行
hr 水平分割线

2.5 列表标签

2.5.1 无序列表

2.5.2 有序列表

 
    打开冰箱门
    把大象装进冰箱
    关上冰箱门

2.5.3 定义列表

    
        凉菜
        大拌菜
        花毛一体
        拍黄瓜
        炒菜
        宫保鸡丁
        木须肉
        小炒肉

2.5.4 嵌套列表

2.5.5 列表嵌套练习：

样例

image.png

代码

2.6 元素(标签)的分类

块级元素：独占一行
- h1-h6
- p
- hr
行内元素：和其它行内元素共占一行
- 斜体：em i
- 加粗：strong b
- 下划线： u
- 删除线： del s
行内元素的多个空格折叠问题，当多个空格存才时只能显示一个

2.7 常见特殊字符

1. 空格  ` `
2. <  `<`
3. >  `>`

2.8 分区标签

分区标签自身没有显示效果，可以充当容器的作用，用于包含多个功能相关元素，可以进行元素的整体控制。
div：块级分区元素，独占一行
span：行内分区元素，和其它行内元素共占一行

开发页面时通常会分为三大区

  
      头部
      体部
      脚部

H5标准中新增的分区标签作用和div一样但是更直观

  
      头部
      导航
      文章，正文
      脚部

2.9 图片 img

2.9.1 格式

2.9.2 路径分为两种：

相对路径：访问站内资源使用相对路径（相对于当前html页面文件路径，资源所在地方）
- 图片和页面同一目录，直接写图片名称
- 图片在页面的上级目录, ../图片名
- 图片在页面的下级目录, 文件夹名/图片名
绝对路径：访问其它网站的资源使用绝对路径，以http开头，存在风险，如果目标图片路径发生改变则不能显示

2.9.3 常用属性：

alt: 当图片不能正常显示的时候显示此内容
title：当鼠标在图片上悬停的时候显示此内容
width/height: 设置图片的宽度和高度，可以设置像素px或百分比%，如果只设置宽度则高度等比例缩放
支持的图片格式： jpg/jpeg不支持透明色 png支持透明色 GIF动图

2.9.4 图片地图

shape 形状
coords 坐标
href: 值为路径，可以写相对路径和绝对路径，路径可以指向页面，图片，如果指向的文件浏览器不能打开则会下载文件

2.10 超链接 a

格式: 显示内容
href: 值为路径，相对路径和绝对路径，路径可以指向页面或文件（浏览器支持的格式直接浏览，不支持的格式下载）
target="_blank"，跳转页面时开启一个新的窗口显示此页面，如果不加则从当前窗口跳转
a标签和img标签嵌套实现图片添加点击事件
锚点用法：href内填写#id，则可以点击跳转到页面中id为id的元素地方

2.11 表格标签 table tr td

table属性：
- border边框粗细
- cellspacing单元格与外边框的间距
- cellpadding单元格与内容的间距
- bgColor背景颜色
- width 宽度
- align 对齐方式
td属性：
- colspan 跨列
- rowspan 跨行
表格分组标签：
- thead 头分组
- tbody 体分组
- tfoot 脚分组
th：表头和td的区别就是th里面的内容会字体加粗
caption：表格的标题居中显示在table的正上方

2.12 表单form相关

2.12.1 表单的作用：获取用户输入的各种信息


    各种表单控件……

action:提交的地址,后台处理模块地址、名
method:提交方式，有get和post两种
- get方式，数据直接显示在url上进行提交，速度快，安全性低；
- post方式提交后台异步提交，数据不显示，速度略慢，相对get更安全

2.12.2 常见表单相关的控件：

文本框

image.png
```
   
```
- type：类型是文本框
- size：长度
- name：提交数据时的键（key），用户输入的内容为值
- maxlength:最大字符长度
- value:设置默认值
- readonly:只读
- placeholder：占位文本-->
密码框

image.png

单选

image.png

     
    
- 单选中name相同的为一组，可以实现选中一个后同组中其他单选被弃选 
- checked表示已经被选上

多选（复选框）

image.png

    
    
    
- name相同为一组，可以实现对于一个需要多个数据的业务一次提交一组数据
- checked表示已经被选上

下拉选

image.png

    
- 用于规定数据选择范围，只能从中选一个，selected表示已经被选上

日期选择器

image.png

文件选择器

image.png

文本域

image.png

    这家伙很懒。。。
- rows和cols表示几行几列

按钮

image.png

     //点击会将表单内容清除
     
    //点击会提交表单

隐藏域：用于不需要用户没必要知道、看到、操作，仅仅用来存放数据提交等情况
```
   
```
标签label：给一些选项加上文字标签，更直观
- image.png

        
        王者荣耀 
- for对应谁的id就给谁加上标签

2.12.3 代码举例：

样例：

image.png

代码

三、 CSS层叠样式表单

3.1 介绍

用来控制网页元素的各种样式，颜色、对齐、大小、宽高、布局等等
网页的3个层：
- 内容层： HTML承载页面的内容
- 表示层： CSS 的作用就是给网页做化妆的，实现显示效果
- 行为层： JS 为网页添加程序行为

3.2 第一个CSS

3.3 CSS 注释

css 中只能使用 /* */ 注释，不能使用 // 也不能使用 ``
如果使用错误的注释，会造成CSS效果显示失败。

3.4 CSS的3种使用方式

内联式CSS：
- 直接写在元素的style属性中的css样式
- 具有最高的优先级别
- 只作用在当前元素上，不能复用的样式
```
  哈哈哈
```
网页内嵌式：
- 使用
  哈哈哈
外联式
- 样式保存在.css文件中
- 使用元素引用到当前页面中的样式
- 可以作用在所有引用了CSS文件的网页，可以在这些网页复用
```
  
```
- 大型网站一般都使用外部式CSS

3.5 CSS 样式的优先级

当内联样式，内部样式，外部样式，等多个样式作用在同一个元素时候，元素最终优先采用的样式。称为样式的优先级。
浏览器（用户代理）默认样式优先级最低。
内部样式，外部样式，哪个距离元素近，哪个优先
内联样式优先级最高
内联 > 内嵌 > 外联 > 浏览器

3.6 CSS 继承特性

元素有父子嵌套关系时候，外层设置的可继承CSS属性，可以被子元素继承。

常见的可继承属性：颜色，字体等

  
      哈哈哈
      呵呵呵

3.7 CSS 语法

3.7.1 选择器

元素选择器：使用元素名选择全部的同类元素

  /*将所有p标签内容颜色变红*/
  p {color: red}

id 选择器：使用#id选择页面中唯一的一个元素
```
  /*将id为menu的元素内容颜色变红*/
  #menu {color: red}
```
- 网页中的ID属性应该唯一

类选择器：使用.class 选择一组具有相同class属性的元素
```
  /*将所有class含error的元素内容变红*/
  .error {color: red}
```
- 一个元素上可以使用多个class，绑定多个类选择器样式

派生选择器：利用元素的层级关系选择元素，绑定样式

子孙后代选择

  /* 选择 div 中全部的子孙p元素内容颜色变成红色 */
  div p {color: red;}

子选择

  /* 选择div下一层的p元素（不包括p中再下一级的其他p元素）颜色变为红色 */
  div>p {color: #ddd}

选择器组：为了给一组元素设置一致样式，可以使用组选择器

  h1, h2, h3, h4, h5 {boder-bottom: 1px solid #ddd;}

  /*相当于*/

  h1{boder-bottom: 1px solid #ddd;}
  h2{boder-bottom: 1px solid #ddd;}
  h3{boder-bottom: 1px solid #ddd;}
  h4{boder-bottom: 1px solid #ddd;}
  h5{boder-bottom: 1px solid #ddd;}

伪类选择器：用于设置元素的不同显示状态时候的效果
- 鼠标悬停：hover 用于设置鼠标停留在元素上面时候的显示效果。
```
  hover{
      color:red;
  }
```

复合使用选择器：id，类，元素，伪类等选择器可以组合使用

  p.error{样式}  /*选择p元素，其class属性包含 error/*
  p.error:hover{样式} /*选择p元素，其class属性包含 error 并且设置鼠标悬停在上方的效果/*

3.7.2 CSS 常用属性

关于值的单位，常用属性值：
- px 像素
- em 字体大小
- % 百分比
- 颜色字面量 red blue 等
- 16进制RGB颜色如： #48547d

文本相关属性

文字的缩进

  text-indent: 2em; /* 文本缩进2个字符 */

设置字体大小
```
  font-size: 12px;
```
行高
```
  line-height: 1.6em;
```
设置文字颜色
```
  color: #48547d;
```

块元素中的文本居中

  text-align: center; /* 块元素中的文本居中 */

3.8 盒子模型（块状block、行内-块状inline-block元素全部起效）

3.8.1 一个元素从外到内应该具有外边距、边框、内边距、宽高

宽高：元素的宽高
外边距：距相邻元素或上级元素的距离
边框：元素的边框
内边距：内容距元素边框的距离

image.png

3.8.2 粘连问题

当元素的上边缘和上级元素的上边缘重叠时，此时给元素添加上外边距会导致上级元素联动的效果，给上级元素添加 overflow:hidden 解决。
- 案例1，没带overflow:hidden
  
  image.png

案例2，加上overflow:hidden

image.png

3.8.3 利用盒子模型，移动元素

给上级元素添加内边距，移动内容；影响：【会影响上级元素的宽高】
给元素自身添加外边距，推荐使用这种方式，不会影响宽高

3.8.4 写法

margin和padding

一步到位法：遵守顺序：上右下左

  margin：5px 10px 15px 20px
  /* 代表上右下左外边距分别为5px 10px 15px 20px */
  
  /* 上下一致，左右一致时能简写为 */
  margin：5px 10px
  
  /* 上下左右一致时能简写为 */
  margin：5px

单独设置法：

  margin-left:5px
  /* 代表左外边距分别为5px */
  /* 其他方向类比即可 */

boeder,由于需要设置样式、颜色、粗细，所以略有不同

一步到位法：样式、颜色、粗细可写可不写

  border：solid 1px red
  /* 代表边框为：实线，1像素粗细，红色 */