本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记 进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。
首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是：
之前在知乎看到一个很有意思的讨论 一行代码可以做什么？那么，一行 CSS 代码又能不能搞点事情呢？
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140268.html原文链接：https://javaforall.cn
本章主要来了解一下新的标签，就是表格标签，我们可以先来认识一下什么是表格，当你写excle的时候，大家都会看到一个格子一个格子的形式的，那么它们组合成的就是表格。
把表格在页面中间显示。。。 分享代码。。。在这个无谓的年华，无论别人多么高高不可攀比，但小编还是选择，做一个适应自己的人。
DrawText 函数功能：该函数在指定的矩形里写入格式化文本，根据指定的方法对文本格式化（扩展的制表符，字符对齐、折行等）。 函数原型：int DrawText(HDC hdc, LPCTSTR lpString, int nCount, LPRECT lpRect, UINT uFormat)； 参数： hdc：设备环境句柄。 lpString：指向将被写入的字符串的指针，如果参数nCount是-1，则字符串必须是以\0结束的。 如果uFormat包含DT_MODIFYSTRING，则函数可为此字符串增加4个字符，存放字符串的缓冲区必须足够大，能容纳附加的字符。 nCount：指向字符串中的字符数。如果nCount为-1，则lpString指向的字符串被认为是以\0结束的，DrawText会自动计算字符数。 lpRect：指向结构RECT的指针，其中包含正文将被置于其中的矩形的信息（按逻辑坐标）。 uFormat：指定格式化正文的方法。它可以下列值的任意组合，各值描述如下： DT_BOTTOM：将正文调整到矩形底部。此值必须和DT_SINGLELINE组合。 DT_CALCRECT：决定矩形的宽和高。如果正文有多行，DrawText使用lpRect定义的矩形的 宽度，并扩展矩形的底训以容纳正文的最后一行，如果正文只有一行，则DrawText改变矩形 的右边界，以容纳下正文行的最后一个字符，上述任何一种情况，DrawText返回格式化正文 的高度而不是写正文。 DT_CENTER：使正文在矩形中水平居中。 DT_VCENTER：使正文在矩形中垂直居中。 DT_EDITCONTROL：复制多行编辑控制的正文显示特性，特殊地，为编辑控制的平均字符 宽度是以同样的方法计算的，此函数不显示只是部分可见的最后一行。 DT_END_ELLIPSIS或DT_PATH_ELLIPSIS：可以指定DT_END_ELLIPSIS来替换在字符串末尾 的字符，或指定DT_PATH_ELLIPSIS来替换字符串中间的字符。如果字符串里含有反斜扛，DT _PATH_ELLIPSIS尽可能地保留最后一个反斜杠之后的正文。 DT_EXPANDTABS：扩展制表符，每个制表符的缺省字符数是8。 DT_EXTERNALLEADING：在行的高度里包含字体的外部标头，通常，外部标头不被包含在 正文行的高度里。 DT_INTERNAL：用系统字体来计算正文度量。 DT_LEFT：正文左对齐。 DT_MODIFYSTRING：修改给定的字符串来匹配显示的正文，此标志必须和DT_END_ELLIPS IS或DT_PATH_ELLIPSIS同时使用。 DT_NOCLIP：无裁剪绘制当DT_NOCLIP使用时DrawText的使用会有所加快。 DT_NOPREFIX：关闭前缀字符的处理，通常DrawText解释助记前缀字符，&为给其后的字 符加下划线，解释&&为显示单个&。指定DT_NOPREFIX，这种处理被关闭。 DT_RIGHT：正文右对齐。 DT_RTLREADING：当选择进设备环境的字体是Hebrew或Arabicf时，为双向正文安排从右 到左的阅读顺序都是从左到右的。 DT_SINGLELINE：显示正文的同一行，回车和换行符都不能折行。 DT_TABSTOP：设置制表，参数uFormat的15″C8位（低位字中的高位字节）指定每个制表 符的字符数，每个制表符的缺省字符数是8。 DT_TOP：正文顶端对齐（仅对单行）。DT_VCENTER：正文水平居中（仅对单行）。 DT_WORDBREAK：断开字。当一行中的字符将会延伸到由lpRect指定的矩形的边框时，此 行自动地在字之间断开。一个回车一换行也能使行折断。 DT_WORD_ELLIPSIS：截短不符合矩形的正文，并增加椭圆。 注意：DT_CALCRECT, DT_EXTERNALLEADING, DT_INTERNAL, DT_NOCLIP, DT_NOPREFIX值 不能和DT_TABSTOP值一起使用。 返回值：如果函数调用成功，返回值是正文的高度；如果函数调用失败，返回值是0。 Windows NT：若想获得更多错误信息，请调用GetLastError函数。 备注：函数DrawText用设备环境中的字体选择、正文颜色和背景颜色来写正文，除非DT_NOCLIP被使用， DrawText裁剪正文，所以它不会出现在指定矩形的外面，除DT_SINGLELINE 格式化，其余的格式都认为正文有多行。 如果选择的字体对指定的矩形而言太大，DrawText不会试图去换成一种小字体。 Windows CE：如果为参数uFormat
最为常用的格式，只需要在文本前面加上 # 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 # 即可，标题字号相应降低
CSS3 说明 此笔记为本人学习遇见狂神说的教程学习笔记，侵删。 快速入门 html文件中 <style> h1{ color: red;
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子：
position：static | relative | absolute | fixed | center | page | sticky
一个行内元素 (opens new window)只占据它对应标签的边框所包含的空间。
行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。
Python系列会持续更新，从基础入门到进阶技巧，从编程语法到项目实战。若您在阅读的过程中发现文章存在错误，烦请指正，非常感谢；若您在阅读的过程中能有所收获，欢迎一起分享交流。
HTML不是编程语言，是一种表现网页信息的符号标记语言。标记语言是一套标记，HTML使用标记来描述网页。Web浏览器的作用就是读取HTML文档，并以网页的形式显示出来。 一：HTML的基本结构 1：<html>内容</html>:HTML文档由<html></html>包裹，这是HTML文档的文档标记。这对标记分别位于网页的最前端和最后端。 2：<head>内容</head>: HTML头标记，用来包含文件的基本信息，比如网页的标题、关键字等，在<head></head>内可以放<title></title
一、简单介绍 1、html，是hyper text markup language的缩写，中文为“超文本标记语言”。 2、html不是编程语言而是一种标记语言。 二、标签与元素 1、html标签：如(两个尖括号加上一个元素名，是开始标签,是结束标签)。 2、html元素：元素内容（开始与结束标签加上内容）。 3、一般的html标签都有开始和结束标签，但是有些是空标签，即没有结束标签和元素内容。如<link012
在 html 页面的 body 标签 中 , 通过 添加 table 标签 , 添加表格 ;
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法。临时就在我经常浏览的网站上抓的相对应的截图。（以后看到其他类型的我再补充）
Markdown 是一种可以使用普通文本编辑器编写的轻量级标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，可以导出 PPT、LaTex、HTML、Word、PDF、Epub、JPG 等多种格式的文档，文档后缀为 .md。
css的注释 /*.......*/ 直接在html代码中写css Hao css代码写在当前文件中 <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ color: red; font-size: 19px; } </style> </head>
Hao
一个文件，统计文件中每个单词出现的次数，分隔符是\t。统计结果我们直接打印在控制台(生产上肯定是Sink到目的地)
题外话：前两天和专业老师探讨最近的一个项目，涉及到对一个浮动的盒子局中的问题，老师的解决方法打开了我的新思路。让我有了总结一下平时的居中问题的想法。不然可能忘掉了以后又要到处寻找解决办法了。另外也给我一个启示：启示解决方法有很多，就看你能不能对知识灵活运用。也是通过这件事我体会到了“灵活运用”的真正含义。做事情是这样，做技术尤其要这样。 这个总结要一直在整理完善中，以后有了什么新的想法、新的解决办法都要再修改。可惜不在github中，不然可以集思广益了。 ——————————----------
其实这种需求还是蛮常见的。主要用于产品列表页面，用于产品图片下面，显示产品的名称。但是其纯CSS实现实在是烧脑，一般就放掉这个需求，或者，使用JS实现。
作者名：1_bit 简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。
本文介绍了前端性能优化中的垂直居中方案，包括使用Flexbox、Grid、CSS3进行垂直居中，以及使用定位和Transform进行垂直居中。同时，还介绍了如何通过代码拆分、懒加载和图片自适应来提高页面性能。最后，给出了一组示例和代码。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
以前我们通过VB敲机房的时候，可以直接通过拖动窗体上的控件、修改代码的属性或是通过代码来设置窗体的布局，而在B/S的学习中，可以通过CSS语言来使网页的内容和样式分离，也就是在aspx或是html中设计网页的内容，在CSS表中设置网页的显示、文字的设计等。
本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。
过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小.
将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从……到……
1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { vertical-align: top; } // 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以 方法3 // #test为img的父元素 #test { fo
当使用多个值时，font-family 属性值字体列表定义浏览器应选择字体系列的优先级。 浏览器将在用户的计算机或者任何 @font-face 资源中查找每个字体。 所使用的字体优先级按从左到右的排序: 如果可用，它将使用第一个值，否则跳到下一个值，直到最后。默认字体系列由浏览器首选项定义。 在上面的示例中，浏览器将首先尝试使用 Source Sans Pro。如果不可用，它会尝试使用 Arial。如果也不可用，它将使用浏览器的 sans-serif 字体族中的可用字体。
值： (1)、normal(正常)；bold(加粗)；（<==常用） (2)、纯数字：100~900的整百数；
在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法；
文件标签html、head、title、body。html5使用<!DOCTYPE html>表示html文档，meta的charset指定字符集。注释 文本标签h1--h6（标题标签），p（段落），br（普通回车解析为空字符），hr（水平线，color颜色，width宽度，size高度，alien对其方式[center left right]），b（加粗），i（斜体），font（字体，color颜色、size大小、face字体） 标签属性中，color颜色表示：可以用red等，建议#值1值2值3（红绿蓝）（取色器）。width表示：数值（px），百分号（占比，相对父元素）。center标签，居中。 特殊字符，对应的字符编码表。手册-->符号。 图片标签img 自闭合（src路径[相对路径即可]，alien[部分不支持]，alt加载失败显示，width宽，height高）。 列表标签：有序ol（order list，属性type更换样式，start起始位置）、li（每一项）。无序列表ul（unorder list，type），li（每一项）。 链接标签：a标签（属性href跳转URL[本地或网络]（mailto:xxx@qq.com选项启动本地邮件），target属性_self本页面打开_blank新建选项卡） 块标签：span（包裹作用，默认无效果，默认不换行一行），div标签，自动换行。 语义化标签：header，footer，用来提高程序可读性，结合css使用。（html5）。 表格：只有行的概念。table定义表格（border线宽，width宽度，cellpadding边沿内容间空白，cellspacing单元格间空白，bgcolor背景色，alien对齐），tr定义行（颜色，对其方式），td定义行内单元格（rowspan行合并，colspan列合并，以第一个行单元格写入），th定义表头单元格。 caption表格标题。thead，tbody，tfoot（类似语义化标签，有位置定义作用，非html5）。
上图中可以看到，h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。
1、块级元素和行内元素分别有哪些？它们的特性区别有哪些？ 1、块级元素(block element)，占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。 常见的块级元素有： address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大
欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。
「3. CSS」CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
前一篇讲解了利用gg包来进行图片旋转的操作，这一篇我们来看看怎么在图片上添加文字。
一 字体属性 1、font-weight：文字粗细 取值 描述 normal 默认值，标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 2、font-style：文字风格 normal 正常，默认就是正常的 italic 倾斜 3、font-size：文字大小 fs：一般是12px或13px或14px 注意： 1、通过font-size设置文字大小一定要带单位
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个 （2）默认宽度就是它本身内容的宽度。 （3）高度，行高、外边距以及内边距都可以控制。
注意： 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新
w3m is a World Wide Web (WWW) text based client. It has English and Japanese help files and an option menu and can be configured to use either language. It will display hypertext markup language (HTML) documents containing links to files residing on the local system, as well as files residing on remote systems. It can display HTML tables and frames. In addition, it can be used as a "pager" in much the same manner as "more" or "less". Current versions of w3m run on Unix (Solaris, SunOS, HP-UX, Linux,FreeBSD, and EWS4800) and on Microsoft Windows 9x/NT. 安装：sudo apt-get install w3m w3m-img 虽说是文本浏览器，但是装了w3m-img，w3m 可以支持图片显示。
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
子元素的左上角会被定位到父元素中心，这个时候再利用（负margin/负translate/cale函数）将子元素的中心校准到父元素的中心。
CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。
对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）： css如下： .parent{height:100px;width:100px;background:grey;position:relative;} .Absolute-Center { height:50px; width:50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background:r
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
