html汇总

常用行内标签

行内标签：包含a、span、em、strong、b、i、u、label、br；

特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

a标签：主要用来链接一个其他的网页；

span标签：主要用来对行内的文字进行一些样式以及其他的操作；

em标签：一般用来对文字进行强调，使用斜体体现出来；

strong标签：一般用来对文字进行强调，使用加粗字体体现出来；

img标签：图片引用标签，其中 src属性中写入图片的地址；

var标签：JavaScript中命名变量的标签。

常用块级标签

块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

p标签：段落标签，段落文字使用，默认格式：段尾进行换行；

div标签：划分块的主要使用标签；

ul标签：无序列表的主标签，后面的标号为圆点（黑色）；

ol标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5...；

li标签：列表中的主体使用标签

dl标签：自定义标签的主标签；

dt标签：自定义标签的表头；

dd标签：自定义标签的表头的解释（描述）信息；

h1~h6：6级标题标签、字体的大小依次变小。

行内块标签

行内块标签：img,input,textarea

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

​ 各种标签之间的转换

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

字体属性

 font-family: "iconfont logo";

 font-size: 160px;

 font-style: normal;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

}

插入图片

文件>偏好设置> 复制之后设置相对路径>选中三个选项

列表标签用在内容排列整齐的区域

小圆点是无需列表 ；有数字顺序的是有序列表 ；自定义列表：有标题和内容

1. 无序列表：ul>li ul只能包裹li标签； li里面可以包裹其他标签

2. 有序列表：ol>li ol只能包裹li标签 ；li里面可以包裹其他标签 eg：成绩排名可以用有序列表

3. 自定义列表 dl>dt dl自定义列表整体 dt是主题 dd是内容（网站的底部导航栏经常使用自定义列表）

   默认dd会显示缩进效果 dl标签只能包含dt dd ；dt dd标签可以包含其他标签

表格的主要作用 展示数据

table>tr>td 一个一行一列的表格

语法：

 table{
            border-collapse: collapse;
            margin: 30px auto;
            border: 1px solid #000;
            text-align: center;
            width: 500px;
            height: 200px;
        }
        td{
            border: 1px solid #000;
        }

  <script>
        // 先写静态页面 
        let goods_name=prompt('请输入商品名称');
        let goods_price=prompt('请输入商品价格');
        let goods_count=prompt('请输入商品数量');
        // 商品总价是商品数量乘以单价
        let goods_total=goods_price*goods_count;
        let goods_adress=prompt('请输入商品收货地址');
        document.write(`
        <table>
        <caption>订单付款确认页面</caption>
        <tr>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>总价</td>
            <td>收货地址</td>
        </tr>
        <tr>
            <td>${goods_name}</td>
            <td>${goods_price}元</td>
            <td>${goods_count}</td>
            <td>${goods_total}元</td>
            <td>${goods_adress}</td>
        </tr>
    </table>`);

定义表格的标签 : 定义表格中的行

定义单元格中的内容 tabledata

表头单元格标签

表头单元格（table head） 文字会居中加粗显示

表格相关属性 实际开发不常用后边用css来设置

属性名：align 属性值：left、center、right 描述：表格相对于周围元素的对齐方式

属性名：borfer 属性值：1或“” 描述：规定表格是否有边框 默认为：“”

属性名：cellpadding 属性值：像素值 描述：规定单元边沿与文字内容之间的距离 ，默认1像素。

属性名：cellspacing 属性值：像素值 描述：规定单元格与单元格之间的距离 ，默认2像素。

属性名：width 属性值：像素值或百分比 描述：规定表格的宽度

css基础班汇总

css样式

css层叠样式表

写在style下边 style标签一般写在head标签>title标签下边 后边的样式可以覆盖前边的样式。

内嵌式：

p（选择器）{

color(属性名): red（属性值）;

}（小案例 当前页面可以用内嵌式）

外链式：

css写在一个单独的.css文件中 需要通过一个link标签去引入（开发项目中多个页面用外链式）

