HTML基礎篇筆記-有解無憂

1、系統結構：

① B/S架構：Browser/Server（瀏覽器/服務器的互動形式，）

Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
B/S架構系統有什么優點和缺點？
優點：升級方便，只升級服務器代碼即可，維護成本低，
缺點：速度慢、體驗不好、界面不炫酷
企業大部分使用B/S架構
B/S架構的系統代表有：京東、百度、天貓等

② C/S架構：Client/Server（客戶端/服務器的互動形式，）

C/S架構的優點和缺點？
優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
缺點：升級麻煩、維護成本較高，
C/S架構的系統代表有：QQ、微信、支付寶等

2、 HTML概述

① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?

① HTML：Hyper Text Markup Language（超文本標記語言）
由大量的標簽組成，每一個標簽都有開始標簽和結束標簽，
超文本：圖片、聲音、視頻等
② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm
編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML檔案就能運行

④ HTML是誰制定的？

④ W3C：世界萬維網聯盟
W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范，HTML也會按照規范去寫代碼
HTML規范目前最高的版本是：HTML5.0，簡稱H5
我們現在主要學的HTML4.0（基本用法）
為了方便中國Web前端程式員開發，提供了大量幫助檔案，為開發提供方便，
w3school：先出現的，和W3C無關
w3cschool：后出現的，和W3C無關
W3C制定了很多規范：HTML/XML/http協議/https協議……

3、第一個HTML

<!-- 
    1、這是HTML的注釋
    2、加上<!doctype html>是HTML5的語法，不加表示HTML4.0
    3、HTML不區分大小寫
-->
<!doctype html>
<!--根-->
<html>
    <!--頭-->
    <head>
        <!--告訴瀏覽器以utf-8的格式打開我當前的檔案-->
        <meta charest = "utf-8" />
        <!--網頁標題-->
        <title>網頁的標題</title>
    </head>
    <!--體-->
    <body>
        網頁的主體內容
    </body>
</html>

4、基本標簽

p：段落標記
h1~h6：標題字，與word的標題字相同
br：換行標記（獨目標記）
hr：橫線（獨目標記）
color：橫線顏色
width：橫線寬度（可以px和%）
pre：預留格式
del：洗掉字
ins：插入字（有下劃線）
b：粗體字
i：斜體字
sup：上標
sub：下標
font：字體標簽
color：字體顏色
size：字體大小（1~7）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
		<p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
第二段第二段第二段第二段第二段第二段第二段第二段第二段</p>
		<h1>一級標題</h1>
		<h2>二級標題</h2>
		<h3>三級標題</h3>
		<h4>四級標題</h4>
		<h5>五級標題</h5>
		<h6>六級標題</h6>
		<br>
		<hr color="red" width="50%">
		<pre>
			for(int i = 0; i < 10; i++) {
				System.out.println(i);
			}
		</pre>
		<del>洗掉字</del><b>粗體字</b><i>斜體字</i>
		log<sub>2</sub><sup>n</sup>  
		<font color="blue" size="7">字體標簽</font>
	</body>
</html>

頁面效果圖：

5、物體符號：為了避免和標簽沖突，所以需要使用物體符號

<：<
>：>
空格： 
注：html中按多個空格鍵，在網頁中只顯示一個空格，

6、HTML表格

table：表格
tr：行
td：列
th：列（比td加粗居中）
合并行：rowspan（一個格占兩個位置）
注：row合并的時候，洗掉下面的單元格
合并列：colspan（一個格占兩個位置）
注：col合并的時候，洗掉哪個沒有要求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			1、cellspacing:表格單元格間距
			2、cellpadding:表格單元邊界與單元內容之間的間距
			3、align：對齊方式（默認：左對齊）
            4、border：表格邊線1px
		 -->
		
		<table border="1px" cellspacing="0" cellpadding="0" width="800px" 
height="150px" align="center" >
			<tr align="center">
				<td>第一行第一列</td>
				<td rowspan="2">第一行和第二行第二列合并了</td>
				<td>第一行第三列</td>
			</tr>
			<tr>
				<td align="center">第二行第一列</td>
				
				<td>第二行第三列</td>
			</tr>
			<tr>
				<td colspan="2" align="center">第三行第一列和第二列合并了</td>
				<td>第三行第三列</td>
			</tr>
		</table>
	</body>
</html>

7、thead、tbody、tfoot標簽

thead、tbody、tfoot不是必須的，便于后期JS撰寫，

8、body的背景顏色和背景圖片

bgcolor：背景色
background：背景圖片
背景圖片在背景色的上面

9、img標簽

src：圖片的路徑
只設定width，height會等比例縮放
只設定height，不起作用
title：滑鼠懸停時顯示的資訊
alt：設定圖片加載失敗時顯示的提示資訊

