HTML學(xué)習(xí)(一)語法結(jié)構(gòu)
參考
HTML 教程 - w3school 在線教程
HTML 教程| 菜鳥教程
W3C HTML5 中文手冊
維基百科-HTML
HTML教程,XHTML教程
簡介
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言间狂。
html 是標(biāo)記語言攻泼，不是編程語言，由瀏覽器翻譯標(biāo)記的內(nèi)容
HTML文件
使用文本編輯器創(chuàng)建編輯創(chuàng)建*.html或者*.htm文件鉴象，使用瀏覽器預(yù)覽
HTML語法
<標(biāo)簽名 標(biāo)簽屬性>內(nèi)容</標(biāo)簽名>
示例
<!doctype html>
<!--我代表注釋-->
<html>
<head>
<!--head標(biāo)簽內(nèi)可包含關(guān)于文檔的信息忙菠，例如網(wǎng)站標(biāo)題，作者纺弊，語言牛欢，css等，瀏覽器不會向用戶顯示這些頭部信息-->
<title>網(wǎng)站標(biāo)題</title>
</head>
<body>
<!--body標(biāo)簽內(nèi)是文檔的主體淆游，也是用戶能看到的部分傍睹，文檔的所有內(nèi)容（比如文本、圖像犹菱、顏色拾稳、圖形等等-->
<h1>hello word !</h1>
</body>
</html>
標(biāo)簽
html語言，使用標(biāo)簽(元素)與瀏覽器就行交流已亥，傳遞網(wǎng)頁布局熊赖，編碼，作者虑椎，字體格式震鹉、圖片視頻鏈接、注釋等信息捆姜，還具有傳達(dá)給搜索引擎網(wǎng)頁的脈絡(luò)關(guān)鍵詞等功能传趾。標(biāo)簽有開始和結(jié)束，即生效范圍泥技，以<head>標(biāo)簽為例浆兰，<head>和</head>之間為head標(biāo)簽的管轄范圍，里面包含關(guān)于文檔的信息珊豹。瀏覽器不會向用戶顯示這些頭部信息簸呈。標(biāo)簽之間可以嵌套，例如下面這些標(biāo)簽可用在 head內(nèi)部：<base>, <link>, <meta>, <script>, <style>, 以及 <title>店茶。
另html標(biāo)簽不區(qū)分大小寫蜕便，w3c推薦小寫
必要的標(biāo)簽
<!DOCTYPE> 聲明是文檔中的第一個成分，位于 <html> 標(biāo)簽之前贩幻。該標(biāo)簽告知瀏覽器文檔所使用的 HTML 規(guī)范
<html> 元素告知瀏覽器這是一個 HTML 文檔
<head> 元素可包含關(guān)于文檔的信息轿腺。瀏覽器不會向用戶顯示這些頭部信息（"head information"）两嘴。下面這些標(biāo)簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<body> 元素定義文檔的主體族壳。其中包含文檔的所有內(nèi)容（比如文本憔辫、圖像、顏色仿荆、圖形等等）贰您。
<!--...--> 標(biāo)簽注釋標(biāo)簽用于在源文檔中插入注釋。注釋會被瀏覽器忽略赖歌⊥髌裕可使用注釋對的代碼進(jìn)行解釋，這樣做有助于以后的時間對代碼的編輯庐冯。
更多的標(biāo)簽可參見W3C HTML5 中文手冊
標(biāo)簽屬性
HTML 標(biāo)簽擁有屬性孽亲。可以在每個標(biāo)簽的參考頁中找到相應(yīng)的特殊屬性展父。
例如: <a> 標(biāo)簽定義超鏈接返劲，它用于從一個頁面連接到另一個頁面。
<a >W3C</a>
href屬性表示鏈接向https://www.w3.org/栖茉，當(dāng)然<a>還有其他的屬性篮绿，可在W3C HTML5 中文手冊中<a>標(biāo)簽頁查詢
HTML 元素還有事件屬性，這些屬性在瀏覽器中觸發(fā)行為吕漂，比如當(dāng)用戶單擊一個 HTML 元素時啟動一段 JavaScript亲配。其詳細(xì)參數(shù)也可以在W3C HTML5 中文手冊中查詢到。
常用標(biāo)簽
1. 表單<form>
收集用戶輸入的信息
1.1 常用定義
<form>
<input type="類型" name="表單元素名" value="表單元素值">
</form>
1.2 文本輸入 type=text
例
<form>
<input type="text" name="Name">
</form>
<!--值為輸入內(nèi)容-->
1.3 密碼 type=password
例
<form>
<input type="password" name="Pwd">
</form>
<!--值為輸入內(nèi)容-->
1.4 單選按鈕 type=radio
例
<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female<br>
</form>
<!--值為輸入內(nèi)容-->
1.5 復(fù)選框 type=checkbox
name后為數(shù)組
例
<form>
<input type="checkbox" name="like[]" value="HTML">HTML<br>
<input type="checkbox" name="like[]" value="C++">C++<br>
</form>
<!--值為輸入內(nèi)容-->
1.6下拉列表
單選下拉列表
<form>
<select name="復(fù)選框名">
<option value="值">網(wǎng)頁顯示內(nèi)容</option>
<option value="值">網(wǎng)頁顯示內(nèi)容</option>
<option value="值" selected>網(wǎng)頁顯示內(nèi)容</option>
<!--selected對應(yīng)項為默認(rèn)選項惶凝，可不寫吼虎，則默認(rèn)為第一個-->
</select>
</form>
例
<form>
手機(jī)<br>
<select name="phone">
<option value="apple">Apple</option>
<option value="xiaomi">Xiaomi</option>
<option value="piexl" selected>Piexl</option>
</select>
</form>
復(fù)選下拉列表
與單選相比，多了multiple="multiple" name="復(fù)選框名[]"苍鲜，選擇名變成了數(shù)組思灰，就像復(fù)選框的原理一樣
<select multiple="multiple" name="復(fù)選框名[]">
1.7 提交按鈕 type="submit"
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件混滔。表單的動作屬性定義了目的文件的文件名洒疚。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
例
<form name="input" action="html_action.php" method="get">
<--!其他內(nèi)容-->
<input type="submit" value="提交"><br>
</form>
<!--提交后坯屿，把參數(shù)傳遞給html_action.php-->
1.8示例
<form name="input" action="html_action.php" method="get">
<!--文本域-->
Name <input type="text" name="Name"><br>
<!--密碼-->
Password <input type="password" name="Password"><br>
<!--單選-->
性別<br>
<input type="radio" name="sex" value="male">Male <br>
<input type="radio" name="sex" value="femal">Femal <br>
<!--復(fù)選-->
操作系統(tǒng)<br>
<input type="checkbox" name="OS" value="IOS">IOS<br>
<input type="checkbox" name="OS" value="Android">Android<br>
<!--下拉列表-->
手機(jī)<br>
<select name="phone">
<option value="apple">Apple</option>
<option value="xiaomi">Xiaomi</option>
<option value="piexl" selected>Piexl</option>
</select>
</br>
<!--提交-->
<input type="submit" value="提交"><br>
</form>
更多的需要再學(xué)
有機(jī)會繼續(xù)寫
CSS
層疊樣式表（英語：Cascading Style Sheets油湖，簡寫 CSS），又稱串樣式列表领跛、級聯(lián)樣式表肺魁、串接樣式表、層疊樣式表隔节、階層式樣式表鹅经，一種用來為結(jié)構(gòu)化文檔（如 HTML文檔或 XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機(jī)語言怎诫。
簡單的說就是規(guī)定了html文件中某標(biāo)簽內(nèi)部的內(nèi)容的字體瘾晃、間距和顏色等樣式，將文件的內(nèi)容與顯示分隔開來幻妓。
CSS 的創(chuàng)建
CSS 信息可以來自：
作者樣式
- 作者可以在他的 HTML 文件中確定一個外來的蹦误、獨立的 CSS 文件（外部樣式表）
- 作者可以將 CSS 信息包含在 HTML 文件內(nèi)（內(nèi)部樣式表）
- 作者可以在一個 HTML 標(biāo)簽內(nèi)結(jié)合 CSS 指令（內(nèi)聯(lián)樣式），
自定樣式
讀者可以在他的瀏覽器內(nèi)設(shè)立一個 CSS 文件肉津。這個 CSS 文件可以用在所有的 HTML 文件上强胰。假如作者的 CSS 文件與讀者的相沖突，那么讀者可以選擇一個
瀏覽器樣式
假如外部沒有特別指定一個樣式的話妹沙，一般瀏覽器自己有一個內(nèi)在的樣式
我們在編寫html文件的過程中使用的就是作者樣式
優(yōu)先級 外部樣式表 < 內(nèi)部樣式表 < 內(nèi)聯(lián)樣式表
例
Index.html文件
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css" />
<!--引用外部樣式style.css文件偶洋，文件位于./style.css即index同目錄(./)下-->
<title>biaoti</title>
<style type="text/css">
body p {color: red}
</style>
<!-- style內(nèi)規(guī)定了body內(nèi)的p內(nèi)的字體顏色為red-->
</head>
<body>
外部樣式表規(guī)定body內(nèi)部的字體為yellow
<p> 內(nèi)部樣式表改了body內(nèi)部p內(nèi)的字體為red </p>
<p style="color: blue">內(nèi)聯(lián)樣式表改了p的字體為blue </p>
<!-- style后“內(nèi)部規(guī)定了p內(nèi)的字體為blue-->
</body>
</html>
style.css文件
body{color: yellow}
<!-- body內(nèi)的p內(nèi)的字體顏色為red-->
效果如圖
由上述例子我們可以看到，CSS的位置和他們的優(yōu)先級距糖。
外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時玄窝，外部樣式表將是理想的選擇。在使用外部樣式表的情況下悍引，你可以通過改變一個文件來改變整個站點的外觀恩脂。每個頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（html文檔的）頭部：
格式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>" />
</head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明趣斤，并根據(jù)它來格式文檔,mystyle.css也可為指向某文件的網(wǎng)頁鏈接(例https://assets-cdn.github.com/assets/frameworks-77c3b874f32e71b14cded5a120f42f5c7288fa52e0a37f2d5919fbd8bcfca63c.css）只要瀏覽器能get到就行俩块，推薦以css為拓展名
css文件書寫語法
即
標(biāo)簽1 { 聲明1;聲明2;...聲明N;}
標(biāo)簽2 { 聲明1;聲明2;...聲明N;}
標(biāo)簽3 { 聲明1;聲明2;...聲明N;}
...
標(biāo)簽即為html標(biāo)簽，表明之后聲明的生效范圍浓领，聲明是指標(biāo)簽內(nèi)范圍的具體格式玉凯，聲明一般為屬性:值，當(dāng)值有多個字符串時用引號"括起來值的所有單詞镊逝。
示例
body{color: yellow}
就表明標(biāo)簽body內(nèi)部所有字體的顏色為yellow壮啊，更多標(biāo)簽和聲明參見
[轉(zhuǎn)載&修改]20170907html學(xué)習(xí)(三)css樣式表
CSS 手冊
或者搜索css樣式大全之類的關(guān)鍵詞
更多高級書寫語法
- 標(biāo)簽1 標(biāo)簽2 {聲明}
表示生效范圍為標(biāo)簽1內(nèi)的標(biāo)簽2內(nèi)的內(nèi)容格式 - 標(biāo)簽1，標(biāo)簽2撑蒜，標(biāo)簽3{聲明}
表示標(biāo)簽1歹啼，2，3內(nèi)的內(nèi)容格式都為聲明的格式
有時間繼續(xù)寫
內(nèi)部樣式表
當(dāng)單個文檔需要特殊的樣式時座菠，就應(yīng)該使用內(nèi)部樣式表狸眼。可以使用 <style> 標(biāo)簽在html文檔head標(biāo)簽內(nèi)定義
格式
<head>
<style type="text/css">
規(guī)則
</style>
</head>
規(guī)則書寫語法
同css文件書寫語法
內(nèi)聯(lián)樣式
僅需要在一個標(biāo)簽內(nèi)上應(yīng)用一次時浴滴，使用內(nèi)聯(lián)樣式例
格式
<標(biāo)簽 style="聲明1;聲明2;...聲明N;">標(biāo)簽內(nèi)部的內(nèi)容</標(biāo)簽>
聲明語法
同css文件書寫語法中的聲明語法一樣屬性:值
備注
- 建議多在網(wǎng)頁上拓萌，右鍵查看源代碼，可以查看相關(guān)網(wǎng)站的html內(nèi)容,chrome瀏覽器升略，f12還可查看與html搭配的各種元素微王，有的網(wǎng)站還可看到css文件
- chrome在F12查看源代碼時可以屡限，再選擇element，可以更改源代碼查看效果炕倘，應(yīng)用把表單類型password改為text钧大，可查看瀏覽器自動填充密碼
后續(xù)學(xué)習(xí)
20170907html學(xué)習(xí)(二)常用標(biāo)簽，屬性
[轉(zhuǎn)載&修改]20170907html學(xué)習(xí)(三)css樣式表
