前端基本知识 HTML+CSS

最新推荐文章于 2024-11-09 17:11:29 发布

Hercule2016

最新推荐文章于 2024-11-09 17:11:29 发布

阅读量159

点赞数

分类专栏：前端基础知识文章标签： html css web html5

本文链接：https://blog.csdn.net/cdut2016/article/details/103532244

版权

前端基础知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端基本知识 HTML+CSS

HTML认知
- HTML基本属性
- HTML标签
CSS学习方法

HTML认知

对于html语言并不想做太多的文字描述我想用一个最基本的网页结构来做综述,
本文只是阐述一些基本的前端知识，本人从事java开发方向，所以深入学习还是要靠大家自己。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		大家好这是我做的第一个网页
	</body>
</html>

预览一下：
这就是我们做的第一个网页

HTML基本属性

其实与其是说是html的基本属性不如说是最最基本的一些标签

基本的html标签

HTML标签

1）HTML的标签分类

2）表单标签：后端与前端进行数据交互的标签，<form../>
a.文本框： <input type = "text">
b.密码框： <input type="password">
c.上传文件： <input type="file">
d.复选框： <input type="check">
e.单选按钮： <input type="radio">
f.文本域： <textarea>
g.隐藏域： <input type="hidden">
h.提交按钮： <input type="submit">
i.重置按钮： <input type="reset">
j.下拉框： <select>

CSS学习方法

关于CSS的学习应该掌握以下两点
1）语法：（主要就是选择器）
2）背样式属性

CSS选择器语法

1）概念或者作用：其实就是定位要美化的标签
2）分类：
a.标签选择器
b.类(class)选择器
c.ID选择器
d.群组选择器
e.层次选择器

3）语法：

–标签代码

<div></div>

--场景：美化上面的div


<html>
  <head>
  <style type="text/css">
  div{--标签选择器
  --样式代码
  }
  </style>
  </head>
</html>

--标签代码
<div class = "dd"></div>

--场景：美化上面的div
<html>
   <head>
   <style type="text/css">
     .dd{--类选择器
     --格式代码
     }
   </style>
   </head>
</html>

--标签代码
<div id = "tt"></div>

--场景：美化上面的div
<html>
  <head>
   <style type = "text/css">
    #tt{--ID选择器
    --样式代码
    }
   </style>
  </head>
</html>

--标签代码
<div></div>
<p></p>

--场景：美化上面的div
<html>
 <head>
 <style type = "text/css">
 div,p{--群组选择器，（类,id,标签名），一次性可以设置多个不同标签的样式
 --样式代码
 }
 </style>
 </head>
</html>

--标签代码
<div>
 <div><div>
 <div><div>
<div>

--场景：美化上面的div
<html>
 <head>
 <style type = "text/css">
  div>div{--层次选择器（子代选择器）	
  --样式代码
  }
 <style>
 </head>
<html>

css样式分类

css样式分类图片

基础样式

在这里插入图片描述

布局样式

1）弹性布局：控制子元素布局的位置（推荐使用）

–html代码

<div>
 <div></div>
 <div></div>
</div>

–需求：让dd里面的两个div水平排列
样式需求

–关键的样式代码（如果我们要用弹性布局，则样式写在父元素的样式里面）

.dd{
  width:1000px;
  height:200px;
  display:flex;/*设置弹性布局的关键代码，且默认的布局方式是水平布局*/
  justify-content:space-around|space-between|center;/*水平方向元素位置设置*/
  align-items:center;/*垂直居中设置*/
}

–代码解释

justify-content:space-around;/*平均分配父级元素的空间*/
justify-content:space-between;/*平均分配父级元素的空间，不占据父元素左右两边空间*/
justify-content:center;/*元素居中*/

–扩展

display:flex;
flex-direction:column;/*改变弹性布局的默认排列方式，设置为纵向排列*/

–扩展

display:inline|block|inline-block|flex|none
inline:将块级元素变成行级元素
block:将行级元素变成块级元素
inline-block:既具备行级元素特点又有块级元素的特点
flex:弹性布局
none:不显示元素

–扩展

opacity:透明度显示
rgb:设置颜色
rgba:/*设置颜色;加入toumingdu透明度 例如:rgba(251,251,251,0.3)*/

面试里面常常考察：opacity和rgba的区别

2）定位：让元素根据指定的位置进行布局，一般是设置像素单位来执行元素的位置

–分类

position:fixed;/*固定定位，脱离文档流*/
position:relative;/*相对定位，不脱离文档*/
position:absolute;/*绝对定位，脱离文档流*/
position:static;/*默认定位*/

–关键的概念和知识点
1、文档流：网页中元素都有自己的默认位置,从左到右，从上到下。

2、脱离文档流：网页中元素不在它自己的默认的位置上。比如漂浮到某些元素的上方。导致自己的位置可以被其他的元素占用。

3、固定定位：脱离文档流，（相对于）以浏览器左上角为原点来设置元素的位置。

4、相对定位：不脱离文档流，相对于它原来的位置进行定位。

5、绝对定位：脱离文档流，相对于设置定位的父元素的位置进行定位。

–如果父级元素没有设置定位，则相对于浏览器进行定位。

–如果父级元素设置了定位，则相对于最近父级元素进行定位。