10、超鏈接或熱鏈接

href：hot references 熱參考；
后面一定是一個資源的地址，
后面的路徑可以是絕對路徑也可以是相對路徑，可以是網路某個資源的路徑，
target：
_blank：新視窗
_self：當前視窗（默認）
_top：頂級視窗
_parent：父級視窗

超鏈接的作用：

通過超鏈接可以從瀏覽器向服務器發送請求，

11、request與response的概念

request：瀏覽器向服務器發送資料（請求）
B --》S
response：服務器向瀏覽器發送資料（回應）
S--》B

12、串列

有序串列：ol
type：1、A、a、I、i
無序串列：ul
type：circle（○）、square（□）、disc（●）

13、表單（重點）

action：寫提交的URL地址
method：默認get；還有post
表單有什么用？
答：收集用戶的資訊，表單展現之后，用戶填寫表單，點擊提交，（submit）
怎么畫一個表單？
答：用form標簽
一個網頁可以有多個表單form
表單最終是需要提交資料給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址，
action屬性用來指定資料提交給哪個服務器
action屬性和超鏈接中的href屬性一樣，都可以向服務器發送請求（request）
http://192.168.111.3:8080/oa/save 這是請求路徑，
表單提交資料最終提交給192.168.111.3機器上的8080埠對應的軟體，
input中的type取值:
radio：單選控制元件
checkbox：多選控制元件
submit：提交控制元件
reset：重置控制元件
button：普通控制元件
text：文本控制元件
password：密碼控制元件
file：檔案控制元件
上傳檔案專用
hidden：隱藏域
網頁上看不到，但是表單提交的時候資料會自動提交給服務器，
input中的value屬性用來指定按鈕上顯示的文本資訊，
超鏈接a與表單form的區別？
答：表達form可以收集資訊，而超鏈接a無法收集資訊，
表單提交里面的按鈕input中屬性必須定義name，不然提交不了，
表單是以什么格式提交資料給服務器的？
http://192.168.11.3:8080/jd/login?username=as&pwd=123
格式：action?name=value&name=value&name=value..
HTTP協議規定的，必須以這種格式提交給服務器
java中String split('&');
重點強調：表單項寫了name屬性的，一律會提交給服務器，不想提交就不要寫name屬性，
文本框和密碼框的value不需要程式員指定，用戶輸入什么value就是什么，
當name沒有寫的時候，該項不會提交給服務器
但是當value沒有寫的時候，value的默認值是空字串"",將空字串提交給服務器，java代碼得到的是：String s = "";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
  
    <form action="http://192.168.0.1:8000/mianhua/cn">
        姓名：<input type="text" name="username" maxlength="3"><br>
        密碼：<input type="password" name="userpassowrd"><br>
        性別：<input type="radio" name="sex" value="1" checked>男
        <input type="radio" name="sex" value="0">女<br>
        愛好：<input type="checkbox" name="aihao" value="study" checked>學習
        <input type="checkbox" name="aihao" value="play">打游戲
        <input type="checkbox" name="aihao" value="dream">做夢<br>
        <textarea name="myText"  cols="30" rows="10">我沒有value屬性；</textarea><br>
        <select name="position" multiple="multiple">
            <option value="ln" selected>遼寧</option>
            <option value="bj">北京</option>
            <option value="sh">上海</option>
        </select>
        <br><br>
        <input type="file" name="myFile"> <br><br>
        <input type="hidden" name="myHidden"><br>
        <input type="text" disabled><br><br>
        <input type="text" readonly><br><br>
        <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">
    </form>
</body>
</html>

效果圖：

地址欄提交的資訊：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=

14、表單的說明：

① 用戶手動輸入的文本框，都不需要給value賦值
② textarea沒有value屬性
③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
④ select中的option屬性：
selected="selected" 為默認選中
size：顯示條目數量
multiple="multiple" 支持多選(select的屬性)
⑤ input的屬性
readonly和disabled：
都是只讀不能修改
資料不會提交
maxlength：設定文本框中輸入的字符數量，

15、HTML中的結點

在HTML檔案中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識，所以在同一個HTML檔案中id值不能重復，
注意：表單提交資料的時候，只和name有關系，和id無關
id有什么作用？
javascript語言：可以對HTML檔案中的任何節點進行增刪改操作，
獲取節點時，通常通過id來獲取節點
HTML檔案是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）

16、div和span

div和span有什么用？
div和span都可以稱為圖層，
有什么用？
圖層的作用為了保證頁面可以靈活的布局，
div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可，
div和span的區別？
div獨占一行
span不會獨占一行

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413454.html

標籤：其他

上一篇：使用SDWebImage獲取影像時，有沒有辦法設定下采樣選項？

下一篇：獲取陣列中最接近值的索引

HTML基礎篇筆記