02-表单&css基础

最新推荐文章于 2024-10-10 16:29:15 发布

jujujp

最新推荐文章于 2024-10-10 16:29:15 发布

阅读量734

点赞数

分类专栏：一、css+html基础文章标签： css3 前端 html5

本文链接：https://blog.csdn.net/qq_58069093/article/details/123693786

版权

一、css+html基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、标签的嵌套

1、学习的技术点是html+css 前端又可以称为div+css

- div标签：没什么实际含义，作为一个盒子用来布局

- span标签：没什么实际含义嵌套文本

标签被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

2、标签之间的嵌套规则

- 常用的嵌套 ul>li ol>li dl>dt+dd div>li

- 电商页面轮播图 a>img

- 注意：h和p标签的嵌套

- 规则：

- p不可以嵌套h标签但是反之可以

- p和p之间能嵌套？不可以

3、总结

- div可以嵌套一起 => 元素类型块级元素嵌套其他元素类型

- span 不能嵌套其他标签，只能嵌套文本

<body>
  <div>
    <li>
      可以但没必要
    </li>
  </div>

  <ul>
    <li>可以但没必要</li>
  </ul>
</body>

二、表格标签的使用

1、表格的作用：表格之前是用来布局的但是由于表格中含有计算属性布局非常麻烦所以后来表格只是展示数据

2、表格标签 table>tr*3>td*3

- table 表示表格

- tr 表示表格中的行

- td 表示表格的列（单元格：行和列相交形成的位置）

注意：没有什么默认样式的需要手动设置

3、属性

- width/height 表格的宽高

- border 边框、边界（复合属性、颜色、样式）

- cellspacing 单元格与单元格之间的间距

- cellpadding 单元格与单元格中的内容间距

- cell 细胞、单元格

- space 空间

- 对齐方式

- 水平方向 align=：left、right、center

- table 控制表格在浏览器水平方向对齐

- tr 控制行所有内容在表格中对齐对齐

- td 控制单元格所有内容在单元格中对齐对齐

- 垂直方向 valign：top\bottom\middle （vertical 垂直方向）

- table 不可用

- tr 控制一行内内容在垂直方向对齐

- td 控制单元格中内容在垂直方向对齐

4、难点：设置表格中的合并属性（span作为属性出现选择几个）

- 列合并 colspan

- 行合并 rowspan

- 行列合并的属性值填写数字表示合并几个

5、了解的属性

- bordercolor=“边框色”

- bgcolor=”背景颜色”

<body>
  <!-- 
    三行三列的表格    快速写法：table>tr*3>td*3
    - table  一个
    - tr 行  三行
    - td 列
   -->
  <table width="300" height="300" border="1" cellspacing="0l" cellpadding="10" align="center" valign:"middle"
    bordercolor="green" bgcolor="pink">
    <tr>
      <td colspan="2">1</td>
      <td rowspan="2">3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>

    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
</body>

三、表单的使用

表单的使用：收集用户信息

1、表单框：就是一个盒子没有实际含义作用是：收集用户信息保存提交给后台

- 标签名称：form（不可以写成from）

- 属性

- action 行为、动作提交的地址

- name 表单框的名字

- method 提交方式 get/post

- ？后面接参数

- 前端是开源的，没有绝对的安全性

2、表单控件

- 标签名称 input

- 了解

- name 表单控件的名字

- size 尺寸宽度（字符数）

- maxlength 最大长度（验证）

重要

-type属性类型

- value 价值提示文本跟随不同的type属性值作用而发生改变

<body>  <form action=""></form>  <!-- 在盒子内收集用户信息 -->  <input type="text" name="用户的名字" size="10" maxlength="11"></body>

四、表单控件中的重要属性

表单控件是用来收集用户信息（姓名、性别）

1.type的属性值使用

- 默认值是 text 文本输入框

-password 密码

- radio 单选可以设置相同的name属性和属性值

- checkbox 多选

- 默认选择 checked

- 禁止选择 disable

功能按钮（必须要放在form标签种才有作用）

- submit 提交

- reset 重设

- 空按钮（没什么作用需要绑定js事件）

-type="button"

- <button>

2.value的属性值

- 在文本输入框中 value是提示文本 value是占位置的用户输入信息需要手动删除

- 在密码框中value依然是占位置的会变成黑色的实心圆 html5中新增的属性 placeholder

<body>  <h2>相亲表</h2>  姓名：<input type="text" value="请输入你的名字..."><br>  密码：<input type="placeholder" value="请输入你的密码..."><br>  性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br>  <!--  input[type="checkbox"]*5  快捷键 -->  爱好：<input type="checkbox">跳舞  <input type="checkbox">跳舞  <input type="checkbox">跳舞  <input type="checkbox" checked>跳舞  <input type="checkbox">跳舞  <input type="checkbox" disabled>跳舞<br>  <input type="submit" value="点击提交个人信息">  <input type="reset">  <input type="button" value="点击一刀999级" onclick="alert('')"></body>

五、css基础语法

1、回顾html语言的语法

- 双标签<table width="100px" height="100px"></table>

- 单标签<br>

2、css基础语法：修饰html结构、美化页面

语法组成：选择器（声明）=> 选择器{属性1；属性2；属性3}

- 选择器：修饰的对象

- 声明:包含属性和属性值

3、总结

- 切记要区分css和html属性的写法

- {声明} 声明包含属性和属性值

