【HTML+CSS】学习笔记（持续更新）

因为说是要学习一个python框架和bokeh就牵扯了很多东西。所以用了两天时间入门html+css。

<body> 主体？
<h1><h2>一级标题二级标题
<div> 分块暂时不知道有啥用
<em> 斜体
<strong> 加粗
<br>分行
<p> passage？？段落
<ul><li> 无序列表
<ol><li> 有序列表
<img src="image-location.jpg" />
<img> alt在鼠标移入时显示信息
<video></video> src width height属性 controls带有浏览器默认控件的video元素
<!DOCTYPE html> 声明使用什么模式渲染页面加上之后就是在所有的浏览器都使用标准模式渲染
<html> 告知浏览器这是html文档
<a> 超链接 href 目标链接 target 是在空白页打开还是在当前页打开
<a>可以用相对路径./来到达子页面
<a href="#introduction">Introduction</a> 跳跃到id为introduction的地方
在<div id="habitat">设置id
注释
<td colspan="2"></td> 横向占用两个单元格
rowspan同理
tbody 表格标题 tbody 表格主题 tfoot 表格表尾
css 里面可以设置风格
CSS设置风格直接p{}
在html使用<link>将css和html连接起来
link中的参数：type 规定样式表 ref sylesheet 是一个外部样式表
可以在像id一样设置一个class 这个class可以用来在css用.class设置样式
#article-title{} 用id来设置样式
h2.destination{} 只设置h2的样式
.类+类型这个类下面的类型的样式 .main p{}
teal 蓝绿色
!important 可以强制重载样式
text-align 对齐方式
opacity 不透明程度
border 边框
border-radius 边框半径
padding 边框与内容之间的距离
margin 外边距
margin auto:上下左右居中 0 auto 左右居中
overflow 内容溢出的时候干的事情
box model
position relative 相对于正常位置定位
z-index 堆叠顺序
footer 页尾
display 生成的框的类型
float 浮动
clear 哪个方向不允许出现浮动元素
color 前景色
hsl 色调饱和度亮度
冒号左边有短语的时候使用=和""
word-spacing 段落中的字富川间距
letter-spacing 字母间距
text-transform 字母强制大小写
text-align 左右居中对齐
line-height 线高
fallback font 当选择的字体没有的时候选择后备的字体
grid-template-columns 定义了列宽
row同理行高
grid-template 先行后列
1fr frigtion?块平分
repeat(3, 1fr) 平分成三块
minmax() 最小多少最大多少
grid-row-gap 表之间的间隔
grid-gap 设置两个参数
grid-row-start 从哪行开始
grid-row-end 在哪行结束不包括本行
/一般用来给本来是两个不同的样式可以合在一起的那种
grid-area: 四个参数先行开始列开始行结束列结束
span 占用多少列
justify-content 对齐方式
justify-items 同上
aligh-items 对齐
grid-auto-row 自动什么行啥的

【HTML+CSS】学习笔记（持续更新）

相关推荐