行内式：

css写在标签的style属性中 （当前标签，配合js使用）

标签选择器

标签选择器是以标签名命名的选择器，可以选中所有的同名的标签

类选择器-多类名

class标签中写多个类名 中间必须要用空格分开 分别拥有多个类名 （类名可以由字母、数字、下划线组成，但是不能以数字或者中划线开头 ；一个标签可以拥有多个类名，类名之间用空格隔开 class="one two",同时调用one、two两个样式）

公共样式

放在同一个标签中 可以多次使用 修改样式用的最多

id选择器

html元素中以id属性来设置id选择，css中id选择器以“#”来定义 调用时以id调用 id选择器只能使用一次 一般用于页面唯一元素上。所有标签都有id属性，id类似身份证号码一个页面只有一个不能重复，一个标签上只能有一个id属性值，一个id选择器只能选中一个标签。 （后续配合js使用）

#id属性名{css属性名：属性值}

通配符选择器

*把html、body、div、span li等所有标签都改 通配符选择器不需要调用 特殊情况下才使用

css字体样式

font-size文字大小：19px；谷歌浏览器文字默认大小是16px，最小的文字大小是12px

font-weight文字粗细 ：400px正常，400px以后是加粗

font-style文字倾斜 ：文字倾斜 normal italic font-family字体类型: sans-serif无衬线字体，（黑体，Arial），serif衬线字体

超出文本用省略号显示

.pic .text {
  /* 溢出时候显示省略号
  弹性盒子能够靠内容撑开 给盒子设置宽度为0 */
  flex: 1;
  width: 0;
}
.pic .text h6 {
  font-weight: 400;
  /* 强制使内容在一行显示 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 溢出文本省略号显示 */
  text-overflow: ellipsis;
}

文本样式

text-indent：文本缩进 数字+n em表示空几个字

text-align ：文本对齐方式 left right center

text-decoration：underline下划线、line-through 删除线、overline上划线、none没有线

line-height：行高 行高的值是文本高度+上间距+下间距

line-height：1.5行高取倍数的情况是1.5个文本高度。

垂直水平居中设置：行高等于文本高度， text-align=“center”，只适用于单行文字垂直居中 多行文字盒子模型可以、

谷歌调试工具： fn+f12打开谷歌调试工具 黄色三角感叹号表示代码有问题 鼠标双击可以上下调，颜色16进制也可以调 去掉对号就是去掉这个效果 。谷歌里面的调试只是在浏览器中调试的，需要在浏览器中把数据复制到代码里面才能生效。

**css错误：**有中文的标点符号 属性名称写错

颜色的取值 ：关键词 rgb rgba a表示透明度 16进制 #ffffff纯白色 #000000纯黑色

标签水平居中 margin复合属性：0 auto ；

复合属性：一个属性包含多个值 属性后边用空格隔开

font属性 ：可以包含其他属性值 顺序是

font：style(italic) weight(700) size （16px) family(微软雅黑)；

font-style：normal；（font属性下边再写单独的font属性可以层叠）

css复合选择器

后代选择器

body里面 元素1>元素2 >元素3 head里面 style> 元素1 元素2 元素3{样式}**后代选择器** body里面 元素1>元素2 >元素3 head里面 style> 元素1 元素2 元素3{样式}** *中间加空格*

*子选择器*

只能选择离得最近的标签元素 (亲儿子选择器) li>p{样式声明} 选择li里面所有最近一级的p标签元素****中间是个>号****

*并集选择器：*

可以同时选择多种标签 ，通常用于集体声明。同时为它们定义相同的样式 元素1,元素2{样式声明} 约定语法规范 竖着写，最后一个选择器不需要加","

中间是","和的意思

*链接伪类选择器：*

/* 未被访问过的链接样式 */ a:link{}

/* 已经被访问过的链接样式 */ a:visited{}

/* 鼠标经过链接出现的样式 */ a:hover{}

