目录
css能够获取用户输入(输入，选择，上传的文件)
控制数据提交的地址
三种书写方式
1.不写 默认就是朝当前页面所在的地址提交数据
2.写全路径()
3.只写路径后缀(/index/)
控制数据提交的方式
get from表单默认是get请求
post
==通常情况下input需要结合label一起使用==
用户名:
绑定id值，之后点击label标签内任何的位置都可以自动选中input框
用户名:
根据type参数的不同，展示不同的功能
text 普通文本password 输入的内容，会变成密文date 日期radis 单选圆圈checkbox 多选 打钩hidden 隐藏file 传文件button 普通按钮，没有任何意义，然而是用的最多的，可以绑定js事件ret 重置按钮submit 提交按钮，能够自动触发form表单提交数据的动作
一个个的option标签就是一个个的选项
默认为单选
可以给lect标签加一个multipe参数，就可以将单选变成多选
可获取大段文本
input标签可以加disable属性，禁用该input框input标签可以叫value属性，设置默认值选择的标签 如何默认选中 redio checkbox checked='checked' 当属性名和属性值相同的时候，可以只写属性名(******)
能够触发form表单提交数据的动作有两个标签可以(******) input标签 type=submit button标签所有获取用户输入的标签，都应该有name属性(******) name属性就类似于字典的key input框获取到的用户输入都会放到input框的value属性中针对选择框，传到后端的数据，有value属性决定form表单如果要提交文件数据，必须修改以下参数 enctype="multipart/form-data"
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>恰猪肉哟</title></head><body><h1>注册界面</h1><form action="https://127.0.0.1:8848/index/" method="po爱情电视剧推荐st" enctype="multipart/form-data"> <p> <label for="d1"> 用户名:<input type="text" id="d1" value="水箱" name="urname"> </label></p><p>密码:<input type="password"></p><p>生日:<input type="date"></p><p>性别:男:<input type="radio" name="gender" value="male">女:<input type="radio" name="gender" value="female"></p><p>爱好:唱:<input type="checkbox" name="hobby" value="sing">跳:<input type="checkbox" name="hobby" value="dump">篮球:<input type="checkbox" name="hobby" value="basketball"></p><p>省份:<lect name="province" id=""> <option value="sh">上海</option> <option value="bj">北京</option> <option value="cq">重庆</option></lect></p><p>自我介绍 <textarea name="info" id="" cols="200" rows="10"></textarea></p><p> <input type="button" value="按钮"> <input type="ret" value="重置"> <input type="submit" value="提交"> <button>俺只是一个button标签</button></p></form></body></html>
层叠样式表
用来控制html标签样式的
/*单行注释*//*多行注释1多行注释2*/
通常在写css的时候，都会单独写一个css文件，里面只有css代码
/*某某网址首页的css样式文件*//*通用样式*//*导航条样式*//*轮播图样式*/
选择器{属性：属性值}
属性和属性值之间用冒号（==:==）隔开，定义多个属性时，属性之间用英文输入法下的分号（==;==）隔开，最后一条属性可以不加分号
1.通过link标签引入外部的css文件(最正规的方法)
2.直接在html页面上的head内通过style标签直接书写css代码
<style> h1{ color: green; } </style>3.行内式(直接在标签内部通过style属性直接书写)，不推荐使用
<h1 style="color: orange">我是coach</h1>
只要学会了css的查找，之后js、jqurey的标签查找都是一个原理
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> 关于友谊的故事/*标签选择器，直接写标签名字*/ span { color: darkred; }</style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>span</span> <span>span</span></div><p>p <span> <span>span</span> </span></p></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*id选择器 id必须是唯一的 #+id值*/ #d1 { color: greenyellow; }</style><span id="d1">span</span><span id="d2">span</span><span>span</span><span>span</span><div id="d3">div <span>span</span> <span>span</span></div><p>p <span> <span>span</span> </span></p></body></html><!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*类选择器 .+类值*/ .c1 { color: purple; }</style><span class="c1">span</span><span class="c2">span</span><span>span</span><span>span</span><div class="c1">div <span>span</span> <span>span</span></div><p class="c3">p <span> <span>span</span> </span></p></body></html><!doctype html><html垃圾的英语 lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*通用选择器 *代表全部*/ * { color: orange } </style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>span</span> <span>span</span></div><p>p <span> <span>span</span> </span></p></body></html>只要在div这个标签内都属于div的后代
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*后代选择器 空格代表后代*/ div span { color: red; }</style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>div内的span</span></div><p>p <span> <span>p中的span</span> </span></p></body></html>大于号代表儿子(子代/儿砸)
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*子代选择器 '>'代表子代*/ div>span { color: blue; }</style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>div内的span</span> <p> div内p中的span </p></div><p>p <span> <span>p中的span</span> </span></p></body></html>~代表同级别下面所有的
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*兄弟选择器 '~'代表兄弟*/ div~span { color: hotpink; } </style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>div内的span</span> <p> div内p中的span </p></div><span>span</span><span>span</span><span>span</span><p>p <span> <span>p中的span</span> </span></p></body></html>紧挨着同级别的下面的那一个
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>就这样吧</title></head><body><style> /*毗邻选择器*/ div+span { color: yellow; }</style><span>span</span><span>span</span><span>span</span><span>span</span><div>div <span>div内的span</span> <p> div内p中的span </p></div><span>span</span><span>span</span><span>span</span><p>p <span> <span>p中的span</span> </span></p></body></html>任何的标签都有自己默认的属性 id class
标签还支持自定义任何更多的属性(也就意味着可以让标签帮用户携带一些额外的数据)(***************)
a标签有四种状态
1.没有被点击过
2.鼠标悬浮在其上面
去远方3.点击之后不松手
4.点击之后，再返回
将input框用鼠标点进去之后的那个状态叫做 input获取焦点
鼠标移出去之后的状态，叫做input失去焦点
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title></head><body><style> a:link { color: red; } a:hover { color: hotpink; } a:active { 国际和平日 color: yellow; } a:visited { color: greenyellow; } input:focus { background-color: darkred; } span:hover { background-color: aqua; }</style><a href="https://www.sogo.com">click me</a><input type="text"><span>span</span></body></html>（清除浮动带来的负面影响）
可以通过css添加文本内容
1.选择器相同的情况下，引入方式不同
遵循就近原则，谁离标签更近，就听谁的
2.选择器不同的情况下
行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器
本文发布于:2023-04-07 06:39:45，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e6bcdd2ec7f79d771572067ad5292e5b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：day 45.doc
本文 PDF 下载地址：day 45.pdf
| 留言与评论（共有 0 条评论） |
