重温html+css第一天：6月4日小结

HTML超文本标记语言，是描述网页的一种语言，由各种标签组成
网页由图片，链接，数字，视频之类的元素组成
常用浏览器：ie，火狐，谷歌
浏览器内核：也称为渲染引擎
浏览器不同，显示页面方式不同，所以需要Web标准
Web标准：结构+表现+行为（html+css+js）
Html语法规范：1.标签一般成对出现，单标签很少（如br）
标签关系分为两类：包含关系和并列关系
Html基本结构标签（骨架标签）：html根标签，head头部，title标题（写在head里面），body主体
开发工具：vscode（注意安装插件）
Doctype文档类型声明，告诉浏览器使用什么html版本显示网页
Lang=en，显示语音为英文，对浏览器起到提示作用
Charset字符集，utf-8万国码，这些写上防止乱码

Html常用标签：

1.标题标签，h1到h6，在word里面一样，独占一行
2.段落标签，p，段落和段落之间有较大的空隙
3.换行标签，br，是break的缩写，换行基本上下没有空隙
4.文本格式化标签，斜体em，粗体strong和下划线ins和删除线del等效果
5.div标签和span标签(也称为盒子标签)，div用来布局，一行只能放一个，span一行可以放很多个
6.图像标签，img单标签img src=“url”，src指示图片路径，alt替换文本（图片显示不出来的时候显示文本），title提示文本（鼠标放到图像上提示的文字）width宽度，height高度（）这俩只设置一个的话另一个会根据图片等比例缩放，boder边框属性。属性采取的是键值对的形式。
根目录：文件夹的第一层
相对路径：以引用文件为参考，下一级/ 上一级…/
绝对路径：目录下的绝对位置或者网络中的地址
7.超链接标签：a，hrf链接目标地址（外部链接或者内部链接，没考虑好地址可以用#占位，网页元素链接（比如点图片跳转），锚点链接（跳转到页面的某个位置#目标位置（用选择器标识去的元素位置））），target链接打开方式（—self当前窗口或者—blank新窗口），
8.注释标签：ctrl+/，&nbsp表示空格，
9.表格标签：展示数据（比如股票页面，比如excel），table下面标签都要放到这里面，tr行，td单元格，th表头（表格中的第一行一般比较特殊，会自动加粗居中显示）
表格属性：align（center居中之类的），border边框，cellpadding文字与边框的距离，cellspacing单元格之间的空白（缝隙），thead包含头部，tbody包含主题（都是为了让表格的语义更清晰）
合并单元格：rowspan跨行合并，colspan跨列合并（colspan=“2”就是跨列合并两格）
10.列表标签：用来布局的，看起来整齐的页面结构，分为无序列表，有序列表和自定义列表
无序列表：ul和li，列表项之间没有顺序之分，ul里面只能放li，li里面可以放任何元素
有序列表：ol和li，ol里面只能放li，使用场景大概就是排行榜等等
自定义列表：大标题带着一些小标题链接（比如小米商城最下面栏），dl和dt和dd，类似于table标签，dl相当于table，dt相当于thead，dd相当于tboby部分
li也可以看成一个盒子，不要看到一行展示的盒子模型就以为是span
11.表单标签：为了收集用户信息，拿数据用
form标签就是表单域，表单域是一个包含表单元素的区域，action=url地址，method=提交方式（post）
表单控件：input输入框，属性很多，type类型（可等于text，password，），type= “radio”表示单选按钮，type=“checkbox”多选按钮，（单选框和复选框都必须给所有按钮起一个相同的name值），checked属性指的默认选中，value属性是给后台人员用的（刚打开页面会显示value值），考题：区别不同的表单元素通过name属性
type=“submit”为提交按钮，会把表单的值送给后台
type=“reset”为重置按钮
type=“button”普通按钮，后期常用结合js使用
type=“file”文件提交按钮
select下拉框，option选择栏，selected=“selected”表示默认选中
textarea文本域元素，就是可以写很多文字的input框
12.label标签：作用是点击文本就可以使文本框获取焦点，for属性对应相关input框里面的id属性就行

