HTML与CSS 5天的理论知识汇总

总结：

1. web前端

- HTML: 负责搭建页面结构和内容            （盖房子 毛坯房）
- CSS: 负责美化页面                        （装修）
- JavaScript:负责给页面添加动态效果和动态内容       
- JQeury: 是一个js框架，为了简化js开发而生

2. 数据库

待更新

html学习内容

1:主要学习有哪些标签（tag或标记）
	
2:标签有哪些属性

3:标签和标签之间的嵌套关系

1、1 HTML介绍

• Hyper Text Mark Language:超文本标记语言，超文本：指不仅仅是纯文本还包括字体的各种设置（大小、颜色、样式等）和多媒体(图片、视频、音频)相关。
• HTML部署在服务器上，运行在浏览器上
• 可以理解为标签固定的XML

1、2 html结构

一、body内部常见的标签

1、 文本标签

1.1 文本标题标签

• h1-h6
• 特点： 独占一行，自带上下外边距
• 属性： align=left/right/center 左对齐 右对齐 中间对齐

1.2 段落标签

• p
• 特点： 独占一行，自带上下外边距

1.3 水平分割线

• hr

1.4 换行

• br

1.5 列表标签

1. 无序列表： ul（type） li
2. 有序列表： ol(type start reversed) li
3. 定义列表： dl dt dd 自带层级效果
4. 列表嵌套： 有序和无序列表可以任意无限嵌套

1.6 分区标签

• 作用：用于统一管理多个标签 类似于容器，分区标签自身没有显示效果

1. span：行内分区元素，共占一行
2. div：块级分区元素，独占一行

• html5标准中新增了几个分区元素

    
  头部
    
  体部
    
  脚部
    取代上面的写法 更直观 
    
  头部
    
  正文
    
  脚部
  

2、标签(元素)分类

1. 块级元素：独占一行

    -div
    -h1-h6
    -p
    -hr
   

2. 行内元素：共占一行

    -行span
    -加粗 strong和b
    -斜体 em和i
    -删除线del和s
    -下划线u
   

3、 实体引用（特殊字符）

1. 空格： 有折叠问题  nbsp牛逼是屁
2. 小于号： < lt老铁
3. 大于号： > gt干他
4. html： how to ml

4、图片标签img

• src:路径

  1. 相对路径：访问站内资源
     a. 同级目录 直接写图片名
     b. 上级目录 …/图片名(有几个上级写几个…/)
     c. 下级目录 文件夹名/图片名
  2. 绝对路径：访问站外资源，好处节省网站资源，坏处可能找不到图片

• alt:

  当图片不能正常显示时显示的文本

• title:

  当鼠标悬停时显示的文本

• width/height:

  宽高，赋值方式：1. 像素 2. 上级元素的百分比 如果只设置宽度 高度会等比例缩放

• 支持的图片格式：

  jpg/jpeg png(支持透明色) gif动图

5、图片地图map

• map属性：

  name 代表地图的唯一标识

• 子元素：

  area

• area属性：

    1、shape形状(矩形rect、圆形circle)
    2、coords坐标（矩形四个值两个对角线点的坐标，圆形三个值圆心坐标和半径）
    3、href:资源路径 页面资源和文件资源（浏览器能浏览则浏览 不能则下载）
  

6、超链接a

• 如果a标签不写href属性则就是纯文本

• target=_blank 开启新的窗口显示该页面，如果不写默认是从当前窗口跳转

• 如果a标签包裹文本内容则是文本超链接，如果包裹的是图片则是图片超链接

• 页面内部跳转

  1. 设置锚点用于定位
  2. 通过超链接跳转到锚的位置 回到顶部
     如果跳转的目的地有标签则直接给标签添加id属性即可

7、表格table

属性：

• border边框的粗细

• cellspacing：单元格间距和单元格距外边框的距离

• cellpadding：单元格的内边距

• 跨行rowspan 跨列colspan

  子元素：

