整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天開始小編將會(huì)給大家講解HTML的入門知識(shí)以及做項(xiàng)目會(huì)遇到的某些問題以及如何解決此類問題的方法。說道網(wǎng)頁設(shè)計(jì)，HTML是我們必不可少的一部分。基礎(chǔ)網(wǎng)頁的構(gòu)成，無論怎么變幻，都是由原聲的HTML代碼組成構(gòu)成網(wǎng)頁。
下面我就根據(jù)工作中所用和看過的書籍一點(diǎn)一點(diǎn)總結(jié)下我們常用的HTML格式和代碼。
一、什么是HTML。
HTM不是一段編程語言，而是一款標(biāo)記語言，本身不能顯示在瀏覽器中。經(jīng)過瀏覽器的編釋和編譯，才能正確反映HTML標(biāo)記語言的內(nèi)容。HTML從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到多功能互動(dòng)，已經(jīng)成為了一款非常成熟的標(biāo)記語言。
二、HTML文件的基本結(jié)構(gòu)
<!doctype html>
<html>文件開始標(biāo)記
<head>文件頭開始的標(biāo)記
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<title>XX系統(tǒng)</title>
</head>文件頭結(jié)束
<body>文件主題的內(nèi)容
</body>文件主題的結(jié)束
</html>文件結(jié)束的標(biāo)記
這里主要說明title和meta(元信息)
<!--說明文件頭-->
<title>XX網(wǎng)站</title>
<!--添加作者信息-->
<meta name="author" content="_永不言棄" >
<!--設(shè)置網(wǎng)頁文字及語言 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
<!--設(shè)置網(wǎng)頁定時(shí)(20秒后)跳轉(zhuǎn)-->
<meta http-equiv="refresh" content="20;url=index.html">
三、HTML主要常用標(biāo)簽
3.1標(biāo)題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.2 標(biāo)題字對(duì)齊屬性align
默認(rèn)情況下，標(biāo)題文字是左對(duì)齊的。在網(wǎng)頁制作過程中，常常需要選擇對(duì)其他的方式，這時(shí)我們就需要用到align屬性。
3.3 段落標(biāo)記p
段落標(biāo)記是文檔中最常見的標(biāo)記，<p>用來起始的一個(gè)段落。
3.3 換行標(biāo)記
換行標(biāo)記<br>作用是在不另起一段的情況下將當(dāng)前文本強(qiáng)制換行。
3.4 不換行標(biāo)記nobr
<nobor>表示的是不換行的標(biāo)記</nobor>
3.5 水平線
<hr/>
四、建立超鏈接
與自身網(wǎng)站頁面有關(guān)的連接被稱為內(nèi)部連接
4.1絕對(duì)路徑
絕對(duì)路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。絕對(duì)路徑不管源文件在什么位置都可以非常精確地找到，除非是目標(biāo)文檔的位置發(fā)生變化，否則連接不會(huì)失效。
4.2相對(duì)路徑
為了避免絕對(duì)路徑的缺陷，對(duì)于在同一站點(diǎn)之中的連接來說，使用相對(duì)路徑是一個(gè)很好的方法。
4.3 內(nèi)部連接
<a href="# target="目標(biāo)窗口的打開方式 " >
屬性值
含義
-self在當(dāng)前頁面中打開連接
-blank在一個(gè)全新的空白窗口中打開連接
-top在頂層框架中打開連接，也可以理解為在根框架中打開連接
-parent在當(dāng)前框架的上一層里打開連接
4.4 錨點(diǎn)連接
錨點(diǎn)到本頁面中的位置
<a href="#1" >商品名稱</a>
<a href="#2" >產(chǎn)品特點(diǎn)</a>
<a href="#3" >產(chǎn)品規(guī)格</a>
<a neme="1">XX商品</a>
<a neme="2">XX產(chǎn)品特點(diǎn)</a>
<a neme="3">XX規(guī)格</a>
錨點(diǎn)到其他頁面的位置
<a href="index.html#1"></a>對(duì)應(yīng)連接到index.html中name=1的位置
4.5 連接到外部網(wǎng)站
在設(shè)置友情鏈接時(shí)，需要打開HTTP協(xié)議進(jìn)行外部連接訪問。
<a href="wwww.baidu.com" >百度</a>
4.6 連接到E-mail
<a href="mailto:郵件地址">。。。</a>
4.7 連接到FTP
FTP代表文件傳輸協(xié)議，一個(gè)FTP站點(diǎn)通常包含一些上傳和下載文件的文件目錄。
大部分FTP網(wǎng)站需要使用用戶名和密碼來登錄。
當(dāng)然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會(huì)可以用a標(biāo)簽實(shí)現(xiàn)。
HTML基礎(chǔ)就先講到這里，后面退出DIV設(shè)計(jì)網(wǎng)頁格式已經(jīng)網(wǎng)頁分框的實(shí)現(xiàn)。
Cascading Style Sheets（層疊樣式表），簡稱 CSS，是前端開發(fā)中不可或缺的一部分。它為網(wǎng)頁提供了美觀和一致的外觀，同時(shí)也為用戶提供了更好的用戶體驗(yàn)。本文將引導(dǎo)你從 CSS 的基礎(chǔ)入門到精通，幫助你成為一名優(yōu)秀的前端開發(fā)者。
天小編為大家介紹五種css樣式布局以及內(nèi)服源代碼作為介紹，采用的方式是行內(nèi)級(jí)樣式（就是將css樣式代碼與html寫在一起）
已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應(yīng)。
一、浮動(dòng)布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮動(dòng)布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮動(dòng)布局
</div>
</div>
</body>
</html>
浮動(dòng)布局的兼容性比較好，但是浮動(dòng)帶來的影響比較多，頁面寬度不夠的時(shí)候會(huì)影響布局。
二、絕對(duì)定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對(duì)定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
絕對(duì)定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>
絕對(duì)定位布局快捷，但是有效性比較差，因?yàn)槊撾x了文檔流。
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>
自適應(yīng)好，高度能夠自動(dòng)撐開
四、table-cell表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
兼容性好，但是有時(shí)候不能固定高度，因?yàn)闀?huì)被內(nèi)容撐高。
五、網(wǎng)格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網(wǎng)格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
網(wǎng)格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
希望大家可以一直關(guān)注我，支持我！感謝！！！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
