binaryYuki's CS Notes
  • 引
  • StringBuilder
  • java-摘要
  • Java Class和反射
  • 信息的表示和处理
  • 存储器层次结构
  • 计算机系统漫游
  • 处理器体系结构
  • 程序的机器级表示
  • System I/O
  • 懒人速刷之java链表
  • 懒人速刷之java栈和队列
  • 二叉树
  • KIF Notes
    • Page 1
    • python基础
    • 😀lab_sheet_8_zh-hans
    • 😀lab_sheet_9_zh-hans
    • 😀html
    • [styleguide]
    • Page
由 GitBook 提供支持
在本页
  • HTML
  • HTML基本概念
  • HTML基本语法
  • HTML常见标签
  • HTML表格标签
  • HTML表单标签
  • Css基本概念
  • Css引入方式
  • Css基本语法
  • Css选择器
  • CSS选择器权重
  • Css样式属性
  • Css样式属性
  • Css盒子模型
  • Css浮动属性
  • Css元素溢出
  • Css-Display
  • Css定位属性
  • Css伪类
  • Css-flex布局
  1. KIF Notes

html

html&c s s

HTML

HTML基本概念

  • 什么是HTML?

超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用

超文本就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素

HTML不是一种编程语言,而是一种标记语言

HTML基本语法

基本结构

如下所示,这是一个非常简单基本的html结构

在谷歌等浏览器中,也可以通过右键一个页面,查看元素获取到一个网站的基本html源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <h1>我的第一个标题。</h1>
        <p>我的第一个段落。</p>
    </body>
</html>

<!DOCTYPE html>声明为 HTML文档,HTML文档也常称为网页

  • 一个文档包含HTML标签和文本

<html>与 </html>之间的文本描述网页,同时 HTML元素也是当前页面的根元素

<head>`是包含了文档的元(`meta`)数据,如定义网页编码格式 `<meta charset="utf-8">

<title>元素描述当前文档页面的标题

<body>与 <body>之间的文本是可见的页面内容

<h1>与 </h1>之间的文本被显示为标题

与

之间的文本被显示为段落

标签规则

基本结构中诸多尖括号所组成的代码被称为 标记标签(HTML标签),遵循如下基本规则

  • 标签由尖括号<>包围

  • 标签经常成对出现,由开始标签与结束标签组成

  • 多数情况下,标签支持互相嵌套,用来实现更复杂的页面内容

注释语法

注释主要为页面代码进行标识标注,方便开发者进行代码阅读

本身解释器或编译器不会解释任何注释内容,只会当做空白处理,浏览器在遇到注释时同样如此

<!-- 这是一段注释,但被注释的内容不会显示 -->
<head>
    <title>这是一个标题。</title>
</head>
<h1>这是一个H1标题。</h1>
<h2>这是一个H2标题。</h2>
<h3>这是一个H3标题。</h3>
<h4>这是一个H4标题。</h4>
<h5>这是一个H5标题。</h5>
<h6>这是一个H6标题。</h6>

HTML常见标签

块级标签

  • 块级标签最明显的特征为独占一行,不会和其他元素待在同一行

  • 其次具备的特点是可以设置宽、高属性

  • 标题标签

  • 段落标签

  • 块级标签

  • 列表标签

  • 表单标签

标题标签

呈现加粗,加大的字体样式,从h1~h6,越来越细越小

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

行级标签

  • 行级标签不具备自动换行的属性

  • 并且设置行级标签的宽高也是无意义的

  • 跳转标签

  • 文本标签

跳转标签

跳转标签使用 a标签,通过标签的 href属性指明在点击时跳转的地址

<a src="https://www.baidu.com">百度</a>

行内块标签

  • 行内块标签拥有内在尺寸,可设置高宽

  • 但是这样的标签不会自动换行

  • 图片标签

  • 按钮标签

图片标签

图片标签为 img标签,可以在页面加载图片资源,使用相对、绝对、网路资源都是可以的

使用 src属性指明图片资源地址,alt属性表示光标位于图片时所显示的内容,或是当图片加载失败时所显示的内容

<img src="img/1.jpg" alt="图片" style="">

样式标签

  • 加粗

  • 斜体

  • 下划线

  • 删除线

加粗

加粗文本可以使用 b标签,也可以使用 strong标签

