整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候，有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格，往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見(jiàn)的例子 —— 傾斜的背景顏色。
在CSS中，沒(méi)有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色，而是需要通過(guò)一些“手段”來(lái)實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div，給這個(gè)div設(shè)定一個(gè)背景顏色，然后讓這個(gè)div傾斜一個(gè)角度，從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來(lái)用一個(gè)基本的實(shí)例來(lái)解釋并實(shí)現(xiàn)傾斜背景的效果：
首先要說(shuō)明一下，頁(yè)面導(dǎo)航條是固定在頁(yè)面頂部的，導(dǎo)航條不會(huì)隨著頁(yè)面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單，就是利用了 position 這個(gè)屬性的 fixed 值來(lái)實(shí)現(xiàn)的。
我下面的代碼實(shí)例中，HTML用來(lái)給頁(yè)面上添加元素，而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值，而且需要若干個(gè)HTML標(biāo)簽的CSS來(lái)配合，從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來(lái)描述這些屬性的效果和目的，大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來(lái)理解?；蛘呖梢灾苯幽梦业倪@個(gè)實(shí)例作為一個(gè)模板來(lái)使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>為了讓導(dǎo)航條和其他元素都能夠與頁(yè)面的兩邊留出距離，我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div，主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距，從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱(chēng)一般都會(huì)有一個(gè)后綴 "-bg"。
在實(shí)際內(nèi)容的排列時(shí)，我采用了更加方便靈活的彈性布局，這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。
另外，如果想要實(shí)現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單，只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度（-9deg）后，它會(huì)變成一個(gè)平行四邊形，這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過(guò)多個(gè) CSS 屬性的配合來(lái)遮住露出的白色的body部分。下面就來(lái)看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個(gè)原理圖來(lái)解釋一下其中的原理：
當(dāng)外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來(lái)遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁(yè)面上部區(qū)域的原理。
那么頁(yè)面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì)，這樣才能將風(fēng)格一致，產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個(gè)屬性，height 和 overflow-y，并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示，這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個(gè)div 乖乖的呆在頁(yè)面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜，而且還帶有一個(gè)背景顏色。這樣組合出來(lái)的效果就是一個(gè)看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個(gè)四邊形里面是實(shí)際的頁(yè)面內(nèi)容。
最終的樣子在這篇 CSS 代碼的最后展示出來(lái)了。
TMl 的標(biāo)簽可以分為單個(gè)標(biāo)簽和成對(duì)標(biāo)簽。
單個(gè)標(biāo)簽：html4 規(guī)定單個(gè)標(biāo)簽要有一個(gè) / 表示結(jié)尾， html5 則不用
<!--單個(gè)標(biāo)簽-->
<meta>
<!--成對(duì)標(biāo)簽 -->
<div></div>以下是HTMl中常用的一些標(biāo)簽
div 標(biāo)簽 主要用來(lái)將相關(guān)的內(nèi)容組合到一塊，就像菜市場(chǎng)把各個(gè)蔬菜分成不同種類(lèi)區(qū)分?jǐn)[放是一個(gè)道理。
div 是最常見(jiàn)也是比較重要的標(biāo)簽，網(wǎng)頁(yè)布局中經(jīng)常使用的一類(lèi)標(biāo)簽。通常布局被稱(chēng)為 DIV + CSS 布局
<div>
div 就是一個(gè)分類(lèi)的存儲(chǔ)箱子
</div>p標(biāo)簽表示段落， 在網(wǎng)頁(yè)文字中應(yīng)用的比較多
<!--段落和段落間會(huì)換行-->
<p>第一段</p>
<p>第二段</p>h標(biāo)簽分為六個(gè)
標(biāo)簽 | 語(yǔ)義 |
h1 | 一級(jí)標(biāo)題 |
h2 | 二級(jí)標(biāo)題 |
h3 | 三級(jí)標(biāo)題 |
h4 | 四級(jí)標(biāo)題 |
h5 | 五級(jí)標(biāo)題 |
h6 | 六級(jí)標(biāo)題 |
引用標(biāo)題標(biāo)簽后，字體會(huì)加粗、字號(hào)一會(huì)變大
無(wú)序標(biāo)簽是沒(méi)有顯示順序的列表，無(wú)序列表前面通常會(huì)有一個(gè)“小點(diǎn)”， 這個(gè)小點(diǎn)可以用type屬性控制。其中有三個(gè)展示方式（不過(guò)這種方式比較固定，不夠靈活和美觀， 已經(jīng)被CSS的效果代替），如下：
值（type屬性） | 描述 |
disc | 默認(rèn)值，實(shí)心圓 |
circle | 空心圓 |
square | 實(shí)心方框 |
舉例:
<!--ul標(biāo)簽內(nèi)部只能放置li標(biāo)簽-->
<!--li標(biāo)簽內(nèi)部可以放其他的標(biāo)簽-->
<ul type=">
<li>無(wú)序列表元素1</li> <!--列表項(xiàng)-->
<li>無(wú)序列表元素2</li>
</ul>
實(shí)心圓
<ul type="disc">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>
實(shí)心方框
<ul type="square">
<li>西紅柿</li>
<li>黃瓜</li>
</ul>type屬性值 | 意義 |
a | 小寫(xiě)英文字母編號(hào) |
A | 大寫(xiě)英文字母編號(hào) |
i | 小寫(xiě)羅馬數(shù)字編號(hào) |
I | 大寫(xiě)羅馬數(shù)字編號(hào) |
1 | 數(shù)字編號(hào)（默認(rèn)） |
有序列表, 從2開(kāi)始
<ol start="2">
<li>元素1</li>
<li>元素2</li>
</ol>
小寫(xiě)字母表示
<ol type="a">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
倒敘
<ol reversed>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>dl標(biāo)簽表示自定義列表
dt表示數(shù)據(jù)項(xiàng)，dd表示數(shù)據(jù)定義， dd是dt標(biāo)簽的解釋
<dl>
<dt>西紅柿</dt>
<dd>紅、酸</dd>
<dt>黃瓜</dt>
<dd>綠、澀</dd>
</dl>img 用來(lái)插入圖片，包括但不限于以下圖片格式
圖片格式 | 備注 |
.jpg、.jpeg | 通常用于照片，是一種有損壓縮格式 |
.png | 通常用于logo、背景，支持透明和半透明。便攜式網(wǎng)絡(luò)圖像 |
.svg | 矢量圖片 |
<!-- src(source)屬性， 圖片地址，可以為相對(duì)路徑，也可以為絕對(duì)路徑-->
<!-- alt 如果遇到圖片無(wú)法加載的情況，網(wǎng)頁(yè)上會(huì)展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設(shè)置一個(gè)， 那么另外一個(gè)就會(huì)跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">用a標(biāo)簽來(lái)制作超級(jí)鏈接
<!-- href 屬性 表示 其他頁(yè)面的鏈接，支持相對(duì)路徑和絕對(duì)路徑，還可以鏈接到其它網(wǎng)站 -->
<!--target 屬性表示 打開(kāi)其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標(biāo)題， 當(dāng)鼠標(biāo)移動(dòng)到鏈接上，會(huì)展示出來(lái)-->
<a href="http://www.baidu.com" target="blank" title="文字標(biāo)題">百度</a>
<!--也可以用a標(biāo)簽作為錨點(diǎn) 錨點(diǎn)可以是本頁(yè)面的錨點(diǎn)，也可以是其他頁(yè)面的錨點(diǎn)-->
<h1 id="title">頭部標(biāo)題</h1>
... 此處省略一些代碼
<a href="#title">返回標(biāo)題</a>
<!--下載鏈接，指向 doc， zip， zip等文件格式時(shí)，a標(biāo)簽將成為自動(dòng)下載鏈接-->
<a href="./download/halou.zip">發(fā)郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統(tǒng)將自動(dòng)打開(kāi)email相關(guān)軟件-->
<a href="mailto:halouworld@126.com">發(fā)郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統(tǒng)將自動(dòng)打開(kāi)撥號(hào)鍵-->
<a href="tel:11111111111">打開(kāi)撥號(hào)鍵盤(pán)</a>audio標(biāo)簽用來(lái)插入音頻標(biāo)簽
<!--添加 controls 后才會(huì)顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動(dòng)播放屬性-->
<!--loop 屬性表示循環(huán)播放-->
<audio controls src="./video/demo.mp3">
您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的瀏覽器不支持 audio標(biāo)簽，請(qǐng)升級(jí)
</audio>video 標(biāo)簽用于插入一段視頻
<!--有的視頻不能播放 ，詳見(jiàn) https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件 -->
<!-- autoplay 自動(dòng)播放 -->
<!-- loop 循環(huán)播放 -->
<!-- 常見(jiàn)的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的瀏覽器不支持 video標(biāo)簽，請(qǐng)升級(jí)
</video>以前的區(qū)塊標(biāo)簽只有div，現(xiàn)在為了更好的方便搜索引擎抓取網(wǎng)站，因此有了以下語(yǔ)義更加明確的區(qū)塊標(biāo)簽
<section> | 文檔的區(qū)域，比div語(yǔ)義上還要大一點(diǎn) |
<header> | 頁(yè)頭 |
<main> | 網(wǎng)頁(yè)核心部分 |
<footer> | 頁(yè)腳 |
表單用來(lái)收集信息并且可以完成和后端的數(shù)據(jù)傳輸
表單中大致可以分為三種標(biāo)簽
一些表單的示例
<!--action 表示要提交到后端的網(wǎng)址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 標(biāo)簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒(méi)任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---單選按鈕，name相等，表示選擇了一個(gè)，另一個(gè)就不能選擇了-->
<!--checked 表示默認(rèn)被選中-->
<!-- value 屬性表示要提交到后端服務(wù)器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio" name="radio_group">
<label>
<input type="radio" name="sex"> 男
</label>
<label>
<input type="radio" name="sex"> 女
</label>
<!--html4 中的標(biāo)簽 通過(guò)for 屬性 和 其他標(biāo)簽的id屬性進(jìn)行綁定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--復(fù)選框 type="checkbox" 同一組的的復(fù)選框，name值應(yīng)該相同 ，復(fù)選框也有value值， 用于向服務(wù)器提交數(shù)據(jù)-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球
<!--密碼框-->
<input type="password" placeholder="請(qǐng)輸入密碼">
<!-- 下拉菜單 -->
<select>
<option value="alipay">支付寶</option>
<option value="wxpay">微信支付</option>
</select>
<!--多文本框 rows 和 clos 分別用于設(shè)置 行數(shù) 和 列數(shù)-->
<textarea rows="3" cols="5"></textarea>
<!--三種按鈕 submit 提交按鈕 button 普通按鈕 可以簡(jiǎn)寫(xiě)為 <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交表單">
<!--像 email 和 url 等格式，如果點(diǎn)擊提交按鈕，不符合格式，會(huì)有提示-->
<form>
日期空間: <input type="date"> <br/>
時(shí)間空間: <input type="time"> <br/>
日期時(shí)間空間 <input type="datetime-local"> <br/>
文件:<input type="file"> <br/> <br/>
數(shù)字控件: <input type="number"> <br/>
拖拽條: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
網(wǎng)址控件: <input type="url"> <br/>
郵箱控件: <input type="email" >
<input type="submit" value="提交">
</form>
<!-- datalist 備選項(xiàng)示例 -->
<input type="text" list="province">
<datalist id="province">
<option value="陜西"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="山東"></option>
</datalist>可以用html渲染表格
<!--表格示例-->
<table border="1">
<caption>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table><!--跨列示例-->
<table border="1">
<caption>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td colspan="2">跨兩行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是標(biāo)題</caption>
<tr>
<th>第一列標(biāo)題</th>
<th>第二列標(biāo)題</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>/一、html
//a、HTML語(yǔ)法規(guī)范
//a.1基本語(yǔ)法概述
1、HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字，例如,
2、HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，例如和,我們成為雙標(biāo)簽，標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。
3、有些特殊的標(biāo)簽是單個(gè)標(biāo)簽（極少情況），例如
，我們稱(chēng)為單標(biāo)簽
//a.2標(biāo)簽關(guān)系
雙標(biāo)簽關(guān)系可以分為兩類(lèi)：包含關(guān)系和并列關(guān)系。
//b、HTML基本結(jié)構(gòu)標(biāo)簽
//b.1第一個(gè)HTML網(wǎng)頁(yè)
每個(gè)網(wǎng)頁(yè)都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也稱(chēng)為骨架標(biāo)簽），頁(yè)面內(nèi)容也是在這些基本標(biāo)簽上寫(xiě)的。
HTML頁(yè)面也稱(chēng)為HTML文檔
標(biāo)簽名 | 定義 | 說(shuō)明 |
<html></html> | HTML標(biāo)簽 | 頁(yè)面中最大的標(biāo)簽，我們稱(chēng)為根標(biāo)簽 |
<head></head> | 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
<title></title> | 文檔的標(biāo)題 | 讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題 |
<body></body> | 文檔的主體 | 元素包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容，基本都是放到body里面的 |
必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示出它們。
此時(shí)，用瀏覽器打開(kāi)這個(gè)網(wǎng)頁(yè)，我們就可以預(yù)覽我們寫(xiě)的第一個(gè)HTML文件了。
//c、開(kāi)發(fā)工具vscode
1、<!DOCTYPE>標(biāo)簽
文檔類(lèi)型聲明，作用就是告訴瀏覽器使用哪種HTML版本來(lái)顯示網(wǎng)頁(yè)
<!DOCTYPE html>這句代碼的意思是：當(dāng)前頁(yè)面采用的是HTML5來(lái)顯示頁(yè)面。
2、lang語(yǔ)言
用來(lái)定義當(dāng)前文檔顯示的語(yǔ)言：
a、en定義語(yǔ)言為英語(yǔ)
b、zh-CN定義語(yǔ)言為中文
簡(jiǎn)單來(lái)說(shuō)定義為en就是英文網(wǎng)頁(yè)，定義為zh-CN就是中文網(wǎng)頁(yè)
其實(shí)對(duì)于文檔顯示來(lái)說(shuō)，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文
這個(gè)屬性對(duì)于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的
3、charset字符集
字符集是多個(gè)字符的集合，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字
在標(biāo)簽內(nèi)，通過(guò)標(biāo)簽的charset屬性來(lái)規(guī)定HTML文檔應(yīng)該使用哪種字符編碼。
charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱(chēng)為萬(wàn)國(guó)碼，基本包含了全世界所有國(guó)家需要用到的字符。
注意：上面語(yǔ)法是必須寫(xiě)的代碼，否則可能引起亂碼的情況，一般情況下，統(tǒng)一使用"UTF-8"編碼，盡量統(tǒng)一寫(xiě)成標(biāo)準(zhǔn)的"UTF-8",不要寫(xiě)成"utf-8"或"UTF8"。
//d、HTML常用標(biāo)簽
//d.1標(biāo)簽語(yǔ)義
學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個(gè)標(biāo)簽的語(yǔ)義，簡(jiǎn)單理解就是指標(biāo)簽的含義，即這個(gè)標(biāo)簽是用來(lái)干嘛的
根據(jù)標(biāo)簽的語(yǔ)義，在合適的地方給一個(gè)最為合理的標(biāo)簽，可以讓頁(yè)面結(jié)構(gòu)更清晰。
//d.2標(biāo)題標(biāo)簽
-
(重要)
為了使網(wǎng)頁(yè)更具有語(yǔ)義，我們經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的網(wǎng)頁(yè)標(biāo)題集
-
特點(diǎn)：
1、加了標(biāo)題的文字會(huì)變得更加粗，字號(hào)也會(huì)依次變大。
2、一個(gè)標(biāo)題獨(dú)占一行。
//d.3段落和換行標(biāo)簽（重要）
在網(wǎng)頁(yè)中，要把文字有條理地顯示出來(lái)，就需要將這些文字分段顯示，在HTML標(biāo)簽中，
標(biāo)簽用于定義段落，它可以將整個(gè)網(wǎng)頁(yè)分為若干段落。
<p>我是一個(gè)段落標(biāo)簽</p>標(biāo)簽語(yǔ)義：可以把HTML文檔分割為若干段落。
特點(diǎn)：
1、文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。
2、段落和段落之間保有一個(gè)較大的空隙。
在HTML中，一個(gè)段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動(dòng)換行，如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽
<br />
單詞break的縮寫(xiě)，意為打斷，換行。
特點(diǎn)：
1、單標(biāo)簽
2、
標(biāo)簽只是簡(jiǎn)單地開(kāi)始新的一行，跟段落不一樣，段落之間會(huì)插入一些垂直的間距。
//d.4文本格式標(biāo)簽
在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體，斜體或下劃線等效果，這時(shí)就需要用到HTML中的文本格式標(biāo)簽，使文字以特殊的方式顯示
標(biāo)簽語(yǔ)義：突出重要性，比普通文字更重要。
語(yǔ)義 | 標(biāo)簽 | 說(shuō)明 |
加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong></strong>標(biāo)簽加粗，語(yǔ)義更強(qiáng)烈 |
傾斜 | <em><em> 或者<i><i> | 更加推薦使用<em><em>標(biāo)簽，語(yǔ)義更加強(qiáng)烈 |
刪除線 | <del><del>或者<s><s> | 更加推薦使用<del><del>標(biāo)簽，語(yǔ)義更加強(qiáng)烈 |
下劃線 | <ins><ins>或者<u><u> | 更加推薦<ins><ins>標(biāo)簽，語(yǔ)義更加強(qiáng)烈 |
//d.5<div>和<span>標(biāo)簽
<div>和<span>是沒(méi)有語(yǔ)義的，它們就是一個(gè)盒子，用來(lái)裝內(nèi)容。
<div>這是頭部</div>
<span>今日價(jià)格</span>div是division的縮寫(xiě)，表示分割，分區(qū)，span意為跨度，跨距。
特點(diǎn)：
1、<div>標(biāo)簽用來(lái)布局，但是現(xiàn)在一行只能放一個(gè)<div>，大盒子。
2、<span>標(biāo)簽用來(lái)布局，一行上可以有多個(gè)<span>,小盒子
//d.6圖像標(biāo)簽和路徑（重點(diǎn)）
1、圖像標(biāo)簽
在HTML標(biāo)簽中，<img>標(biāo)簽用于定義HTML頁(yè)面中的圖像。
<img src="圖像url"/>單詞image的縮寫(xiě)，意為圖像
src是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：簡(jiǎn)單理解就是屬于這個(gè)圖像標(biāo)簽的特性。
圖像標(biāo)簽的其他屬性：
屬性 | 屬性值 | 說(shuō)明 |
src | 圖片路徑 | 必須屬性 |
alt | 文本 | 替換文本，圖像不能顯示的文字 |
title | 文本 | 提示文本，鼠標(biāo)放到圖像上，顯示文字 |
width | 像素 | 設(shè)置圖像的寬度 |
height | 像素 | 設(shè)置圖像的高度 |
border | 像素 | 設(shè)置圖像的邊框粗細(xì) |
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
