基础知识HtmlCSS篇

上一次提到了前端的知识Html和Css，今天就简单回顾下。

html是超文本标记语言，也是网页在浏览器上显示的一种语言。现在所能看到的网页都是由一个个标签组成，也就是Html的内容
css是层叠样式表，是样式文件。像宽高度，背景颜色，字体颜色，字体类型，字体大小，文字对齐方式，圆角等等
js是一种可在多种环境下运行的脚本语言，可以提供一些炫酷的动画。当然css可以实现动画，不过实现机制不同而已。
把一个网页比作 一部流动的水彩画。Html就是木头，气体等实体东西，Css便是提供了 形状 颜色。
js则是使其流动起来，展示多姿多彩的动感。现在的网页也好，移动APP也罢都是由这三部分组成的，所以作为开发人员这也是最为重要的。也是最基本的要求。

下面具体介绍下Html的标签

Html的标签分为两种：块元素和行内元素，块元素即是本身可以自由宽高，默认占比100%宽度，高度随内容撑开的；行内元素宽高都是由内容撑开，本身设置宽高度无效，当然行内元素和块元素之间可以相互转化；行内块元素便是一种同时具有行内元素和块元素的特点的，
**特点：**可以设置宽高 和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、外边距以及内边距都可以手动设置。

块元素：<div> <h1>~<h6>/<p>/<ul>/ <li> /<table>
行内元素：<p> <font> <strong> <b> <em> <i> <del><ins> <u> <span>
行内块元素（内联元素）：img textarea input

H5 新增加的标签，使用的时候一起使用就好，个人感觉没必要区分，面试的话另说
新标签：
header　　代表头部标签
　　footer　　代表脚部标签
　　nav　　代表导航标签
　　Hgroup　　标题组合标签
　　section　　区域标签
　　article　　文章标签（也可以代表单独的一部分）
　　aside　　侧边栏标签
　　不常见的
　　progress　　进度条
　　figure　　对元素的组合 （图片加文字的组合）
　　time　　时间标签
　　datalist　　下拉列表 （与select标签功能一样）
　　detail　　细节　　是否允许用户可见/不可见的内容
　　address　　地址
　　mark　　突出的部分　　具有高亮效果
　　keygen（仅作为了解，我还从来没用过）
新标签主要是做了 语义化标签，让人看到标签就能知道结构
至于标签的具体用法，以后再说哈，现在了解下就好

CSS部分

这一部分说的太空洞，我就上代码了。

header是一个块元素的类名
<div class="header"></div>
.header{
	width: 260px; 宽度
	height: 28px; 高度 
	color: #FFFFFF; 字体颜色
	position: absolute; 绝对定位  使用它的话他的父级要有 position: relative;相对定位，若果没有则会一层一层往上找position: relative;
	left: 140px; 绝对定位的四个方位 left（左边） right(右边)  top（顶部） bottom（底部）
	top: 30px;
}
因为这里用的是class类名的写法所以是  .类名

.content {
	text-align: center; 字体的对齐方式，left 左对齐  right 右对齐  center 居中对齐
	display: flex; 改变元素类型 block 块元素，inline 行内元素，inline-block 行内块，flex是弹性盒子他的子元素的类型会转成行内块
	position: relative; 相对定位
	justify-content: space-between; 弹性盒子的子元素排列方式 两端对齐
	background: url(./img/border.png) no-repeat; 背景，背景图片 
	background-color: #ccc; 背景颜色；背景图片和背景颜色不同时出现
 	border: solid #005B89 1px; 边框 颜色 实线 粗细 
}

常用的大概就这么多，需要用到其他的，后续再补充

在CSS的编码中是不允许出现汉字的

html添加注释的方法 <!-- <h1>注释</h1> --> <h1>注释</h1>是不会被解析的
css添加注释方法：/* border: 1px solid #005B89; */ border: 1px solid #005B89; 不会编译不起效果