html
创建无序列表
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
- cat nip
- laser pointers
- lasagna
创建有序列表
<ol>
<li>dog</li>
<li>big dog</li>
<li>water</li>
</ol>
- dog
- big dog
- water
输入框显示默认字符
<input type="text" placeholder="默认字符">
输入框为空提交提示
添加required属性
<form action="">
<input type="text" required />
<button type="submit">submit</button>
</form>
点击submit按钮会出现提示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-veKaAsbG-1651159779746)(https://bayimg.com/c1a54aad2b4c50f025b0f453c17abd85c8adfe6f.jpg)]
单选, 复选, 默认选中, value值
单选
<input type="radio" name="test-dx">
<input type="radio" name="test-dx">
复选
<input type="checkbox" name="test-fx">
<input type="checkbox" name="test-fx">
<input type="checkbox" name="test-fx" checked>
value属性的值作为发送到服务器端的实际内容
css
文本属性
color 文本颜色
font-size 字体大小
font-family 字体族名
谷歌字体库
谷歌字体库
引入谷歌字体库
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
字体降级
font-family: Helvetica, sans-serif;
浏览器默认字体有monospace, serif, sans-serif 等
长宽大小设置
width 宽
height 高
边框属性
border-color 边框颜色
border-width 边框宽度
border-style 边框线
border-radius 边框角(设置圆角边框)
设置圆形图片
border-radius: 50%;
背景属性
background-color 背景颜色
内边距(padding), 外边距(margin), 边框(border)
padding 内边距
margin 外边距
border 边框
属性选择器
[type='radio'] { // 选择属性为radio的所有单选框
margin: 10px 0px 15px 0px; // 外边距设置 上 右 下 左
}
选择器优先级
!important > 内链样式 > id选择器 > class选择器 > 继承样式
color: pink !important;
十六进编码表示颜色
#000000
红绿蓝
F 0
最大 最小
使用rgb值表示颜色
rgb(0, 0, 0)
红 绿 蓝
最小 0 ~ 255 最大
css变量
--penguin-skin: gray; // 创建css变量 --name
background: var(--penguin-skin); // 使用变量 var(--name)
给CSS变量设置默认值
background: var(--penguin-skin, black);
:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素
:root {
}
@media 媒体查询和css代码块
https://chinese.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-media-query-to-change-a-variable
<style>
@media (max-width: 500px) {
/** 当屏幕宽度符合条件时代码块被运行 */
}
</style>
text-align属性设置文本对齐方式
文本加粗
<strong></strong>
font-weight: bold;
添加文本下划线
<u></u>
text-decoration: underline;
文本斜体
<em></em>
font-style: italic;
给文字添加删除线
<s></s>
text-decoration: line-through;
添加文本水平线
<hr>
用 rgba() 调整文本背景色
RGB 值可以取在 0 到 255 之间。 alpha 值可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。 rgba() 在需要设置颜色透明度时十分有用， 这意味着你可以做出一些很漂亮的半透明效果。
background-color: rgba(45, 45, 45, 0.1);
rgba 代表：
r = red 红色
g = green 绿色
b = blue 蓝色
a = alpha 透明度
