第一个月第一周_学习html+css

快捷键：
过 快速生成基本结构：ctrl+!(shift+1)
过 注释：ctrl+/
过 部分注释：alt+shift+a
过 快速打开浏览器：alt+B
复制多行：光标停留在一行，按住alt和shift，按↓键
过 快速修改方法：ctrl+d
移动位置：光标停在某一行，alt+↑ 或 ↓

快速生成代码（不太会用）：
花括号和￥和星号的使用：option{199KaTeX parse error: Expected 'EOF', got '}' at position 1: }̲*9 中括号和星号的使用：in…*6{test}

–表格标签table。行tr内容td，table需要设置宽高，tr和td不用，会平均分配，
–清除表格之间的间距 ：border-spacing: 0;合并表格边框：border-collapse: collapse;
在家写的笔记：

1. table标签的属性：
   border（边框属性“1”）width（表格宽）height（表格高）cellspacing（间距属性 定义单元格之间的距离）cellpadding（间距属性 单元格边框和单元格内文本的距离）align属性（定义在浏览器页面中的对齐方式）bgcolor（表格背景颜色）bordercolor（边框颜色）
2. tr表格行属性：
   height，bgcolor，align（单元格内容的水平对齐方式，三种取值leftcenterright）valign（内容的垂直对齐方式，三种取值topmiddlebottom）！注意tr没有width属性，设置值也没用
3. td单元格标签属性：
   witdth（单元格宽度）height（单元格高度）bgcolor（背景颜色）align（单元格内容的水平对齐方式，三种取值leftcenterright）valign（内容的垂直对齐方式，三种取值topmiddlebottom）
   单元格合并属性：
   水平合并是跨列colspan纵向合并是跨行rowspan
4. 表格标题标签：caption行分组标签：thead（表格头标签）tbody（表格体）tfoot（表格尾）列分组标签：colgroup（span属性 另colgroup常用来设置一列或几列的颜色）
5. block元素的一种：块div标签（用来定义html文档中一个部分）
   inline内联元素的一种：span标签（标记文本或文档的一部分）
6. 表单（用来采集用户信息）标签：form

• 单行文本框控件（）
• 多行文本框控件（textarea标签cols属性指定文本框高度rows指定文本框宽度）
• 单选框控件（添加name属性才能成一组checked属性默认选中）
• 多选框控件（checked同单选框）
• 下拉框控件（select和option标签搭配使用；option标签里写selected属性代表默认选中一个选项既option；在select标签里写multiple可以选中多个选项，select标签里写size定义默认显示行数；）
• 文件选择：用来选择本地的文件
• 单击label光标定位到输入框：
• 设置控件值只读（不可删除和修改可复制）：
• 禁用控件为灰：（？禁用的表单控件值是不会被发送给后端的）
• 分组控件：作用是划分区域。父级标签fieldset子级标签legend（定义分组控件的标题）
• 按钮控件：
  1提交按钮。给form标签添加action属性（用户点击按钮后做什么动作），属性值为服务器地址，给form标签添加target属性，属性值有_self和_blank（可保留数据，不懂写代码就明白了）两种。可添加value属性用来定义按钮上的文字。
  2重置按钮，用来获得空表单，重新填写表单内容。value属性用来定义按钮上的文字。
  3普通按钮没有任何功能，value属性用来定义按钮上的文字
  4图像按钮。功能和提交按钮一样，用图片代替了提交按钮的外观。 src属性值为图片路径
  5双标签button按钮。实现表单的提交功能按钮名字
• 表单实例：首行缩进两字符（两个 ）。h标签能够同时实现文本的加粗和换行和文本与控件之间的间距。

240709第一周周二
站点/文件夹的创建：整合资源，结构清晰
基础结构：代码结构清晰。head，思考，解析资源。
双标签单标签，标签的使用
标题h1-h6
加粗b strong
倾斜i em
换行br
水平线hr
列表标签：
掌握无序列表。父级标签ul子级标签li。快捷方式：ul3>li4或ul3>li4{文本}
type：circle空心圆disc实心圆square方形
了解有序列表。父级标签ol
了解自定义列表。父级dl子级dt和dd。快速生成一组自定义列表：dl>dt+dd
图片标签img。属性src图片地址alt图片加载失败会提示的文本widthheightborder。
掌握如何使用路径。绝对（不能用：完整的路径含有盘符路径）和相对路径：同级找同级，父级找子级（文件夹/文件名称.后缀名），子级找父级（…/文件名称.后缀名）。注意：…/表示跳出当前文件夹
超链接标签a属性herf鼠标移动的提示文本title。target，默认值_self（会刷新）_blank打开新的标签页
div无实际含义，为实现网页布局，充当大盒子，划分区域
span，（音标：死板）无实际含义，为包裹文本，充当小盒子
作业：04-作业