• caption表格的标题

• tr td

• th table head 表头，加粗并居中

• 分区标签：thead tbody tfoot 对多行进行统一管理（比如统一添加样式）分区标签自身没有显示效果

8、表单form

• 作用：获取用户输入的各种数据把数据提交到服务器
• 主要学习有哪些控件：文本输入框、密码框、提交按钮、单选、多选、下拉选、日期选择器、文件选择器等
• 文本输入框 input type=text name value placeholder占位文本 最大长度maxlength 只读readonly
• 密码框 input type=password name
• 单选 input type=radio name value 默认选中checked 通过label标签扩充点击范围
• 多选 input type=checkbox name value 属性和单选一样
• 日期 input type=date name
• 文件选择 input type=file name
• 隐藏域 当需要给服务器提交数据但是此数据不需要给用户展示的时候使用 input type=hidden name value
• 下拉选 select:name 子标签 option:value selected默认选中
• 文本域 textarea:name rows行 cols列 占位文本placeholder
• 提交按钮 input type=submit value修改文本内容
• 重置按钮 input type=reset value修改文本内容
• 自定义按钮 input type=button value修改文本内容

CSS学习内容

• CSS：Casecading层叠 Style样式 Sheet表, 用于美化页面

一、CSS的引入方式

1. 内联样式:在标签的内部添加style属性,在属性内部添加css样式代码,弊端:不能复用
2. 内部样式:在head标签内部添加style标签,通过选择器给元素添加样式,好处可以复用 弊端:只能在当前页面复用
3. 外部样式:在单独的css文件中通过选择器给元素添加样式,在html页面中通过link标签引入样式文件, 好处:可以多页面复用

三种引入方式的优先级

1. 内联优先级最高
2. 内部和外部优先级相同,后执行覆盖先执行

二、九种选择器

1. 标签名选择器
   • 格式: 标签名{样式代码}
   • 选取页面中所有的指定标签
2. id选择器
   • 格式: #id{样式代码}
   • 当需要选择页面中的某一个元素时使用id选择器
3. class选择器
   • 格式: .class{样式代码}
   • 当需要选取页面中某一类元素(多个)时使用class选择器
4. 属性选择器
   • 格式: 标签名[属性名=‘属性值’]{样式代码}
   • 通过标签的属性去选择元素
5. 分组选择器
   • 格式: div,#id,.class{样式代码}
   • 将多个选择器合并成一个选择器
6. 子孙后代选择器
   • 格式: div span{样式代码}
   • 选取div里面所有的span(包括子元素和所有后代元素)
7. 子元素选择器
   • 格式: div>span{样式代码}
   • 选取div里面所有的子元素span
8. 伪类选择器
   • 用于选取元素的状态
   • 未访问状态link/访问过状态visited/点击状态active/悬停状态hover
9. 任意元素选择器
   • 格式: *{样式代码}
   • 选中页面中所的元素

三、颜色赋值

• 三原色:rgb red green blue 红 绿 蓝 每个颜色的取值是0-255

1. 通过6位16进制赋值 #ff0000
2. 通过3位16进制赋值 #f00
3. 通过3位10进制赋值 rgb(0-255,0-255,0-255)
4. 通过4位10进制赋值 rgba(0-255,0-255,0-255,0-1) a=alpha 透明度 值越小越透明

四、背景图片

	/* 设置背景图片 */
	background-image: url("../imgs/a.jpg");
	background-size: 100px 100px;
	/* 禁止重复 */
	background-repeat: no-repeat; 
	/* 控制背景图片的位置 
		left right top bottom center*/
	background-position: 10% 10%;

五、盒子模型

在这里插入图片描述

• 盒子模型由 宽高+外边距+内边距+边框组成

5.1 盒子模型之宽高

• 两种赋值方式:
  1. 像素
  2. 上级元素的百分比
• 行内元素不能修改宽高 宽高由内容决定

5.2 盒子模型之外边距

