WEB7.6
表格
- 元素显示模式: 独占一行 宽,高,内外边都能设置
一行可以存在多个span 不可以设置
- 表格标签://只会把中间部分长宽高改变 border//边框
学生信息
align//行位置 valign//上下位置
姓名//行 //列
性别
//控制内容位置//列 rowspan--跨行 最后一行 colspan--跨列
-
details:解释---->详情标签
-
tabindex:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ofj7l7DX-1688708595798)(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-OB22SStb-1688708595800)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706142741863.png)]
- h5表单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ec223uY-1688708595801)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706143614067.png)]
css三种引入方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hTzYheaF-1688708595802)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706145419642.png)]
css基本结构
选择器{
属性名: 属性值:
属性名: 属性值:
}
选择器
/
输入内容
/
/
-
标签选择器:
/
- id选择器:
#box1{
color:
}
-
类选择器
.box2{
color:
}
-
通配符选择器
*{
/*background-color:
}
-
包含选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z2FMOe27-1688708595803)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706151606326.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rxWXmuHy-1688708595804)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706151836083.png)]
-
复合选择器
div,
p,
span{
color:red
}
-
属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1q21taF3-1688708595805)(C:\Users\王哲伟\AppData\Roaming\Typora\typora-user-images\image-20230706162302063.png)]
div[id]{
width:
height:
background-color:
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTgHXZjL-1688708595806)(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----当前字体大小
}