HTML/CSS 备忘

一、HTML

表单

<form>的action属性：处理表单提交的 URL, 如：


<form action="url">
  <input>
</form>

<input>的 type, name 属性：type 的值决定了 input 表单控件的类型，如 text, radio, checkbox 等。name 为 input 表单控件的名字。以键值对的形式随表单一起提交。

<label>的 for 属性：for 属性规定 label 与哪个表单元素绑定，以下为 W3school 的描述：

label 通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：


<label for="num">Number:</label>
<input type="text" name="Num" id="num" />

隐式的联系：


<label>Date of Birth:
	<input type="text" name="DofB" />
</label>

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。

第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在<label>标签中放入<input>标签来隐式地连接起来的。

<button>的 type 属性：type 值为 submit 时，按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。type 值为 reset 时，按钮重置所有组件为初始值。

二、CSS

选择器

基本选择器

通用选择器，语法为*，选择所有元素；

元素选择器，语法为elementname，按照给定的节点名称，选择所有匹配的元素；

类选择器，语法为.classname，按照给定的class属性的值，选择所有匹配的元素；

ID选择器，语法为#idname，按照id属性选择一个与之匹配的元素；

属性选择器，语法为[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]，按照给定的属性，选择所有匹配的元素。

其他选择器见 CSS选择器。

选择器优先级

行内样式(内联样式)<div style="">、ID 选择器、类选择器、元素选择器、通用选择器，优先级依次降低，!important 可用于优先级提升，权重的计算依次为 1000, 100, 10, 1, 0 (均为256进制), !important 的优先级为正无穷。可以通俗理解为筛选条件越苛刻，则优先级越高。详情见优先级。

position 属性

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置；

relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置；

absolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并；

fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变；

sticky：基本上，可以看出是position: relative和position: fixed的结合体——当元素在屏幕内，表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed。

float 属性

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性

关于 float 的取值

left：表明元素必须浮动在其所在的块容器左侧；

right：表明元素必须浮动在其所在的块容器右侧；

none：表明元素不进行浮动；

inline-start：表明元素必须浮动在其所在块容器的开始一侧；

inline-end：表明元素必须浮动在其所在块容器的结束一侧。

与 float 相关的还有一个 clear 属性：

该属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。

相应取值及说明见

clear - CSS（层叠样式表） | MDN

CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。 clear 属性适用于浮动和非浮动元素。当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做 clearfix，即 clear一个不浮动的伪元素。 #container::after { content: ""; display: block; clear: both; } /* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset; BCD tables only load in the browser

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

box-sizing 属性

box-sizing 属性决定一个元素计算高度，宽度时包含哪些部分，如：

取值为 content-box 时，计算宽度，高度时只包含元素内容；

取值为 border-box 时，计算宽度，高度时出内容还会包含边框，内边距。

三、图形绘制

心形绘制


<style>
	.heart {
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: pink;
		height: 50px;
		width: 50px;
		transform: rotate(-45deg);
	}
	.heart::after {
		background-color: pink;
		content: "";
		border-radius: 50%;
		position: absolute;
		width: 50px;
		height: 50px;
		top: 0px;
		left: 25px;
	}
	.heart::before {
		content: '';
		background-color: pink;
		border-radius: 50%;
		position: absolute;
		width: 50px;
		height: 50px;
		top: -25px;
		left: 0px;
	}
</style>
<div class="heart"></div>