不疲惯性
不疲惯性

Web前端 HTML+CSS

HTML

html基本格式


<html>
	
	<head>
		
		<meta charset='utf-8'>
		
		<title>百度一下，你就知道title>
	head>
	<body bgcolor="lightgreen">
		
		<h1>欢迎来到澳门皇家赌场h1>
	body>
html>

html 基本语法

1.HTML 不区分大小写，推荐小写
2.HTML标签及标签中的内容组成一个HTML元素
3.HTML属性写在标签里面，用来描述该元素的特征或特点
4.属性名 = “属性值”，不区分大小写，建议双引号，且小写
5.多个属性之间用空格隔开，多个属性值之间也使用空格隔开
6.标签之间的多个空格 或 换行，都会被解析为一个空格

html基本标签

P段落标签:每个段落标签之间都会有一个空行

br换行标签

hr水平分割线标签：

​ [size]粗细 单位 px 像素(pixel)
​ [width]宽度 px/%
​ [align]水平位置 left/center/right
​ [color]颜色
​ 英文 blue red green yellow
​ RGB #000 #fff
​ rgb(255,255,255)

pre格式化输出标签(原样输出)

列表标签

​ ol 有序列表
​ [type] 1 a A i I
​ [start] 列表起始数字
​ [reversed] 升序/降序
​ ul 无序列表
​ [type] circle disc square
​ li 列表项
​ [value] 值

定义列表
​ dl 定义列表标签
​ define list
​ dt 定义列表标题
​ dd 定义列表详情

h1~h6 标题标签：文字大小随数字大小递减，所有标签都有加粗功能

b 加粗标签 i 倾斜标签 u 下划线标签

sup 上标 sub 下标

font 字标签

image 图片标签

​ [src] source 指定图片资源的地址(url)
​ [alt] 图片加载失败时显示的问题
​ [title] 鼠标悬停时显示的提示文字
​ [width] 宽度
​ [height] 高度

a 双标签
​ 标签属性:
​ href 跳转地址, 灵魂属性
​ target 以什么窗口进行跳转
​ _blank 在新窗口打开连接
​ _self 在本窗口打开连接, 默认
​ _top 在顶级窗口打开连接
​ name 在自定义窗口打开连接

​

URL: 俗称 网址

​ 例如：http://www.baidu.com:80/video/python/plane.mp4?name=MH370&num=30#xxoo
​

  1. 协议 http
  2. 域名 www.baidu.com => IP地址
  3. 端口 80 （访问的默认端口就是80）
  4. 目录 video/python
  5. 文件名 plane.mp4
  6. 参数 name=MH370&name=30
  7. 锚点 xxoo

注意:

  1. 域名的本质就是IP, 作用: 好记
  2. 任何网址 最终都是指向 文件名
  3. 参数是有特殊需求时 才会需要

锚点的实现
​ 步骤1: 准备锚点, 在开始标签名中, 通过id=“锚点名” 的形式来准备
​ 步骤2: 跳转至锚点, 在需要点击的链接中, 通过 href=“url#锚点名” 来跳转

实体符号格式: &实体代码;

​

小于: <
大于: >
空格:  
版权: © 		
人名币: ¥

音频标签

​ 标签名: audio(双标签)
​ 标签属性:
​ src 音频来源地址
​ controls 控制器
​ autoplay 自动播放
​ loop 循环播放

视频标签

​ 标签名: video (双标签)
​ 标签属性:
​ src 视频来源地址
​ controls 控制器
​ autoplay 自动播放
​ loop 循环播放

表格标签

​ 表格标签:
​ table 声明
​ caption 表格标题
​ tr 表行
​ th 表头
​ td 普通单元格

​ 表格属性:
​ border 边框
​ cellspacing 外边距: 单元格与单元格之间的距离
​ cellpadding 内边距: 单元格与内容之间的距离
​ width 宽度
​ height 高度
​ rowspan 行合并
​ colspan 列合并
​ align 水平对齐方式 left center right
​ valign 垂直对齐方式 top middle bottom
​ bgcolor 背景颜色
​ background 背景图片

html表单标签

什么是表单？
​ 用户和网站 交互的地方
​ 就是用户给网站留下数据的地方
​ 是在网页中 提供输入数据的界面

‘’ 定义 表单域

页面中可以有多个表单
不能嵌套使用
所有的表单内容 都出现在 该标签内