/* 鼠标点击的时候未放开鼠标出现的样式 */a:active{}

为确保能生效 必须按照link；visited,hover,active

*基本使用方式鼠标经过时候变颜色 a{}；a:hover{}*

/* :*focus伪类选择器*，用于选取获得焦点的表单元素，焦点就是光标 */

input:focus{

background-color: chocolate;

}

*元素的显示模式：*可以很好的布局我们的网页，元素的标签以什么样的方式进行显示。

*html元素一般分为*块元素(div一行只能放一个div)和行内元素(span一行能放很多span)

*块元素：*独占一行；宽度、高度、内外边距都可以控制；宽度默认是容器（父级元素的宽度100%）；是一个盒子里面可以放块元素或者行内元素。

*文字类的元素不使用块元素*eg：p标签主要存文字不能放块元素特别是div；h1-h6也不能放。

*行内元素：*span是最典型的行内元素；相邻行内元素在一行上，一行可以显示多个；宽和高设置无效，默认的宽度就是他本身的宽度，行内元素只能容纳文本或者其他行元素。

*注意：链接里面不能再放链接了* ；a里面可以放块级元素，a转换成块级元素最安全。

*行内块元素* ：img、input、td同时具有块元素和行内元素的特点

特点：和相邻行内元素在一行上；之间会有空白缝隙；一行可以显示多个 ；默认宽度就是它本身的内容宽度；高度宽度内边距可以控制

*元素显示模式的转换* 一个模式元素需要另一种模式的特性

*单行文字垂直居中* 文字的行高等于盒子的高度就能实现垂直居中line-height=height值就行。（主要是因为行高有个上空隙和下空隙，让行高等于盒子的高度就能实现垂直居中）

背景样式

*背景颜色* 默认值是transparent透明色

*背景图片* 描述了元素的背景图片 装饰性的图片或者超大的背景图片 优点 便于控制位置。背景图片默认平铺 要想不平铺加no repeat

1./* 背景图片如果没有就是none 有的话记得要添加url属性 */

\2. /* 背景图片设置大小之后默认为背景平铺 */

\3. /* background-repeat: no-repeat; 背景图片不平铺*/

\4. /* background-repeat: repeat-x; 沿着x轴平铺*/

\5. background-repeat: repeat-y; /* 沿着y轴平铺 */

\6. 页面元素既可以添加背景图片也可以添加背景颜色 背景图片会压着背景颜色

*背景图片位置*

语法：backgroud-position：x y；

参数代表x坐标和y坐标，可以使用方位名词或者精确单位。

方位名词前后没有关系

*背景图片精确方位*：如果参数值是精确单位的话 第一个肯定是x轴 第二个肯定是y轴。如果只指定了一个值那该数值一定是x坐标，另一个默认垂直居中。

*混合单位* 第一个一定是x 第二个是y

*背景图像固定：* 背景附着

背景图片默认随着对象一起滚动，background-attachment: fixed;

/* 如果没加背景图像固定属性 默认图片随着属性移动 fixed固定的（表示图片不随属性滚动）；scroll滚动的 (图片随文字滚动)*/

*背景复合写法* ：将背景属性写在一个属性中 background：背景颜色 ；背景图片地址 ；背景平铺 ；背景图像滚动 ；背景图片位置。

背景色半透明：background：rgba(0 0 0 0.3) alpha透明度的简写 取值范围在0~1之间****注意**** 习惯把0.3的0去掉，背景半透明指的是盒子背景半透明，盒子里面的内容不受影响。

emment语法：

ul>li{文字内容}*3 *

*文字排序的话是ul>li{$}*3 文字排序

.box 一个div名字叫box的类

p#box p标签里面有id=box的id选择器

p.red#one

css里面标签宽度高度背景色 w300+h200+bgc都可以出现

css上一行代码出错下一行代码会受影响

css样式的性质

层叠性 ：

