HTML/CSS 基础

Monday, December 3, 2018

由于之后要写一些后台管理系统,所以先熟悉了下 HTML/CSS,这篇文章主要是对HTML/CSS 的技术总结。

HTML

链接元素和目录

  • 使用 a 元素从一个页面跳转到另一个页面,用 href 属性指定链接的目标文件
  • 文字或图像都可以用作链接的标签
  • 相对路径是相对于链接的 Web 页面指向网站中其他文件的一个链接。
  • 可以使用 .. 链接文件上一层目录的一个文件
  • .. 表示父文件夹

列表元素

  • 规划页面,首先要设计大的块元素,然后用内联元素完善
  • 尽可能使用元素来告诉浏览器你的内容含义
  • 一定要使用与内容含义最接近的元素。例如,如果需要列表,就不要用段落元素。
  • p ,blockquote , ol, ul , li 都是块元素,它们单独显示,在内容前后分别有一个换行。
  • q 和 em 是内联元素。这些元素中的内容与其他包含元素的其余内容放在一起。
  • br 可以换行,且是一个 void 元素
  • void 元素没有内容
  • void 元素只有一个标记组成
  • 空元素没有内容。不过它有开始和结束标记
  • 嵌套元素是指完全包含在另一个元素中的元素。
  • 要结合两个元素建立一个 HTML 列表:使用 ol 和 li 建立有序列表,ul 和 li 建立无序列表
  • 可以在列表中嵌套列表

图像元素

  • 使用 img 元素在页面中放置图像。
  • img 是一个内联元素,所以不会换行
  • 利用 src 属性指定图片的位置,可以是相对路径自己的图片,也可以是其他网站的图片 url
  • img 元素的 alt 属性是对图像的一个有意义的描述。如果无法显示图片,则会显示这个描述。
  • 图片宽度建议小于800像素
  • 图像可以指向作为其他 web 页面的链接,要由图像创建一个链接,可以使用 img 元素作为 a 元素的内容。

CSS

CSS 基础

  • CSS 的每个规则为选择的一些 HTML 元素提供样式。
  • 典型的规则包括一个选择器,以及一个或多个属性。
  • 选择器指定规则将应用到哪些元素。
  • 每个属性声明以一个分号结束。
  • 通过用逗号分隔元素名,可以一次选择多个元素。
  • 要在 HTML 中包含一个样式,最容易的办法是使用 style 标记。
  • 对于复杂的网站,可以链接到一个外部样式表。
  • link 元素用于链接到一个外部样式表。
  • 很多属性都能继承,例如为 body 元素设置了可继承的属性,那么 body 的所有元素都会继承这个属性。
  • 通过你想改变的元素创建一个更特定的规则,来覆盖该元素的继承属性。
  • 可以使用 class 属性将元素增加到一个类。
  • 通过在元素名和类名之间加一个”.",可以选择该类中的一个特定元素。
  • 使用 .classname 可以选择属性这个类的所有元素。
  • 通过在 class 属性中放入多个类名,可以指定一个元素属于多个类,类名之间用空格分隔。

字体和颜色

  • CSS 提供了很多属性对字体和外观加以控制,比如 font-family, font-weight, font-size 和 font-style。
  • font-family 是一组有共同特征的字体。
  • 用于 Web 的字体系列包括 serif,sans-serif,monospace,cursive, fantasy。
  • 可以在 font-family CSS 属性中指定候选字体。
  • 最后一个字体要指定为一个通用字体,如 serif 或 sans-serif。
  • 如果要使用某种字体,而用户可能没有,可以使用@font-face 规则。
  • 字体大小通常使用像素, em, 百分数或关键字指定。
  • 可以使用 font-weight CSS 属性指定文本粗体。
  • font-style 属性用于创建斜体或倾斜文本。
  • 可以使用 text-decoration 创建下划线。

盒模型

  • CSS 使用一个盒模型来控制元素如何显示。
  • 盒子由内容区和可选的内边距,边框和外边距组成。
  • 内容区包含元素的内容。
  • 内边距用来在内容区周围创建可见的空间。
  • 边框包围内边距和内容,它提供了从视觉上分离内容的一种手段。
  • 外边距包围边框,内边距和内容,允许在元素和其他元素之间增加空间。
  • 内边距,边框和外边距是可选的。
  • 元素的背景会在内容和内边距下显示,但不会延伸到外边距。
  • 内边距和外边距大小可以使用像素或百分数设置。
  • 边框宽度可以使用像素设置,也可以使用thin, medium 和 thick 来指定。
  • 有8种不同的边框样式,包括实线,破折线,虚线等。
  • 使用 border-radius 可以设置圆角。
  • 使用 line-height 属性可以增加文本行之间的间距。
  • 可以用 background-image 属性在元素的背景上放置图像。
  • 使用 background-position 和 background-repeat 属性可以设置背景图像的位置和平铺行为。
  • 对于希望成组指定样式的元素要使用 class 属性。
  • 使用 id 属性为元素指定一个唯一的名字。还可以使用 id 属性为元素提供唯一的样式。
  • 一个页面上有给定id 的元素只能有一个。
  • 可以使用 id 选择器按 id 选择元素。例如#myfavoriteid。
  • 一个元素只能有一个 id,不过它可以属于多个类。
  • 在 HTML 中可以使用多个样式表。
  • 如果两个样式表包含冲突的属性,按最后链接的样式为优先。
  • 可以在 link 元素中使用媒体查询或者使用 CSS 中的@media 规则来指定设备。