​ [action] 指定 接收数据的 脚本文本
​ [method] 规定 如何发送表单数据
​ get 默认值, 使用URL传参
​ post 使用HTTP post 方式传参(隐蔽传参)

GET 与 POST 的区别
​ 1.get会把所有数据显示到浏览器地址栏上,post是通过HTTP post机制，所以不会显示。
​ 2.get传送数据量较小，一般不能大于2KB，post传送的数据量较大，理论上不受限制。
​ 3.post比get相对安全一些，
​ 4.get通常传递不太重要的小量信息

输入框标签

用于定义一个输入的区域

[type] 规定输入域的功能
​ text 文本输入框(默认)

​ password 密码输入框
​ 密码输入框中的字符 都会被显示为 * 或 圆点

​ radio 单选按钮
​ [checked] 默认选中的状态,值为checked
​ checkbox 多选按钮
​ [checked] 默认选中的状态,值为checked

 **file**       		文件上传域

​ 上传文件必须使用post方式
​ file 不能使用value属性
​ [enctype] 规定表单 在发送到服务器之前 应该如何对数据进行编码
​ application/x-www-form-urlencoded
​ multipart/form-data 文件上传专用

**hidden**     隐藏域

​ submit 提交按钮

​ reset 重置按钮

​ button 普通按钮

​ number 限定为数值的值
[max] 输入范围限定
[min] 输入范围限定

​ time 限制时间

​ email 限制邮箱

​

[name] 给表单项 设定一个数据标识
​ 一定要设置 输入框的name值
​ 只有设置了此值,那么在提交时 数据才能被传递

[value] 为input元素设定值
​ text / password / hidden
​ 定义输入输入框的初始值
​ radio / checkbox
​ 定义与输入框相关的值
​ submit / reset / button
​ 定义按钮的功能文本

[maxlength] 输入字符的最大长度,单位字符个数

[minlength] 输入字符的最小长度,单位字符个数

[size] 宽度,单位字符

[placeholder] 提供可描述的提示信息(HTML5)
​ 输入框为空时 才会显示

[readonly] 只读

​ 可看到,亦可提交

[disabled] 禁用此元素
​ 被禁用的元素 是无法提交到后端的

为input元素 定义标注(标记)
​ 多用于 单选/多选时 与input 组合使用
​ 当用户选择该标签时,浏览器就会自动将焦点 转到和该标签相绑定的元素身上

’ ’ 下拉框

​ [name] 不可缺少

​ 下拉选项
需要写在 select 的内部
[value] 设定初始值.
[selected] 默认选中状态
[size] 显示下拉个数
​ [multiple] 拉下多选

​

’’ 多行文本域

​ [name] 标识
​ [rows] 设置该文本域的行数(宽度)
​ [cols] 设置该文本域的列数(高度)
​ [placeholder] 提供可描述的提示信息(HTML5)
​ [maxlength] 输入字符的最大长度,单位字符个数

普通的按钮
​ 需要设不同的type值 来实现不同的功能

分帧

就是把浏览器 分成多个窗口来显示 不同的网页

框架结构标签 ​ 该标签不能与body同时出现 ​ [cols] 按列划分 ​ [rows] 按行划分 ​ 像素, % . * 框架标签 ​ [src] 加载指定的url的网页 ​ [name] 窗口的标识 ​ [frameborder] 0/1 是否显示边框 ​ [noresize] 设置无法调整框架大小 ="noresize" ​ [scrolling] 是否显示滚动条 yes/no/auto

该标签可以与body同时出现
[name] 标识
[src] 加载指定的url的网页
[frameborder] 0/1 是否显示边框
[scrolling] 是否显示滚动条 yes/no/auto
[width] 宽度
[height] 高度

head 内的功能标签

网页标题 基底网址标签 [href] 指定以社么网址去跳转 [target] `` 元信息标签

定义与文档相关联的数据
​ 字符集 charset
​ 简介描述 description
​ 关键字 keywords
​ 页面重定向 http-equiv + content

外链文件标签 ​ CSS ​ 图标

CSS

Cascading Style Sheets
作用就是:定义HTML元素该如何去显示

1996年 设计出来.
1996 css1.0
1998 css2.0
2001 css3.0
目前最新的版本是css3.0
​ W3C于2011年9月29日开始了设计CSS4

CSS的特点:

1.样式和内容相分离.
2.提高页面浏览速度.(采用css的页面容量小)
3.外部样式表可以极大提高工作效率,易于维护和改版.