相同选择器给设置相同的样式，一个样式就会覆盖另一个冲突的样式，主要目的解决样式冲突的问题。选择器的能力相同时候，才能通过层叠性判断结果。

层叠样式遵循就近原则，那个样式离结构近就采取哪个，样式不冲突不会层叠。

继承inherited（继承）性：

子标签能继承父标签的某些样式，（text-，font- ，line-这些元素可以继承，还要color属性，文字控制属性可以继承） 注意 如果元素有浏览器默认样式，此时继承依然存在 ，只继承父级的部分样式。超链接有颜色不会继承父级的颜色，h1有字体样式不会继承父级的。

水平居中

水平居中如果是行内元素、行内块元素水平居中需要给父级元素水平居中。块级元素水平居中 margin：0 auto；

行高的继承属性

body{font：12px/1.5 Microsoft Yahei}

行高可以跟单位也可以不跟单位 如果子元素没有设置行高，则会继承父元素的行高，此时子元素的行高是当前子元素文字大小*1.5. body行高1.5 优势是里面子元素可以根据自己文字大小自动调节行高

优先级 ：*选择器选中范围越广优先级越小

不管是什么选择器后边加个!important这个优先级最高，但是继承的权重为0，看标签最终执行样式，看这个标签有没有被直接选择出来，如果直接选择出来优先执行直接选择出来的；行内样式选择器style=“”>id选择器 id=""#>class类选择器 class="" .>元素选择器>继承或者*。a链接浏览器默认指定样式 颜色蓝色有下划线，所以不会继承父级的样式，可以单独给链接设置样式。

权重叠加

复合选择器权重：

(行内样式style个数，id选择器个数，类选择器class个数，标签选择器) ！important权重最高。

如果两个选择器都是继承 看继承的大小

/* 权重叠加.nav(0 ,0 ,1 ,0) +li(0 ,0 ,0 ,1)=(0 ,0 ,1 ,1) 所以优先执行.nav li属性*/

​ /* 复合属性权重会叠加但是不会有进位问题 */

​ /* 权重叠加 本来li继承ul属性 但是继承属性是(0 ,0 ,0 ,1);ul li的继承属性会叠加(0 ,0 ,0 ,1)+(0 ,0 ,0 ,1)=(0 ,0 ,0 ,2) 所以执行ul li 的属性*/

盒子模型 看透网页布局的本质

网页布局过程: 1.先准备好相关的网页元素，网页元素基本都是Box；2.利用css设置好盒子样式，然后摆到相应的位置；3.往盒子里面装内容。

盒子模型： 把HTML页面中的布局元素看做一个矩形盒子。css盒子模型本质上是一个盒子，封装周围的HTML元素，包含：边框border、外边距margin、内边距padding和实际内容content。

内容： width、height

边框 border可以设置边框的宽度(粗细)、样式、颜色（bd+enter快捷键）

border：边框的宽度(粗细)border-width ||样式border-style|| 颜色border-color

边框属性 ： css边框属性允许指定一个边框的样式和颜色。

简写：border：1px solid red；

表格别的细线边框：border-collapse: collapse;

​ /* 合并相邻的单元格边框 */

边框会影响盒子的大小 测量盒子大小的时候不需要量边框，如果测量包含了边框，则需要width/height减去边框的宽度。

权重叠加

内建模式css3盒模型：box-sizing：boder-box这样可以设置width或者height就是本来的width和height 加padding和boder不会撑大盒子。

内边距： 盒子的内容是content，content默认

如果盒子没有指定height、width，padding指定的话没有数值的那个不会改变

如果一个盒子没有指定宽度，指定一个padding后盒子宽度不会变，高度会变

padding属性用于设置内边距，即边框与内容之间的距离。padding-top上内边距-left左内边距 -bottom下内边距。内边距会影响盒子的属性，盒子大小如果出来了需要减去上下左右内边距。

padding：5px；1个值代表上下左右内边距为5px；

padding：5px 10px；2个值代表上下内边距为5px，左右内边距为10px

