# 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页面结构

<!-- 文档声明，告诉浏览器使用哪个版本的标准解析此页面 此写法是最高版本h5的写法-->
<!DOCTYPE html>
<html><!-- 除了声明所有的标签都在html标签内部 -->
    <head><!-- 头：里面的内容是给浏览器看的 -->
        <meta charset="UTF-8"><!-- 告诉浏览器页面的字符集 -->
        <title>第一个页面</title><!-- 页面标题 显示在浏览器的选项卡中 -->
    </head>
    <body><!-- 体：里面的内容是给用户看的 -->
        内容
    </body>
</html>

2.4 文本标签

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

2.5 列表标签

2.5.1 无序列表

<ul>  <!--unordered无序 list列表-->
    <li></li> <!--list列表 item项-->
    <li></li>
    <li></li>
</ul>

2.5.2 有序列表

<ol type="1" reversed="reversed" start="10"> 
    <li>打开冰箱门</li>
    <li>把大象装进冰箱</li>
    <li>关上冰箱门</li>
</ol>

2.5.3 定义列表

    <dl><!--defined定义 list列表  -->
        <dt>凉菜</dt><!--defined  title标题  -->
        <dd>大拌菜</dd><!--defined  data数据  -->
        <dd>花毛一体</dd>
        <dd>拍黄瓜</dd>
        <dt>炒菜</dt>
        <dd>宫保鸡丁</dd>
        <dd>木须肉</dd>
        <dd>小炒肉</dd> 
    </dl>

2.5.4 嵌套列表

    <ol><!--有序列表和无序列表可以任意无限嵌套-->
        <li>ol1</li>
        <li>ol2
            <ul>
                <li>第二层1</li>
                <li>第二层2</li>
                    <ol>
                        <li>第三层1</li>
                        <li>第三层2</li>
                        <li>第三层3</li>
                    </ol>
                <li>第二层3</li>
            </ul>
        </li>
        <li>ol3</li>
    </ol>

2.5.5 列表嵌套练习：

样例

image.png

代码

  <ol>
      <li>java基础
          <ul>
              <li>变量</li>
              <li>数据类型</li>
              <li>运算符</li>
              <li>流程控制
                  <ul>
                      <li>if</li>
                      <li>switch</li>
                      <li>while</li>
                      <li>for</li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>java面向对象</li>
      <li>javaAPI</li>
  </ol>

2.6 元素(标签)的分类

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

2.7 常见特殊字符

1. 空格  `&nbsp`
2. <  `&lt`
3. >  `&gt`

2.8 分区标签

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

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

  <body>
      <div>头部</div>
      <div>体部</div>
      <div>脚部</div>
  </body>

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

  <body>
      <header>头部</header>
      <nav>导航</nav>
      <article>文章，正文</article>
      <footer>脚部</footer>
  </body>

2.9 图片 img

2.9.1 格式

<img src="图片路径">

2.9.2 路径分为两种：

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

2.9.3 常用属性：

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

2.9.4 图片地图

<img src="../imgs/b.jpg" width="1000px" usemap="#mymap">
<map name="mymap" id="mymap">
    <area shape="circle" coords="345,250,50" href="../imgs/k.jpg">
    <area shape="circle" coords="460,390,50" href="day01.zip"> 
</map>

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

2.10 超链接 a

格式: <a href="" target="_blank">显示内容</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 表单的作用：获取用户输入的各种信息

<form action="" method="">
    各种表单控件……
</form>

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

2.12.2 常见表单相关的控件：

文本框

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

image.png

    <input type="password" value="这是密码框" name="password" placeholder="密码" maxlength="6"/>

单选

image.png

    <input type="radio" name="group1"> 
    <input type="radio" name="group1">
- 单选中name相同的为一组，可以实现选中一个后同组中其他单选被弃选 
- checked表示已经被选上

多选（复选框）

image.png

    <input type="checkbox" name="hobby" value="ldm" id="ldm">
    <input type="checkbox" name="hobby" value="wzry" id="wzry" checked>
    <input type="checkbox" name="hobby" value="gdx" id="gdx" checked>
- name相同为一组，可以实现对于一个需要多个数据的业务一次提交一组数据
- checked表示已经被选上

下拉选

image.png

    <select name="city">
        <option>请选择</option>
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select>
- 用于规定数据选择范围，只能从中选一个，selected表示已经被选上

日期选择器