CSS的语法:

  1. css规则由 选择器 和 声明 两部分组成
    选择器 用于指定 要修改样式的元素
    声明 用于定义 元素的样式
  2. 声明部分以 属性:属性值; 的形式组成.
  3. 可以有一条或多条声明,每条声明之间 用分号隔开
  4. CSS不区分大小写.
    !(两个例外: id 和 class 选择器 对大小写敏感)
  5. 选择器和声明一起使用时,需要将 声明部分 用{}包裹起来.
  6. 只有一条声明 或 多条声明的最后一条,可以省略分号.(建议都写完整)
  7. 建议每条声明独占一行,提高可读性,也利于排错

长度单位

px 像素
em 倍数
% 百分比
cm/mm 厘米/毫秒
pt 点,印刷单位

颜色单位

英文
​ red green blue pink

16进制
​ 0123456789abcdef

#rrggbb

白色 #FFFFFF #FFF
黑色 #000000 #000
红色 #FF0000 #f00
绿色 #00FF00 #0f0
蓝色 #0000FF #00f
#ff33cc #f3c

RGB形式
​ 0 ~ 255 / %
​ rgb(0,0,0)
​ rgb(255,0,0)

rgba(255,0,0,0.5) 0完全透明 1为不透明

CSS 引入:
​ 内联式 > 嵌入式 > 外链式

CSS 选择器

通配符选择器
*{…}
选择所有的元素,一般用于全局初始化

标签选择器
​ 标签{…}
​ 选择对应的标签

ID选择器
​ #ID{}
​ [id] 设置标签的ID
​ ID是唯一存在的
​ ID区分大小写
​ 必须以字母开头
​ 其他部分由:(A-Za-z)(0-9)-_ 组成

CLASS选择器
​ .CLASS{}
​ [class] 设置标签的类名
​ 类名可重复定义
​ 区分大小写
​ 必须以字母开头
​ 其他部分由:(A-Za-z)(0-9)-_ 组成

关联选择器/后代选择器
​ 选择器1 选择器2{ … }
​ 使用空格 根据上下文 来选择元素

子元素选择器
​ 选择器1 > 选择器2 {…}

相邻兄弟选择器
​ 选择器1 + 选择器2 {…}
​ 选择某个 同级相邻的元素

相邻兄弟们选择器
​ 选择器1 ~ 选择器2 {…}
​ 选择某个 所有同级相邻的元素

组合选择器/分组选择器
​ 选择器1,选择器2,选择器3{…}
​ 获取几个不同的元素

css选择器的权重(优先级)

权重倍数: x100 x10 x1

​ a=0 b=0 c=0 -> 权重0
li a=0 b=0 c=1 -> 权重1
ul li a=0 b=0 c=2 -> 权重2
ul ol+li a=0 b=0 c=3 -> 权重3
h1 + *[rel=up] a=0 b=1 c=1 -> 权重11
ul ol li .red a=0 b=1 c=3 -> 权重13
li .red .level a=0 b=2 c=1 -> 权重21
#x34y a=1 b=0 c=0 -> 权重100
#s12:not(foo) a=1 b=0 c=1 -> 权重101

ID > 类 > 伪类 > 属性选择器 > 标签选择器 > 伪对象 > 通配符*

1.id选择器 为a
2.类选择器/属性选择器/伪类 为b
3.类型选择器/伪类对象选择器 为c
4.* 忽略(最低)
5.权重相同,就近原则

!important可强行提高权重

伪类选择器

s1 和 s2 代表基础选择器

  1. s1:hover{ … } 当鼠标悬停在s1上时, 触发css

    使用技巧:
    ​ s1:hover s2{ … }
    ​ s1:hover > s2{ … }
    ​ s1:hover + s2{ … }
    ​ s1:hover ~ s2{ … }

  2. s1:focus{ … } 当s1获取到光标时, 触发css

  3. 按照顺序查找标签
    s1:first-child{ … } 匹配s1父级里面的第一个元素s1
    详细分析:
    ​ 第一步: 先找s1的父级
    ​ 第二步: 找到父级里面的第一个儿子元素
    ​ 第三步: 第一个儿子元素 是不是s1

s1充当子级

  1. 按照标签查询顺序
    s1:first-of-type{ … } 匹配s1父级里面所有s1中的第一个
    详细分析:
    ​ 第一步: 先找s1的父级
    ​ 第二步: 找到父级里面的所有s1
    ​ 第三步: 找到s1中第一个
    s1充当子级
  2. s1:last-child{} 匹配s1父级里面的最后一个元素s1
    s1:last-of-type{} 匹配s1父级里面所有s1中的最后一个

