目錄
一 認識
二 標簽的分類
三 標簽
body標簽
標題標簽
段落標簽
換行標簽
水平分割線
文本格式化標簽
圖片標簽
音頻標簽
鏈接標簽
列表標簽
表格標簽
表單標簽
input標簽
下拉菜單標簽
textarea文本域標簽
label標簽
語義化標簽
button標簽
字符實體
一 認識
HTML(HyperText Markup Language)就是超文本標記語言。"超文本"就是表示頁面內可以包含非文字元素，如：圖片、鏈接、音樂等等。它是一種建立網頁文件的語言，通過標記式的指令(Tg)，將影像、聲音、圖片、文字等鏈接顯示出來。這種標記性語言是因特網上網頁的主要語言。HTML網頁文件可以使用記事本、寫字板、HBuilder、Sublime等編輯工具來編寫，以.htm或.html為文件后綴名保存。將HTML網頁文件用瀏覽器打開顯示，若測試沒有問題則可以放到服務器(Server)上，對外發布信息。
ctrl + / 注釋
標簽的結構圖
結構說明：
- 標簽由<、>、/、英文單詞或字母組成。并且把標簽中<>包括起來的英文單詞或字母稱為標簽名
- 常見標簽由兩部分組成，我們稱之為 雙標簽 。前部分叫開始標簽，后部分叫結束標簽，兩部分之間包裹內容
- 少數標簽由一部分組成，我們稱之為：單標簽。自稱一體，無法包裹內容。
二 標簽的分類
HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。
塊級元素
元素都從新的一行開始，并且其后的元素也另起一行；元素的高度、寬度、行高以及頂和底邊距都可設置；
元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
行內元素
和其他元素都在一行上，元素的高度、寬度及頂部和底部邊距不可設置；元素的寬度就是它包含的文字或圖片的寬度（即寬度由內容撐開），不可改變。
行內塊狀元素
和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設置。
三 標簽
body標簽
<body bgcolor="pink" text="blue">
bgcolor 背景顏色 1.顏色名 2.rgb 3.16進制
text 字體顏色 1.顏色名 2.rgb 3.16進制
標題標簽<h1-6>
不建議在頁面中大量使用h1標簽，h1標簽可以被搜索引擎(如百度)獲取到，如果有多個，可能會進入搜索引擎的黑名單
段落標簽<p>
<p></p> 段落會自動換行
常用屬性：
align：對齊方式
left 居左對齊
right 居右對齊
center 劇中對齊
justify 兩端對齊
換行標簽<br>
水平分割線<hr>
width 寬度 1.百分比 2.px
align 對齊方式 left right center(默認)
size 水平線粗細
文本格式化標簽
font
設置字體相關的標簽
常用屬性:
color 字體顏色 (顏色名、十六進制、rgb)
size 字體大小
face 字體風格(楷體,黑體,宋體)
pre
定義預格式化的文本 保留文本中的空格和換行.文本呈現等寬字體
strong等 突出重要性的強調語境 可以用右側的標簽 以區分
圖片標簽
alt 圖片加載失敗，會顯示alt文本
title 鼠標懸停的時候，顯示文本信息
width和height屬性
相對路徑-上級目錄
目標文件在上級目錄中 ../ 到上一級目錄
音頻標簽
視頻標簽<video>
目前支持三種格式：MP4、WebM、Ogg
鏈接標簽<a>
行內元素 不會自動換行
href 跳轉地址 必須的 如果未設置該屬性，則a標簽與普通文本沒有什么區別
target屬性
_self 在當前窗口打開，覆蓋該網頁
_blank 在新窗口跳轉 保留原網頁
a標簽實現錨點
如果要跳轉到當前頁面 <a href=""或 href=“#”>
跳轉到指定位置 如下圖
列表標簽
無序列表 ul 有序列表 ol
自定義列表
<dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注冊</a></dd><dd><a href="#">如何選課</a></dd><dd><a href="#">如何拿到畢業證</a></dd><dd><a href="#">學分是什么</a></dd><dd><a href="#">考試未通過怎么辦</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作機構</a></dd><dd><a href="#">合作導師</a></dd></dl>表格標簽
table常用屬性：
border 邊框
width 寬度
像素值或百分比(如果是百分比，參考的是上一級元素的寬度，如果上一級元素未設置，則參考屏幕 寬度)
align 表格的對齊方式
tr常用屬性：
align 每行中文本內容的對齊方式
valign 每行中文本內容的垂直方向對齊方式
bgcolor 設置行的背景顏色
css樣式
border-collapse: collapse 合并表格邊框
合并單元格? rowspan? colspan
<table width="500px" height="200px" align="center" border="1" style="border-collapse: collapse;"><tr align="center"><th>班級</th><th>姓名</th><th>性別</th></tr><tr align="center"><td>數據222</td><td>張三</td><td>男<td></tr><tr align="center"><td>數據222</td><td>張三</td><td>男<td></tr></table>caption 標簽書寫在table標簽內部
th 標簽書寫在tr標簽內部(用于替換td標簽)
<table border="10" width="500" height="300" ><caption>學生成績單</caption><thead> <tr><th>姓名</td><th>成績</td><th>評語</td></tr></thead><tbody><tr><td>小哥哥</td><td>100分</td><td>小哥哥真帥氣</td></tr><tr><td>小姐姐</td><td>100分</td><td>小姐姐真漂亮</td></tr></tbody><tfoot><tr><td>總結</td><td>優秀的</td><td>meili</td></tr></tfoot></table>合并單元格
跨行rowspan 跨列colspan
表單標簽
屬性 placeholder 提示
input標簽
radio單選框 根據name 分組。有相同name屬性值的單選框為一組，一組中同時只能有一個被選中 check 默認的選中
文件選擇 file中屬性 multiple 多文件選擇
按鈕
示例：
下拉菜單標簽
城市: <select name="city" multiple="multiple" size="10" disabled="disabled"> <option>北京</option><option>上海</option><option>河南</option><option>北京</option><option>上海</option><option>河南</option><option>北京</option><option>上海</option><option>河南</option><option>北京</option><option>上海</option><option>河南</option></select>城市: <select name="city" ><option>請選擇城市</option><option value="beijing">北京</option><option selected="selected">上海</option><option>河南</option>textarea文本域標簽
<textarea cols="60" rows="30" placeholder="個人簡介信息"></textarea>
label標簽
1.<label for="uname">姓名：</label><input type="text" id="uname"/>
2.<label >姓名：<input type="text" id="uname"/></label>
點擊男女就可以選中
語義化標簽
沒有語義的布局標簽
div標簽：一行只顯示一個(獨占一行)
span標簽：一行可以顯示多個
有語義的布局標簽
字符實體
空格
button標簽
字符實體
 函數全解析)
原裝出廠Win10系統)