240710第一周周三
昨日回顾：html是什么？超文本标记语言，
今天大纲：表单标签，ps，css基础，如何配合html让界面更好看，搭建基础布局
作业：关于标签之间使用的注意点：双标签可以嵌套单标签div>li可以， p>li不可以，p和h不可以，h和p行，h自己和p自己不可以嵌套
开始：
表单，作用用来收集用户信息。分类，表单框（相当于大盒子可以在盒子内让用户填写自己的信息）和表单控件（可以和用户发生交互行为，收集用户信息的控件）。

表单框的使用：
1标签名称form
2属性
2.1action行为表示表单收集信息之后提交的地址，后台地址，接口。
2.2属性method方法？？？？？，get从数据库获取数据，post向数据库发送数据（发送数据的时候数据是否会显示在地址栏中）
3在地址栏中有？表示携带参数。检查中的network代表网页请求。

表单控件的使用：
1标签名称input，
2属性
2.1标签属性默认的type是以怎样的状态显示，默认是文本输入框。
2.2属性value在输入框中表示提示文本，需要手动删除。属性placeholder占位符，不需要手动删除，建议使用。
2.3属性name表示设置数据性别冲突实现单项选择。？？？？设置数据什么意思，只知道设置name属性才能成一组

关于type属性的属性值：text默认文本输入框。password密码框。radio单选框。name绑定数据男女。submit提交，post更安全？？？？？明白了？？？？？submit和get配套使用还是post配套使用呢，问过了，没明白。reset重置。button空按钮后期会常用，有两种，一个是input不会跳转，一个是双标签刷新并提交

智能表单
颜色 color
搜索search
数字number min属性。
滑块 range
时间表单
日期date显示年月日
年月month
周数week
时间time
本地时间 datetime-local年月日时分

ps切图吸取颜色。蓝湖。pxcook
基础操作。导入图片。ctrl+r调出刻度尺使用辅助线。ctrl+k调出首选项，常规，用滚轮缩放。空格键拖动设计图。选框工具选择大小，f8调出信息。ctrl+k调出首选项，常规，单位与标尺修改为像素。
如何切图。左侧的第五个按键，右键选择切片工具。
如何保存切图。文件，web，默认生成一个images文件夹，切片要选择所有用户切片。

下午：css 需要背，细心
1css语法组成：选择器{属性1:属性值1;属性2:属性值2;}
1.1选择器：修饰的对象（标签)
1.2注意：选择器是官方推荐使用的。属性和属性值之间使用冒号。当只有一个声明结束之后建议使用分号隔开，多个声明必须使用分号隔开。
2css的书写位置（创建方法）即如何在浏览器中添加css
当浏览器读取一个样式表（css文件）时，它将根据样式表中的信息对html文件进行格式化。css中有三种插入样式表的方法
2.1行内式：是样式表的一种特殊用法，只能修饰一个标签，要使用行内样式需要将样式属性添加到相关的元素中，样式属性可以包含任何css属性，如在div上添加行内样式，其中的div可以替换成p和h等任何标签：

1

。在这里，标签直接作为选择器使用。注意，就算只有一组声明，最后也要写上分号，多组声明的最后一组也要写上分号。
缺点：html和css不分离，即样式代码和html代码写在了一起，显得乱。
2.2内部式。通过内部样式来添加css。如果一个单一的html页面有一个独特的风格，那可以use一个内部样式表，内部样式表，一般定义在head元素里，通过style元素来定义。

怎么告诉浏览器给哪个元素添加样式，要找到要添加样式的html元素，这个方法就是选择器。
css选择器：是用来寻找或选择你想要定义样式的html元素的，css元素选择器有很多种，第一种，元素选择器，是根据元素名称来选择html元素的。p元素就是一个元素选择器，根据p这个名称选择了html文件里的全部的p元素，在花括号里声明样式，

如：

缺点：内部样式只能作用于一个页面，无法实现多个样式共享一个样式。
2.3外部式。
优点：可以做到多个页面样式共享
外部css也叫外部样式，外部样式将样式代码放在一个独立的以.css为后缀名的文件中，使html页面结构文件和css样式文件完全独立开来每个html文件都必须在head元素中添加元素，在其中定义rel属性，值为stylesheet，表示关联一个样式表，再定义herf属性，用于设置对外部样式表文件的引用，值为css文件的路径。
注意：选择器和花括号中间用一个空格隔开。每一条样式声明语句单独一行定义。两组样式定义用空行来分割。

2.4优先级。行内最高，内部和外部书写在下面的优先级高

