1.HTML (Hypertext. Markup Language) – 超文件標示語言
2.標記語音 – 在不同的文字中加不同的標記讓文字的意義和功能不同,例如:markdown,html
3.HTML大小不敏感:html=Html=HTML=hTml(小寫和大寫功能一樣)
4.web標準
w3c針對網頁開發指定了web標準
(1)結構標準 – html,負責網頁內容的顯示
(2)表現結構 – css,負責網頁內容的樣式和佈局
(3)行爲標準 – js,負責網頁內容的變化
5.結構標準 – html(超文件標示語言)
html程式碼寫在後綴是.html的檔案中,一個html檔案表示一個網頁
網頁內容:文字,圖片,超鏈接,輸入框,按鈕,視訊,音訊,flash…
網頁結構:整個網頁是一個html標籤,html中有head和body兩個兄弟標籤
html標籤 – 表示整個網頁
head標籤 – 表示網頁的頂部
body標籤 – 表示網頁內容部分
1.就是標記,不同的標籤功能不一樣
2.標籤是html的基本結構,不同的標籤功能不一樣
3.語法:
雙標籤(標準標籤): <標籤名 屬性1=屬性值1 屬性2=屬性值2 …>標籤內容</標籤名>
單標籤: <標籤名 屬性1=屬性值1 屬性2=屬性值2 …>或者<標籤名 屬性1=屬性值1 屬性2=屬性值2 …/>
4.說明:
a.<>和/ – 固定寫法
b.標籤名 – 標籤名是html規定好的,單標籤和雙標籤也是固定的
注意:標籤名前後不能隨意新增空格
c.屬性 – 以 屬性=屬性值 的形式存在,多個屬性之間用空格隔開;不同的標籤屬性是確定的;屬性值不管是什麼值都必須放在""中
d.標籤內容 – 雙標籤開始標籤和結束標籤中間的部分就是標籤內容;
標籤內容很靈活,可以是獨立的文字,也可以是一個標籤,還可以多個標籤或者多個標籤和文字的組合
(1)從可見性來分:
可見標籤:p,a,img標籤
不可見標籤:meta,style,script,link標籤…
(2)head和非head中的標籤(body標籤)
head中標籤:
meta,title,style,link,script,base
body標籤：p,a,b,img,table,lable,ul,ol,li…,style,link,script,base
1.head中可以使用的標籤: meta,title,style,link,script,base
2.meta標籤 – 網頁元數據,主要用來對網頁進行基本設定,包括:設定文字編碼方法,設定網頁搜尋鍵碼,網頁簡介
3.title標籤 – 網頁標題
4.link標籤 – 匯入外部檔案(匯入圖片作爲網頁圖示,匯入外部樣式表)
5.link標籤的使用
rel屬性 – 設定匯入檔案的作業
stylesheet:外部樣式表 icon:網頁圖示
type屬性 – 指定匯入檔案的型別和後綴 檔案型別/後綴名
text/css:匯入一個後綴是.css的文字檔案
image/png:匯入一個後綴是.png的圖片檔案
href屬性 – 設定被匯入的檔案的路徑
6.檔案路徑的寫法:
1.絕對路徑:檔案在計算機中的全路徑
2.相對路徑:
(1)使用.表示當前目錄(當前寫程式碼的檔案對應的目錄地址表示當前目錄)
. – 表示當前目錄
(2)使用…表示當前目錄的上層目錄
(3)使用…表示當前目錄的上層目錄的上層目錄
1.標題標籤:h1~h6
如果文字的意義是標題的時候就選標題標籤
2.段落標籤:p
一個段落就對應一個p標籤
3.其他的普通文字標籤:font,span
size屬性–設定字型大小
color屬性–設定字型顏色
4.文字效果相關的標籤和符號
html中手動敲回車無用,手動新增空格也沒用
如果需要在內容中加換行，孺要新增
標籤
如果需要在內容中加空格，需要使用html符號: (一個畫素) (一個空格)
加粗:b標籤,strong標籤(有強調的意思)
傾斜:i標籤,em標籤(有強調的意思)
1.無序列表:ul-li
ul標籤 – 表示整個容器
li標籤 – 列舉容器中所有的元素
2.有序列表:ol~li
ol標籤 – 表示整個列表
li標籤 – 表示列表中的元素
3.自定義列表:dl-dt-dd
dl – 表示整個列表
dt – 分類
dd – 每個分類中的元素
1.圖片標籤:img
src屬性 – 圖片地址
可以是本地圖片的相對路徑;也可以是是網路的圖片地址
title屬性 – 設定圖片標題(滑鼠懸停在圖片.上的時候纔會顯示)
alt屬性 – 圖片載入失敗的提示資訊
空 – 重新整理(重新載入頁面)
2.超鏈接
(1)標籤內容 – 超鏈接可點選可看見的部分
(2)href屬性 – 跳轉目的地
網頁的地址 – 直接跳轉到指定的網頁
原生的html檔案路徑 – 直接開啓HTML檔案對應的頁面
id選擇器(id屬性值前加#) – 將當前頁面卷動到id選擇器指定的位置
(3)target屬性 – _self(預設值),在當前頁面中載入新的頁面
_blank,在新的視窗中載入新的頁面
1.表格標籤:table-tr-td
table標籤 – 表示整個表格
tr標籤 – 表示一行
td標籤 – 表示一個單元格
table:
border屬性:設定邊框線的寬度(預設值是0)
cellspacing屬性:設定單元格和單元格之間的間隙(預設是1)
cellpadding屬性:設定表格內容和邊框之間的距離
bgcolor屬性:設定整個表格的背景顏色
height width:高度 寬度
align屬性:left right center;設定整個表格在網頁中的居中方式
colspan屬性：列的合併
rowspan屬性：行的合併
表單標籤:form
是一個容器標籤,本身單獨用沒有意義,一般需要結合表單相關的標籤(input,select,textarea)來使用
它可以對錶單標籤中所有使用者資訊收集相關的標籤的內容進行整體的重置和提交
action屬性 – 後端數據介面的地址
method屬性 – 請求方式(get/post)
input是表單相關標籤，可以放在form標籤中做數據的提交和重置
1)type屬性 - 設定標籤型別
<!--
a. text(預設值) - 普通文字輸入框
value屬性 - 和輸入框中的內容是關聯
name屬性 - 用來區分不同的數據和對數據進行提交的（因爲提交數據的是是以 name=value 的形式提交）
placeholder屬性 - 設定輸入的提示資訊
disabled屬性 - 設定爲disabled，表示標籤不可用
maxlength屬性 - 設定最多能夠輸入的字元的個數
b. password - 密碼輸入框
value屬性 - 和輸入框中的內容是關聯
name屬性 - 用來區分不同的數據和對數據進行提交的（因爲提交數據的是是以 name=value 的形式提交）
placeholder屬性 - 設定輸入的提示資訊
disabled屬性 - 設定爲disabled，表示標籤不可用
maxlength屬性 - 設定最多能夠輸入的字元的個數
c.radio - 無線電鈕
value屬性 - 單選選中的時候被選中的值(選項值)
name屬性 - 提交和區分以外，還可以將相同的name作爲一個組，在同一個組中只能選中一個選項
checked屬性 - 值設爲checked表示預設選中
d.checkbox - 複選按鈕
value屬性 - 單選選中的時候被選中的值(選項值)
name屬性 - 提交和區分以外
checked屬性 - 值設爲checked表示預設選中
e.button - 按鈕
value屬性 - 按鈕上顯示的文字
f.submit - 提交按鈕
將當前表單中所有設定了name屬性的標籤內容，以 name=value的形式提交
g.reset - 重置按鈕
將當前表單中所有表單相關的標籤狀態變成初始狀態
--><form action="" method="get">
<h1>text</h1>
<label for="i1">使用者名稱：</label><input id="i1" type="text" value="小明" name="userName" placeholder="請輸入賬號" />
<br>
<br>
<label for="i2">郵箱：</label><input id="i2" type="text" name="e_mail" placeholder="請輸入郵箱"/>
<h1>password</h1>
<label for="i3">密碼：</label><input id="i3" type="password" value="123456" name='pw' placeholder="請輸入密碼"/>
<h1>radio</h1>
<input id="i4" type="radio" value="男" name="sex" checked="checked"/><label for="i4">男</label>
<input id="i5" type="radio" value="女" name="sex"/><label for="i5">女</label>
<!-- 選擇婚姻狀態頁面：已婚、未婚、保密(預設) -->
<h1>checkbox</h1>
<input type="checkbox" name="sport" id="s1" value="乒乓球" checked="checked"/><label for="s1">乒乓球</label>
<input type="checkbox" name="sport" id="s2" value="籃球" /><label for="s2">籃球</label>
<input type="checkbox" name="sport" id="s3" value="遊泳" /><label for="s3">遊泳</label>
<input type="checkbox" name="sport" id="s4" value="羽毛球" /><label for="s4">羽毛球</label>
<h1>button</h1>
<input type="button" value="確定" disabled="disabled"/>
<input type="button" value="取消" />
<button type="button">刪除</button>
<button type="button">
<img src="img/aaa.ico" >
<span>刪除</span>
</button>
<h1>submit和reset</h1>
<input type="submit" name="" id="" value="提交" />
<input type="reset" name="" id="" value="重置" />
</form>
<h1>其他的input標籤</h1>
顯色選擇器：<input type="color" name="bgcolor" />
<br>
<br>
時間選擇器: <input type="time" name=""/>
日期選擇器: <input type="date" name=""/>
時間和日期：<input type="datetime-local" name=""/>
<br>
<br>
選擇頭像：<input type="image" src="img/anchor.png"/>
檔案選擇器: <input type="file" name="" id="" value="" />1.下拉選單:select-option
name屬性 – 是select屬性,用於提交的區分
value屬性 – 是option屬性,表示當前選項的選項值和提交數據
select屬性 – 是option屬性,設定預設選中的項
option標籤內容 – 用來展示選項
2.select-optgroup-option – 選項分組標籤
3.多行文字域 – textarea
rows屬性 – 設定一次最多能顯示的行數(預設2)
cols屬性 – 設定一行的列數
name屬性 – 用於區分和提交
maxlength – 限制最大輸入字元的個數
div和span本身無語意,也是html中比較輕量級的標籤
1.span – 用於一行顯示多個內容的時候
2.div – 主要用於介面標籤的分塊和分組