padding：5px 10px 20px；3个值代表上内边距为5px，左右内边距为10px，下内边距为20px

padding：5px 10px 20px 30px；4个值代表上内边距5，左内边距10px，下内边距20px 右内边距30px

遇到盒子里面的文字不一样巧妙设置内边距就能使他们更规整 eg：微博导航栏

外边距margin 和内边距一样都有上下左右四个边距。可以控制盒子和盒子直接的距离。margin外边距简写和padding一样

外边距可以使块级盒子水平居中必须满足两个条件：1.有width；2.margin：0 auto（块级元素左右自动）

外边距水平居中对齐：行内元素或者行内块元素水平居中对齐只需要给其父元素添加text-align ：center。eg：span标签 img标签都需要。

外边距合并 1.相邻块元素垂直 嵌套块元素塌陷。1。相邻两个块级元素相遇 上边元素外边距有margin-bottom下边元素有margin-top。他们垂直距离是两个值中较大的那个。尽量只给一个盒子加margin。2.嵌套外边距垂直合并塌陷 情况：子元素有一个上外边距 父元素也有一个不同的上外边距 两者同时操作会引起父元素塌陷较大外边距的值的情况。解决办法1.给父元素加一个透明的边框 border ：1px solid transparent；

2.可以给父元素定义一个内边距。padding：1px； 3.可以为父元素添加一个**overflow：hidden；**溢出隐藏。4.设置为行内元素

行内标签通过margin和padding修改margin-top、margin-bottom垂直方向的内外边距不生效。此时通过line-height可以修改行内元素的垂直方向的距离。

清除内外边距 ：网页元素很多都默认代内外边距，布局前需要清除网页元素的内外边距 。通配符选择器

css中的第一行代码

*{

padding:0清除内边距

margin:0清除外边距

}

行内元素为了照顾兼容性 尽量只设置左右边距 不要设置上下边距。但是转为块级元素或者行内块元素就可以

总结： 产品标题用h，大量文字段落用p 给每个盒子起类名后期能够很好的维护。

结构伪类选择器：

在html中定位元素：根据元素在html中的结构关系查找元素 简化代码

E:first-child {结构} 给第一个子元素设置样式

E:last-child {结构} 给最后一个子元素设置样式

E:nth-child(n) {结构}给第n个子元素设置样式；n填的是公式那么会从0开始的正整数。

E:nth-last-child(n) {结构}给倒数第n个子元素设置样式

结构伪类选择器通过n也组成常见的公式 偶数：2n even；奇数2n-1;2n+1;odd;

找到前5个 -n+5；找到5后边的结构n+5。

ul>li7>a5 找到第一个li里面的第三个a li:first-child a:nth-child(3) {样式}

伪元素 ：页面中的非主体内容可以用伪元素。必须加content才生效，伪元素默认是行内元素 宽高不生效。

父元素内容前添加一个伪元素

.father::before{

​ content: '爱';

​ }

父元素内容最后添加一个伪元素

.father::after{

​ content: '爱';}

标准流 文档流 浏览器渲染页面的一套排版规则

浏览器解析行内元素或者行内块元素时 如果标签换行会有一个空格 这是可以通过float完美解决这个问题。

浮动特点： 1.脱离标准流的控制，不在占用标准流位置，2.浮动找浮动下一个浮动会在上一个浮动的左右排列。浮动的标签默认是顶对齐的。浮动一行可以显示多个并且可以设置宽高。浮动后的元素不能通过margin：0 auto；text-align：center居中

css书写顺序 1.浮动 /display 2.盒子模型：margin border padding 宽高背景色 3.文字样式。浏览器效率会更快。

网页的主导航需要 ul>li>a

清除浮动 ：清除浮动给别的元素带来的影响。父子级标签，子集浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置。

方法： 1.给父级设高度 但是新闻或者内容多的情况下不行。2：额外标签法：在父元素内容最后添加一个块级元素，给添加的块级元素设置clear：both

css定位+修饰 ：