<b>加粗</b>
<strong>加粗</strong>

HTML表格标签

表格标签由 table标签进行定义,是在页面中表示数据时经常使用到的标签元素

每一行: tr[table row]

每一行有几个单元格: td[table data]

表头: th[table header]

  • 表格外边框

  • 表格边框覆盖

  • 表格单元格合并

  • 表格文字对齐

表格外边框

<table border="5">
    <caption>用户表</caption>
	<tr>
		<th>名字</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>18</td>
	</tr>
</table>

border: 定义表格边框,数字越大,边框越粗

caption: 定义表格标题

[tab name="表格单元格间距"]

表格单元格间距

<table border="1" cellpadding="5" cellspacing="3">
...
</table>

cellpadding: 表格单元边界与单元内容之间的间距

cellspacing: 单元格之间间距

HTML表单标签

大部分表单标签(input、textarea、select)属于行块级元素,具备内在尺寸,宽高属性等,但不会自动换行

表单用于收集不同类型的用户输入,表单由不同类型的标签组成

  • 单行文本

  • 单选框

  • 复选框

  • 文件框

  • 多行文本

  • 下拉菜单

  • 多选下拉菜单

单行文本

普通文本输入框使用 text类型

<label for="username">姓名:</label>
<input type="text" name="username" value="张三" />

label标签可以为表单框进行标识说明,为用户带来更好的体验,并且当光标点击label标签时,会自动将焦点移动至对应的输入框中

当type类型为 password时,为密码输入类型,输入的内容以 *号代替

<label for="password">密码:</label>
<input type="password" name="password" placeholder="请输入密码" id="password"/>

value: 表单框输入的实际内容

name: 定义表单数据标识符,提交数据时声明该数据的键

placeholder: 表单框输入前提示内容

Css基本概念

  • 什么是Css?

css指层叠样式表(Cascading Style Sheets),通俗的理解就是可以为标签元素带上颜色、大小、粗细状态等表现形式

样式通常存储在样式表中,也可以独立定义一个外部样式表文件,这些文件通常存储后缀为css

有了CSS,html中大部分表现样式的标签就可以不用了

html可以专心的只负责文档的结构和内容,而表现形式完全交给CSS,这样也就使得html文档变得更加简洁

Css引入方式

在页面中集成使用css的方式有主要三种

  • 内联式

  • 嵌入式

  • 外部式

内联式

直接在页面标签元素上进行编写,通过style属性定义

<div style="background: #00ff00">
    <p>
        这个地方有一个美丽的背景色
    </p>
</div>

优先级

在相同的样式定义时,会遵循如下优先级规则

内联式 > 嵌入式 > 外部式 (就近原则)

Css基本语法

css语法由两部分构成:选择器、一条或多条样式声明

当属性中的值为若干单词时,需要加引号

div { 
    color: red;
    background: green;
    font-family: "sans serif";
}

属性(property)是您希望设置的样式属性(style attribute),每个属性有一个值,属性和值之间被冒号分开

Css选择器

  • 标签选择器

  • 类选择器

  • 属性选择器

  • 层级选择器

  • ID选择器

  • 伪类选择器

标签选择器

影响范围大,常做通用设置,或用在层级选择器中

<p>一段</p>
p{
    color: blue;
}
/* 定义p标签文字为蓝色 */

CSS选择器权重

当有多个同类样式作用于同一个元素时,权重高的样式对元素起作用,权重相同时后写的样式覆盖前面写的

选择器权重值如下,遵循就近原则

  • 内联式样式:1000

  • ID选择器:100

  • 类选择器:10

  • 标签选择器:1

还可以使用!important语句将样式权重设置为10000,!important写到样式属性值后对该样式进行权重设置

.test{
    color: red !important;
}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

  • background-color: 设置背景颜色

  • background-image: 设置背景图片地址

  • background-repeat: 设置图片如何重复平铺,可选参数有

    • repeat: 全局重复

    • repeat-x: 水平方向重复

    • repeat-y: 垂直方向重复

    • no-repeat: 图片只显示一次)

  • background-position: 设置图片的位置,可选参数有

    • left、right、center

    • background-attachment

      : 设置图片是固定的还是会随页面滚动,可选参数有

      • scroll: 背景图片会随着页面其余部分的滚动而移动

      • fixed: 页面的其余部分滚动时,背景图像不会移动

