【 HTML基础知识】

HTML

创建HTML页面

列表标签

图片标签img

HTML

作用: 学习如何搭建页面结构和准备页面内容（盖房子）

HyperTextMarkupLanguage超文本标记语言

超文本：不仅仅是纯文本还包括字体效果和多媒体相关（音频，视频，图片）

创建HTML页面

文本相关标签

h1-h6 内容标题

特点：字体加粗自带上下的间距独占一行

段落标签p

特点：自带上下间距独占一行

水平分割线hr
换行br html页面中无法识别回车换行（只能识别出一个空格）
加粗b
斜体i
删除线s
下划线u

列表标签

无序列表： ul和li ul:unordered list 无序列表 li:list item 列表项
有序列表: ol 和li ordered list
列表嵌套: 有序列表和无序列表可以任意无限嵌套

图片标签img

src: 设置图片路径,

可以访问站内资源

图片和页面在同级目录: 直接写图片名

图片在页面的上级目录: ../图片名

图片在页面的下级目录: 文件夹名/图片名

也可以访问站外资源, 称为图片盗链, 有找不到图片的风险

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

title: 当鼠标在图片上悬停时显示的文本

width/height: 设置宽高, 两种赋值方式: 1.像素 2. 百分比只设置宽度时高度会自动等比例缩放

超链接a

href: 类似于图片标签的src属性,设置资源路径

页面内部跳转: 在目的地元素里面添加个id 然后在超链接中 href="#id" 就可以跳转到目的地的位置

a标签包裹文本为文本超链接, 包裹图片为图片超链接

表格标签table

相关标签: table表格 tr表示行 td表示列 caption表格标题 th表头

相关属性: border边框 colspan跨列 rowspan跨行

表单form

作用: 获取用户输入的内容,并提交给服务器

学习表单主要学习的就是有哪些控件, 包括: 文本框,密码框,单选,多选,下拉选等

分区标签

作用: 可以理解为一个容器, 把多个有相关性的标签装进一个分区标签中, 可以进行统一管理.

常见的分区标签:

div: 独占一行

span:共占一行

页面如何进行区域划分?

一般情况下一个页面由个大区组成, 每个大区里面又有n个小的区域

HTML5标准中新增的分区标签, 作用和div是一样的为了提高代码的可读性

header头

main主体

footer脚

nav导航

section区域

CSS

Cascading Style Sheet 层叠样式表

作用：美化页面（装修）

如何在html页面中写CSS样式代码

三种引入方式:

内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用

内部样式: 在head标签里面添加style标签,在标签体内写样式代码, 可以复用,但是只能在当前页面复用不能多页面复用

外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入,可以实现多页面复用.

工作中外部样式使用的更多因为可以多页面复用而且可以将html代码和css样式代码分离开便于维护

选择器

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}

id选择器: 当需要选择页面中某一个元素时使用

格式: #id{样式代码}

类选择器: 当需要选择页面中多个不相关的元素时,给元素添加相同的class属性值

格式:.class{样式代码}

分组选择器: 可以将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

任意元素选择器: 匹配页面中所有元素

格式: *{样式代码}

子孙后代选择器: 通过元素和元素之间关系匹配某一层元素以及这一层内部的所有

格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包含后代)

子元素选择器: 通过元素和元素之间关系匹配某一层元素

格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)

选择器

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}

id选择器: 当需要选择页面中某一个元素时使用

格式: #id{样式代码}

类选择器: 当需要选择页面中多个不相关的元素时,给元素添加相同的class属性值

格式:.class{样式代码}

分组选择器: 可以将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

任意元素选择器: 匹配页面中所有元素

格式: *{样式代码}

子孙后代选择器: 通过元素和元素之间关系匹配某一层元素以及这一层内部的所有

格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包含后代)

子元素选择器: 通过元素和元素之间关系匹配某一层元素

格式: body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)

伪类选择器: 匹配的是元素的状态, 包括: 未访问状态,访问过状态,悬停状态,点击状态

颜色赋值

三原色: 红绿蓝, RGB Red Green Blue, 每个颜色的取值范围0255

五种赋值方式:

颜色单词: red/black/yellow/blue.....

6位16进制赋值: #ff0000

3位16进制赋值: #f00

3位10进制赋值: rgb(255,0,0)

4位10进制赋值: rgba(255,0,0,01) a=alpha代表透明度值越小越透明

背景图片

backgroundimage:url("图片路径"); 设置背景图片

backgroundsize: 宽度高度; 设置背景图片尺寸

backgroundrepeat:norepeat; 禁止重复

backgroundposition: 横向纵向; 设置背景图片位置

文本和字体相关的样式

textalign:left/right/center; 设置文本水平对齐方式

textdecoration:overline/underline/linethrough/none 文本修饰