- 属性和属性值之间用冒号如果只有一个声明可以省略分号

- 如果多个声明后面必须要加分号隔开

六、样式表的创建

样式表的创建方式：行内式、内部式、外部式

1.行内式的创建

- 需要在标签内创建一个style属性

- 在引号中书写css语法组成即可

- 注意：选择器{声明}

2.内部式的创建

- 需要在head区域内创建style标签

- 在style标签中书写css语法组成即可

3.外部

- 需要在当前文件外面创建一个.css后缀名的文件

- 在head区域内使用link标签做引入

关于外部样式表的拓展引入方式：

- 在head区域内书写style标签

- 在标签中@import url('路径')

和link标签引入之间的区别

- link标签引入样式的时候结构和样式是同时加载的

- @import引入样式的时候，先加载结构后加载样式

需求：如果三种样式表同时存在的时候结构会优先加载哪一个样式表？

- div 添加相同的属性 color

<!--   <style>    div {      color: blue;    }  </style> -->  <!--   <link rel="stylesheet" href="css/style.css"> -->  <style></style>  <!--     rel：文档关联    href  地址   --></head><body>  <!-- 需要通过设置css属性改变字体颜色 color -->  <div style="color: aquamarine;">你好</div></body>

七、加载样式表的优先级

1、样式表的优先级

- 行内样式表的优先级高于内部

- 行内样式表的优先级高于外部

2、总结：行内样式表的优先级最高，内部和外部取决于书写顺序在后面的优先级更高

3、三种样式表如何使用？

- 行内样式表的使用基本很少

- 内部样式表案例可用

- 外部样式表工作写项目最常用！！

 <style>    div {      color: blue;    }</style>  <link rel="stylesheet" href="css/style.css"></head><body>  <div style="color: rgb(255, 127, 127);">你好</div></body>

八、关于选择器的使用

小米

- 同学：米子

- 朋友：老米

- 对象：狗子

- 家人：孩子

选择器：通过很多种方式选择修饰的对象最终选择到的依然是这个结构标签 div

常见选择器的使用：标签、id、class、群组、包含、通配符、伪类

1.标签选择器

- 通过选择结构标签名称进行设置样式

- 所以html标签都可以作为选择器出现

- 写法：标签名称{声明}

2.ID选择器

- 需要在标签内添加id属性和属性值

- 在css样式中使用#属性值{声明}

- 在一块区域中只使用一次通常表示网页布局的外围结构？

3.class选择器（类选择器）

- 需要在标签内添加class属性和属性值

- 在css样式表中使用 .属性值{声明}

4.群组选择器

- 表示相同一类的声明可以放在一起

- 写法：选择器1；选择器2；选择器3...{相同声明}

5.包含选择器

- 表示从父级选择器选择子级选择器

- 写法：父级选择器子级选择器{}

6.通配符

- 固定用法*{margin：0；padding：0} 浏览器的默认内外边距

- 浏览器是有默认上下左右8px的间距的

<style>    div {      color: blue;    }    #cool {      color: blueviolet;    }    .box {      color: brown;    }</style></head><body>  <div>小米</div>  <div id="cool">小区</div>  <p class="box">aa</p>  <p class="box">bb</p>  <p>cc</p></body>

九、伪类选择器

a:link {color: red;} /* 未访问的链接状态 */

a:visited {color: green;} /* 已访问的链接状态 */

a:hover {color: blue;} /* 鼠标滑过链接状态 */

a:active {color: yellow;} /* 鼠标按下去时的状态 */

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    a:link {      color: aqua;    }    a:visited {      color: black;    }    a:hover {      color: rgb(219, 30, 30);    }    a:active {      color: rgb(59, 17, 248);    }</style></head><body>  <a href="http://www.4399.com">点击跳转到4399首页</a></body></html><!--   a:link {color: red;}        /* 未访问的链接状态 */  a:visited {color: green;}    /* 已访问的链接状态 */  a:hover {color: blue;}     /* 鼠标滑过链接状态 */  a:active {color: yellow;} /* 鼠标按下去时的状态 */ -->

十、hover的使用

hover的使用

- 自己给自己改名字 hover可以控制自己的状态自身选择器：hover{声明}

- 可以通过爷爷给父亲改名父级选择器：hover 子级选择器{声明}

hover还可以给同级元素修改状态：需要css3中的选择器

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    div：hover {      color: red;    }</style></head><body>  <p>等等</p></body></html><!--   hover的使用  - 自己给自己改名字 hover可以控制自己的状态 自身选择器：hover{声明}  - 可以通过爷爷给父亲改名 父级选择器：hover 子级选择器{声明}hover还可以给同级元素修改状态：需要css3中的选择器 -->

十一、权重的使用

需求：有一个div盒子通过设置标签选择器、id、class三种方式给div添加相同的color属性？

权重的使用：0 0 0 0

- 行内样式表最高

- id选择器 0 1 0 0

- class选择器 0 0 1 0

- 标签选择器 0 0 0 1

- 群组选择器各自计算

- 包含选择器进行相加 ul li

- 通配符 0000

- 伪类选择器 0010

<style>    div {      color: red;    }    #box {      color: rgb(76, 0, 255);    }    .box {      color: rgb(0, 255, 85);    }</style></head><body>  <div class="box" id="box" style="color: yellow;">休息下</div>  <!--   <div id="box">休息下</div>  <div class="box">休息下</div> --></body>