注意:在背景图片路径填写时,如果使用内联式写法则从当前页面路径开始查找相对路径,如写在外部CSS文件中,则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题,常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线 支持如下属性

  • underline:定义文本下的一条线

  • overline:定义文本上的一条线

  • line-through:定义穿过文本的一条线

  • blink:定义闪烁的文本

  • inherit:规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css样式属性

宽高属性

width: 设置元素(标签)的宽

height: 设置元素(标签)的高

#button{width:100px; height:100px;}

背景属性

background: 设置背景色或背景图

body{
    width: 100%;
    height: 100%;
    background: #00FF00 url("../img/1.jpg") no-repeat ;
}

background属性还可以分解为如下几个设置:

  • background-color: 设置背景颜色

  • background-image: 设置背景图片地址

  • background-repeat: 设置图片如何重复平铺,可选参数有

    • repeat: 全局重复

    • repeat-x: 水平方向重复

    • repeat-y: 垂直方向重复

    • no-repeat: 图片只显示一次)

  • background-position: 设置图片的位置,可选参数有

    • left、right、center

    • background-attachment

      : 设置图片是固定的还是会随页面滚动,可选参数有

      • scroll: 背景图片会随着页面其余部分的滚动而移动

      • fixed: 页面的其余部分滚动时,背景图像不会移动

注意:在背景图片路径填写时,如果使用内联式写法则从当前页面路径开始查找相对路径,如写在外部CSS文件中,则以CSS文件为相对基础

文本属性

color: 设置标签中的文字颜色

p{color: red;}

font-size: 设置标签中的文字大小

p{font-size: 12px;}

font-family: 设置元素中的文字字体

p{font-family:"微软雅黑"}
/* 为了避免中文兼容问题,常用字体的英文标识 */
p{font-family:"Microsoft Yahei"}

font-widght: 设置元素中的文字是否加粗

p{font-widght:bold;} /* 设置加粗 */
p{font-widght:normal;} /* 设置不加粗 */

line-height: 设置元素中的文字行高

p{line-height:24px;}

text-decoration: 设置元素中文字的下划线 支持如下属性

  • underline:定义文本下的一条线

  • overline:定义文本上的一条线

  • line-through:定义穿过文本的一条线

  • blink:定义闪烁的文本

  • inherit:规定应该从父元素继承text-decoration属性的值

p{text-decoration:underline;}

text-align: 设置元素中文字对齐方式

p{text-align:center;}

text-indent: 设置元素中文字的首行缩进

p{text-indent:24px;}

Css盒子模型

在html标签中,所有的标签都有自身具备的大小款高,以及外边框、边距,这被称为盒子模型 一个盒子模型主要的构成是内容(content)、内边距(padding)、边框(border)、外边距(margin)

  • 内边距

  • 外边距

  • 边框属性

内边距

padding: 设置元素包含的内容和元素边框的距离,也叫内边距

p{
    padding: 100px;
}

这个样式属性也可以拆分成以下单独四种,可以分别设置对应位置的内边距

  • padding-top:设置上内边距

  • padding-bottom:设置下内边距

  • padding-left:设置左内边距

  • padding-right:设置右内边距

Css浮动属性

通过浮动操作float,可以使dom元素脱离文档流,在页面上具备居左、中和右的效果特点

移动后的元素,会导致其他元素随之重新排列在页面上的顺序位置,就相当于你不在的位置,别人会抢占

浮动通常利用与图像元素,或是对元素进行布局


一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止

如果浮动方向空间不足,元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止


  • 浮动常见属性

float:none;  /* 不使用浮动 */
float:left;  /* 靠左浮动  */
float:right; /* 靠右浮动  */
  • 清除浮动

float: clear;

元素浮动之后,周围的元素会重新排列,为了避免这种情况,可以为浮动的元素使用clear属性

clear属性指定元素两侧不会出现浮动元素,也实现了独占一行的额效果

Css元素溢出

当子元素的大小超过所承载的父元素大小时,此时需要设置父元素对于溢出的子元素显示方式

<p>123456789</p>
p{
    width:10px; 
    border: 1px solid blue;
    overflow:auto;
}

