编程技术

Document

HTML&CSS总结

一、HTML总结

  1. 何为HTML？
    HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
  2. 文档剖析
    1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。
    2.<html></html<:这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
    3.<head></head>: 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
    4.<meta charset=“utf-8”>: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
    5.<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>: 指定页面的图标，出现在浏览器标签上。
    6.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
    7.<body></body>: 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
  3. 超链接

超链接语法：

<a href=“https://www.baidu.com/” target=“_blank”>百度一下

说明：

  1. href为 Hypertext Reference 的缩写，表示要跳转去的地址 URL(Uniform Resorce Locator)
  2. target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
  3. 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
  4. 图片及其路径

<img src=“https://mdbootstrap.com/img/logo/mdb192x192.jpg” alt=“MDB Logo” width=“200” height=“200”>

说明：

  1. src属性为要显示图片文件的位置 URL，即图片文件的路径
  2. alt属性当获取图片出现问题时显示的文字（占位符）
  3. 可为图片指定高宽度，但不建议（可能导致图片变形）

路径示例：
在这里插入图片描述

  • 表格
    表格使用<table>标签，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
  • 列表List
    1.无序列表
    无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
    2.有序列表
    有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

二、CSS总结

1.何为css？ CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。 网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
2.css语法 在这里插入图片描述 选择器一般分为id和class选择器，class选择器使用非常普遍。
3.颜色、尺寸、对齐

  • 颜色：颜色采用RGB16进制值，来设定前景或背景的颜色
  • 尺寸：我们可以用 height 和 width设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等
  • 对齐：对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可（显然缺省的是左对齐）

4.盒子
在这里插入图片描述
盒子有内外边距，其中padding表示填充（内边距），margin表示外边距，border表示边框，默认不显示，content表示盒子里的内容，例如文字、图片等。

对于边框border，可以设置border-radius圆角等属性，使其看着更美观。

5.定位
position属性用于对元素进行定位。该属性有以下一些值：

  • static 静态
  • relative 相对
  • fixed 固定
  • absolute 绝对

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
6.溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

  • visible 默认值，溢出部分不被裁剪，在区域外面显示
  • hidden 裁剪溢出部分且不可见
  • scroll裁剪溢出部分，但提供上下和左右滚动条供显示
  • auto 裁剪溢出部分，视情况提供滚动条

7.浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
8.不透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
9.伪类和伪元素
伪类或伪元素用于定义元素的某种特定的状态或位置等。比如我们可能有这样的需求：

  • 鼠标移到某元素上变换背景颜色
  • 超链接访问前后访问后样式不同
  • 离开必须填写的输入框时出现红色的外框进行警示
  • 保证段落的第一行加粗，其它正常
  • …

伪类/伪元素一般使用：在这里插入图片描述

以上就是常见的css用法总结。