![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
HTML表单, 用于搜集不同类型的用户输入
属性
action 表单提交URL 如果省略 action 属性，则 action 会被设置为当前页面
method 提交类型
post: 数据在请求体中,不在url中,安全,可发送大量的数据,例如文件上传
get: 数据在url中, 明文发送,适合少量数据,不超过4k
enctype 数据编码
multipart/form-data 当使用有文件上传控件的表单时，必须设置该值。
<form action="" method="POST"><!-- 单行文本框 --><!-- 属性1. name: 可以把值提交到后端 如果没有name属性 后台程序就不能获得提交的数据2. type: 定义的是哪种类型的表单形式1. text 单行的文本框2. password 密码框 将文本替换为”*”的文本框3. email 邮箱4. radio 单选按钮 多个选一5. checkbox 复选框 可选一个或多个6. file 文件上传域7. hidden 隐藏域 必须提交的数据,对用户不可见3. placeholder:表示文本框字段的提示信息4. required:表示字段不能为空5. autofocus:表示页面一打开文本框自动获取焦点6. value:表示预先设置好的信息--><label for="username">帐号:</label><input type="text" id="username" name="username" value="" placeholder="username" required /><!-- 邮箱型文本框 --><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" required placeholder="demo@email.com" /><!-- 密码型文本框/非明文 --><label for="password">密码:</label><input type="password" id="password" name="password" value="" required placeholder="不少于6位" /><!-- 提交按钮 --><button>提交</button></form>
<label for="secret">性别:</label><div><!-- checked布尔属性,不需要值,只要存在就是true / 真 --><!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 --><input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" id="female" /><label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label></div><label for="#">兴趣:</label><div><!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 --><input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label><input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label></div>
<div><!-- 下拉列表,将变量名和多个值分开设置,由用户自己选择 --><!-- name, value应该在一个标签内,但是select --><select name="level"><option value="1">铜牌会员</option><option value="2">银牌会员</option><option value="3" selected>金牌会员</option><option value="4">永久会员</option></select></div><!-- 自定义下拉列表 --><!-- datalist + input --><div><label for="">搜索关键字:</label><input type="search" name="search" list="keywords" /><datalist id="keywords"><option value="html">html</option><option value="css">css</option><option value="js">js</option><option value="javascript">javascript</option></datalist></div>
<form action="" method="POST" enctype="multipart/form-data"><!-- 上传文件要注意二点:1. 请求类型必须是: POST2. 将表单数据编码设置为: enctype="multipart/form-data" --><label for="pic">头像:</label><!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 --><input type="hidden" name="size"/><input type="file" name="pic" id="pic" /<!-- 5. 文本域 --><label for="comment">备注:</label><textarea name="comment" id="comment" cols="30" rows="5"></textarea><!-- 提交按钮 --><button>提交</button></form>
<!DOCTYPE html><html lang="zh-CN"><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></head><body>hello world<h1>hello world</h1></body></html>
h1 {color: red;background-color: yellow;}
style标签设置样式,适合于当前html文档
<style>h1 {color: red;background-color: yellow;}</style>
style属性: 行内样式,仅限于当前元素 <h1 style="color: green">hello php.cn</h1>
导入外部样式表
<link rel="stylesheet" href="style.css" />
<style>@import url(style.css);</style>
选择器: 用于选择页面中一个或多个元素的字符串
1.几乎所有的元素都可以使用的三大通用属性 style, id, class
属性id 选择器 [id="title"]{color: violet;} 简写成 #title{color: violet;}
属性 class选择器 [class="title"]{color: violet;} 简写成 .title{color: violet;}
标签 选择器 h2{color: violet;}
2.选择器优先级
相同选择器 会根据书写顺序后面写的会覆盖前面写的
不同选择器 和书写的顺序无关 与权重有关 !important > style属性 > id > class > tag
3.权重的计算方式
<body><h3 id="a" class="b">Hello PHP.CN</h3><style>/* 选择当前的h3有三种选择器:标签, class, id *//* 将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0 *//* 百位 十位 个数id class tag0 0 0 *//* 百位对应:id 十位对应:class 个位对应:tag *//* 1,1,0 *//* #a.b {background-color: lightblue;} *//* 0, 1, 1 */h3.b {background-color: blue;}/* 0, 1, 0 */.b {background-color: cyan;}/* 0, 0 , 2 */body h3 {background-color: yellow;}/* 0, 0 , 1 */h3 {background-color: lightgreen;}</style></body>
上下文选择器
只能选中 子元素 : > .list > li {
border: 1px solid rgb(150, 56, 56);
}
后代元素都能选中 : 空格 .list li {
border: 1px solid #000;
}
相邻兄弟/next/下一个 : + .list .item + li {
background-color: cyan;
}
所有兄弟元素 : ~ .list .item ~ li {
background-color: cyan;
}