html代码结构解析:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--title定义HTML文档的标题-->
<title>html标题标签</title>
<!--全局标签，定义html中的链接默认打开的地址和跳转方式-->
<base href="http://www.baidu.com" target="_blank"/>
<!--mate 标签-->
<!--搜索引擎关键词-->
<meta name="keywords" content="关键词内容，关键词"/>
<!--每30秒刷新当前页面-->
<meta http-equiv="refresh" content="30"/>
<!--样式链接标签-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--当前文档样式文件标签-->
<style type="text/css">
<!--class,id,样式书写处，只可在当前页面有效-->
<!--样式书写方法-->
<!--标签定义样式，标签前面不用加东西,每个样式用;(分号隔开)-->
body{
background-color:#f2f2f2;
width:100px;
}
<!--class方法：样式名称前面加.(点)-->
.nav{
width:100%;
height:30;
background-color:#f2f2f2;
}
<!--id方法：样式名称前面加#-->
#current{
font-size:20px;
color:red;
}
<!--层级样式链接用空格隔开-->
.navs #current{
line-height:24px;
}
.navs a{
padding:0 10px;
}
.navs .contact{
padding-left:50px;
}
<!--多个样式名称用,(逗号)相连-->
.nav,.banner,.content{
width:80%;
height:auto;
padding:20px;
background-color:#fff;
}
<!--a标签下的某个样式;加空格隔开-->
a .color2{ color:red;}
<!--a标签的某个样式;不加空格隔开-->
a.contact{ padding-left:20px;}
</style>
</head>
<body>
<div class="navs">
<a id="current" href="">首页</a>
<a href="">产品<sup class="color02">20种</sup></a>
<a class="contact" href="">联系</div>
</div>
<div class="banner"><img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"/></div>
<div class="content"></div>
</body>
</html>
一、html元素分类：
1.块级元素
特点:自动成一行，宽度为100%,可设置宽高。
常用块级元素：
<div></div>
<h1></h1> 标题h1-h6
<p></p>文本段落
<hr/>分割线
<ul></ul>无序列表
<ol></ol>有序列表
<dl></dl>定义列表
<table></table>表格
<form></form>表单
2.行内元素
常用行内元素：
<a></a>链接
<img/>图片
<sup > </sup>上标
<sub></sub>下标
<span></span>
<strong></strong>加粗
<input/>文本输入框
<label></label>文本框标注
<select></select>下拉框
<textarea></textarea>多行文本
二、标签属性：
class="定义样式名称"
<div class="synav"></div>
id="定义样式名称"
<div id="synav"></div>
href="超链接地址"
<a href="http://www.baidu.com"></a>
name="用锚定义一个标签"，通过href链接跳到指定的标签
<a href="#baicai"/>白菜</a><a href="#xigua"></a>
<p name="baicai">白菜(学名:Brassica pekinensis (Lour.) Rupr. )是十字花科，芸苔属二年生草本，</p>
<p name="xigua">西瓜自五代时始 入中国，今则南北皆有，而南方者味稍不及，亦甜瓜之类也。</p>
src="图片的地址"
<img src="www.baidu.com/image/001.jpg"/>
title="鼠标移上去显示的提示文字"
<img src="www.baidu.com/image/002.jpg" title="这是一根葱"/>
alt="当图片不显示时，显示的文字"
<img src="" alt="这颗白菜被猪拱了" />
sytle="书写css样式"
<div style="width:50px;height:20px;background-color:red;">内部样式</div>
三、表单事件
1.form标签属性
<！DOCTYPE html>
<html>
<head></head>
<body>
<form action="biaodan.html" ></form> //action属性指定数据提交的页面
<form method="post"></form>//post指：提交时url上不显示提交的表单内容
<form method="get"></form>//get指：提交时url上显示提交的表单内容
<form target="-self"></form>//_self指：在当前窗口中打开
<form target="-blank"></form>//_blank指：可以在新的窗口中打开
<form target="-parent"></form>//_parent指：在父窗口中打开
<form target="-top"></form>//_top指：在整个窗口中打开被链接的文档
</body>
</html>
input标签属性：
type="定义input类型"
<form>
<input type="text" autofocus="autofocus" />//text文本输入框，autofocus自动获取焦点
<input tpe="search" placeholder="请输入..." />//search搜索框，placeholder定义提示语
<input type="password" required="required"/>//password密码框，required表示必填
<input type="radio" name="danxuan">//radio单选框,多个单项按钮name属性要写同个名称
<input type="checkbox" checked="checked"/>
//checkbox复选框，checked属性指定默认选中的复选框
<input type="file"/>//file文件选择
<input type="file" multiple="multiple" />//multiple属性可选择多个文件
<input type="date"/>//日期选择
<input type="week"/>//week选择的日期显示第几周
<input type="time"/>//选择一个时间
<input type="range"/>//range拉动条
<input type="button" value="按钮"/>//button普通按钮
<input type="submit"/>//提交按钮
<input type="reset"/>//reset返回按钮
</form>
四、css样式：
1.css样式引用
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
2.常用样式
width:100px;/*宽度*/
height:100px;/*高度*/
font-family:"";/*字体选择*/
font-size:24px;/*字体大小*/
text-decoration:none;/*清除文本样式(overline:上划线；line-througth:中划线；underline:下划线)*/
overflow:hidden;/*指定大小容器内，内容溢出部分不可见*/
color:red;/*颜色*/
background-color:#fff；/*背景颜色*/
background-image:图片路径; /*背景图片(t图片路径写法：url('图片路径'))*/
background:颜色值 图片路径 平铺方式 左右对齐方式 上下对齐方式;/*背景属性简写：color no-repeat/repeat/repeat-x/repeat-y left/right/center top/bottom/center(颜色值 图片路径 平铺方式 左右居对齐方式 上下对齐方式)*/
background-color:rgba(红,绿,蓝,alpha);/*背景色透明，子元素不继承透明度（红蓝绿的值为：0-255；alpha的值为：0.0-1.0）*/
opacity:透明度;/*背景色和子元素都透明(透明度值为：0.0-1.0)*/
3.盒模型
指元素的外边距、边框、内边距，内容大小
margin外边距
margin:0;/*上下左右外边距值*/
margin:0 auto;/*上下外边距值 左右居中*/
margin:2px 5px 3px;/*上值 左右值 下值*/
margin:1px 2px 3px 4px;/*上 右 下 左*/
margin-left:2px;/*左外边距为2px*/
margin-right:2px;/*右外边距为2px*/
margin-top:2px;/*上外边距为2px*/
margin-bottom:2px;/*下外边距为2px*/
padding内边距
padding:0; /*上下左右内边距值*/
padding:0 auto;/*上下内边距值 左右居中*/
padding:2px 5px 3px;/*上值 左右值 下值*/
padding:1px 2px 3px 4px;/*上 右 下 左*/
padding-left:2px;/*左内边距为2px*/
padding-right:2px;/*右内边距为2px*/
padding-top:2px;/*上内边距为2px*/
padding-bottom:2px;/*下内边距为2px*/
border边框
border:1px solid red; /*边框样式：粗细 样式 颜色*/
border-top:1px solid red; /*上边框的样式*/
border-bottom:1px solid red; /*下边框的样式*/
border-left:1px solid red; /*左边框的样式*/
border-right:1px solid red; /*右边框的样式*/
4.对齐
文本对齐
text-indent:20px;/*段落首行缩进20px*/
text-align:left; /*文本左对齐*/
text-align:right;/*文本右对齐*/
text-align:center/*文本水平居中对齐*/
line-height:高度:/*文本根据设定的高度上下居中对齐*/
float元素对齐/* */
float:left;/*元素左对齐 */
float:right;/*元素右对齐 */
float:none;/*不浮动*/
6.display显示
display:block;/*显示为块级元素*/
display:inline;/*显示为内联元素*/
display:inline-block;/*显示为内联块元素*/
display:none;/*元素不显示*/
7.position定位符
position:relative;/*相对定位*/
position:absolute;/*绝对定位：相对于最近的父元素进行定位*/
position:sticky;/* 根据用户的滚动位置进行定位 */
z-index:number;/*设置元素的堆叠顺序：数字为正负整数，越小越靠后*/
五、flex弹性盒子
1.定义flex容器
display:flex;/*定义父元素为flex容器*/
2.flex-direction属性：定义容器排序方向
flex-direction:row; /*从左向右排序*/
flex-direction:row-reverse;/*从右向左排序*/
flex-direction:colum;/*从上向下排序*/
flex-direction:colum-reverse;/*从下向上排序*/
3.flex-wrap属性：项目换行
flex-wrap:wrap; 换行
flex-wrap:wrap-reverse; 反向换行
flex-wrap:nowrap; 不换行
4.justify-content属性：项目在主轴的对齐方式
justify-content:flex-start; 起始位置对齐，左对齐
justify-content:flex-end; 结束位置对齐，右对齐
justify-content:center; 居中对齐
justify-content:space-between; 靠左右两端对齐，项目之间的左右距离相等
justify-content:space-around; 每个项目两侧的外边距相同；
5.align-items属性：垂直对齐方式
align-items:flex-start; 头部对齐
align-items:flex-end; 底部对齐
align-items:center; 上下居中对齐
align-items:baseline: 以第一行文字的基线对齐
align-items:stretch: 占满整个容器高度
6.align-content属性：多个轴线项目垂直方向对齐方式
align-content:flex-start; 头部对齐
align-content:flex-end; 底部对齐
align-content:center; 居中对齐
align-content:stretch; 自动拉高，占满整个容器高度
align-content:space-between; 靠上下两端对齐，项目之间的上下距离相等
align-content:space-around; 每个项目上下两侧的外边距相同；
总结：
html和css的元素、属性、样式有很多，这里这里只罗列了一些经常用到的知识点，更详细的可以查看参考文档。