• 什么是外边距:元素距上级元素或相邻兄弟元素的距离称为外边距

• 赋值方式:

    margin-left/top/bottom/right:20px;
    margin:10px; 四个方向10px
    margin:10px 20px; 上下10 左右20
    margin:0 auto; 水平居中
    margin:10px 20px 30px 40px; 上右下左 顺时针 
  

• 行内元素上下外边距无效

• 左右相邻相加 上下取最大

• 当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,在上级元素中添加overflow:hidden 解决

5.3 盒子模型(Box Model)之边框

• 单个方向添加边框:
  border-left/right/top/bottom: 粗细 样式 颜色;
• 四个方向添加边框
  border:粗细 样式 颜色;
• 行内元素边框不影响元素所占高度
• 圆角:
  border-radius: 值越大越圆 超过宽高一半时变成圆形(前提宽高一样)

5.4 盒子模型之内边距

• 什么是内边距: 元素边框距内容的距离
• 如果需要移动元素的文本内容则必须使用内边距,如果需要移动元素的子元素内容可以使用两种方式1. 给子元素添加外边距 2.给元素添加内边距(会影响元素的宽高)
• 行内元素内边距不影响元素所占高度

六、 文本相关样式

1. 水平对齐方式
   text-align:left/right/center
2. 文本修饰
   text-decoration:overline/underline/line-through/none
3. 文本阴影
   text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰)
4. 行高
   line-height: 像素
5. 文本颜色
   color:red;

6.1 字体相关

1. 字体大小 font-size
2. 字体加粗 font-weight:bold/normal(去掉加粗效果)
3. 斜体 font-style:italic
4. 字体设置 font-family: xxx,xxx,xxx;

七、CSS的三大特性

1. 继承性: 元素可以继承上级元素的部分样式(包括文本相关和字体相关) ,个别标签自带效果不受继承影响,如:h1-h6自带字体大小不受影响,超链接a标签自带字体颜色也不受继承影响.
2. 层叠性: 不同的选择器有可能作用到相同某一个元素,如果作用的样式不同则全部生效(层叠到一起全部生效),如果作用的样式相同则由优先级来决定
3. 优先级: 作用范围越小优先级越高 id>class>标签名>继承 , 直接选中优先级高于间接选中(继承属于间接选中)

八、 (内容溢出元素框)溢出设置overflow

• hidden 隐藏
• visible 显示
• scroll 滚动显示

九、 显示方式display

• block: 块级元素的默认值,独占一行,可以修改宽高
• inline: 行内元素的默认值,共占一行,但是不能修改宽高
• inline-block:行内块, 共占一行并且可以修改宽高
  
  在这里插入图片描述

十、行内元素的垂直对齐方式vertical-align

• top 上对齐
• bottom下对其
• middle 中间对齐
• baseline 基线对齐

十一、定位方式 4+1

11、1 position定位

1. 静态定位static(默认)

    也称为文档流定位,块级元素从上到下,行内元素从左向右
   

2. 相对定位relative

3.  元素不脱离文档流,通过top/bottom/left/right让元素从初始位置做偏移
    - 当需要移动某个元素,但不希望其它元素受影响时使用.
   

4. 绝对定位absolute

    元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移(默认)或相对于某个上级元素做位置偏移(在上级元素中添加相对定位)
    - 当需要往页面中添加一个元素,但不希望影响其它元素的位置
    - 
   

5. 固定定位fixed

    元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移
   

11、2 浮动定位float

• 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边框或其它浮动元素时停止
• 通过外边距控制元素的具体位置
• 一行装不下会自动换行, 有可能被卡住
• 如果元素的所有子元素全部浮动,则自动识别的高度为0,通过给元素添加overflow:hidden可以解决
• 如果元素浮动,则会脱离文档流 后面的元素会顶上去,如果不希望顶上去则给后面的元素添加clear:both
• 当需要把纵向排列的元素改成横向排列时使用浮动定位

附：元素与标签统计图：