WEB7.6

WEB7.6

表格

• 元素显示模式：
  独占一行 宽，高，内外边都能设置

​ 一行可以存在多个span 不可以设置

• 表格标签：//只会把中间部分长宽高改变 border//边框

​ 学生信息

​ align//行位置 valign//上下位置

​

​ 姓名//行 //列

​ 性别

​

​

//控制内容位置//列 rowspan--跨行 最后一行 colspan--跨列

​

• details:解释---->详情标签

• tabindex:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9q4lUS5J-1688712624511)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706100340098.png)]

表单----网页交互区，收集用户信息

/action–提交至百度

提交<//button>

• 表单元素：用户名：<input type=“text” name=“user “value=“输入内容” maxlength=” ">
  maxlength----最大长度

• 密码：

• 单选框

  男

  女
  

• 多选框

  吃榴莲

  吃臭豆腐

  吃肥肉

• 隐藏域

• 确认按钮

• 文本域

  /<textarea cols=“200” rows=“100” maxlength=" “>cols----列距

• 下拉菜单

  /

  南京

  …

  selected----下拉菜单默认选中

• html的全局属性

  /

  id身份证号，只能出现一次

  /

  输入内容(style—输入大小)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QwWHILs4-1688712624513)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706142741863.png)]

• h5表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYq1Q5gF-1688712624514)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706143614067.png)]

css三种引入方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YU4HV9qA-1688712624516)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706145419642.png)]

css基本结构

选择器{

属性名： 属性值：

属性名： 属性值：

}

选择器

/

输入内容

/

/

• 标签选择器：

  /

​

• id选择器:

#box1{

color:

}

• 类选择器

  .box2{

  color:

  }

• 通配符选择器

  *{

  /*background-color：

  }

• 包含选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vp7LVA0b-1688712624516)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706151606326.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7nxf0nAG-1688712624517)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706151836083.png)]

• 复合选择器

  div,

  p,

  span{

  color:red

  }

• 属性选择器

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgGW6a4B-1688712624518)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706162302063.png)]

div[id]{

width:

height:

background-color:

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GFua2tmQ-1688712624519)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706162731051.png)]

type^=“te”----指type值中te开头的

type*=----指type中包含的

字体的样式

• 字体大小

/

div{

font-size:40px;

}

• 字体粗细

  font-weight : bold(加租)；

• 字体是否倾斜

  font-style：italic/normal;

  font-family：“微软雅黑”

• 改变鼠标的样式：

  cursor：pointer；

文体外观

/

p{

​ fond-size:20px;

​ fond-indent:2em; em----当前字体大小

}

font-weight : bold(加租)；

• 字体是否倾斜

  font-style：italic/normal;

  font-family：“微软雅黑”

• 改变鼠标的样式：

  cursor：pointer；

文体外观

/

p{

​ fond-size:20px;

​ fond-indent:2em; em----当前字体大小

}