可以通过overflow属性进行溢出属性的控制,可选项有如下这些

  • visible: 默认值,内容不会被修剪,会呈现在元素框之外

  • hidden: 内容会被修剪,并且其余内容是不可见的

  • scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容

  • auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

Css-Display

display属性可以控制标签元素的类型显示方式,常见的有如下选项

p{
    display: inline;
}
  • none: 元素不会显示,也就是藏起来

  • block: 元素将显示为块级元素,此元素前后会带有换行符

  • inline: 此元素被显示为内联元素,元素前后没有换行符

  • list-item: 元素作为列表显示


  • table: 元素作为块级表格来显示,表格前后带有换行符

  • inline-table: 元素作为内联表格来显示,表格前后没有换行符

  • table-cell: 此元素会作为一个表格单元格显示

  • table-caption: 此元素会作为一个表格标题显示

每个元素都有一个默认 display 值,并且可以被覆盖

除了display: none可以隐藏元素之外,也可以使用visibility: hidden 但是visibility: hidden隐藏的元素还会在文档流中占据自己的一席之地,虽然元素被隐藏,但是还会影响实际的布局效果

.hidden{
    visibility: hidden;
}

Css定位属性

什么是文档流?

文档流,是指每个标签的元素盒子按照`html`标签编写的顺序依次从上到下,从左到右排列

块元素占一行,行内元素在一行之内从左到右排列

先写的先排列,后写的排在后面,每个盒子都占据自己的位置

CSS定位通过position属性进行规定,可选项有如下这些

static

属于css的默认值,默认定位方式,遵循标签元素的块、行特点

从上到下,从左到右

relative

是相对定位方式,会按照元素的原始位置对该元素进行移动

可以通过方向移动其位置,并且原本位置也会保留,不会被周围元素侵占

absolute

绝对定位元素,当前元素会脱离文档流,相当于飘起来了

可以通过方向移动其位置,原本位置会被周围元素侵占,而他本身将会覆盖在侵占元素之上

设置了absolute的元素将会基于当前元素的父元素进行偏移,而且这个父元素还是设置过定位的

如果父元素均未设置position属性,那么将相对于body元素进行位置偏移

fixed

固定定位元素,元素脱离文档流,不占据文档流的位置,相对于浏览器窗口进行定位

不管页面如何滚动,都会固定在页面的位置,比如导航条

sticky

是一种新的定位方式,相当于包含fixed与relative结合,元素最初会被处理为相对定位

当元素距离浏览器窗口一定位置时,可以使当前元素固定在一定位置,成为固定定位

其余情况,则还可以跟随窗口滚动


设置了定位的元素的偏移方式

  • top: 定位元素的上外边距边界与其包含块上边界之间的偏移

  • bottom 定位元素下外边距边界与其包含块下边界之间的偏移

  • right: 定位元素右外边距边界与其包含块下边界之间的偏移

  • left: 定位元素左外边距边界与其包含块下边界之间的偏移


除此之外,还可以通过z-index属性设置元素的堆叠属性,当两个或多个元素因为定位导致叠在一起时

z-index
设置堆叠元素的层级,数值越大,优先级越高,未设置,默认按照最后的html代码进行操作

Css伪类

css伪类可以定义元素的特殊状态,比如设置鼠标悬停在元素上时的样式,或者控制连接访问前后的样子

  • 基本语法

selector: link{
  property: value;
}

锚伪类

可以控制连接在不同的访问情况下的显示样式

  • 未访问的连接

a:link {
    color: red;
    /* 没访问过,是红色*/
}
  • 访问过的连接

a:visited {
    color: blue;
    /* 访问过,就会变成蓝色*/
}
  • 悬停在元素处

a:hover {
    color: gray;
    /* 鼠标飘到元素上,就会变成灰色*/
}
  • 已选择的连接

a:active {
     color: green;
    /* 你选择的连接,会变成绿色,并且绿色会笼罩你*/
}

first-child

匹配元素是另一个元素的第一个子元素

任何一个子元素,并且是第一个,且是p标签,将被如下规则匹配

p : first-child {
  color: blue;
}

比如如下的html,所有第一个元素为p的,将会生效上面的效果

<div>
    <span class="external-link"><a class="no-external-link" href="https://lienze.ltd" target="_blank"><i data-feather="external-link"></i>因为有我,所以不变</a></span>
    <p>不变</p>
