【 HTML基础知识】

目录

 HTML

 创建HTML页面

 列表标签

 图片标签img

 超链接a

 表格标签table

 表单form

 分区标签

 CSS

 选择器

 选择器

 颜色赋值

 背景图片

 文本和字体相关的样式

 元素的显示方式display

 盒子模型

 盒子模型之content

 盒子模型之外边距

 盒子模型之border边框

 盒子模型之padding内边距

 CSS三大特性

---

 HTML

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

HyperTextMarkupLanguage超文本标记语言

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

 创建HTML页面

 文本相关标签

1. h1-h6 内容标题

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

2. 段落标签p

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

3. 水平分割线hr

4. 换行br     html页面中无法识别回车换行（只能识别出一个空格）

5. 加粗b

6. 斜体i

7. 删除线s

8. 下划线u

 列表标签

1. 无序列表： ul和li        ul:unordered list 无序列表    li:list item 列表项

2. 有序列表:    ol 和li        ordered list

3. 列表嵌套: 有序列表和无序列表可以任意无限嵌套

 图片标签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

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

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

相关代码:

<form action="http://www.tmooc.cn">

    <!所有控件必须添加name属性 否则将不会提交参数

    maxlength最大字符长度 value设置默认值 readonly只读 >

    用户名:<input type="text" name="username" maxlength="5"

               value="abc" readonly

               placeholder="用户名"><br>

    密码:<input type="password" name="password" placeholder="密码"><br>

    <!单选的value属性必须添加 否则提交的是on checked默认选中 >

    性别:<input type="radio" name="gender" value="m" id="r1">

    <label for="r1">男</label>

    <input type="radio" name="gender" checked value="w" id="r2">

    <label for="r2">女</label><br>

    <!多选属性和单选属性写法一样>

    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟

    <input type="checkbox" name="hobby"

           checked value="hj">喝酒

    <input type="checkbox" name="hobby" value="tt">烫头<br>

    <!日期选择器>

    生日:<input type="date" name="birthday"><br>

    <!文件选择器>

    靓照:<input type="file" name="pic"><br>

    <!下拉选>

    所在地:

    <select name="city">

        <!value设置提交的内容, 如果没有value则提交标签体的文本>

        <option value="bj">北京</option>

        <!selected设置默认选中>

        <option selected value="sh">上海</option>

        <option value="gz">广州</option>

    </select><br>

    <input type="submit" value="注册">

    <input type="reset" value="重新设置">

    <!自定义按钮>

    <input type="button" value="按钮">

    <hr>

    <button type="submit">注册</button>

    <button type="reset">重置</button>

    <button type="button">按钮</button>

</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样式代码分离开 便于维护  

 选择器

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

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

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

   格式: #id{样式代码}

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

   格式:.class{样式代码}

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

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

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

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

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

   格式: *{样式代码}

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

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

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

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

 选择器

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

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

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

   格式: #id{样式代码}

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

   格式:.class{样式代码}

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

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

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

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

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

   格式: *{样式代码}

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

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

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

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

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

 颜色赋值

 三原色: 红绿蓝,  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年过年时小明在这些天都收到了许多亲戚\朋友还有同事的红包,也发出了一些红包,有的是微信,有的是支付宝也有现金,请参考下面的题目帮小明设计表格保存红包的信息

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

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

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

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

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

       

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,名字,性别,关系

     

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

      准备数据:

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

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

      

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

     

           刘德华 微信 收1000 20210320   

           杨幂 现金 收500 发50 20210414    

           马云 支付宝 收20000 发5 20210311    

           特朗普 微信 收2000  20210518    

           貂蝉 微信 发20000 20210722

      

 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);

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

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

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

  

 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='亲戚';

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

  

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