1.web的標準三層結構
? ? ? ? ? ? ? ? 結構(html):用于對網頁元素進行整理和分類-- 好比人的身體
? ? ? ? ? ? ? ? 表現(css):用于設置網頁元素的版式,顏色,大小等外觀樣式-- 好比人的著裝
? ? ? ? ? ? ? ? 行為(js):指網頁模型的定義及交互的編寫-- 好比人的行為動作
2.html骨架標簽
<html>
? ? ? ? <head>
? ? ? ? ? ? ? ? ? ? <title></title>
? ? ? ? ? ?</head>
? ? ? ? ? ? <body>
? ? ? ? ? ? </body>
</html>
3.HTML標簽的關系
1.嵌套關系(父子關系)
<head>
? ? ? ? ? ? <title></title>
</head>
2.并列關系(兄弟關系)
<head></head>
<body></body>
4.排版標簽
1.標題標簽:h1~h6
2.段落標簽:<p></p>
3.水平線標簽:<hr/>
4.換行標簽:<br/>
5.兩個重要的盒子標簽:<div></div> 一行只能放一個div? <span></span>一行可以放多個span
5.文本格式化標簽
1.加粗標簽:<b></b>或<strong></strong> 推薦用strong
2.斜體標簽:<i></i>或<em></em> 推薦用em
3.加刪除線標簽:<s></s>或<del></del> 推薦用del
4.加下劃線標簽:<u></u>或<ins></ins> 推薦用ins
6.圖像標簽
<img 屬性1='',屬性2='',.../>必須有屬性
屬性? ? ? ? ? ? 屬性值? ? ? ? ? ? 描述
src? ? ? ? ? ? ? ? URL? ? ? ? ? ? ? 圖像的路徑
alt? ? ? ? ? ? ? ? ?文本? ? ? ? ? ? ? ?圖像不能顯示時的替換文本?
title? ? ? ? ? ??? ?文本? ? ? ? ? ? ? ? 鼠標懸停時顯示的內容
width? ? ? ? ? ? ?像素? ? ? ? ? ? ? ? 設置圖像的寬度
height? ? ? ? ? ? 像素? ? ? ? ? ? ? ? 設置圖像的高度
border? ? ? ? ? ? 數字? ? ? ? ? ? ? ? 設置圖像邊框的寬度
7.鏈接標簽
<a></a>
屬性? ? ? ? ? ? 作用
href? ? ? ? ? ? 用于指定鏈接目標的url地址
target? ? ? ? 用于指定鏈接頁面的打開方式,有_self和_blank兩種,_self為默認值,_blank為在新? ??????????????????窗口中打開方式
8.注釋標簽
<!-- 注釋語句 -->
9.錨點定位
分兩步:1.使用相應的id名標注跳轉目標的位置 <h3 id='tree'></h3>
? ? ? ? ? ? ? ? 2.使用鏈接文本鏈接<a href='#tree'></a>
10.base標簽
設置整體鏈接打開狀態,base寫到<head></head>之間
11.pre標簽
按原來寫的格式顯示在頁面上,是保留空格和換行的
12.特殊字符
特殊字符? ? ? ? ? ? 描述? ? ? ? ? ? ? ? 字符代碼
? ? ? ? ? ? ? ? ? ????????空格符? ? ? ? ? ? ????
<? ? ? ? ? ? ? ? ? ? ? ? 小于號? ? ? ? ? ? ? ? <
>? ? ? ? ? ? ? ? ? ? ? ? ?大于號? ? ? ? ? ? ? ?>
&? ? ? ? ? ? ? ? ? ? ? ? ?和號? ? ? ? ? ? ? ? ? &
¥? ? ? ? ? ? ? ? ? ? ? ? 人民幣? ? ? ? ? ? ? ?¥
?? ? ? ? ? ? ? ? ? ? ? ? ? 版權? ? ? ? ? ? ? ? ? ©
?? ? ? ? ? ? ? ? ? ? ? ? ? 注冊商標? ? ? ? ? ?®
°? ? ? ? ? ? ? ? ? ? ? ? ? ?攝氏度? ? ? ? ? ? ? ?°
±? ? ? ? ? ? ? ? ? ? ? ? ? 正負號? ? ? ? ? ? ? ? ±
?? ? ? ? ? ? ? ? ? ? ? ? ? 乘號? ? ? ? ? ? ? ? ? ?×
?? ? ? ? ? ? ? ? ? ? ? ? ?除號? ? ? ? ? ? ? ? ? ÷
2? ? ? ? ? ? ? ? ? ? ? ? ? ? ?平方? ? ? ? ? ? ? ? ? ²
3? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 立方? ? ? ? ? ? ? ? ? ³
13.表格
表格是用來展示數據的,可以讓數據展示的整齊規范
表格標簽:<table></table>
行標簽:<tr></tr>
單元格標簽:<td></td>
屬性? ? ? ? ? ? ? ? 含義?
border? ? ? ? ? ? 設置表格的邊框(默認border=0,無邊框)
cellspacing? ? ? ?設置單元格與單元格邊框之間的空白距離
cellpadding? ? ? ? 設置單元格內容與單元格邊框之間的空白間距
width? ? ? ? ? ? ? ? 設置表格寬度
height? ? ? ? ? ? ? ? 設置表格高度
align? ? ? ? ? ? ? ? 設置表格再網頁中的水平對其方式(left,center,right)
表頭單元格:<th></th>會讓文字加粗居中
表格標題caption:<table>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <caption></caption>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</table>
合并單元格
跨行合并:rowspan='合并單元格的個數'
跨列合并:colspan='合并單元格的個數'
合并單元格順序:先上后下 先左后右
合并單元格三部曲:1.先確定是跨行還是跨列2.根據先上后下,先左后右的原則找到目標單元格合并3.刪除多余的單元格
表格的劃分:thead,tbody,tfood 頭部,中部,尾部
14.列表標簽
1.無序列表
<ul>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? ....
</ul>
<ul>中只能嵌套<li>,在<ul>下直接嵌套其他標簽是不被允許的
2.有序列表
<ol>
? ? ? ? <li></li>
? ? ? ? <li></li>
? ? ? ? ...
</ol>
3.自定義列表
<dl>
? ? <dt></dt>
? ? ?<dd></dd>
? ? ? ? ...
? ? ? ? <dt></dt>
? ? ? ? <dd></dd>
</dl>
15.表單標簽
1.<input type='' value=''/> type屬性值不同,可以指定不同的標簽
屬性? ? ? ? ? ? 屬性值? ? ? ? ? ? 描述
type? ? ? ? ? ? text? ? ? ? ? ? ? ? 單行文本輸入框
? ? ? ? ? ? ? ? ? ? password? ? ? 密碼輸入框
? ? ? ? ? ? ? ? ? ? radio? ? ? ? ? ? ? 單選按鈕
? ? ? ? ? ? ? ? ? ? checkbox? ? ? ? 復選框
? ? ? ? ? ? ? ? ? ? button? ? ? ? ? ? 普通按鈕
? ? ? ? ? ? ? ? ? ? submit? ? ? ? ? ? 提交按鈕
? ? ? ? ? ? ? ? ? ? reset? ? ? ? ? ? ? ? 重制按鈕
? ? ? ? ? ? ? ? ? ? image? ? ? ? ? ? ? ?圖像形式的提交按鈕
? ? ? ? ? ? ? ? ? ? file? ? ? ? ? ? ? ? ? ? 文件域
name? ? ? ? ? ? 由用戶自定義? ? ? ? 控件的名稱
value? ??????????由用戶自定義? ? ? ? inpu控件中默認的文本值
size? ? ? ? ? ? ? ? 正整數? ? ? ? ? ? ? ? input控件在頁面中的顯示寬度
checked? ? ? ? checked? ? ? ? ? ? ? ?定義選擇控件默認被選中的項? ? ?
maxlength? ? ? ?正整數? ? ? ? ? ? ? ? 控件允許輸入的最多字符數
2.label標簽
<label></label>作用:1.用于綁定一個元素,當點擊label標簽時,被綁定的表單元素就會獲得輸入焦點 2.通過for 和 id來控制
3.textarea(文本域)
<textarea cols='每行中的字符數' rows='顯示的行數'>
? 文本內容
</textarea>
4.select下拉列表
<select>
? ? ? ? <option></option>
? ? ? ? ?<option><option>
? ? ? ? ...
</select>
5.表單域
<form action='url地址' method='提交方式' name='表單名稱'>
</form>