一、HTML 表单相关标签收集用户信息专用前面讲的 div、p、img 都是给用户看的展示标签input、form 这一套是用来收用户输入数据比如登录、注册、问卷、搜索框全都靠它们。一.input 核心标签type 决定控件类型这些标签一样最本质的作用都是在形成独立空间只不过就是每个标签它有一些自己特殊的一些功能。input 本身是一个空标签改 type 就能换不同输入控件不用写一堆不同标签省事typetext单行文本框搜索框、姓名输入随便打字typepassword密码框输入内容自动隐藏看不到明文typeradio单选框只能选一个必须 name 相同才会分到一组不然能多选。比如性别男女name 都叫 sex才能二选一typecheckbox复选框可多选同样靠 name 分组传数据typefile文件上传点开能选电脑本地图片 / 文档用来上传头像、附件typedate/datetime-local日期 / 时间选择框不用用户乱输入文字避免格式错乱不用额外写代码校验日期格式typebutton普通按钮单纯按钮点了没自带功能要 JS 加逻辑二下拉框 select option选项多、不想占满页面就用下拉框页面只显示一行。option 的 value 是真正传给后端的值“语文”“数学”只是给人看的选对应条目表单提交时会把 value 传走。. form 表单容器问卷外壳所有输入控件必须放进form才算完整表单相当于一张问卷submit把当前这个表单里所有的信息整个提交走action 属性填后端接口地址数据通过submit提交到这里reset 重置把这个按钮所在的整个这个表单全部的数据全部恢复成默认缺点原生提交会整页刷新局部刷新做不到实际开发大多用 AJAX 替代原生 form 提交。二、CSS 三种引入方式HTML 和样式怎么绑定毛坯 HTMLCSS 负责装修一、行内样式 style 属性写在标签身上写法div style各种属性值优点能做到只改当前这一个标签缺点复用性极差想要加一个共同的样式的话要反复复制粘贴样式。二、内部样式 style 写在 html 页面 head 里在这个里边就是 CSS 的写法页面内统一写 CSS所有对应标签批量生效实现简单解耦标签和样式分开写在页面两块区域。这种叫模块级分离就是在一个页面里这是一个写样式的模块这是写标签的一个模块。三、外部样式 独立.css 文件开发最常用新建后缀.css单独文件写所有样式这个就叫文件级分离这是两个文件标签和样式放在不同的文件里。html 用link relstylesheet hrefcss路径引入link 标签表示的是链接的意思链接什么一个样式单好处一个 css 文件能给多个页面共用独立形成一个文件的话它会更有通用性路径统一用相对路径别写本地 C 盘绝对地址。CSS 基础语法固定格式选择器 { 属性: 值; 多个样式用分号隔开; }选择器作用精准选中想要美化的标签好比点名不能全页面一起改。三种样式优先级针对于一个元素不同的样式它的效果是叠加的。如果有冲突会做的是看优先级后边的这条信息的优先级就比前边这个要高它会对前边进行一个覆盖。行内样式 内部样式 外部样式内部、外部冲突时谁写在页面下方谁覆盖上面业务场景引入的第三方 css 不好修改局部微调直接加行内样式优先级最高直接覆盖。三、全套常用 CSS 选择器一基础选择器元素选择器直接写标签名div/p/h1页面所有同标签统一加样式缺陷内联元素 span标签 识别不了宽高块级 div 能正常识别。ID 选择器 #id 名找特定某个标签给他加一些特征这个特征到元素身上就叫属性。常用的属性一个是 id一个是 classid 呢表示的是唯一值id 像身份证理论页面只能有一个语法#box {}注意html 允许多个相同 id 不报错但 JS 获取元素只会读第一个尽量保证唯一。类选择器 .class 名class 是分类多个标签能共用同一个类一个标签可以写多个 class空格隔开classbox red。Js 里你要根据 id 去干什么事它的 id 会只认第一个后边儿的就不认了谁认所有呢class。 class 表示的是类。class用.快速生成时用“#”和“.来生成id和class通配符 * 选中页面所有元素开发通用清零写法* {margin:0; padding:0;}作用清除浏览器自带默认空白间隙不然布局到处有莫名其妙留白。优先级最低只会被精准选择器覆盖。属性选择器 [ ]想要根据别的属性去做选择的话有通用的属性选择器[class]所有带 class 的元素这个就表示有” class 属性凡是带着 class 属性的都选中这个属性它可以用有没有这个属性来[classaa] class 完全等于 aa也可以用它的属性值来做来做筛选[class^aa] class 以 aa 开头^[class$aa] class 以 aa 结尾$[class*aa] class 包含 aa还能匹配 a 标签 href、img 的 src 等专属属性。*复合交集选择器同时满足多个条件选择器一选择器二两个紧紧地挨着中间不要加空格比如div.aa既是 divclass 又是 aa不能乱写顺序一般标签放前面class/id 放后面。二层级选择器如果只想找这两个怎么办用元素选择器行吗不行元素选择器的话外边这两个也会被选中。挂上一个 class 呢这个外边这个也会被选中要么class再加一个用空格隔开但是多了不好用包含选择器空格隔开div .adiv 里面所有后代儿子、孙子、重孙classa全都选中空格表示的就是包含选择器我要在第一个选择器的后代当中去找符合第二个选择器的元素。子选择器 div .a只选 div 直接一级子元素深层嵌套的不算刚刚用的这个包含选择器呢 div 的后代这儿呢不只是孩子只要是在 div 的这个容器里凡是你符合 class 是 aa 的都会被选中不想要后代太明显我只想要子集用子选择器子选择器用的是大于号别额外敲空格了选择器里这个空格也算一种三分组选择器 逗号,多个选择器共用一套样式减少重复代码把公共的地方写到一起不同的选择器组合用的是逗号隔开每个逗号隔开的这儿可以是元素选择器可以class 可以是 id 包含选择器子选择器都行。*表示的是选择所有元素当前页面里所有的元素我都会被选中。项目里最常见用途初始化清除所有元素默认内外边距。选择器里选得越精确的它的优先级会越高。浏览器会给这些边界的位置留一些这种小空隙所以一般会加一个这个 margin0 padding0把浏览器给元素加的这些莫名其妙的这些小空隙给它去了。写前端的话都会加上这么一句啊选择所有元素加上这两个四、伪元素选择器假元素不用加 html 标签比如对”demo“中的”d“单独处理伪元素就是好像加了一个元素但是实际上没有加。只适用于块级元素 div/p/h1span 内联用不了块级元素就是像 div 这种我独占一行的元素。因为来多个 div 呢它就换行了。所以像这种独占一行的这个叫块级元素。span 它只占它自己文本的这一小块空间它只占这儿。所以这个 span 它叫内联级元素。::first-letter 块内首个字母/字::first-line 只选中段落第一行浏览器缩放自动适配补充英文缺陷长英文单词会不自动换行加word-break: break-all任意字母截断换行CSS 属性 word-break控制英文长单词是否拆分换行keep-all完整单词优先不把一个单词从中间切开换行默认中文表现就是此规则break-all只要到容器边界随便在任意字母后面截断单词换行::before 元素前面生成虚拟内容必须写 content 属性空值 content: 也不能删::after 元素后面生成虚拟内容作用无需额外添加空 div 标签依靠 CSS 实现分割线、装饰圆点、小图标等页面装饰效果。五、伪类选择器匹配元素当前状态好像给元素加了一个类一样实际没有加类用在重复性多的情况1. 结构性伪类按位置选中不用手动加 class适用于 ul li列表、规整重复模块:first-child 父容器第一个子元素:last-child 父容器最后一个子元素:nth-child(n)第 n 个支持数字、2n 偶数、2n1 奇数n 从 0 代入:nth-last-child(n) 倒着数第n个:nth-of-type(n)只匹配同类型标签中间穿插其他标签不受干扰:last-of-type / :first-of-type 同类型首尾区分人话:nth-child 数所有子元素中间插 div 会打乱序号:nth-of-type 只数当前标签别的标签忽略。2. UI 状态伪类根据元素状态做决定:hover 悬停。鼠标悬浮在元素上时才触发样式按钮变色、导航高亮最常用:focus 输入框点击激活、准备输入的焦点状态:checked 单选 / 复选框被选中时搭配 box-shadow 阴影做选中效果。拓展排除选择器兄弟选择器六、选择器优先级精准度越高优先级越高同样的层级下优先级行内样式 id class / 属性选择器 元素选择器 通配符 *同优先级代码写在下方的样式覆盖上面样式冲突只覆盖相同属性不同样式会叠加共存。