免費AI編程助手
第一天筆記簡述HTML
一、 WEB標準的概念及組成
1）WEB標準是網(wǎng)頁制作的標準，它不是一個標準，它是根據(jù)網(wǎng)頁的不同組成部分生成的一系列標準。這些標準大部分由W3C起草發(fā)布，也有部分標準由ECMA起草發(fā)布。
W3C制定的結(jié)構(gòu)和表現(xiàn)的標準;
結(jié)構(gòu)：(xhtml ,xml)
表現(xiàn)：(css)
ECMA制定的行為的標準;
行為 （DOM ,ECMASCRIPT）
結(jié)構(gòu)和表現(xiàn)標準：
（1）W3C( World Wide Web Consortium )萬維網(wǎng)聯(lián)盟，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標準機構(gòu)。(制定了結(jié)構(gòu)和表現(xiàn)的標準，非贏利性的。)
（2）行為標準：DOM，ECMASCRIPT（ECMA制定的）歐洲電腦場商聯(lián)合會。
二、Dreamweaver 基本功能
1）新建(ctrl+n)，打開(ctrl+o)， 保存 (ctrl+s)
2）預覽頁面 （F12快捷鍵）
3）建立站點
作用：用來歸納一個網(wǎng)站上所有的網(wǎng)頁、素材以及他們之間的聯(lián)系
CTRL+U(首先參數(shù))里可以更改代碼里的代碼文字大小
F4隱藏顯示所有面版
三、 調(diào)試工具 -瀏覽器
1）PC端調(diào)試工具的使用 -瀏覽器
測試瀏覽器(chrome,ie,firefox)
2）移動端調(diào)試工具chrome可以測試移動端頁面（有很多模擬器）
四、 HTML及相關(guān)概念的介紹
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）。
HTML5指的是HTML的第五次重大修改（第5個版本）
擴展知識點： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>; 聲明了文檔的根元素是 html，它在公共標識符被定義為 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD(Document Type Definition) 中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的 DTD。如果找不到，瀏覽器將使用公共標識符后面的 URL 作為尋找 DTD 的位置 另外，需要知道的是，HTML 4.01 規(guī)定的三種文檔類型、XHTML 1.0 規(guī)定的三種 XML 文檔類型都是：Strict、Transitional 以及 Frameset。 定義文檔類型 分為四種：Strict（嚴格型)、Trasitional（過渡型 常用這種）、Frameset（框架型）、手機瀏覽器DTD mobile 而這句<html xmlns="http://www.w3.org/1999/xhtml">，是在文檔中的<html>; 標簽中使用 xmlns 屬性，以指定整個文檔所使用的主要命名空間。 對于文檔聲明，了解這些就足夠了，現(xiàn)在的html5不再這么繁瑣，只需要： <!DOCTYPE html> <html> 就可以了。 五、HTML5 基本結(jié)構(gòu)
<!doctype html>命名文檔類型 <html>說明我們寫的是標記語言 <head>文件頭部 <meta charset="utf-8"/>編碼格式 <title>html5</title>文件標題（顯示在狀態(tài)欄上的內(nèi)容） </head> <body>
文件主體(所有要寫的內(nèi)容)
</body> </html>
1、文件命名規(guī)則：用英文，不用中文
名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；必須以英文字母開頭。 六、 HTML基本語法
1、<常規(guī)標記>
<標記 屬性=“屬性值” 屬性=“屬性值”></標記>
2.空標記
<標記 屬性=“屬性值” />
七、 XHTML常用標記
1）文本標題（h1-h6）
<h1>一級標題</h1>(header1~header6 )
<h2>二級標題</h2>
...
<h6>六級標題</h6>
八、正文有兩種形式（段落文本和文字列表）
1） 段落(p)
<p>段落文本內(nèi)容</p>
標識一個段落(段落與段落之間有段間距)
2）空格 ( )
（所占位置沒有一個確定的值,這與當前字體字號都有關(guān)系.
3）加粗
加粗有兩個標記
1.<b>加粗內(nèi)容</b>
2.<strong>加粗內(nèi)容</strong>
4）傾斜
傾斜標記
1.<em></em>
2,<i></i>
5） 換行(br)
<br />
換行是一個空標記(強制換行)
6）水平線
<hr />空標記
7）列表(ul,ol,dl)
HTML中有三種列表，分別是：無序列表，有序列表，自定義列表
*無序列表
無序列表組成：
<ul>
<li></li>
．．．．．．
</ul>
*有序列表
有序列表組成：
<ol>
<li></li>
<li></li>
<li></li>
．．．．．．
</ol>
擴展內(nèi)容
有序列表的屬性
知識擴展----有序列表的屬性 1、type:規(guī)定列表中的列表項目的項目符號的類型 語法：<ol type="a"></ol> 1 數(shù)字順序的有序列表（默認值）（1, 2, 3, 4）。 a 字母順序的有序列表，小寫（a, b, c, d）。 A 字母順序的有序列表，大寫（A,B,C,D) i 羅馬數(shù)字，小寫（i, ii, iii, iv）。 I 羅馬數(shù)字，大寫（I, ii, iii, iv）。 2、start 屬性規(guī)定有序列表的開始點。 語法：<ol start="5"></ol> *自定義列表
<dl>
<dt>名詞</dt>
<dd>解釋</dd> (definition description 定義描述)
．．．．．．
</dl>
8）插入圖片
<img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題" />
注:所要插入的的圖片必須放在站點下
*相對路徑的寫法：
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；
3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：
../目標文件所處文件夾名/目標文件文件名+擴展名
title的作用: 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數(shù)標簽都支持title屬性，title屬性就是專門做提示信息的.
alt的作用:alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。
9）超鏈接的應用
語法：
<a href="目標文件路徑及全稱/連接地址">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁面打開方式，默認屬性值_self。
屬性值：_blank 新窗口打開
<a href="#" target="_blank">新窗口打開</a>
10） 數(shù)據(jù)表格的作用及組成
作用：顯示數(shù)據(jù)
表格的組成：
<table >
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一個tr表示一行;一個td表示一列(一個單元格)
*數(shù)據(jù)表格的相關(guān)屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
5）cellspacing="單元格與單元格之間的間距"
6）cellpadding="單元格與內(nèi)容之間的空隙"
7）水平對齊方式：align="left/center/right";
8)合并單元格屬性：
colspan=“所要合并的單元格的列數(shù)"合并列;
一行 一行 一行 rowspan=“所要合并單元格的行數(shù)”合并行;
一行 一行 一行
11） 表單的應用
表單的作用：用來收集用戶的信息的;
1、表單框
<form name="表單名稱" method="post/get" action="">
</form>
1）文本框
<input type="text" value="默認值"/>
2)密碼框 <input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內(nèi)容" />
4)重置按鈕
<input type="reset" value="按鈕內(nèi)容" />
5）單選框/單選按鈕
<input type="radio" name="ral"/>
<input type="radio" name="ral" />
單選按鈕里的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。
checked="checked"(默認選中；)
disabled="disabled"禁用
6）復選框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" />
(disabled="disabled" :禁用)
(checked="checked" :默認選中)
7)下拉菜單
<select name="">
<option>菜單內(nèi)容</option>
</select>
8）多行文本框（文本域）
<textarea name="textareal" cols="字符寬度" rows="行數(shù)">
</textarea>
9)按鈕
<input name="'" type="button" value=“按鈕內(nèi)容” />
（他和submit的區(qū)別是 ，submit是提交按鈕 起到提交信息的作用，button只起到跳轉(zhuǎn)的作用，不進行提交。）
value 屬性為 input 元素設(shè)定值。 對于不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password" - 定義輸入字段的初始值 type="checkbox", "radio" - 定義與輸入相關(guān)聯(lián)的值 注釋：type="checkbox 和 type="radio 中必須設(shè)置 value 屬性。
擴展知識點：post和get的區(qū)別是什么
- get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。
- get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程
- 對于get方式，服務(wù)器端用Request.QueryString獲取變量的值，對于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。(可以不記)
- get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認為不受限制。
- get安全性非常低，post安全性較高。但是執(zhí)行效率卻比Post方法好。
建議： 1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數(shù)據(jù)提交方式； 2、在做數(shù)據(jù)查詢時，建議用Get方式；而在做數(shù)據(jù)添加、修改或刪除時，建議用Post方式；
更多建議：