黑马程序员pink讲前端，第一天
HTML。
1）插件。
#xfff0自动闭合标签c;修改开标签时，闭标签会跟随变化#xff08;微信开发者工具没有这个功能。）
主题。
保存格式化。
打开浏览器。
实时刷新�不需要按浏览器的刷新按钮。
win+←/→ 快速分屏。
2）初始结构标签。
声明文档类型的标签。
DOCTYPE html 文档类型也就是H5 标准。
为什么要这个标签？ 因为多个浏览器的html有自己不同的标准，你身边有16px。
只有12px那不是乱套。
- 必须在第一行。
- 不是html标签，但是文档类型声明标签。
html标签属性值。
告诉浏览器是中文网站还是英文网站设置为zh-CN，每次点击都不会提示是否要翻译成中文页面。
设置字符集。
哪种字符编码用于html文档设置#xff08;用于计算机识别的），utf-国码80000国码来自世界各地的人访问时不会有乱码，无脑写这个就完了，写其他语言可能只支持中文或其他语言，例如gbk2312。
没有设置编码格式c;打开后会这样。
也就是说，�charset字符编码设置是为了 正确阅读必须设置传输源代码。UTF-8类似于java中idea中的编码设置c;如果不设置，中文字符将无法识别，直接乱码。
3）常用标签。
h标签/p标签/br标签..文字标签。
独占一行大小递减。
因为html的多个空间默认为一个，很多文字挤在一起太难看了c;使用p标签后 最后自动换行，增加上下边距，段落文字使用p标签，一行或几个字母想要更改BR标签。
div/span标签。
div专属行，span一行多。
img。
alt表示。alternative。替换文本当图片路径达不到时，c;不能获得图片资源时显示，起到备注作用。
title，鼠标悬浮时提示。
不需要px单位。
tips:最好只改一个，另一个会等比缩放，如果设置width和height会失真，扭曲。
了解相框，#xff00c;但后续使用css设置。
src也可以发get请求拍照。
a。
anchor 全称 译为锚点。
内外链接。
直接输入index.html的相对路径可以跳到另一个自己写的html 或者服务器ipƱ跳到别人的html。
如果不是html，内部链接c;点击后，zip会自动下载文件。
锚点链接。
设置id，#填写id， 这可以产生同一页面滚动效果。instance有smoth跳转和瞬间跳转。
4）特殊字符。
< 和>号用< >。
5）表格。
属性。
tr-row。
td-data。
th-header。
设置border后，将自动生成以下两个属性值。
cellpadding，单元格的内边距。
cellspacing 单元格之间的外宽有多宽#xff0c;类似于一条河流，护城河。
结构。
thead 和tbody 语义意味着头部和主题部分。
合并单元格。
写在合并单元格的第一个格子中，然后合并后删除合并的单元格。
自定义列表。
definition list。
definition title/data。
6）表单。
#xff00控件标签c;input，提示信息表单域form将所有数据作为请求体发送给服务器交互的请求。
input。
后续input的name和value将使用插件收集数据，它被用作相应的标志。
submit类型。
reset类型。
所见所得，单击清空表单。
checkbox。
name属性的追加设置，所有namecheckbox提交表格 将value值作为数据提交到后端。
<form action。="/submit"method。="post"><label。><input type。="checkbox"name。="fruits"value。="apple">苹果。 </。label。><label。><input type。="checkbox"name。="fruits"value。="banana">香蕉。 </。label。><label。><input type。="checkbox"name。="fruits"value。="orange">橙子。 </。label。><button type。="submit">提交。</。button。></。form。>label。
级联，for点击属性c;值为 其他标签的id，点击他就会触发点击其他标签。
这个后续可以做span label的按钮样式。
textarea。
类似于width的cols和rows height属性。
select。
selected=默认显示selected。
CSS。
1）命名规范。
wrapper控制整体盒宽高。
多个单词使用-分离。
2）多类名。
包装公共，后续的类名调用可以，减少大量重复操作，但是标签的class后面会有很多类名。
3）行高。
line-height=文本的高度夹在上下边距的中间。
line-height设置通常与div高度一致 在文本高度不变的情况下，增加上下边距，文本在上下边距之间，可以想象，文本上下区域增加了一层能量气场，别人不能靠近，所以一行变得很高。
也可以想象一行文字变胖，或者想象几天没洗澡的一行文字，周围的人和他保持距离。
4）案例。
大局观。
大小/行高。
div标签是特殊的pc;自带一些属性，texttt仍然可以在p上定义内部结构-align center。
5）Emmett语法。
$从1到5表示类名前缀。
使用div{ $}*5可以快速生成包含1-5内容的div。
输入w100 回车，生成width:100px。
tlc=>text-align:center。
6）选择器。
后代选择器。
多元素之间的空间隔开。
子选择器。
大于号指向子孙标签无效。
并集选择器。
同时应用多个类名，逗号分隔。
伪类选择器。
a。
link，未点击的，visited点，hover悬浮时，active长时按时。
链接伪类注意事项。
顺序声明。
focus。
7）元素显示模式。
块元素。
文字元素中不使用块级元素。
行内元素。
内容长度为默认宽高。
没有宽高。
其他行业只能放在行业内文字元素。
链接无法设置链接。
a里可以放块，提前将a变块。
行内块。
一行多，块，空白间隙，宽内外边距，宽默认为内容宽度。
元素转换。
8）BGC。
repeat。
repeat重复填充剩余空间#xff0c;有x方向或y方向。
position方位词。
应用。1。
用img标签插入小装饰图片时，很难控制位置背景嵌入h3标签c;然后设置位置。
应用2。
大图背景�显示正中间。
精确坐标。
如果混合使用第一个必须是x二是y。
图像固定。
scroll，随着内容的滚动，fixed，一直在屏幕中间。
简写。
无序，协议顺序为，颜色-地址-repeat-附着attachment-位置。
9）css三大特点。
继承性。
p继承父的pink。
文字继承，宽高内边距不继承。
继承的1.5表示当前元素中的font-size*1.5。
没有fontsize就是body的文字大小*1.5。
优先级。
相同的选择器后覆盖前。
不同的选择器计算。权重。
继承/* 权重为0。
无论是id选择器，父元素都是id选择器c;所有的子元素都是屁。
继承body，没有屁用，由浏览器自带的标签选择器覆盖，对于默认的蓝色而不是红色。
权重叠加。
复合选择器+标签选择器 叠加权重。
类选择器+复合选择器
权重叠加但不进位，也就是说，如果0，0，0，10不会到00，1，0，总比0�0，1，0小。
10）盒子模型。
表格的边框线。
collapse收缩合并表格中重叠的边框 它看起来不会太粗。
原来中间很粗合并后变细。
改进1。
直接给宽度，然后text align 但是有些文本内容很少宽度似乎不一致。
使用padding。打开，一是固定宽，一是由内容宽度决定。
标签搭配inline-block和paddingnav。
注意1。
如果没有w / h padding 不能打开打破原来的宽高。
行内元素水平居中。
父盒加text-align即可。
合并外部距离。
父子元素都有外距，两者合并为父元素的外距，原因�子元素和父元素处于同一高度，子元素的margin突破了父元素，相当于天花板被刺穿塌陷，成为父元素的margin。
解决方法。
不让孩子和父亲在同一高度，可以为父元素增加边框。上内边距�溢出隐藏。
11）默认内外边距。
不同的网页有不同的大小，干脆去掉。
所有css的第一行代码。，之前做博客的时候遇到过这个问题，侧面或底部的滚动条会莫名其妙地多出来。
行业别设上下边距，没有屁用还占位置。
12）案例2。
不要给paddding高度c;否则，将打乱width，除非设置box-sizing=border-box 盒子的宽度和高度包括框架，例如，包括工人的工资和成本支出，而不仅仅是成本，后续的width类似于总支出，需要增加一个padding/border （工人工资）
所以，想要有高度的边距，给margin。