html + CSS学习
已更新了javaScript
地址：javaScript学习
html快速入门
基础命令
标题
| <h1> </h1> |
| <h2> </h2> |
| <h3> </h3> |
段落
链接
图像
| <img decoding = ""async src = "图片地址" width= "宽度" height = "长度"> </img> |
| alt 替换文本 |
| title 提示文本 |
元素
| <thml></thml> |
| //<html>这个标签定义了整个HTMl文档 |
文本格式化
| <b>加粗</b> <strong> 加粗 </strong> |
| <i>倾斜</i> <em>倾斜</em> |
| <u>下划线</u> <ins>下划线</ins> |
| <s>删除线</s> <del>删除线</del> |
| <br>换行</br> |
超链接
| <a herf = "" target="_blank"></a> |
| target="_blank" 一个新空白网页 |
| herf = "" 跳转链接 |
多媒体
| <audio src = '链接' controis loop autoplay></audio> |
| controis 显示控制面板 |
| loop 循环播放 |
| autoplay 自动播放 |
| |
| <video src = '链接' controis loop muted autoplay></video> |
| //在使用自动播放的时候，视频必须是静音状态 |
| controis 显示控制面板 |
| loop 循环播放 |
| autoplay 自动播放 |
| muted 静音播放 |
列表
| |
| //列表分类：无序列表 |
| //ul:只能放<li></li> |
| <ul> |
| <li>第一列</li> |
| <li>第二列</li> |
| </ul> |
| //列表分类：有序列表 |
| <ol> |
| <li>第一列</li> |
| <li>第二列</li> |
| </ol> |
| //列表分类：自定义列表 |
| <dl> |
| <dt>标题</dt> |
| <dd>详细内容</dd> |
| <dd>详细内容</dd> |
| </dl> |
表格
| |
| //表格结构标签 |
| thead 表格头部 |
| tbody 表格主体 |
| tfoot 表格底部 |
| |
| //合并单元格 |
| rowspan 保留最上单元格，值是合并几个单元格 |
| colspan 保留最左三元个，值是合并几个单元格 |
| <table> |
| <thead> |
| <tr> |
| <th></th> |
| </tr> |
| </thead> |
| |
| <tr> |
| <td>data</td> |
| </tr> |
| </table> |
表单（重点）
| <! |
| <input type="属性值"> |
| //属性值有 |
| text 文本框，用于输入单行文本 |
| password 密码框 |
| radio 单选框 |
| checkbox 多选框 |
| file 上传文件 |
| |
| //占位文本 |
| placeholder="提示信息" |
| |
| //单选框 |
| <input type="radio" name="gender">男 |
| <input type="radio" name="gender" checked>女 |
| //name 是多个属性分到同一个组中，上面的例子就演示了把男和女放在同一组里实现单选的功能 |
| //checked 默认选择 |
| |
| //文本框 |
| <input type = "file"> |
| //只能上传一个文件 |
| <imput type= "file" multiple> |
| //multiple 多文件上传 |
| |
| //多选框 |
| <input type="checkbox" checked>one |
| //checked 默认选择 |
| |
| <input type="属性名" name="" value="" id=""> |
| 其中的name |
| name 属性规定 ＜input＞元素的名称。 |
| name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。 |
| 其中的id |
| 每个input的id是唯一的（不可重复） |
| 一般用于css文本样式的添加 |
| 其中的value |
| 存储着用户通过input文本框输入的内容 |
| 可以使用js等，对其进行数据处理 |
| |
| <input type="属性名">其中的全部属性名及其含义 |
| button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
| checkbox 定义复选框。 |
| colorNew 定义拾色器。 |
| dateNew 定义 date 控件（包括年、月、日，不包括时间）。 |
| datetimeNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
| datetime-localNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
| emailNew 定义用于 e-mail 地址的字段。 |
| file 定义文件选择字段和 "浏览..." 按钮，供文件上传。 |
| hidden 定义隐藏输入字段。 |
| image 定义图像作为提交按钮。 |
| monthNew 定义 month 和 year 控件（不带时区）。 |
| numberNew 定义用于输入数字的字段。 |
| password 定义密码字段（字段中的字符会被遮蔽）。 |
| radio 定义单选按钮。 |
| rangeNew 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 |
| reset 定义重置按钮（重置所有的表单值为默认值）。 |
| searchNew 定义用于输入搜索字符串的文本字段。 |
| submit 定义提交按钮。 |
| telNew 定义用于输入电话号码的字段。 |
| text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。 |
| timeNew 定义用于输入时间的控件（不带时区）。 |
| urlNew 定义用于输入 URL 的字段。 |
| weekNew 定义 week 和 year 控件（不带时区） |
下拉菜单
| <select> |
| <option>one</option> |
| <option selected>one</option> |
| </select> |
| //select 整体 |
| //option 选项 |
| //selected 默认选项 |
文本域
| <textarea></textarea> |
| //自动把输入的数据换行 |
| //右下角有拖拽功能 |
label标签
| //经验：用label标签绑定文字和表单控制的关系，增大表单控件的点击范围 |
| <input type="radio" name ="gender" id = "nan">男 |
| <lable for="nan">男</lable> |
| |
| <lable><input type="radio">女</lable> |
| //上面实现了两种写法 |
| //支持lable标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、下拉菜单、文本域等等。 |
button标签
| <button type="">按钮</button> |
| //type属性值 |
| //submet 提交按钮 上传数据到后台 |
| //reset 重置按钮 回复默认值 |
| //button 普通按钮 自定义功能 |
| |
| //想要使用button标签。需要使用表单区域标签<form></form> |
| //把所有的内容放在form中 |
| <form action="发送的地址"></form> |
布局标签
| <div>独占一行</div> |
| |
| <span>不换行</span> |
字符实体
| //空格 |
| //小于号 < |
| //大于号 > |
总结
| 基础命令： |
| <h1>, <h2>, <h3>: 定义标题级别。 |
| <p>: 定义段落。 |
| <a href="链接">: 创建超链接。 |
| `<img src="图片地址" width="宽度" height="长度" alt="替换文本" title="提示文本">: 插入图像。 |
| <audio src="链接" controls loop autoplay></audio>: 插入音频。 |
| <video src="链接" controls loop muted autoplay></video>: 插入视频。 |
| 列表标签: <ul>, <ol>, <dl> 用于创建不同类型的列表。 |
| 表格标签: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 用于创建表格。 |
| 输入标签: <input> 用于创建表单输入元素。 |
| 下拉菜单: <select> 和 <option> 用于创建下拉菜单。 |
| 文本域: <textarea> 用于多行文本输入。 |
| <label> 用于绑定文字和表单控件。 |
| <button type="submit/reset/button"> 用于创建按钮。 |
| <div> 和 <span> 用于布局和组织内容。 |
| 字符实体：用来表示特殊字符，如空格、小于号、大于号等。 |
CSS快速入门
定义
| <title>CSS初体验</title> |
| <style> |
| |
| |
| p{ |
| |
| |
| color: red; |
| } |
| |
| </style> |
| <p></p> |
| //color:颜色 |
| //font-size:尺寸 |
| //行内样式：配合javaScript使用 |
| //css代码写在单独的css文件中（.css） |
| //在html使用link标签引入 |
| <link rel="stylesheet" href="css文件路径" |
元素选择器
类选择器
| |
| |
| |
| |
| |
| <style> |
| .red{ |
| color:red; |
| } |
| </style> |
| <div class="red 其他类名">标签</div> |
ID选择器
| 作用：查找标签，差异化设置标签的显示效果 |
| 场景：id选择器一般配合javaScript使用，很少使用css样式 |
| |
| 定义： |
| <style> |
| #red{ |
| color:red; |
| } |
| </style> |
| <!--使用id选择器--> |
| <div id="red">标签</div> |
| 规则： |
| 同一个id选择器在一个页面只能使用一次 |
通配符选择器
| <style> |
| *{ |
| color:red; |
| } |
| </style> |
属性选择器
| input[type="text"] { |
| border: 1px solid gray; |
| } |
文字控制属性
| 文字大小 |
| 属性名：font-size |
| 属性值必须有单位（px） |
| |
| 文字粗细 |
| 属性名：font-weight |
| 属性值：400（去除加粗）700（加粗） |
| |
| 文字倾斜 |
| 属性名：font-style |
| 属性值：normal（消除倾斜） italic（添加倾斜） |
| |
| 文字行高 |
| 属性名：line-height |
| 属性值：数字+px | 数字（font-size的倍数） |
| 默认行高：16 （文字大小+2*上间距） |
| 文字居中：设置行高等于文字大小 |
| |
| 文字族 |
| 属性名：font-family |
| 属性值：字体名 |
| |
| 文字复合属性 |
| 书写规则： |
| font： 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写） |
| 【字体和字号-必须写，不写font失效作用】 |
| |
| 文本缩进 |
| 属性名：text-indent |
| 属性值：数字+px | 数字+em（一个字的大小，经常使用） |
| |
| 文本对齐 |
| 属性名：text-align |
| 属性值：left（居左）| center（居中）| right（居右） |
| |
| 文字修饰线 |
| 属性名：text-decoration |
| 属性值：none（无） underline(下划线) |
| |
| color文字颜色 |
| 属性名：color |
| 属性值：颜色关键值；rgb（r,g,b）、rgba(r,g,b,a)、16进制表示法。 |
| r(red) | g(green) | b(blue) | a(透明度) |
| |
复合选择器
后代选择器
| |
| div p { |
| font-weight: bold; |
| } |
| |
| div > p{ |
| font-weight: bold; |
| } |
| |
并集选择器
| 并集选择器：选中多组标签设置同样的样式 |
| div， |
| p, |
| span{ |
| font-weight: bold; |
| } |
交集选择器
| p.box{ |
| font-weight: bold; |
| } |
| |
伪类选择器
| 选择器：hover{ |
| css属性 |
| } |
| |
| |
| .box：hover{ |
| font-weight: bold; |
| } |
| |
| p：hover{ |
| font-weight: bold; |
| } |
| 扩展 |
| |
| link 访问前 |
| visited 访问后 |
| hover 鼠标悬停 |
| active 点击时（激活） |
| |
| |
继承性
层叠性
选择器的优先级
| 权重 |
| !important 提权（最大权重） |
| 继承权重最低 |
| 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 |
| |
总结
| 元素选择器：选择像 p、div 和 a 这样的元素。具有相同标签的元素具有相同的样式。 |
| 类选择器：用于为具有特定类的元素设置样式。类可以应用于多个元素，并使用 .classname 来定义。 |
| ID选择器：通常与JavaScript一起使用。在页面上应该是唯一的ID，并使用 #idname 来定义。 |
| 通配符选择器：选择所有带 * 的元素。通常不常用于将样式应用于所有元素。 |
| 属性选择器：根据元素的属性选择元素，如 input[type="text"]。 |
| 文本控制属性：这些属性包括 font-size、font-weight、font-style、line-height、font-family、text-indent、text-align、text-decoration 和 color，用于控制文本的外观。 |
| 复合选择器： |
| ● 后代选择器：选择嵌套元素，例如 div p。 |
| ● 子选择器：选择直接子元素，例如 div > p。 |
| ● 多重选择器（并集选择器）：一次选择多个元素，例如 div, p, span。 |
| ● 类选择器与元素：组合类和元素选择器，例如 p.box。 |
| ● 伪类选择器：允许根据特定状态进行样式设置，例如 :hover。 |
| 继承性：从父元素应用的样式可以被子元素继承，除非被覆盖。 |
| 特定性（选择器优先级）：确定在存在冲突规则时应用哪种样式。特定性由高到低的顺序是：!important、内联样式、ID选择器、类选择器、属性选择器、伪类选择器、元素选择器、伪元素选择器。 |
| 层叠性：样式从样式表的顶部到底部层叠，最后一条规则具有优先权。 |
Emmet写法
背景图
| 属性名：backgroud-image(bgi) |
| 属性值：url（图片地址） |
| 例： |
| <style> |
| div { |
| width: 400px; |
| height: 400px; |
| |
| background-image: url(../photo/1.png); |
| |
| background-color: aliceblue; |
| |
| background-repeat: no-repeat; |
| |
| background-repeat: repeat-x; |
| |
| background-repeat: repeat-y; |
| |
| background-position: center top; |
| |
| background-position: bottom; |
| |
| background-size: contain; |
| background-size: cover; |
| background-size: 50%; |
| |
| background-attachment: fixed; |
| |
| background:pink,url(../photo/1.png),no-repeat,center,bottom/cover; |
| </style> |
| |
显示模式
选择器
结构伪类选择器
| E：first-child 查找第一个E元素 |
| E：last-child 查找最后一个E元素 |
| E：nth-child(n) 查找第n个元素 |
| |
伪元素选择器
| 作用：创建虚拟元素，用来装饰内容 |
| E::before 在E元素里面最前面添加一个伪元素 |
| E::after 在E元素里面最后面添加一个伪元素 |
| |
| 重点：必须设置content=""，不设置content伪元素，选择器失效 |
PxCook软件
盒子模型
| 内部区域：width&height |
| 内边距： padding(出现在内容与盒子边缘之间) |
| 边框线：border |
| 外边距：margin（出现在盒子外面） |
| |
| border: |
| solid（实线） |
| dashed（虚线） |
| dotted（点线） |
| |
| |
| 设置单方向边框线 |
| border-方向名词：尺寸 |
| top(顶部)、right（右部）、bottom（底部）、left（左部） |
| |
| padding/padding-方向名词：尺寸 |
| top(顶部)、right（右部）、bottom（底部）、left（左部） |
| 上 右 下 左 |
| padding 20px 20px 30px 40px |
| padding 20px 20px 80px |
| |
| 尺寸计算 |
| 盒子尺寸= 内容尺寸+ border尺寸 + 内边距尺寸 |
| |
| 手动做减法 |
| 内减模式：box-sizing：border-box; |
| |
| |
| 外边距： |
| margin |
| |
| 版心居中：margin: 0 auto |
| |
清除默认样式
| *{ |
| margin:0; |
| padding:0; |
| box-sizing: border - box; |
| } |
| |
| li{ |
| list-style:none |
| } |
元素溢出
| hidden:溢出隐藏 |
| scroll：添加滚动条 |
| auto：自动添加滚动条 |
| |
| |
| overflow:hidden; |
| overflow:scroll; |
| overflow:auto; |
合并现象
塌陷问题
| 场景：父子级的标签，子级的添加 上边框 会产生塌陷问题 |
| 现象：导致父级一起向下移动 |
圆角
| 属性名：border-radius |
| 属性值：数字+px/百分比 |
阴影
标准流
| 标准流,也称文档流，指标签盒子在页面中默认的排布规则（从左至右，自上而下） |
浮动
Flex布局
| div换行排列 |
| |
| display:flex; |
| 弹性盒子：沿着主轴排列 |
主轴对齐方式
侧轴对齐方式
修改主轴方向
弹性伸缩比
弹性盒子换行
行对齐方式
