上一次提到了前端的知识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; 不会编译不起效果