基本选择器：标签选择器、id选择器、class选择器、群组选择器、通配符选择器
1、标签选择器：所有的HTML标签都可以作为选择器进行使用
2、id选择器
2.1 作用是唯一性，一般用来实现网页的最外围大的结构
2.2 id选择器的使用方法
(1)需要在被修饰的标签中添加id属性和属性值
(2)在样式表中使用#id属性值选择到
3、class选择器
2.1 作用和id相似，可以使用多个
2.2 class选择器(类选择器)的使用
(1)需要在被修饰的标签中添加class属性和属性值
(2)在样式表中使用.class属性值选择到
4、群组选择器：将相同的声明写在一起
4.1 选择器1,选择器2,选择器3{声明}
5、通配符选择器 *。固定搭配 *{margin:0;padding:0}选择页面内所有标签
作业，继续完成外围和版心，完成之后预习。

240711
预习出现的问题：为什么会有各种边距这种东西？有什么作用？
外围大的用id，内部用class
掌握后代和子代选择器，可以不用，不用了解相邻选择器
为什么轮播图用#？？？？？？明白了，也可以用.banner-con，看老师的笔记就能明白

一、层级选择器
1.1后代选择器（掌握）
背 语法：父级选择器 子级选择器{} 选择了所有后代
例子：父亲下面的所有孩子,爷爷下面的所有孩子(叔叔、爸爸、姑姑、你、姐姐妹妹、哥哥弟弟)
1.2子代选择器（掌握）
背 语法：父级选择器>子级选择器{} 选择的是直接子级
例子：父亲下面的直接孩子,爷爷下面的直接孩子(叔叔、爸爸、姑姑)

背 二、选择器的权重
首先 行内样式高于内部样式
通配符选择器优先级最低
1、!important
2、行内样式表（选择器） 1000
3、id 100
4、class 10
5、标签 1
6、通配符 0
7、群组 各自计算
8、层级 相加

背 多个选择器作用于同一元素时，当多个样式作用于同一元素时，谁的权重高优先级，谁就生效。

会用，会写代码 三、浮动属性
页面默认是从上到下，要是想从左到右或者从右到左，就需要浮动
高度塌陷的含义：
父元素的高度，默认被子元素撑开，目前来讲box2多高，box1就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，就是我们说的高度塌陷问题。
1、属性：float：none | left | right
3、float:left 表示控制内容从左到右排列显示
4、float:right 表示控制内容从右到左排列显示
5、使用注意点
5.1 使用了浮动会使元素脱离文档流,初始位置不存在
5.2 元素使用了浮动有停止条件：碰到父级的边框就会停下来,碰到前面一个含有浮动属性的元素也会停下来
6、‘流’：层级关系
1、普通流：正常的网页布局(文档流) 教室的座位
2、浮动流：浮动层,会出现在文档流的上方 教室的天花板
会用，会写代码 四、盒模型的认识
四、盒模型的组成
1.1 margin 外边距对应的是多个快递之间的间距
1.2 border 边框对应的是快递盒
1.3 padding 内边距对应是快递中的填充物
1.4 content 内容对应快递中的宽邸物品
2、padding和margin
2.1 content内容区域，在布局中子级设置的元素宽高大小
2.2 margin 外边距：设置同级盒子之间的间距
2.3 padding 内边距：设置父级与子级盒子之间的间距
1内边距padding的使用
通常是用来设置父级与子级元素之间的位置
1、属性和属性值：padding
2、属性值：常规属性值(数值和单位)
二、padding可以设置在哪个元素上
1、父级：会撑大当前的元素大小，为了保证不影响布局，需要在初始大小上减去相对应的padding值
2、子级：可以给子级元素设置，也会撑大盒子，是否需要减去padding值看具体需求
三、关于padding属性值个数的理解
1、一个属性值：上下左右
2、两个属性值：上下、左右
3、三个属性值：上、左右、下
4、四个属性值：上、右、下、左
四、除了设置多个属性值还可以设置方向值
1、padding-top
2、padding-right
3、padding-bottom
4、padding-left
五、思考题：padding可不可以设置负值?
2 外边距margin的使用
设置同级与同级元素之间的位置
1、属性和属性值：margin，属性和单位
二、关于margin属性值个数的理解
1、一个属性值：上下左右
2、两个属性值：上下、左右
3、三个属性值：上、左右、下
4、四个属性值：上、右、下、左
三、除了设置多个属性值还可以设置方向值
1、margin-top
2、margin-right
3、margin-bottom
4、margin-left
四、思考题：margin可不可以使用负值
五、关于内外边距使用常见的搭配
1、*{margin:0;padding:0}
2、版心选择器{margin:0 auto}
六CSS bug:
CSS hack:
一、当父级下面只要一个子级元素的设置，设置子级元素margin-top会错误的解析到父级元素
二、有两个同级元素,同时设置margin-top/margin-bottom的时候会解析之间的最大值
三、非常重要的问题：在设置margin方向的时候，需要和父级边框有接触的才可以设置
3CSS中的边框
背 1、边框的大小 border-width
背 2、边框的样式 border-style
背 3、边框的颜色 border-color6

