JJ_Zhangjian

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 水平分割线

1.4 换行

1.5 列表标签

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

1.6 分区标签

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

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

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

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

2、标签(元素)分类

块级元素：独占一行
```
 -div
 -h1-h6
 -p
 -hr
```

行内元素：共占一行

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

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

空格：有折叠问题 nbsp牛逼是屁
小于号： < lt老铁
大于号： > gt干他
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的引入方式

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

三种引入方式的优先级

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

二、九种选择器

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

三、颜色赋值

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

通过6位16进制赋值 #ff0000
通过3位16进制赋值 #f00
通过3位10进制赋值 rgb(0-255,0-255,0-255)
通过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.给元素添加内边距(会影响元素的宽高)
行内元素内边距不影响元素所占高度

六、文本相关样式

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

6.1 字体相关

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

七、CSS的三大特性

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

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

hidden 隐藏
visible 显示
scroll 滚动显示

九、显示方式display

block: 块级元素的默认值,独占一行,可以修改宽高
inline: 行内元素的默认值,共占一行,但是不能修改宽高
inline-block:行内块, 共占一行并且可以修改宽高

在这里插入图片描述

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

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

十一、定位方式 4+1

11、1 position定位

静态定位static(默认)

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

相对定位relative

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

绝对定位absolute

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

固定定位fixed

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

11、2 浮动定位float

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

附：元素与标签统计图：

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

总结：

1. web前端

2. 数据库

html学习内容

一、body内部常见的标签

1、 文本标签

1.1 文本标题标签

1.2 段落标签

1.3 水平分割线

1.4 换行

1.5 列表标签

1.6 分区标签

2、标签(元素)分类

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

4、图片标签img

5、图片地图map

6、超链接a

7、表格table

8、表单form

CSS学习内容

一、CSS的引入方式

三种引入方式的优先级

二、九种选择器

三、颜色赋值

四、背景图片

五、盒子模型

5.1 盒子模型之宽高

5.2 盒子模型之外边距

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

5.4 盒子模型之内边距

六、 文本相关样式

6.1 字体相关

七、CSS的三大特性

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

九、 显示方式display

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

十一、定位方式 4+1

11、1 position定位

11、2 浮动定位float

你可能感兴趣的:(WEB前端)

1、文本标签

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

六、文本相关样式

九、显示方式display