① B/S架構(gòu):Browser/Server(瀏覽器/服務(wù)器的交互形式。)
② C/S架構(gòu):Client/Server(客戶端/服務(wù)器的交互形式。)
① 什么是HTML?② 怎么開發(fā)HTML?③ 怎么運(yùn)行HTML?
?由大量的標(biāo)簽組成,每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。
?超文本:圖片、聲音、視頻等
?編輯器有:HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運(yùn)行
④ HTML是誰制定的?
?W3C制定了HTML的規(guī)范:每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼
?HTML規(guī)范目前最高的版本是:HTML5.0,簡(jiǎn)稱H5
?我們現(xiàn)在主要學(xué)的HTML4.0(基本用法)
?w3school:先出現(xiàn)的,和W3C無關(guān)
?w3cschool:后出現(xiàn)的,和W3C無關(guān)
?W3C制定了很多規(guī)范:HTML/XML/http協(xié)議/https協(xié)議……
頁面效果圖:
超鏈接的作用:
通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。
效果圖:
地址欄提交的信息:
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性;&position=ln&myFile=&myHidden=
14、表單的說明:
<html></html>雙標(biāo)簽 開頭結(jié)尾 HTML標(biāo)簽為最大的標(biāo)簽 稱為根標(biāo)簽
<head></head> 文檔頭部標(biāo)簽 且必須設(shè)置title
<title></title> 頁面標(biāo)題
<body></body> 文檔的主體 包含頁面的內(nèi)容
<h1>-<h6> HTML提供6個(gè)等級(jí)的頁面標(biāo)題 有大到小
<p></p> p標(biāo)簽用于定義段落 可以將頁面分為若干個(gè)段落 根據(jù)窗口大小自動(dòng)換行
<br/>單標(biāo)簽 換行標(biāo)簽 (break打斷)
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內(nèi)容
<div></div> 表示分割分區(qū) 用來布局 一行一個(gè) 大盒子
<span></span>意為跨度,跨距 一行可以哦有多個(gè) 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標(biāo)簽包含多個(gè)屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標(biāo)放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑:以引用文件所在位置為參考基礎(chǔ),而建立出的目錄路徑
分類:下級(jí)路徑/ 上級(jí)路徑../
絕對(duì)路徑:是指目錄下的絕對(duì)位置,如硬盤中的路徑或網(wǎng)路地址
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標(biāo)的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認(rèn)值 _blank為在新窗口打開方式
錨點(diǎn)鏈接:可以快速到頁面某個(gè)位置
在鏈接文本中的href屬性中,設(shè)置屬性值為#名字的形式,如<a href="#two">目標(biāo)</a>
找到目標(biāo)位置標(biāo)簽,里面添加一個(gè)id屬性 = 名字,如:<h3 id="two">目標(biāo)</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結(jié)果 | 描述 |
< | < | 小于號(hào)或顯示標(biāo)記 |
> | > | 大于號(hào)或顯示標(biāo)記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號(hào) |
? | ? | 已注冊(cè) |
? | ? | 版權(quán) |
? | ? | 商標(biāo) |
半個(gè)空白位 | ||
一個(gè)空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標(biāo)簽
<tr></tr> 標(biāo)簽用于定義表格中的行,必須嵌套在<table></table>標(biāo)簽中
<tb></tb> 用于定義表格的單元格,必須嵌套在<tr></tr>標(biāo)簽中
<td> 元素中的文本通常是普通的左對(duì)齊文本。字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容
表頭單元格標(biāo)簽:
<th>標(biāo)簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現(xiàn)為粗體并且居中。
表格屬性:
align left center right 規(guī)定表格相對(duì)于周圍元素的對(duì)齊方式
border 1or"" 規(guī)定表格單元是否擁有邊框默認(rèn)為"",表示沒有邊框
cellpadding 像素值 規(guī)定單元邊沿與其內(nèi)容的空白,默認(rèn)1像素
cellspacing 像素值 規(guī)定單元格直接的空白 默認(rèn)2像素
with 像素值or百分比 規(guī)定表格的寬度
合并單元表格方式:
跨行合并:rowspan="合并單元格的個(gè)數(shù)"
跨列合并:colspan="合并單元格的個(gè)數(shù)"
<ul>標(biāo)簽表示無序列表 里面只能包含li
<ol>有序標(biāo)簽 里面只能包含li
<li>相當(dāng)于一個(gè)容器定義列表項(xiàng) 與<ui>or<li>嵌套使用 li里面可以包含任何標(biāo)簽
<dl>標(biāo)簽用于定義描述列表(或自定義列表),該標(biāo)簽會(huì)與<dt>(定義項(xiàng)目和名字)和<dd>(描述每一個(gè)項(xiàng)目名字)一起使用
標(biāo)簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個(gè)多行的輸入控件) |
<label> | 定義了 <input> 元素的標(biāo)簽,一般為輸入標(biāo)題 |
<fieldset> | 定義了一組相關(guān)的表單元素,并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標(biāo)題 |
<select> | 定義了下拉選項(xiàng)列表 |
<optgroup> | 定義選項(xiàng)組 |
<option> | 定義下拉列表中的選項(xiàng) |
<button> | 定義一個(gè)點(diǎn)擊按鈕 |
<datalist> New | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
<keygen> New | 定義了表單的密鑰對(duì)生成器字段 |
<output> New | 定義一個(gè)計(jì)算結(jié)果 |
<input>標(biāo)簽用于收集用戶信息 包含一個(gè)type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />
屬性值:
button | 定義可點(diǎn)擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動(dòng)腳本)。 |
checkbox | 定義復(fù)選框。 |
file | 定義輸入字段和 "瀏覽"按鈕,供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。 |
submit | 定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。 |
text | 定義單行的輸入字段,用戶可在其中輸入文本。默認(rèn)寬度為 20 個(gè)字符。 |
<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)。 label是標(biāo)注的意思
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
.標(biāo)題標(biāo)簽:<h1> </h1>
2.段落標(biāo)簽:<p> </p>
3.水平線標(biāo)簽:<hr/>
4.換行標(biāo)簽:<br/>
5.div span標(biāo)簽:兩者無語義,相當(dāng)于一個(gè)盒子,用來布局。兩者區(qū)別:<div></div>會(huì)自動(dòng)換行。
6.文本格式化標(biāo)簽:<b> </b> <strong> </strong> 粗體
<i> </i> <em> </em> 斜體
<s> </s> <del> </del> 加刪除線
<u> </u> <ins> </ins> 加下劃線
7.標(biāo)簽屬性:<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2">內(nèi)容</標(biāo)簽名>
8.圖像標(biāo)簽:<img />
屬性 屬性值
src 路徑
alt 文本(圖片不顯示時(shí)顯示的文本)
title 鼠標(biāo)經(jīng)過時(shí)的懸浮文本
width 寬度
height 高度
border 邊框?qū)挾?/p>
9.鏈接標(biāo)簽:<a href="目標(biāo)" target="窗口彈出方式"> </a>
瞄點(diǎn)定位:<a herf="#id名"> </a> <h3 id="文本"> </h3>
target="-self"本窗口彈出
target="-blank"打開新窗口彈出
class與id區(qū)別:class不唯一,id唯一
10.base標(biāo)簽:<base target="-blank">
此標(biāo)簽必須放在<head> </head>里
11.常見特殊字符:  空格
< 小于號(hào)
> 大于號(hào)
© 版權(quán)
12.注釋標(biāo)簽:<!--注釋的文本 -->
13.路徑:
相對(duì)路徑:同一級(jí) <img src="文件名" />
下一級(jí)<img src="下一級(jí)文件名/文件名">
上一級(jí)<img src="../文件名"/>(上兩級(jí)../../,依次類推)
絕對(duì)路徑:"D:wen\word"或"http://www.baidu.com"
14.列表
無序列表:<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
......
</ul>(ul里不可放其他標(biāo)簽,li里可以放其他標(biāo)簽,后者同理)
有序列表:<ol>
<li> </li>
<li> </li>
......
</ol>
自定義列表:術(shù)語,名詞的解釋描述
<dl>
<dt>名詞1</dt>
<dd>解釋1</dd>
<dt>名詞2</dt>
<dd>解釋2</dd>
......
</dl>
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。