div, span, 伪类

  • div 元素用于将相关的元素归类在一起,放在逻辑区中。
  • 创建逻辑区有助于标识主内容区以及页面的页眉和页脚。
  • 可以使用 div 元素将需要共同样式的元素归组在一起。
  • 使用嵌套 div 元素为文件增加更多结构,这有利于保证结构清晰或者方便增加样式。不过除非确实需要,否则不要过多地增加结构。
  • 一旦使用 div 元素将内容区归组在一起,类似于其他块元素,可以对这些 div 增加样式。例如,对于包含在 div 中的一组元素,可以使用嵌入这些元素的 div 边框属性,对这组元素增加一个边框。
  • width 属性设置一个元素内容区的宽度。
  • 一个元素的总宽度是内容区的宽度,加上所增加的内边距,外框和外边距的宽度。
  • 一旦设置一个元素的宽度,它不会延伸来占满浏览器窗口的整个宽度。
  • text-align 是块元素的一个属性,用来将这个块元素中的所有内容对齐,可以居中,左对齐或右对齐。这个属性可以由所有嵌套的块元素继承。
  • 可以使用子孙选择器来选择嵌套其他元素中的元素。例如div h2{…}
  • span 内联元素与 div 元素类似,它用于将相关的内联元素和文本归组在一起。
  • 有些元素有不同的状态,例如 a 元素,可以用伪类单独地为各个状态指定样式,a:link, a:visited, a:hover。

布局与定位

  • 浏览器使用流在页面中放置元素
  • 块元素从上向下流,各元素之间有一个换行。默认的,每个块元素会占浏览器窗口的整个宽度。
  • 内联元素在块元素内部从左上方流向右下方。如果需要多行,浏览器会换行,在垂直方向上扩展外围块元素,来包含这些内联元素。
  • 正常页面流中两个块元素上下相邻的外边距会折叠为最大外边距的大小。
  • 浮动元素会从正常流中取出,浮动到左边或右边。
  • 浮动元素放在块元素之上,不会影响正常的页面流。不过,内联内容会考虑浮动元素的边界,围绕着这个浮动元素。
  • clear 属性用来指定一个块元素左边或右边不能有浮动元素。设置了 clear 属性的块元素会下移,直到它旁边没有块元素。
  • 浮动元素必须有特定的宽度,不能设置为 auto。
  • 流体布局是指,扩展浏览器窗口时,页面中的内容会扩展以适应页面。
  • 冻结布局是指,其中内容的宽度是固定的,不会随着浏览器窗口扩展或收缩。这有一个好处,可以对设计提供更多控制,不过也要付出代价,这样就不能有效地使用浏览器宽度了。
  • 凝胶布局是指,其中内容宽度是固定的,但是外边距会随着浏览器的扩展或收缩。凝胶布局通常会把内容放在中央。这与冻结布局有同样的好处,不过通常更美观。
  • position 属性可以设置4个值:static(静态), absolute(绝对), fixed(固定)和 relative(相对)。
  • 静态定位是默认方式,将元素放在页面的正常流中。
  • 绝对定位允许将元素放在任何位置。默认地,绝对定位元素会相对于界面边界来放置。
  • 如果一个绝对定位元素嵌套在另一个定位元素中,这个元素就会相对于外包含元素定位。
  • 使用绝对,固定和相对定位时,属性 top,right,bottom 和 left 可以用来指定元素的位置。 -绝对定位元素可以使用 z-index 属性分层放置,使一个元素在另一个元素上面。z-index 值越大,说明它的层次越高。
  • 固定定位元素总是相对于浏览器窗口定位,页面滚动时,固定定位的元素不会移动。页面中的其他内容会在这些固定元素下面正常滚动。
  • 相对定位元素首先正常流入页面,然后按指定的量偏移,从而留出它们原先所在的空间。

表格和列表

  • HTML 表格元素table, tr, th, td 一起用来创建一个表格。
  • table 元素定义并包围整个表格。
  • 表格使用 tr 元素按行定义。
  • 每行包含一个或多个数据单元格,分别用 td 元素定义。
  • 使用 th 元素表示作为行或列表头的数据单元格。
  • 表格采用格状布局,每列对应行中的 td 内容。
  • 可以用 caption 元素提供关于表格的额外信息。
  • 表格有边框间距,也就是单元格之间的间距。
  • 表格数据单元格还可以有内边距和边框。
  • 可以用 CSS 控制表格单元格的内边距,边框,和边框间距。
  • border-collapse 是针对表格的一个特殊的 CSS 属性,允许将单元格边框合并为一个边框,让外观更简洁。
  • 可以使用 text-align 和 vertical-align CSS 属性改变表格单元格数据的对齐方式。
  • 使用 CSS nth-child 伪类可以为表格隔行增加背景颜色。
  • 如果一个数据单元表没有数据,
元素中不放置任何内容。不过,需要使用一个td 元素维持表格的对齐。 * 如果你的数据单元格需要跨多行或多列,可以使用 td 元素的 rowspan 或 colspan 属性。 * 可以在表格中嵌套表格,将 table 元素及其所有内容放在一个数据单元表格中。 * 表格应当用于表示表格数据,而不是建立页面布局。 * 有几个特定于列表的 CSS 属性,如 list-style-type 和 list-style-image。 * list-style-type 允许改变列表中使用的列表标记类型。 * list-style-image 允许指定列表标记图像。
前端

部署Flask服务器流程

Flask 基础