溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML基礎
1、 XHTML+CSS 標記語言
2、 純文本文件：只有內容，沒有樣式。常見的純文本文件有：.txt、.html、.js、.css、.java。沒有語義，即使你這個文件中的內容排版再清晰，那也是人認為的，實際上純文本文件中的所有的文字生而平等，沒有任何的語義。
3、 HTML：超文本標記語言，HyperText Markup Language。就是通過標簽對兒，給純文本增加語義。也就是說，用文本給文本增加語義，所以這個叫做“超文本”。而有一對兒對兒標簽，也成為“標記”，所以就是“超文本標記語言”。
一、 WEB標準的概念及組成
1）WEB標準是網頁制作的標準，它不是一個標準，它是根據網頁的不同組成部分生成的一系列標準。這些標準大部分由W3C起草發布，也有部分標準由ECMA起草發布。
W3C制定的結構和表現的標準;
結構：(xhtml ,xml)
表現：(css)
ECMA制定的行為的標準;
行為 （DOM ,ECMASCRIPT）
結構和表現標準：
（1）W3C( World Wide Web Consortium )萬維網聯盟，創建于1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構。(制定了結構和表現的標準，非贏利性的。)
（2）行為標準：DOM，ECMASCRIPT（ECMA制定的）歐洲電腦場商聯合會。
二、 調試工具 -瀏覽器
1）PC端調試工具的使用 -瀏覽器
測試瀏覽器(chrome,ie,firefox)
2）移動端調試工具chrome可以測試移動端頁面（有很多模擬器）
三、 HTML及相關概念的介紹
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
XHTML指可擴展超文本標記語言（標識語言）（EXtensible HyperText Markup Language）。
XML指可擴展標記語言（標識語言）（EXtensible Markup Language）。
HTML5指的是HTML的第五次重大修改（第5個版本）
WHATWG網頁超文本應用技術工作小組是一個以推動網絡HTML 5 標準為目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。
四、HTML5 基本結構 （新建一個html文件時默認有那些代碼）
<!doctype html>命名文檔類型 <html>說明我們寫的是標記語言 <head>文件頭部 <meta charset="utf-8"/>編碼格式 <title>html5</title>文件標題（顯示在狀態欄上的內容） </head> <body> 文件主體(所有要寫的內容) </body> </html>
文件命名規則：用英文，不用中文
名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；必須以英文字母開頭。
五、 HTML基本語法
1、<常規標記>
<標記 屬性=“屬性值” 屬性=“屬性值”></標記>
2.空標記
<標記 屬性=“屬性值” />
說明：
1）.寫在<>中的第一個單詞叫做標記，標簽，元素。
2）.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。
3）.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。
4）.空標記沒有結束標簽，用“/”代替。
六、 XHTML常用標記
1、文本標題（h2-h7）
<h2>一級標題</h2>(header1~header6 ) <h3>二級標題</h3> ... <h7>級標題</h7>
2、 段落(p)(paragraph)
<p>段落文本內容</p>
標識一個段落(段落與段落之間有段間距)
3、空格 ( )
（所占位置沒有一個確定的值,這與當前字體字號都有關系)
4、加粗
加粗有兩個標記
1).<b>加粗內容</b> 2).<strong>加粗內容</strong>
5、傾斜
傾斜標記
1.<em></em>(emphasized ) 2,<i></i>( italic )
6、換行(br) （break）
<br />
換行是一個空標記(強制換行)
7、水平線
<hr />空標記(horizontal rule)
8、上標文本
<sup></sup>
9、下標文本
<sub></sub>
10、刪除線標簽
<del></del>
11、大于號/小于號
> 大于 < 小于
12、版權
© （圈C）
13、列表(ul,ol,dl)
HTML中有三種列表，分別是：無序列表，有序列表，自定義列表
*無序列表
無序列表組成：
<ul>(unordered list) <li></li> ．．．．．． </ul>
*有序列表
有序列表組成：
<ol>(ordered list) <li></li> <li></li> <li></li> ．．．．．． </ol>
擴展內容
有序列表的屬性
type:規定列表中的列表項目的項目符號的類型
語法：<ol type="a"></ol>
1 數字順序的有序列表（默認值）（1, 2, 3, 4）。
a 字母順序的有序列表，小寫（a, b, c, d）。
A 字母順序的有序列表，大寫（A,B,C,D)
i 羅馬數字，小寫（i, ii, iii, iv）。
I 羅馬數字，大寫（i, ii, iii, iv）。
start 屬性規定有序列表的開始點。
語法：<ol start="5"></ol>
*自定義列表
<dl> (definition list) <dt>名詞</dt> <dd>解釋</dd> (definition description 定義描述) ．．．．．． </dl>
14、插入圖片
<img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題" />
注:所要插入的的圖片必須放在站點下
*相對路徑的寫法：
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；
3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：
../目標文件所處文件夾名/目標文件文件名+擴展名
title的作用: 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的.
alt的作用:alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。
15、超鏈接的應用
語法：
<a href="目標文件路徑及全稱/連接地址">鏈接文本/圖片</a> <a href="#"></a>空鏈接
屬性：target:頁面打開方式，默認屬性值_self。
屬性值：_blank 新窗口打開
<a href="#" target="_blank">新窗口打開</a>
16、 數據表格的作用及組成
作用：顯示數據
表格的組成：
<table > <tr> <td></td> <td></td> </tr> </table>
注：一個tr表示一行;一個td表示一列(一個單元格)
*數據表格的相關屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4 )bordercolor="表格邊框的顏色"
5）bgcolor="表格的背景色"
6）cellspacing="單元格與單元格之間的間距"
7）cellpadding="單元格與內容之間的空隙"
8）水平對齊方式：align="left/center/right";
17、合并單元格屬性：
colspan=“所要合并的單元格的列數"合并列;
一行
一行 一行
rowspan=“所要合并單元格的行數”合并行;
一行 一行
一行
18、表單的應用
表單的作用：用來收集用戶的信息的;
表單框：
<form name="表單名稱" method="post/get" action=""></form>
擴展知識點：post和get的區別
1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，在URL中可以看到。post是通過HTTP post機制，用戶看不到這個過程 。
3. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。
4. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
1）文本框
<input type="text" value="默認值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內容" />
4)重置按鈕
<input type="reset" value="按鈕內容" />
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>菜單內容</option> </select>
8）多行文本框（文本域）
<textarea name="textareal" cols="字符寬度" rows="行數"></textarea>
9)按鈕
<input name="" type="button" value=“按鈕內容” />
19、div的用法
<div id="id名"/class="class名"></div>
文檔區域，文檔布局對象
20、span的用法
<span></span>文本結點（某一小段文本，或是某一個字）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
