html基礎知識整理

時間 2019-11-12

標籤 html 基礎知識整理欄目 HTML 简体版

原文原文鏈接

HTML

1.互聯網原理：上網即請求數據php

1.1 html:超文本標記語言css

1.2服務器做用：存儲數據html

1.3瀏覽器做用：接收和發送http請求瀏覽器

1.4 http:超文本傳輸協議服務器

html骨架：《html>ide

<head>配置HTML頁面</head>佈局

《body》書寫網頁內容《/body>學習

</html>測試

DTD：文檔定義類型ui

DTD做用：說明使用的html是哪種規範

html標籤：

Head:配置html頁面

title：標題

meta: 配置字符集

body: 書寫網頁內容

小測試：h1標籤他的用做？

標明語義，加粗是css完成的

html語法：對換行，空格,縮進不敏感，對嵌套敏感

標籤之間有空白摺疊現象

標籤語法：

標籤通常是成對出現，單標籤除外

標籤名必須用一對加括號包裹

結束標籤要書寫關閉符號

標籤分類：

文本標籤：p span input img b u i a

容器級標籤：div ul ol li h1

標籤屬性： key=」value」

<p></P>

路徑：

相對路徑：相對與網頁的路徑

同級查找：圖片名.後綴名

子級查找：images/圖片名.後綴名

上級查找:../images/圖片名.後綴名

HTML

1、div+css佈局

絕大部分網頁佈局都是div+css佈局。

優勢：結構和樣式分離，偏於代碼的維護

