文章目錄
- HTML基礎
- CSS基礎
- 串列
- 表格
- 表單
- 塊元素、行內元素、行內塊元素
HTML基礎
- 定義
超文本標記語言 HyperText Markup Language - 基本結構
<!DOCTYPE html> <!--檔案宣告型別，宣告幫助瀏覽器正確地顯示網頁-->
<html> <!--html檔案的根標簽-->
<head> <!--網頁頭部資訊，用來做網頁的基本配置-->
<meta charset="utf-8"> <!--網頁字符編碼-->
<title>html的基本結構</title> <!--網頁在瀏覽器視窗中顯示的標題-->
</head>
<body>此標簽中寫網頁中顯示的內容</body>
</html>
- 相對路徑與絕對路徑
- 相對路徑
相對于參考檔案本身去定位被參考的檔案地址- “./” 表示當前檔案所在目錄下
- “…/” 表示當前檔案所在目錄下的上一級目錄
- 絕對路徑
相對于磁盤的位置去定位檔案的地址
- 相對路徑
- 常用字符物體
- 空格
- “<” <
- “>” >
- 標簽
- 標簽型別
- 單標簽
<br /> - 雙標簽
<h1></h1>
- 單標簽
- 常用標簽
- 塊元素標簽
- 標題標簽
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>- 段落標簽
<p>段落1</p> <p>段落2</p>- 通用塊容器標簽
<div>第一個div元素</div> <div>第二個div元素</div> - 行內元素標簽
- 超鏈接標簽
<!--target常用屬性：_blank：在新視窗中打開；_self：默認，在相同的框架中打開；--> <a href="http://www.baidu.com" target="_blank">內容元素</a> <a href="本地.html">本地鏈接</a> <!--空鏈接寫法：1、# 2、javascript:; 3、javascript:void(0) --> <!--錨點鏈接：設定ID，href屬性寫#id名-->- 通用行內容器標簽
<span>行內容器標簽</span>- 圖片標簽
<img src="images/pic.jpg" alt="圖片加載失敗時的提示文字" title="游標放在圖片上的提示文字"/> - 其他標簽
- 換行標簽 <br />
- html注釋
<!-- 這是一段注釋 -->
- 塊元素標簽
- 標簽型別
- 標簽語意化
在合適的地方用合適的標簽；語意化做的好的，搜索引擎排名更前- 帶語意的標簽
- h1~h6
- p
- img
- a
- <em>標簽 表示語氣中的強調詞
- <i>標簽 表示專業詞匯
- <b> 表示檔案中的關鍵詞或產品名
- <strong> 表示非常重要的內容
- …
- 不帶語意的標簽
- div
- span
- 帶語意的標簽
- HTML5新標簽
這些新標簽只能使用在手機網站的書寫中，可以提升搜索引擎對網站的優化，不能用在PC端網站上，因為IE低版本不識別這些新標簽，- <header>頭部</header>
- <nav>導航欄</nav>
- <aside>側導航</aside>
- <article>文章塊</article>
- <footer>底部</footer>
CSS基礎
- 定義
Cascading Style Sheets，層疊樣式表 - 用途
html只負責檔案的結構和內容，表現形式完全交給CSS，使html檔案變得更加簡潔 - 注釋
/*注釋內容*/ - 基本語法
選擇器 { 屬性：值； 屬性：值； 屬性：值；} - 引入方式
- 行內式
<div style="width:100px; height:100px; background:red ">......</div>- 嵌入式
<head> <style type="text/css"> div{ width:100px; height:100px; background:red } ...... </style> </head>- 外鏈式
<head> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> - 常用選擇器
- 標簽選擇器 --> 一般用來樣式重置（清除默認樣式）
<style> div{color:red} </style> ...... <div>這是第一個div</div> <div>這是第二個div</div>- 類選擇器
通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，可復用
<style> .blue{color:blue} .big{font-size:20px} .box{width:100px;height:100px;background:gold} </style> ...... <div class="blue">....</div> <h3 class="blue big box">....</h3> <p class="blue box">....</p>- id選擇器
通過id來選擇元素，id唯一，但類名可以有多個，一般配合js使用（不常用）
<style> #id1{color: blue} </style> ...... <p id="id1">content</p>- 層級選擇器
主要應用在標簽嵌套的結構中，層級選擇器可與標簽選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用范圍
<style> .con{width:300px;height:80px;background:green} .con span{color:red} .con .pink{color:pink} .con .gold{color:gold} </style> ...... <div class="con"> <span>....</span> <a href="#" class="pink">....</a> <a href="#" class="gold">...</a> </div> <span>....</span> <a href="#" class="pink">....</a>- 組選擇器
多個選擇器有同樣的樣式設定
<style> .box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} </style> ... <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div>- 偽類及偽元素選擇器
常用的偽類選擇器有hover，表示滑鼠懸浮在元素上時的狀態；偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容
<style> .box1:hover{color:red} .box2:before{content:'行首文字';} .box3:after{content:'行尾文字';} </style> ... <div class="box1">....</div> <div class="box2">....</div> <div class="box3">....</div> - 權重對比
- 引入方式
- 外鏈和內嵌權重相同，先寫的會被后寫的覆寫；
- 行內css權重最大，如果想覆寫他，就只能給樣式中添加** !import** 來把權重提高
- 選擇器權重計算
- 標簽選擇器權重值：1
- 類/偽類選擇器權重值：10
- id選擇器權重值：100
- css行內式寫法權重值：1000
- !important修飾權重值：10000
- 層級選擇器權重值累加計算
- 組選擇器權重值不會累加
- 權重值相等時先寫的會被后寫的覆寫
- 從父元素繼承的選擇器權重值為0
- 引入方式
- 常用屬性
-
布局常用樣式屬性
- width
- height
- background
- border
border:1px solid/dashed black --> 設定元素四周邊框是1像素寬的黑色實線/虛線- border-top
- border-left
- border-right
- border-bottom
- float 設定元素浮動
- float:left; float:right;
- 浮動的元素會向左或向右浮動，碰到父元素邊界、其他元素才停下來
- 浮動讓行內元素或塊元素轉化為有浮動特性的行內塊元素(此時不會有行內塊元素間隙問題)
- 父元素如果沒有設定尺寸(一般是高度不設定)，父元素內整體浮動的子元素無法撐開父元素，父元素需要清除浮動
- 清除浮動
- 父級上增加屬性overflow：hidden
- 在最后一個子元素的后面加一個空的div，給它樣式屬性 clear:both（不推薦）
- 使用成熟的清除浮動樣式類，clearfix
<style> .clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;} </style> ... <div class="con2 clearfix"> - 設定浮動可以解決的問題小結
- 行內元素及行內塊元素的間距問題
- 垂直外邊距margin-top/bottom不再合并問題
- margin-top塌陷問題 --> 子元素無法定位父元素的邊界，也可以給父元素加border
- 排列一行的元素默認以文字基線對齊的問題
- 但如果要實作子元素在父元素中水平居中時不能用浮動
- margin 設定外邊距（元素和父元素的距離）
- margin的寫法：
- 四邊都為10px --> margin:10px;
- 上下10px，左右20px --> margin:10px 20px;
- 上10px，左右20px，下30px --> margin:10px 20px 30px;
- 上10px，右20px，下30px，左40px（順時針） --> margin:10px 20px 30px 40px;
- margin-top、margin-left、margin-right、margin-bottom
- margin左右值設為auto可以實作水平居中
- margin的寫法：
- padding 設定內邊距（元素包含的內容和元素邊框的距離）
寫法同margin - 盒子模型 --> 區分margin,padding
margin是與父元素的關系，padding是與子元素的關系
真實大小：width/height+border+padding（margin不影響）
-
文本常用樣式屬性
- color
- font-size
- font-family
- font-weight
- font-style:normal/italic
- line-height 設定行高
line-height:24px; --> 表示文字高度+文字上下的間距是24px，也就是每一行占有的高度是24px - text-align
一般用在塊元素中，行內元素寬度和內容決定 - text-indent 設定文字首行縮進
em為相對長度單位，縮進兩格即為2em - text-decoration 修飾文本
text-decoration:none; --> 將文字下劃線去掉
-
overflow屬性設定元素溢位
當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式 --> overflow:hidden- visible 默認值，內容不會被修剪，會呈現在元素框之外
- hidden 內容會被修剪，并且其余內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能
- scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容
- auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容，
-
串列
- 無序串列
<ul>
<li><a href="#">串列標題一</a></li>
<li><a href="#">串列標題二</a></li>
<li><a href="#">串列標題三</a></li>
</ul>
- 有序串列
<ol>
<li><a href="#">串列標題一</a></li>
<li><a href="#">串列標題二</a></li>
<li><a href="#">串列標題三</a></li>
</ol>
- 自定義串列
<!--以 <dl> 標簽開始，每個自定義串列項以 <dt> 開始，每個自定義串列項的定義以 <dd> 開始，-->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- 串列常用樣式屬性
list-style 設定串列中的小圓點/標號 --> list-style:none
表格
- 表格相關標簽和屬性
- <table> 定義表格
- <caption> 定義表格標題
- <th>定義表格的表頭
- <tr>定義表格的行
- <td>定義表格單元
- <col>定義用于表格列的屬性
- colspan屬性 設定單元格水平合并，設定值是數值
- rowspan屬性 設定單元格垂直合并，設定值是數值
- 表格常用樣式屬性
border-collapse 設定表格的邊線合并，如：border-collapse:collapse;
表單
- 表單相關標簽和屬性
- <form>標簽 定義整體的表單區域
- action屬性 定義表單資料提交地址
- method屬性 定義表單提交的方式，一般有“get”方式（默認）和“post”方式
- <label>標簽 為表單元素定義文字標注
- <input>標簽 定義通用的表單元素
- type屬性
- type=“text” 定義單行文本輸入框
- type=“password” 定義密碼輸入框
- type=“radio” 定義單選框
- 如果想讓文字點擊能切換，那么要加label標簽，并設定for屬性和對應的單選按鈕的ID屬性值一致；
- 必須給一組單選按鈕添加name值，才可以實作單選效果；
- 設定默認選中狀態，要給單選按鈕添加checked=“checked”
<form action="" method="post"> 性別: <input type="radio" name="xb" id="man" checked="checked"/><label for="man">男</label> <input type="radio" name="xb" id="woman" /><label for="woman">女</label> <input type="radio" name="xb" id="secret" /><label for="secret">保密</label> </form>- type=“checkbox” 定義復選框
- type=“file” 定義上傳檔案
- type=“submit” 定義提交按鈕
- type=“reset” 定義重置按鈕
- type=“button” 定義一個普通按鈕
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名 --> name和value屬性配合傳值到后端
- autofocus="autofocus"屬性 重繪后讓第一個輸入框呈默認選中狀態
- outline:none屬性 文本輸入框清除高亮效果
- placeholder屬性 代表提示資訊
placeholder屬性IE低版本不兼容，但實際作業中還要使用，符合漸進增強（隨著瀏覽器版本的提升，效果越來越好）、優雅降級（在高版本顯示效果好的前提下，保證了低版本瀏覽器不混亂）理論
- type屬性
- <textarea>標簽 定義多行文本輸入框
不能設定rows、cols屬性，因為瀏覽器決議的結果都不一樣，必須要設定width、height屬性才可以 - <select>標簽 定義下拉表單元素
- <option>標簽 與<select>標簽配合，定義下拉表單元素中的選項
- 多組下拉選單：添加一個optgroup標簽，并設定label屬性作為提示文字
- 默認選中狀態：需要給對應的option添加selected屬性
<select name="" id=""> <optgroup label="北京"> <option>順義</option> <option>昌平</option> <option>海淀</option> </optgroup> <optgroup label="深圳"> <option>羅湖區</option> <option selected="selected">福田區</option> <option>寶山區</option> </optgroup> </select>
- <form>標簽 定義整體的表單區域
塊元素、行內元素、行內塊元素
- 塊元素（行元素）
- 支持全部的樣式
- 如果沒有設定寬度，默認的寬度為父級寬度100%
- 盒子占據一行（即使設定了寬度）
- 行內元素（行內元素）
- 不支持寬、高、margin上下、padding上下
- 寬高由內容決定
- 多個元素并在一行，如果遇到父元素邊界會自動換行
- 代碼換行，盒子之間會產生間距
- 解決行內元素間隙方式
- 去掉行內元素之間的換行
- 將行內元素的父級設定font-size為0，行內元素自身再設定font-size
- 設定浮動
- 解決行內元素間隙方式
- 行內元素直接設定文本水平對齊無效果，但父元素可以用text-align屬性設定子元素水平對齊方式
- 行內塊元素（行內塊元素）–> 主要特性是行內元素，結合了塊元素
- 支持全部樣式（支持寬高、margin、padding）
- 如果沒有設定寬高，寬高由內容決定
- 多個元素并在一行，如果遇到父元素邊界會自動換行
- 代碼換行，盒子會產生間距
- 可以用text-align屬性設定子元素水平對齊方式
- display屬性相互轉化元素型別
- none 元素隱藏且不占位置
- block 元素以塊元素顯示
- inline 元素以行內元素顯示
- inline-block 元素以行內塊元素顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>橫向頁碼顯示</title>
<style>
.page{
/* 串列樣式重置 */
margin: 0px;
padding: 0px;
list-style: none;
width: 960px;
height: 40px;
border: 1px solid lightgray;
/*設定整個串列水平居中*/
margin: 50px auto 0px;
/* 設定父元素的水平居中來讓子元素整體水平居中 */
text-align: center;
/* 讓內部的子元素之間沒有間距（解決行內元素間隙方式2） */
font-size: 0px;
}
.page li{
/* li標簽是塊元素，默認縱向排列，轉成行內塊之后就可以排列在一行 */
display: inline-block;
/* 控制子元素的子體大小 因為字體大小會繼承 */
font-size: 12px;
}
.page a{
color: black;
text-decoration: none;
background-color: gold;
/* 讓a標簽中的文字在黃色框中垂直居中 */
line-height: 26px;
/* 變相讓a標簽加大 */
padding: 0px 9px;
font-family: "Microsoft YaHei";
/* 把行內元素轉換成行內塊 讓它可以設定寬高或內邊距 */
display: inline-block;
height: 26px;
/*增加間距*/
margin: 7px 5px 0px;
}
.page a:hover {
color: white;
background-color: red;
}
</style>
</head>
<body>
<ul class="page">
<li><a href="#">上一頁</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><span>...</span></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">下一頁</a></li>
</ul>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/261402.html
標籤：其他
下一篇：VSCode安裝教程（超詳細）