image.png

    <input type="date" name="birthday">

文件选择器

image.png

    <input type="file" name="pic">

文本域

image.png

    <textarea rows="3" cols="20" name="intro">这家伙很懒。。。</textarea>
- rows和cols表示几行几列

按钮

image.png

    <input type="reset" value="重置按钮"> //点击会将表单内容清除
    <input type="button" value="自定义按钮"> 
    <input type="submit" value="提交按钮">//点击会提交表单

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

        <input type="checkbox" name="hobby" value="wzry" id="wzry" checked/>
        <label for="wzry">王者荣耀</label> 
- for对应谁的id就给谁加上标签

2.12.3 代码举例：

样例：

image.png

代码

  <form action="http://doc.tedu.cn" method="get">
      <!--文本框-->
      <input type="text" size="30" name="user" maxlength="5" value="啦啦" placeholder="哈"/><br>
      <!-- 密码框 -->
      <input type="password" name="password" placeholder="密码" maxlength="6"/><br>
      <!-- 单选 -->
      性别: <input type="radio" name="gender" value="nan"/>男 
          <input type="radio" name="gender" value="nv" checked/>女<br>
      <!-- 多选 -->
      兴趣: <input type="checkbox" name="hobby" value="dlq" id="dlq"/>
              <label for="dlq">打篮球</label> 
              <input type="checkbox" name="hobby" value="ldm" id="ldm"/>
              <label for="ldm">撸代码</label>
              <input type="checkbox" name="hobby" value="wzry" id="wzry" checked/>
              <label for="wzry">王者荣耀</label> 
              <input type="checkbox" name="hobby" value="gdx" id="gdx" checked/>
              <label for="gdx">搞对象</label> <br>
      <!-- 下拉选 -->
      城市：<select name="city">
                  <option>请选择</option>
                  <option value="bj">北京</option>
                  <option value="sh" selected>上海</option>
                  <option value="gz">广州</option>
          </select><br>
      <!-- 时间选择器 -->
      生日：<input type="date" name="birthday"><br>
      <!-- 文件选择器 -->
      靓照：<input type="file" name="pic"><br>
      <!-- 文本域 -->
      <textarea rows="3" cols="20" name="intro">这家伙很懒。。。</textarea><br>
      <!-- 隐藏域 -->
      <input type="hidden" name="userid" value="198"> 
      <hr>
      <!-- 重置按钮 -->
      <input type="reset" value="重制"> 
      <!-- 自定义按钮 -->
      <input type="button" value="自定义按钮"> 
      <!-- 提交按钮 -->
      <br><input type="submit" value="提交">

三、 CSS层叠样式表单

3.1 介绍

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

3.2 第一个CSS

<style type="text/css">
    /*** 第一个CSS 把所有p标签内容变为红色***/
    p{color: red}
</style>

3.3 CSS 注释

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

3.4 CSS的3种使用方式

内联式CSS：
- 直接写在元素的style属性中的css样式
- 具有最高的优先级别
- 只作用在当前元素上，不能复用的样式
```
  <p style="color:red">哈哈哈</p>
```

网页内嵌式：

使用 <style>元素嵌入到页面中的CSS样式

作用在当前页面中的元素，可以在当前页面范围内复用

      <style type="text/css">
          /*** 把所有p标签内容变为红色***/
          p{color: red}
      </style>
      
      <p>哈哈哈</p>

外联式
- 样式保存在.css文件中
- 使用 <link> 元素引用到当前页面中的样式
- 可以作用在所有引用了CSS文件的网页，可以在这些网页复用
```
  <link href="css/bootstrap.min.css" rel="stylesheet">
```
- 大型网站一般都使用外部式CSS

3.5 CSS 样式的优先级

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

3.6 CSS 继承特性

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

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

  <div style="color:red">
      哈哈哈
      <p>呵呵呵</p>
  </div>
  <!--这里‘哈哈哈’和‘呵呵呵’都会变成红色，p继承了父元素的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

        <div style="width:300px;height:200px;background-color:#ff9900;overflow:hidden">
            <div style="width:250px;height:150px;background-color:#dd5555;margin:25px">
            </div>
        </div>

案例2，加上overflow:hidden

image.png

        <div style="width:300px;height:200px;background-color:#ff9900;overflow:hidden">
            <div style="width:250px;height:150px;background-color:#dd5555;margin:25px">
            </div>
        </div>

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像素粗细，红色 */