結構及樣式以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css">
/*清除默認樣式*/
* {
padding: 0px;
margin: 0px;
}
.header {
width: 100%;
height: 100px;
background-color: #eee;
}
.logo {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.nav {
float: right;
width: 600px;
height: 100px;
background-color: red;
}

.content {
width: 100%;
height: 500px;
background-color: #eee;
margin-top: 30px;
}
.aside {
float: left;
width: 300px;
height: 500px;
background-color: green;
}
.main {
float: right;
width: 600px;
height: 500px;
background-color: green;
}
.footer {
width: 100%;
height: 100px;
background-color: #eee;
margin-top: 30px;
}
</style>
</head>
<body>


<div class="header">
<div class="logo">logo</div>
<div class="nav"">導航欄</div>
</div>

<div class="content">
<div class="aside">aside側邊欄</div>
<div class="main">main內容</div>
</div>

<div class="footer" > footer</div>
</body>
</html>

2、列表

列表有3種：ul無序列表，ol有序列表，dl自定義列表

列表：相相似，相近的內容使用列表語義

2.1無序列表

做用：給文本添加無序列的語義

ul:unordered list

li: list item

ul是容器級標籤，li也是容器級標籤，內部能夠書寫任何標籤，甚至能夠書寫ul>li

ul內部能夠嵌套一個或者多個li標籤，li之間沒有前後順序

無序列表前面的小圓點，樣式是css設置。

1 list-style: square;

2.2 有序列表

做用：給文本添加有序列表的語義

ol:ordered list

li:list item

Ol>li

規則：

每個列表項之間有順序之分

ol,li也是一組成對出現的標籤，ol必定嵌套li。

ol內部嵌套一個或者多個Li

ol,li都是容器級標籤，ol內部只能書寫Li，li是容器級能夠書寫任何內容

有序列表前面的數字，css設置

1 list-style: none;/*清除數字*/

2.3 自定義列表

做用：給文本添加自定義列表語義

dl: definition list

dt: definition title

dd: definition description

Dl>dt>dd

dl嵌套dt和dd，dt和dd是同級關係，dt是標題，dd是對標題解釋說明（dl>dt+dd）

dl，dt,dd都是容器級標籤

dl內部書寫dt和dd，能夠書寫多組dt和dd,dd是對dt解釋說明，dd能夠有多條也能夠沒有。

通常咱們在使用dl時，只嵌套一組dt和dd，便於樣式書寫。

結構：

1

2 <dl>

3

4 <dt>蘋果公司</dt>

5 <dd>蘋果是美國公司</dd>

6 <dd>蘋果公司收益不少</dd>

7 </dl>

9 <dl>

10

11 <dt>華爲公司</dt>

12 <dd>華爲總部在深圳</dd>

13 <dd>是國內很好的公司</dd>

14 </dl>

17 <dl>

18 <dt>小米公司</dt>

19

20 </dl>

樣式：

1 <style type="text/css">

2 dl {

3 float: left;

4 width: 300px;

5 height: 400px;

7 margin-left: 30px;

8 }

9 </style>

3、表格

3.1 基礎表格

table: 表格

tr: 行

td: 單元格

關係：

table > tr > td

最簡單表格：每一行單元格個數相同

1 <table>

2 <tr>

3 <td>第1行第1個單元格</td>

4 <td>第1行第2個單元格</td>

5 <td>第1行第3個單元格</td>

6 </tr>

7 <tr>

8 <td>第2行第1個單元格</td>

9 <td>第2行第2個單元格</td>

10 <td>第2行第3個單元格</td>

11 </tr>

12 <tr>

13 <td>第3行第1個單元格</td>

14 <td>第3行第2個單元格</td>

15 <td>第3行第3個單元格</td>

16 </tr>

17 </table>

若是表格有表頭的概念？？？

td替換成th便可

3.2 合併單元格

單元格合併利用td（th）兩個屬性

跨行合併colspan

列合併rowspan

屬性值：是數字合併幾行（列）就書寫幾，沒有單位

1 <table>

2 <tr>

3 <td colspan="2">1</td>

4 <td>2</td>

5 <td>3</td>

6 </tr>

7 <tr>

8 <td>4</td>

9 <td rowspan="2">5</td>

10 <td colspan="2">6</td>

11 </tr>

12 <tr>

13 <td>7</td>

14 <td>8</td>

15 <td>9</td>

16 </tr>

17 </table>

3.3 三個劃分區域的語義標籤

標題caption

表頭區域thead

表格主體tbody

關係：table>caption+(thead>tr>th)+(tbody>tr>td)

1 <table>

2

3 <caption>人員名單</caption>

4

5 <thead>

6 <tr>

7 <th>姓名</th>

8 <th>性別</th>

9 <th>年齡</th>

10 </tr>

11 </thead>

12

13 <tbody>

14 <tr>

15 <td>小明</td>

16 <td>男</td>

17 <td>20</td>

18 </tr>

19 <tr>

20 <td>小明</td>

21 <td>男</td>

22 <td>20</td>

23 </tr>

24 <tr>

25 <td>小明</td>

26 <td>男</td>

27 <td>20</td>

28 </tr>

29 <tr>

30 <td>小明</td>

31 <td>男</td>

32 <td>20</td>

33 </tr>

34 </tbody>

35 </table>

4、表單

4.1 form標籤

將全部的表單元素都書寫在form標籤內部

form標籤是功能標籤不是結構標籤

提交位置：action

提交方式：method

1 <form action="1.php" method="get"></form>

表單元素：提供給用戶進行輸入或者選擇控件

屬性：type，根據type屬性值，有不一樣的表單類型

4.2 單行文本框

type: text

name: 名字

value: 默認值

1 請輸入用戶名：<input type="text" name="yonghuming" value="用戶名" />

4.3 密碼框

Type：password

1 密碼：<input type="password" name=""mima" />

4.4 單選框

type屬性值：radio

規則：同一組單選框，必須有相同的name名

表單被選中ckeched

1 <p>

2 請選擇性別：

3 <input type="radio" name="sex" />男性

4 <input type="radio" name="sex" checked="checked" />女性

5 </p>

4.5 label標籤

做用：能夠綁定單選框

1 請選擇性別：

2 <input type="radio" name="sex" id="nan" /><label for="nan">男性</label>

3 <input type="radio" name="sex" id="nv" checked="checked" /><label for="nv">女性</label>

4.6 複選框

type屬性值：checkbox

規則：

1 <p>

2 請選擇愛好：

3 <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">學習</label>

4 <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>

5 </p>

4.7 按鈕

三種按鈕：

普通按鈕： button

提交按鈕：submit

重置按鈕：reset(將用戶輸入清空)

1 普通按鈕：<input type="button" value="按鈕" />

2 提交按鈕：<input type="submit" value="當即註冊" />

3 重置按鈕：<input type="reset" />

<a>標籤能夠模擬按鈕

4.8 文本域

textarea:文本域是雙標籤

也能夠書寫默認文本，在標籤中間

1 <textarea name="" id="" cols="30" rows="10">請書寫意見或者建議</textarea>

4.9 下拉框

Select>option

1 請選擇你喜歡的城市：

2 <select name="city" id="city">

3

4 <option value="01">北京</option>

5 <option value="02" selected="selected">上海</option>

6 <option value="03">深圳</option>

7 <option value="04">廣州</option>

</select>

通常咱們使用無序列表模擬下拉框

5、html雜項

5.1 註釋

快捷鍵：ctrl + /

特色：註釋不會渲染在瀏覽器頁面中

做用：通常標註某個結構開始，結束,或者不顯示瀏覽器中的代碼能夠添加註釋

1

5.2 字符實體

字符實體（轉義字符）：一些有特殊功能符號，直接書寫在代碼在瀏覽器渲染時不能正常顯示咱們想要的效果

語法：

1 &關鍵字;

1 空格：  

2 大於號：>>

3 小於號：<<

4 版權信息：©&copy

5.3 廢棄標籤

b,u,i,em,strong經常使用作小鉤子（文本級標籤）

b: 默認加粗

u: 默認下劃線

i: 默認傾斜

em: 語義增強，傾斜

strong: 語義增強，加粗

5.4 色值表示法

單詞表示法：

1 red,lightblue

十六進制表示法：#

1 color: #db9408;

rgb(,,)表示法

1 color: rgb(219,148,8);

總結：

無序列表：ul>li

有序列表：ol>li

自定義列表：dl>dt+dd

表格：

table > caption + (thead > tr >th)+( tbody > tr > td)

單元格合併：屬性值數字

rowspan:

colspan:

表單：

4 <form action="">

5 單行文本框：<input type="text" value="默認文本" />

6 密碼框：<input type="password" />

7 單選框：<input type="radio" name="" checked="checked" value="同一組單選框必須設置相同的name屬性值" /> <lable for=」id名」>

8 複選框：<input type="checkbox" name="" checked="checked" value="同一組複選框必須設置相同的name屬性值" />

9 按鈕：<input type="button" />

10 提交：<input type="submit" />

11 重置：<input type="reset" />

12 文本域：<textarea name="" id="" cols="30" rows="10"></textarea>

13 下拉框：<select name="" id="">

14 <option value=""></option>

15 </select>

16 </form>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。