web页面基础（一）

html语言

html做为特殊的xml标记性语言，不仅帮我们独立出了页面的各个元素，也帮我们划分好了元素之间的父子、兄弟等层级关系。如下:

<div>
  <h3>文章标题</h3>
  <div>
    <p>文章第一段</p>
    <p>文章第二段</p>
  </div>
</div>

以上代码标记好了h3、p等元素，也呈现出了各个元素的层级关系

html的属性

依托于xml标记语言的特性，html支持为元素添加属性，以便给浏览器、其他html页面语言，提供更多的信息。在如下标签中：

<img src="url" alt="some_text" class="main-img" onclick="clickImage">

src、alt为浏览器提供图片处理信息；class可以被css、js等用于选择该元素;onclick可以被js引擎处理点击事件。

css语言

html独立出了元素，有了很明确的操作抓手，但本身并不能实现所有的网页功能。我们需要通过css去支持样式和布局。css主要有三个概念：选择器、属性、值。如下：

.main-img {
  width: 65px;
  height:65px;
}

.main-img为class属性选择器；width、height为属性；而冒号后面的便是这些属性对应的值。

css选择器

css定义元素属性

颜色、字体、大小
尺寸、边框、背景、内边距、外边距、

css定义元素布局

position布局、flex布局、网格布局

当然，css还可以实现动画、函数等功能