CSS层叠样式表，也是一门标记语言
Style标签放在header里面，然后通过选择器在大括号里面加样式
CSS代码风格：一行一个键值对，样式都用小写，选择器和大括号间打一个空格
CSS选择器：作用是选择标签，分为基础选择器和复合选择器
基础选择器：标签选择器（不能差异化设置），类选择器（开发最常用）
div本身就是一个盒子，用来装网页内容的，独占一整行
多类名的写法实用性很高
id选择器只能调用一次，经常和js搭配使用
id选择器和类选择器区别：是否可以多个地方使用，
通配符选择器：所有标签都修改样式，一般用来清除所有盒子的内外边距
font-family字体，可以多个字体逗号隔开搭配使用
font-size字体大小，px像素
font-weight字体粗细，实际开发中提倡用数字表示粗细，一般用在标题栏，400表示普通字体，700表示加粗，经常使用
font-style文字样式，斜体italic，下划线等等
CSS文本属性：文本外观样式，color（直接写颜色或者写颜色十六进制或者写rgb选择）对齐文本text-align：center，text-decoration装饰文本（比如undeline下划线，最常用在a标签里面，text-decoration：none表示取消a标签的下划线），
text-indent通常用在段落的首行缩进，写数值，如10px
em是一个相对单位，表示一个文字大小，可以在设置字体或者设计段落间距的时候用到
line-height：行间距，改行高不会改变文字的大小，控制行与行之间的距离
内部样式表就是放入html里面的style标签里面，结构清晰，但是没有完全分离，控制一个页面
行内样式表适合修改简单的样式，在标签内部写一个style属性，没有实现结构与样式相分离，也称为行内式引入，控制一个标签
外部样式表，外部写一个css文件，然后在html里面引入link ref=“stylesheet” href=“url”，控制多个页面
Ctrl+0复原浏览器大小
div3就是生成3个div
ul>li就是生成ul和li
text-align：center可以快速生成写tac
格式化代码shift+alt+f，自动排版
快速复制一行：shift+alt+向下
后代选择器又称为包含选择器，可以选择父元素里面的子元素，非常的精确
子选择器：比如,hot>a，只选择子元素，其他后代不看
并集选择器：选择多组标签，同时为他们定义样式，通过英文逗号分隔，通常用于集体声明
伪类选择器：用于向某些选择器添加特殊效果，
a：link选择未被访问的链接，a：visited选择所有已经被访问的链接，a：hover选择鼠标指针位于其上的链接（鼠标经过的链接），a：active用的较少（love hate记忆这几个标签的书写顺序）
最常用的写法就是a{}和a：hover{}一起写
a链接经常和text-decoration：none搭配使用，表示去除下划线
：focus伪类选择器，谁获得焦点，就可以改变对应样式一般用于input：focus{}
CSS元素显示模式：就是元素以什么方式进行显示，如div独占一行
Html元素分为块级元素和行内元素
块级元素有h，p，ul，li，div，可以给宽高，没有给宽度就会和父级元素一样宽
p里面不能放div，文字类元素里面不能放块级元素
行内元素有a，strong，del，ins，span，也称为内联元素，一行可以显示多个，宽高直接设置无效，行内元素里面只能放文本和行内元素
行内块元素：指的是同时具有块级元素和行内元素的特点，比如input，ing，td，特点是一行可以有多个，但是相邻行内块元素之间有间隙，可以设置宽高
元素显示模式转换：一个模式的元素需要另一个元素的特性
display：block行内元素转换为块级元素
display：inline块级元素转换为行内元素，这么转换主要是为了显示和设置宽高
display：inline-block行内元素转换为行内块元素
一般在设计中经常需要设置宽高
单行文字垂直居中是没有对应代码的，设置技巧是让文字的行高等于盒子的高度，即让line-height=height就行，因为行高中文字有个上空隙和下空隙，这俩空隙平均分配剩下的距离，把文字挤到中间，如行高大于盒子高度，文字就会偏下
CSS背景属性：背景颜色background-color：red，背景图片background-image：url（地址），非常便于控制位置，装饰性图片一些logo之类的或者装饰性的一些小图片或者超大的背景图片，在设计相关滚动或者透明度之类的时候显得比较方便，如果只是单纯的用一个img标签更改不了图片的位置，除非使用绝对定位之类的？
background-repeat背景平铺背景
图片位置（非常常用非常重要）：background-position：x y（center top或者20px 50px等），背景图片在盒子里面移动位置很方便
background-image：和background-repeat：norepeat和background-position：x y配合使用效果会比img标签插入图片要好
background-position：还可以混合着写，比如20px center
background-attachment背景附着：可以做背景图像固定，内容走，背景图片固定不动， scroll（滚动）或者fixed（固定），后期造成视差效果很nice
background-color：rgb（）背景色半透明，指的是盒子半透明，对里面的内容毫无影响，括号里面可以传四个参数，最后一个参数就是alpha透明度
链接属于行内元素，若需要高度，就要转换成行内块元素
小结：水平居中text-align，垂直居中line-height=height，删除a链接的下划线bgn，设置背景图片background：url（1.jpg）no-repeat，当觉得文字上下有问题就更改行高，使用伪类比如.nav：hover{2.jpg}，可以更改鼠标经过时候展示另外的背景图片

CSS三大特性：第一是层叠性，样式冲突，就近原则，样式不冲突，不会重叠，比如写两个相同选择器.div{}
第二是继承性，子类会继承父类的样式，恰当的使用可以降低代码，比如给body写一个样式，里面的子类标签都会有样式，但是继承也是有选择性，比如只能继承字体，背景之类的，子元素也可以继承父元素的行高，如果行高没有写px，只写个1.5就是指的行高为字体大小的1.5倍，如果这时候子元素没有指定行高，那么他也会继承父元素那个1.5倍的行高，这么写行高有优势，就是自身没有就继承父元素的
第三是优先级，选择器相同，就根据层叠性（就近原则），选择器不同就根据一个原则：！important>行内式style>id选择器>类选择器（class）>元素选择器（div，p等）>继承或者*
优先级权重由四位数字组成，不会有进位，继承的权重最低，要好好的看清到底是继承还是id选择器等
a链接浏览器默认指定了一个颜色蓝色+下划线，所以在父类写继承给a的话不会奏效
复合选择器会涉及权重的问题，权重会叠加，但是不会进位

盒子模型：布局页面用，网页元素基本都是盒子，利用css设置好样式，往盒子里面装内容
盒子模型由边框，内容，内边距，外边距组成

1. 边框border：bw边框粗细（单位是px），bs样式（solid实线边框dashed虚线边框），bc颜色，这三个属性可以复合简写，没有顺序之分。border-top上边框，其余同理；border-collapse可以合并相邻边框，经常使用；边框会影响盒子的实际大小
   2.内容content：
   3.内边距padding：盒子边框与内容之间的距离，padding-left左内边距，其他同理。padding有复合写法，就是只写一个padding：5px 6px 10px 15px，就表示上右下左，逆时针记忆，可以简写，但是自己编写的时候可以全写，边距值重复了也不影响，padding也会影响盒子的实际大小，会撑大盒子，如果要保持原效果，就用盒子设计的宽高减去内边距（注意×2）就行，上面的边框也是这样减
   4.外边距margin
   &nbsp&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-&nbsp-------未完待续