<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>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* border-radius: 50%; */
            /* border: 100px solid red;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent; */
        }
    </style>
</head>
<body>
    <div></div>
</body>

二、属性值的使用
1、border-width:10px
2、border-style:solid 实线 、dashed 虚线、dotted 点线、 double 双实线
3、border-color
3.1 颜色值：英文单词
3.2 十六进制：以#开头,后面是任意的六位字符(0~9a~fA~F)
3.3 如果六位字符相同的情况下,可以简写成三位 #000 #ccc #fff
3.4 rgb/rgba
三、边框的复合属性
1、属性：border
2、属性值：border-width border-style border-color (不区分前后顺序)
边框宽度 边框类型（solid实线 dashed虚线 dotted点线 double双实线） 颜色
3、border-方向值:0/none 表示把边框清除掉

五、怪异盒模型
一、标准盒模型 box-sizing:content-box(默认值)
1、计算盒子大小的时候：需要计算padding和border值
2、计算盒子所占的位置：又要加上margin值

背 二、怪异盒模型 box-sizing:border-box (IE盒模型)
1、设置了padding和border不会把盒子撑大，往盒子的内部去撑开

都会撑大？？？？？
为什么色块有的是上下，有的是包含？？？？明白了

240712
line-height看不懂，看懂了
拾色器？？？
冲突？？？？？明白了
/第一个内容：文档属性*/
文档属性
一、字体大小
font-size：16px（浏览器默认字体大小是16px，浏览器中默认的最小字体是12px,建议设置字体为偶数
em单位：相对单位,相对于父级元素计算的单位 1em = 16px
二、字体类型
font-family（默认是微软雅黑。中文属性值：建议使用引号引起来“”。英文属性值：如果字体只有一个英文单词可以不用引号,多个必须使用引号。多个字体之间用逗号隔开，电脑默认先解析第一个字体，如果没有就解析第二个字体，一般在字体最后设一个微软雅黑
三、加粗属性 font-weight：100~900整百数（100-300表示细体400-500为正常字体600-900加粗字体）。bold。bolder。normal清除加粗标签的默认样式
四、倾斜属性 font-style：italic倾斜的。oblique/əˈbliːk/更倾斜的。normal清除加粗标签的默认样式
五、单行文本行高设置(文本)
line-height：如果在容器中想设置文本在垂直方向上居中显示，设置行高=容器的高度(文本的底部会和基线对齐？？？？？？)
六、文本水平方向对齐设置
text-align：left right center justify(两端对齐)使用的时候要设置宽高大小
七、文本属性的简写方式【了解】
1、属性：font
2、属性值：font-weight font-style font-size/line-height font-family
3、font-weight font-style 可以省略的
4、font-size/line-height 不可以互换位置
5、font-family 无论是否修改字体，这个属性必须写
八、首行缩进效果：text-indent只针对第一行文本，可以使用px和em单位，可正可负 ,只能在块级元素中使用
九、文本修饰：text-decoration:underline下划线。overline上划线。line-through删除线。
none清除下划线。
十、字体颜色：color：英文单词。十六进制。rgb/rgba（用来设置透明度，值范围0-1）。transparent也可以变透明。
/第二个内容：列表属性/
列表属性
只针对有序和无序列表list-style-type | list-style：none。要清除默认的列表符号,有兼容问题
/第三个内容：背景属性/
背景属性
一、背景颜色属性background-color可以简写为background
二、背景图片
background-image：url(图片路径)
2.1 使用img图片默认会显示一张图,图片占位置,有没有父级容器或者大小都没有关系
2.2 背景图片使用的时候需要在有宽高大小的容器中设置并且导入图片之后默认是平铺铺满整个容器的。背景图片是不占位置的
三、图片平铺设置
background-repeat：repeat | no-repeat | repeat-x | repeat-y
四、背景图片的位置
background-position：x y
2.1 常规的属性值：100px 200px
2.2 法定的属性值：left|right、top|bottom、center
2.3 当两个方向上都是center 的时候可以简写成一个属性值
五、背景图片固定
background-attachment：scorl(滚动默认值) || fixed（固定在浏览器窗口）
六、背景尺寸：background-size 。css3中新增的
七、背景的简写方式
background：背景图片 背景平铺 背景定位 背景颜色