05 2022 档案
摘要：一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。 1. 标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。 2. 浮动 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。 3. 定位 定位最大的特点是有层叠的概念，就是可
阅读全文
摘要：1 定位组成 定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。 定位 = 定位模式 + 边偏移 。 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1.1 定位模式 定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来
阅读全文
摘要：1 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 2 自身属性：width / height / margin / padding / border / backg
阅读全文
摘要：完成效果图 代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
阅读全文
摘要：1 为什么需要清除浮动 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。 2 清除浮动本质 ①清除浮动的本质是清除浮动元素造成的影响。 ②如果父盒子本身有高度，则不需要清除浮动。 ③清除浮动之后，父级就会根据浮动的子盒子自动检测
阅读全文
摘要：1 浮动有什么用: 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标 签默认的排列方式。 浮动最典型的应用：可以让多个块级元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 2 什么是浮动 float 属性用于
阅读全文
摘要：1 圆角边框 border-radius 属性用于设置元素的外边框圆角。 border-radius:length; 参数值可以为数值或百分比的形式。 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%。 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上
阅读全文
摘要：目录： 1 看透网页布局的本质 2 盒子模型（Box Model）组成 3 边框（border） 4 内边距（padding） 5 外边距（margin） 5.1 外边距 5.2 外边距合并和塌陷 5.3 清除内外边距 1 看透网页布局的本质 网页布局过程： 1. 先准备好相关的网页元素，网页元素基
阅读全文
摘要：元素显示模式就是元素（标签）以什么方式进行显示，HTML 元素一般分为块元素和行内元素两种类型。 1.块元素 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。 块级元素的特点： (1) 比较霸道，自己独占一行。 (2)高度
阅读全文
摘要：在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。 1.后代选择器 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写
阅读全文
摘要：Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。 1.快速生成HTML结构语法 (1) 生成标签直接输入标签名按tab键即可 (2) 如果想生成多个相同标签，加上 * 就可以了 (3) 如果有父子关系的标签，可以用 > (4)
阅读全文
摘要：按照CSS样式书写(或引入)的位置，CSS样式表可以分成三大类:行内样式表、内部样式表和外部样式表 1.内部样式表 内部样式表(内嵌样式表)是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个style标签中。 <style>标签理论上可以放到HTML文档的任何地方中，但一般会放到文档
阅读全文
摘要：CSS Text(文本属性)可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等 1.文本颜色 color属性用于定义文本的颜色。 div { color: red; } 表示 属性值 预定义的颜色值 red、blue 十六进制 #FF0000、#FF6600 RGB代码 rg
阅读全文
摘要：基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。 1.标签选择器 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } 例如 <style>
阅读全文
摘要：1.样式格式书写 1.1 紧凑格式 h1{ color:deeppink;font-size: 20px;} 1.2 展开格式(推荐) h1 { color: deeppink; font-size: 20px; } 2.样式大小写风格 2.1 小写(推荐) h1 { color: deeppink
阅读全文
摘要：在HTML中，一个完整的表单由表单域、表单控件(表单元素)、提示信息三个部分组成。 1、表单域 在HTML中，<form>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器，实现用户信息的传递和搜集。 <form action="url地址" method="提交方式" name="表单域名
阅读全文
摘要：1、无序列表 <ul>标签表示HTML页面中项目的无序列表，一般会以项目符合呈现列表项，而列表项使用<li>标签定义。 <!-- 无序列表 --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
阅读全文
摘要：1、合并单元格的方式 跨行合并：rowspan="合并单元格的个数" 跨列合并:colspan="合并单元格的个数" 2、目标单元格 跨行合并：最上侧单元格为目标单元格，写合并代码 跨列合并：最左侧单元格为目标单元格，写合并代码 3、合并单元格的步骤 (1)先确定是跨行还是跨列合并 (2)找到目标单
阅读全文
摘要：1、表格的主要作用 表格不是用来布局，而是用来显示、展示数据，让数据的可读性更强。 2、表格的基本语法 <table> <tr> <td>单元表格内的文字</td> ... </tr> ... </table> (1)<table></table>是用来定义表格的标签。 (2)<tr></tr>用来
阅读全文
摘要：1、布局框架标签 2、文本格式化标签 3、图像标签 4、路径 5、超链接标签 1、布局框架标签 div：div标签是块级元素，它包含的元素会自动换行，没有上下间隔间距。 span：span标签是行内元素，在它的前后不会换行，有多宽占多宽。 2、文本格式化标签 标签 说明 b、strong 加粗 u、
阅读全文
摘要：1、标题标签 <h1>1级标题</h1> <h2>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> 注：标题独占一行，ctrl+d可以快速选定相同元素。 2、段落标签 <p>这是一段文字</p> 注：段落独占一行，两段
阅读全文
摘要：HTML的注释： VScode注释快捷键：ctrl+/，浏览器不渲染注释。 HTML标签的构成： 标签的结构图： 结构说明： 大部分有开始标签和结束标签的叫作双标签，小部分是单标签。 HTML标签的关系： 父子关系(嵌套关系)和兄弟关系(并列关系)
阅读全文
摘要：网页中的固定结构是要通过特定的HTML标签描述： <html> <head> <title>网页的标题</title> </head> <body> 网页的主体内容 </body> </html> 在VScode中用英文!+tab快速建立骨架，快捷键alt+B快速打开当前编辑网页。
阅读全文
摘要：网页组成和本质： 代码通过浏览器转换成网页，由文字、图片、音频、视频、超链接等方式呈现。 常用浏览器内核： IE —— Trident Firefox —— Gecko Safari —— Webkit Chrome、Opera —— Blink Web标准的三个构成： 构成 语言 说明 结构 HT
阅读全文