</div>

<p>不变</p>
<div>
    <p>变变变</p>
    <div>
        <p>变变变</p>
    </div>
</div>
<p>不变</p>

Css-flex布局

Flex可以使元素成为一种容器,而在容器内的子元素将会成为容器成员

设置为flex属性后,子元素的float、clear和vertical-align属性将失效


通俗的来说,flex需要设置父级元素,像是这样,成为flex容器

display: flex;

在这种样式下的子元素,将会处于flex容器之中,可以支持进行便捷的布局样式控制,如排列等


当设置为容器后,容器内将会拥有两个轴,大家常称为主轴和侧轴

一般主轴是x轴方向的,侧轴是y轴方向的


父级属性

  • 父级可以设置的属性

    • flex-direction: 控制容器内子元素排列方向

    • flex-wrap: 控制一行排列不下时,换行的属性控制

    • justify-content: 设置子元素在主轴上的排列方式

    • align-items: 设置子元素为单行时,在侧轴上的排列方式

    • align-content: 设置子元素为多行时,在侧轴上的排列方式

    • flex-flow: 是flex-direction和flex-wrap的复合属性

flex-direction

控制容器内元素排列方向

.box {
  	flex-direction: row | row-reverse | column | column-reverse;
}
  • row

  • row-reverse

  • column

  • column-reverse

  • row:主轴在水平方向,顺序排列

flex-wrap

控制多个元素的排列方式,如果一行排列不下,如何进行排列,是互相挤着?还是另起一行

flex默认的子元素,在摆放时是不会换行的,在一行放不下时,只会元素的大小进行缩放,将其适应能放到这一行大小上

  • nowrap: 默认值,不换行

flex-wrap: nowrap

比如在row情况下,如果一行放不下,那么第四个元素出现

容器内一行的四个元素都会有适当的宽度缩小,让其可以真正可以在一行存放得下

  • wrap

  • wrap-reverse

  • wrap: 换行

如果一行内元素摆放不下,那么另起一行从头开始摆放

注意: 换行之后,行之间会额外多空行

justify-content

控制子元素在主轴上的对齐方式

  • flex-start

  • flex-end

  • center

  • space-around

  • space-between

  • flex-start: 默认值,从左到右,如果主轴是y轴,那么从上到下

设置子元素在侧轴上的对齐方式,可以与justify-content属性配合使用

注意: 适合在子元素单行时使用

  • flex-start

  • flex-end

  • center

  • stretch

  • flex-start: 从上到下

如果希望可以将一行元素整个容器内居中,可以分别设置主轴和侧轴居中

justify-content: center;
align-items: center;

align-content

设置子元素在侧轴上的对齐方式,适用于多行子元素的情况下,也就是子元素换行属性flex-wrap: wrap;

单行情况下是无效的

  • flex-start

  • flex-end

  • center

  • space-around

  • space-between

  • stretch

  • flex-start: 从侧轴开头进行换行排列,并且还可以取消默认wrap换行带来的空行

flex-flow

是flex-direction和flex-wrap的复合属性

设置主轴方向子元素排列方式以及是否换行(换列)

flex-flow: row wrap;

换行并采用row方向排列子元素

子元素属性

  • flex: 设置子元素在剩余空间内所占的份数,默认为0

  • align-self: 控制子项目在侧轴的排列方式,可以让单独某个子元素拥有不一样的对齐方式

  • order: 元素位置顺序,越小越靠前,默认为0

flex

设置子元素在剩余空间内可以占的空间,分配的空间也是剩余的空间,主要针对于单行子元素进行布局控制

比如三个子元素处于单行,现在可以让第二个子元素占据整个剩余空间,那么可以使用

flex: 1; /* 占据剩余全部 */

一般来说,如果设置了flex属性,那么元素本身的宽的意义就不太大了,要按照flex分割好的块数进行元素的宽度维护

align-self

让某个子元素有自己的侧周排列方式,和align-items类似,可以单独让某个元素在侧周的排列位置上不同

覆盖align-items属性

align-self: flex-end;

order

定义子元素先后排列顺序,数值越小,越靠前(前后位置上靠前),默认为0

order: 0;
上一页lab_sheet_9_zh-hans下一页[styleguide]

最后更新于8个月前

nowrap.png
😀