定位：可以让元素自由摆放在网页的任意位置，一般用于盒子之间的层叠样式

常见的布局方式：1.标准流 2.浮动 3.定位。可以让盒子始终固定在同一个位置。

定位步骤：属性名：position（一般会写在第一位置 定位、浮动、display） 常见属性值：静态：static（默认值不定位是一个标准流）

绝对定位：absolute 相对：relative 固定fixed

设置偏移值：水平方向：left、right 垂直方向：top、 bottom水平垂直各选其一（就近原则离哪个近取哪个）

相对定位 relative：

相对于自己之前的位置来定位的（自恋型属性）。1.占有原来的位置没有脱离标准流，2.相对定位不会改变标签具备其他的显示模式，具备原有的显示特点，3.改变位置参照自己原来的位置。只加position没有加方向的话，不会改变标签位置。

绝对定位：

absolute：先找到已定义的父级，如果有这样的父级就以这个父级为参照物，有父级但是父级没有定位，以浏览器位置为准。

特点：1.有定位后直接脱离标准流，不占位。2.改变标签的显示模式为行内块元素。一行共存宽高生效。一般把父级定位控制为relativite 子级用绝对定位模式，自绝父相。绝对定位找父级：就近查找父级，如果逐层查找不到父级就以浏览器窗口为父级。

绝对定位的盒子不能使用左右margin auto。（left：50% margin-left:-盒子的一半。 top：50%，margin-top：-盒子的一半高度。）transform:translate(-50%,-50%)

固定定位：

1.相对于浏览器进行定位 2.脱标不占标准流。3.具备行内块特点尽量设置宽高和内容。

元素层级问题 ：

标准流<浮动<定位。默认情况下定位的情况，后来者居上。z-index整数数字，取值越大，显示顺序越靠上，需要配合定位才能生效，默认值为0.

垂直居中对齐：浏览器遇到行内和行内块标签当作文字处理，默认基线对齐。需要一个vertical-align middle。浏览器把行内和行内块标签当作文字处理，默认基线问题。大图 input 行内行内块垂直对齐就是vertical-align。图在标签里面有空白也可以转换为block。块级元素margin 0 auto

光标的类型：

属性名： cursor 属性值：default 默认值通常是小箭头；pointer 小手效果提示用户可以点击；text工字形提示用户可以选择文字可以复制；move十字光标提示用户可以移动。

边框圆角：

让盒子四个角变得圆润，增加页面细节，提升用户体验。属性名：border-radius 常见取值：数字+px、百分比。左上右上左下右下原则，没有值的话看对角。

边框圆角常用：画一个正圆， 设置边框圆角为盒子宽高的一半，必须为正方形。胶囊形状的按钮 ：盒子是长方形的，设置边框圆角给盒子高度的一半。

溢出部分显示效果：属性值：overflow 1. visible默认值，溢出部分可见，2.hidden溢出部分隐藏，3.scroll 溢出部分自动出现一个滚动条，无论是否溢出都出现滚动条 4.auto根据是否溢出给一个滚动条。

元素本身隐藏：

visibility：hidden（工作中不常用 因为占位置）display:none(不占位置的隐藏)

元素整体透明度 ：

让某元素整体包括内容一起变透明。属性名：opacity 取值为0-1之间的数值。

边框合并：

一定要给table加border-collapse: collapse这个属性，表格的边框合并

三角形：

书写一个盒子，盒子添加四个方向的border颜色各不相同，把宽高去掉，保留一个边框剩下的边框颜色设为transparent

获得焦点：

伪类选择器：input:focus{设置样式}

属性选择器 ：

1.E:[attr]选择具有attr属性的标签 ; 2.E:[attr="val"]选择具有attr属性并且属性值="val"的标签; 3. E[attr^="val"] 选择attr属性并且以val开头的标签 4. E[attr*="val"] 选择attr属性属性名包含val的标签 5： E[attr*$="val" ]选择以val结尾的标签