html代碼結(jié)構(gòu)解析:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--title定義HTML文檔的標(biāo)題-->
<title>html標(biāo)題標(biāo)簽</title>
<!--全局標(biāo)簽，定義html中的鏈接默認(rèn)打開(kāi)的地址和跳轉(zhuǎn)方式-->
<base target="_blank"/>
<!--mate 標(biāo)簽-->
<!--搜索引擎關(guān)鍵詞-->
<meta name="keywords" content="關(guān)鍵詞內(nèi)容瞎领，關(guān)鍵詞"/>
<!--每30秒刷新當(dāng)前頁(yè)面-->
<meta http-equiv="refresh" content="30"/>
<!--樣式鏈接標(biāo)簽-->
<link rel="stylesheet" type="text/css" href="style.css" />
<!--當(dāng)前文檔樣式文件標(biāo)簽-->
<style type="text/css">
<!--class,id,樣式書(shū)寫(xiě)處泌辫，只可在當(dāng)前頁(yè)面有效-->
<!--樣式書(shū)寫(xiě)方法-->
<!--標(biāo)簽定義樣式，標(biāo)簽前面不用加?xùn)|西,每個(gè)樣式用;(分號(hào)隔開(kāi))-->
body{
background-color:#f2f2f2;
width:100px;
}
<!--class方法：樣式名稱(chēng)前面加.(點(diǎn))-->
.nav{
width:100%;
height:30;
background-color:#f2f2f2;
}
<!--id方法：樣式名稱(chēng)前面加#-->
#current{
font-size:20px;
color:red;
}
<!--層級(jí)樣式鏈接用空格隔開(kāi)-->
.navs #current{
line-height:24px;
}
.navs a{
padding:0 10px;
}
.navs .contact{
padding-left:50px;
}
<!--多個(gè)樣式名稱(chēng)用,(逗號(hào))相連-->
.nav,.banner,.content{
width:80%;
height:auto;
padding:20px;
background-color:#fff;
}
<!--a標(biāo)簽下的某個(gè)樣式;加空格隔開(kāi)-->
a .color2{ color:red;}
<!--a標(biāo)簽的某個(gè)樣式;不加空格隔開(kāi)-->
a.contact{ padding-left:20px;}
</style>
</head>
<body>
<div class="navs">
<a id="current" href="">首頁(yè)</a>
<a href="">產(chǎn)品<sup class="color02">20種</sup></a>
<a class="contact" href="">聯(lián)系</div>
</div>
<div class="banner"><img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"/></div>
<div class="content"></div>
</body>
</html>
一九默、html元素分類(lèi)：
1.塊級(jí)元素
特點(diǎn):自動(dòng)成一行震放，寬度為100%,可設(shè)置寬高。
常用塊級(jí)元素：
<div></div>
<h1></h1> 標(biāo)題h1-h6
<p></p>文本段落
<hr/>分割線(xiàn)
<ul></ul>無(wú)序列表
<ol></ol>有序列表
<dl></dl>定義列表
<table></table>表格
<form></form>表單
2.行內(nèi)元素
常用行內(nèi)元素：
<a></a>鏈接
<img/>圖片
<sup > </sup>上標(biāo)
<sub></sub>下標(biāo)
<span></span>
<strong></strong>加粗
<input/>文本輸入框
<label></label>文本框標(biāo)注
<select></select>下拉框
<textarea></textarea>多行文本
二邪锌、標(biāo)簽屬性：
class="定義樣式名稱(chēng)"
<div class="synav"></div>
id="定義樣式名稱(chēng)"
<div id="synav"></div>
href="超鏈接地址"
<a ></a>
name="用錨定義一個(gè)標(biāo)簽"勉躺，通過(guò)href鏈接跳到指定的標(biāo)簽
<a href="#baicai"/>白菜</a><a href="#xigua"></a>
<p name="baicai">白菜(學(xué)名:Brassica pekinensis (Lour.) Rupr. )是十字花科癌瘾，蕓苔屬二年生草本觅丰，</p>
<p name="xigua">西瓜自五代時(shí)始 入中國(guó)，今則南北皆有妨退，而南方者味稍不及妇萄，亦甜瓜之類(lèi)也。</p>
src="圖片的地址"
<img src="www.baidu.com/image/001.jpg"/>
title="鼠標(biāo)移上去顯示的提示文字"
<img src="www.baidu.com/image/002.jpg" title="這是一根蔥"/>
alt="當(dāng)圖片不顯示時(shí)咬荷，顯示的文字"
<img src="" alt="這顆白菜被豬拱了" />
sytle="書(shū)寫(xiě)css樣式"
<div style="width:50px;height:20px;background-color:red;">內(nèi)部樣式</div>
三冠句、表單事件
1.form標(biāo)簽屬性
<！DOCTYPE html>
<html>
<head></head>
<body>
<form action="biaodan.html" ></form> //action屬性指定數(shù)據(jù)提交的頁(yè)面
<form method="post"></form>//post指：提交時(shí)url上不顯示提交的表單內(nèi)容
<form method="get"></form>//get指：提交時(shí)url上顯示提交的表單內(nèi)容
<form target="-self"></form>//_self指：在當(dāng)前窗口中打開(kāi)
<form target="-blank"></form>//_blank指：可以在新的窗口中打開(kāi)
<form target="-parent"></form>//_parent指：在父窗口中打開(kāi)
<form target="-top"></form>//_top指：在整個(gè)窗口中打開(kāi)被鏈接的文檔
</body>
</html>
input標(biāo)簽屬性：
type="定義input類(lèi)型"
<form>
<input type="text" autofocus="autofocus" />//text文本輸入框幸乒，autofocus自動(dòng)獲取焦點(diǎn)
<input tpe="search" placeholder="請(qǐng)輸入..." />//search搜索框懦底，placeholder定義提示語(yǔ)
<input type="password" required="required"/>//password密碼框，required表示必填
<input type="radio" name="danxuan">//radio單選框,多個(gè)單項(xiàng)按鈕name屬性要寫(xiě)同個(gè)名稱(chēng)
<input type="checkbox" checked="checked"/>
//checkbox復(fù)選框罕扎，checked屬性指定默認(rèn)選中的復(fù)選框
<input type="file"/>//file文件選擇
<input type="file" multiple="multiple" />//multiple屬性可選擇多個(gè)文件
<input type="date"/>//日期選擇
<input type="week"/>//week選擇的日期顯示第幾周
<input type="time"/>//選擇一個(gè)時(shí)間
<input type="range"/>//range拉動(dòng)條
<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:上劃線(xiàn)丐重；line-througth:中劃線(xiàn)；underline:下劃線(xiàn))*/
overflow:hidden;/*指定大小容器內(nèi)杆查，內(nèi)容溢出部分不可見(jiàn)*/
color:red;/*顏色*/
background-color:#fff扮惦；/*背景顏色*/
background-image:圖片路徑; /*背景圖片(t圖片路徑寫(xiě)法：url('圖片路徑'))*/
background:顏色值 圖片路徑 平鋪方式 左右對(duì)齊方式 上下對(duì)齊方式;/*背景屬性簡(jiǎn)寫(xiě)：color no-repeat/repeat/repeat-x/repeat-y left/right/center top/bottom/center(顏色值 圖片路徑 平鋪方式 左右居對(duì)齊方式 上下對(duì)齊方式)*/
background-color:rgba(紅,綠,藍(lán),alpha);/*背景色透明，子元素不繼承透明度（紅藍(lán)綠的值為：0-255亲桦；alpha的值為：0.0-1.0）*/
opacity:透明度;/*背景色和子元素都透明(透明度值為：0.0-1.0)*/
3.盒模型
指元素的外邊距崖蜜、邊框、內(nèi)邊距客峭，內(nèi)容大小
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內(nèi)邊距
padding:0; /*上下左右內(nèi)邊距值*/
padding:0 auto;/*上下內(nèi)邊距值 左右居中*/
padding:2px 5px 3px;/*上值 左右值 下值*/
padding:1px 2px 3px 4px;/*上 右 下 左*/
padding-left:2px;/*左內(nèi)邊距為2px*/
padding-right:2px;/*右內(nèi)邊距為2px*/
padding-top:2px;/*上內(nèi)邊距為2px*/
padding-bottom:2px;/*下內(nèi)邊距為2px*/
border邊框
border:1px solid red; /*邊框樣式：粗細(xì) 樣式 顏色*/
border-top:1px solid red; /*上邊框的樣式*/
border-bottom:1px solid red; /*下邊框的樣式*/
border-left:1px solid red; /*左邊框的樣式*/
border-right:1px solid red; /*右邊框的樣式*/
4.對(duì)齊
文本對(duì)齊
text-indent:20px;/*段落首行縮進(jìn)20px*/
text-align:left; /*文本左對(duì)齊*/
text-align:right;/*文本右對(duì)齊*/
text-align:center/*文本水平居中對(duì)齊*/
line-height:高度:/*文本根據(jù)設(shè)定的高度上下居中對(duì)齊*/
float元素對(duì)齊/* */
float:left;/*元素左對(duì)齊 */
float:right;/*元素右對(duì)齊 */
float:none;/*不浮動(dòng)*/
6.display顯示
display:block;/*顯示為塊級(jí)元素*/
display:inline;/*顯示為內(nèi)聯(lián)元素*/
display:inline-block;/*顯示為內(nèi)聯(lián)塊元素*/
display:none;/*元素不顯示*/
7.position定位符
position:relative;/*相對(duì)定位*/
position:absolute;/*絕對(duì)定位：相對(duì)于最近的父元素進(jìn)行定位*/
position:sticky;/* 根據(jù)用戶(hù)的滾動(dòng)位置進(jìn)行定位 */
z-index:number;/*設(shè)置元素的堆疊順序：數(shù)字為正負(fù)整數(shù)豫领，越小越靠后*/
五、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屬性：項(xiàng)目換行
flex-wrap:wrap; 換行
flex-wrap:wrap-reverse; 反向換行
flex-wrap:nowrap; 不換行
4.justify-content屬性：項(xiàng)目在主軸的對(duì)齊方式
justify-content:flex-start; 起始位置對(duì)齊舔琅，左對(duì)齊
justify-content:flex-end; 結(jié)束位置對(duì)齊氏堤，右對(duì)齊
justify-content:center; 居中對(duì)齊
justify-content:space-between; 靠左右兩端對(duì)齊，項(xiàng)目之間的左右距離相等
justify-content:space-around; 每個(gè)項(xiàng)目?jī)蓚?cè)的外邊距相同搏明；
5.align-items屬性：垂直對(duì)齊方式
align-items:flex-start; 頭部對(duì)齊
align-items:flex-end; 底部對(duì)齊
align-items:center; 上下居中對(duì)齊
align-items:baseline: 以第一行文字的基線(xiàn)對(duì)齊
align-items:stretch: 占滿(mǎn)整個(gè)容器高度
6.align-content屬性：多個(gè)軸線(xiàn)項(xiàng)目垂直方向?qū)R方式
align-content:flex-start; 頭部對(duì)齊
align-content:flex-end; 底部對(duì)齊
align-content:center; 居中對(duì)齊
align-content:stretch; 自動(dòng)拉高鼠锈，占滿(mǎn)整個(gè)容器高度
align-content:space-between; 靠上下兩端對(duì)齊，項(xiàng)目之間的上下距離相等
align-content:space-around; 每個(gè)項(xiàng)目上下兩側(cè)的外邊距相同星著；
總結(jié)：
html和css的元素购笆、屬性、樣式有很多虚循，這里這里只羅列了一些經(jīng)常用到的知識(shí)點(diǎn)同欠，更詳細(xì)的可以查看參考文檔。