s1:nth-child(N){} 匹配s1父级里面的第N个元素s1
s1:nth-of-type(N){} 匹配s1父级里面所有s1中的第N个
​ N的写法:
​ * 1 数字
​ * 2 单词 odd奇数 even偶数
​ * 3 一元一次方程
​ * 例如： 2n
​ * 2n+1
​ * 3n
​ * 3n+1

伪对象选择器

s1::before{…} 匹配s1里面的最前面
​ s1::after{…} 匹配s1里面的最后面

​ s1在这里充当父级

​ 作用:
​ 在将来 浮动技术上 非常有用

​ 注意:
​ before 和 after 常用属性content
​ before 和 after 是用 两个冒号

CSS样式

字体

font-size: 字体大小
​ font-family: 字体家族
​ font-weight: 字体加粗 bold normal
​ font-style: 字体风格 italic normal
​ line-height: 行高
​

​ 简写:
​ font: weight style size/line-height family

​ 注意:
​ 各大浏览器因兼容性不同, 所支持最小字体大小也不一样
​ 建议尽量不要写 比最小字体还小的size

​ line-height 经常被用于做 垂直居中, 仅限于一行
​
​ weight 和 style 可以省略且 顺序可颠倒
​ line-height 可以省略, 只能写在size的后面, 必须用/隔开

​ size 必须在 family 的前面, 且两个都不能少

背景

background-image: 背景图片
​ url(图片地址)

​ background-color: 背景颜色

​ background-repeat: 背景重复
​ no-repeat

​ background-position: 背景定位
​ X Y

​ 正数: 向右 向下
​ 负数: 向左 向上

​ background-size: 背景大小
​ 设定背景的宽

​ background-attachment: 背景固定
​ fixed

​ 简写:
​ background: image color position/size repeat attachment

​ 注意:
​ 以上顺序随便颠倒
​ 只有size 是 必须写在psotion的后面

边框

边框的基本属性: color width style
​ 边框的基本方向: left right top bottom

​ 单边
​ border-方向-属性

​ 单边简写
​ border-方向: color width style
​
​ 四边
​ border-属性

​ 四边简写
​ border: color width style

​ 注意:
​ color 和 width 都有默认值, 所以可以省略
​ style 不能省略
​ style常用值:
​ solid 实线
​ none 取消边框

​ double 双线
​ dotted 点线
​ dashed 虚线

​ 圆角:
​ border-上下-左右-radius: % 或 px
​
​ 圆角简写:
​ border-radius: % 或 px

​ 注意: 如果需要最圆, 建议用100%
​
​ 边框合并:
​ border-collapse: collapse

​ 轮廓:
​ outline 常用于 none
​ 常用于 表单

文本

text-align: 水平对齐方式 left center right
​ vertical-align: 垂直对齐方式 top middle bottom
​ text-indent: 首行缩进
​ text-decoration: 划线
​ underline 下划线
​ overline 上划线
​ line-through 删除线
​ none 不要线
​ text-shadow: 文字阴影
​ text-overflow: 文字溢出
​ ellipsis 将溢出的隐藏内容用 … 代替
​ 仅限于一行
​ 需要配合white-space 和 overflow

​ 注意:
​ vertical-align 默认对外对齐
​ 如果需要对内对齐, 配合display

盒子阴影

box-shadow: 10px 20px 30px #ccc;
box-shadow: 10px 20px 30px 40px #ccc;
box-shadow: 10px 20px 30px 40px #ccc inset;
​ 10px: 水平对齐
​ 20px: 垂直对齐
​ 30px: 模糊度,不能为负数
​ 40px: 阴影面积,默认为当前大小, 可省略
​ #ccc: 阴影颜色
​ inset: 内阴影

列表属性

list-style: none 取消项目符号

鼠标样式

cursor: pointer 手掌 频率使用较高
​ none 隐藏鼠标
​ text 文本
​ default 默认箭头
​ wait 等待
​ move 坐标移动

CSS效果

溢出

overflow: hidden 隐藏溢出的内容
​ visible 显示溢出的内容, 默认值
​ auto 通过滚动条显示溢出的内容

​ overflow-x: hidden | visible | auto
​ overflow-y: hidden | visible | auto