lineheight:20; 设置行高单行可以实现垂直居中, 多行可以控制行间距

textshadow:颜色 x偏移值 y偏移值浓度; 设置阴影

fontsize:20px; 设置字体大小

fontweight: bold/normal; 设置加粗和去掉加粗

fontstyle: italic; 设置斜体

fontfamily:xxx,xxx,xxx,xxx; 设置字体

font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式display

block:块级元素的默认值, 特点: 独占一行并且可以修改宽高, 包括: h1h6, p, div等

inline:行内元素的默认值, 特点: 共占一行, 不能修改宽高, 包括: span,b,i,s,u,a

inlineblock:行内块元素的默认值, 特点:共占一行并可以修改宽高, 包括:img,input等

none: 隐藏元素

盒子模型

盒子模型= content内容+margin外边距+border边框+padding内边距

作用: 控制元素的显示效果

content,包含width和height,控制元素显示尺寸

margin外边距:控制元素显示的位置

border边框: 控制边框效果

padding内边距: 控制元素内容的位置

盒子模型之content

包含 width和height 通过这两个样式设置元素的宽和高

赋值方式:

像素

上级元素的百分比

行内元素width和height无效,如果一定要改宽高需要将元素显示方式改成block或inlineblock这两种方式

盒子模型之外边距

元素距上级元素或相邻兄弟元素的距离称为外边距

赋值方式:

marginleft/right/top/bottom:20px; 单独某一个方向赋值

margin:20px; 四个方向赋值

margin:10px 20px; 上下10 左右20 ,左右auto代表居中

margin:10px 20px 30px 40px; 上右下左顺时针赋值

行内元素上下外边距无效

上下相邻彼此添加外边距取最大值, 左右相邻两者相加

粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,给上级元素添加overflow:hidden解决此问题.

盒子模型之border边框

赋值方式:

borderleft/right/top/bottom: 粗细样式颜色; 单独某个方向添加边框

border:粗细样式颜色; 四个方向添加边框

设置圆角: borderradius:20px; 值越大越圆

盒子模型之padding内边距

作用: 控制元素内容的位置, 元素边缘距内容的距离称为内边距

赋值方式: 和外边距类似

paddingleft/top/bottom:20px; 单独某个方向赋值

padding:20px; 四个方向赋值

padding:10px 20px; 上下和左右赋值

padding:10px 20px 30px 40px; 上右下左顺时针赋值

给元素添加内边距会影响元素的宽高, 给元素添加boxsizing:borderbox; 样式后不再影响

CSS三大特性

继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响

表设计面试题

2021年过年时小明在这些天都收到了许多亲戚\朋友还有同事的红包,也发出了一些红包,有的是微信,有的是支付宝也有现金,请参考下面的题目帮小明设计表格保存红包的信息

设计表 (至少包含一张流水表)

先列出需要保存的数据有哪些

人物关系,红包类型,时间,金额,性别,名字

将需要保存的数据进行拆分,用不同的表去保存数据, 需要考虑数据冗余的问题

流水表: id,红包金额,红包类型,时间,人物id

sql 复制代码

create database web charset=utf8;

       use web;

       create table trade(id int primary key auto_increment,money int,type varchar(20), time date,p_id int);

人物表: id,名字,性别,关系

sql 复制代码

  create table person(id int primary key auto_increment,name varchar(20),gender char(1),rel varchar(10));

准备数据:

往人物表中插入以下数据: 刘德华,男,亲戚杨幂,女,亲戚马云,男,同事

特朗普,男,朋友貂蝉,女,朋友

sql 复制代码

 insert into person values(null,'刘德华','男','亲戚'),(null,'杨幂','女','亲戚'),(null,'马云','男','同事'),(null,'特朗普','男','朋友'),(null,'貂蝉','女','朋友');

刘德华微信收1000 20210320

杨幂现金收500 发50 20210414

马云支付宝收20000 发5 20210311

特朗普微信收2000 20210518

貂蝉微信发20000 20210722

sql 复制代码

 insert into trade values(null,1000,'微信',"20210320",1),



       (null,500,'现金',"20210414",2),(null,50,'现金',"20210414",2),



       (null,20000,'支付宝',"20210311",3),(null,5,'支付宝',"20210311",3),



       (null,2000,'微信',"20210518",4),



       (null,20000,'微信',"20210722",5);

统计2021年3月15号到现在的所有红包收益

sql 复制代码

  select sum(money) from trade where time>="2021315";

查询2021年2月15号到现在金额大于100 所有女性亲戚的名字和金额

sql 复制代码

 select name,money



   from trade t join person p on t.p_id=p.id



   where time>="2021215" and abs(money)>100 and gender='女' and rel='亲戚';

查询三个平台(微信,支付宝,现金)分别收入的红包金额

sql 复制代码

 select type,sum(money) from trade where money>0 group by type;