平滑过渡

transition: 属性 过渡时间 过渡速率 延迟时间
​

​ 属性:
​ 过渡一个属性
​ 过渡多个属性, 每个属性之间有 逗号 隔开
​ 过渡所有属性, all

​ 过渡时间: 单位: s/ms
​ 过渡速率:
​ linear 匀速
​ ease-in 加速
​ ease-out 减速
​ ease-in-out 先加速再减速
​ 自定义速率
​ 延迟时间: 单位: s/ms

​ 注意:
​ 过渡具有数值变化的属性. 例如 width, height, color, …
​ 相反案例: text-align, border-style …

变形

transform
​ none 不变形
​

​ rotate 旋转
​ 单位: deg 角度

​ skew 扭曲
​ 单位: deg 角度
​ 注意: 90 * 奇数倍 都是扭没了

​ scale 中心缩放
​ 单位: 倍数
​ 基本倍数: 1 代表本身
​ >1 放大
​ <1 缩小

​ translate 位移
​ 单位: px

定位

position:

​ absolute 绝对定位
​ relative 相对定位
​ fixed 固定定位
​

1.绝对定位
​ 位置: 不保留原来的位置
​ 原点: 基于第一页的四个角落

  1. 相对定位
    位置: 保留原来的位置
    原点: 基于原来的位置
  2. 固定定位
    位置: 不保留原来的位置
    原点:

注意:
​ 任意定位都会 脱离文档流

定位优先级
​ z-index: num数字
​ num数字越大, 定位优先级越高

​ 注意: 必须要配合position 使用

盒子模型

盒子在不同的浏览器中, 组成部分也不一样

IE浏览器: 内容(涵盖了内边距和边框) (外边距)
非IE浏览器: 内容+内边距+边框 (外边距)

行块级元素

在html里面, 所有标签都划分成 两种类型:
​ 块级元素 block
​ div, p, h1~h6, ul …
​ 独占一行
​ 宽度 默认与浏览器一致
​ 高度 默认与内容一致
​ 宽度, 高度, 行高, 内外边距 都是可以手动控制
​ 容纳性: 任意元素
​

​ 行级元素 (内联元素) inline
​ span, a, b, i, del …
​ 不会独占一行
​ 宽度 和 高度默认都与 内容一致
​ 行高, 水平内外边距 可以手动控制
​ 容纳性: 只能容纳行级元素

​ 注意点:
​ 多个超链接a 标签 不要嵌套使用

盒子外边距

外边距: 标签与标签之间的距离
​ 四边
​ margin:10px 上下左右均为10px
​ margin:10px 20px 上下10 左右20
​ margin:10px 20px 30px 上10 左右20 下30
​ margin:10px 20px 30px 40px 上10 右20 下30 左40

​ 单边
​ margin-方向

​ 小技巧
​ 在父级元素内, 水平居中
​ margin-left: auto
​ margin-right: auto

​ 内边距: 标签与内容之间的距离
​ 四边
​ padding:10px 上下左右均为10px
​ padding:10px 20px 上下10 左右20
​ padding:10px 20px 30px 上10 左右20 下30
​ padding:10px 20px 30px 40px 上10 右20 下30 左40

​ 单边
​ padding-方向

浮动

float: left | right | none

clear: left | right | both

​ 注意:
​ 不保留原来的位置, 脱离文档流
​ 文字会 环绕浮动
​ 块级元素会 重叠浮动
​ 浮动主要是针对 块级元素. 因为行级元素本身就 横排的
​
​ 清除浮动之后, 元素将会保留原来的位置

​ 清除浮动原理:
​ 后面的兄弟元素 清除前面兄弟元素的浮动

​ 清除浮动方法1:
​ 利用原理, 在浮动元素的最后面, 加一个空标签, 并赋予clear

​ 清除浮动方法2:
​ 在浮动元素的父级, 添加overflow:hidden, 形成BFC区域
​ BFC区域: 暂时理解 不会影响外界的区域.

​ 清除浮动方法3: 推荐
​ 父级::after{
​ content:’ ’
​ display: block;
​ clear: both;
​ }

元素显示

display: block 转为块级元素
​ inline 转为行级元素
​ inline-block 转为内联-块元素
​ none 隐藏元素, 不占位隐藏
​ table 转为块级表格
​ table-cell 转为td单元格
​ …

visibility: hidden 占位隐藏
​ visible 显示

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