前端相關1
一 html
- 1html 是什麽
- 超文本標記語言,通過標簽語言來標記要顯示的網頁中的各個部分.一套規則,瀏覽器認識的規則
- 瀏覽器按照順序渲染網頁文件.然後根據標識符解釋和顯示內容.但要註意的是,對於不同的瀏覽器,對於同一標簽,可能會有完全不相同的解釋,(兼容性)
- 靜態網頁文件擴展名: .html .htm
2 .html 不是什麽
html不是編程語言,而是一種標記語言 (makeup language)
html 使用標記標簽來描述網頁
3 html 結構
<!DOCTTYPE html>告訴瀏覽器使用什麽樣的 html 或者xhtml 來解析html文檔
<html></html>是文檔的開始和結束標記.此元素告訴瀏覽器 其自身是一個html文檔,在他們的中 間是文檔的頭部<head>和身體<body>
<head></head> 元素出現在文檔的開頭部分.<head>與</head>之間的內容不會再瀏覽器的文檔
窗口顯示,但是期間的元素有特殊重要的意義.
<title></title>定義網頁標題,在瀏覽器標題欄顯示
<body></body>之間的文本是可見的網頁主題內容
3 html 的格式
* html 標簽是由尖括號包圍的關鍵詞,比如<html>
* html 標簽通常是成對出現的(雙邊標記),比如<div></div>
*標簽不區分大小寫,<html> 和<HTML>,推薦使用小寫
*標簽分為兩部分:開始標題<a>和結束標題</a>,兩個標簽之間的部分.我們叫做標簽體
有些標簽功能比較簡單,使用一個標簽即可,這種標簽叫作自閉和標簽
* 標簽闊以有若幹個屬性,也闊以不帶屬性,如<head>就不帶任何屬性
*標簽闊以嵌套,但是不能交叉嵌套 如<a><b></a></b>
標簽的語法
<標簽名 屬性1 = "屬性值1" 屬性2 = "屬性值2"...> 內容部分</標簽名>
<標簽名 屬性1 = "屬性值1" 屬性2 = "屬性值2".../>
二 常用標簽
1.<!DOCTYPE>標簽
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
a. BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
b, CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麽compatMode默認就是BackCompat.
2 <head> 內常用的標簽
<meta>標簽
meta介紹:meta元素可提供有關頁面的元信息,針對搜素引擎和更新頻度的關鍵詞
<meta>標簽位於文檔的頭部,不含任何內容
<meta>提供的信息用戶不可見
meta標簽的組成: meta總共有兩個屬性 分別是 http-equiv屬性 和name屬性,不同的屬性
又有不同的參數值,這些不同的參數值又實現了不同的網頁功能.
(1)name屬性;主要用於描述網頁,與之對應的屬性值為 content,其中的內容主要是便於搜素機器人 查找信 息 和分類信息用的.
<meta name="keywords" content="北京汽車網，北京汽車報價，北京車市最新報價， 北京汽車報道，北京易車網，北京汽車團購服務"> <meta name="description" content="北京汽車網，北京汽車報價，北京車市最新報價，北京汽車報道，北京易車網，北京汽車團購服務">示例
(2)http-equiv屬性:相當於http的文件開頭作用,他可以向瀏覽器傳回一些有用的信息,以幫助正確 的顯示網頁內容,與之對應的屬性值為content ,其中的內容就是各個參數的變量值.
<title>meta標簽</title> <meta charset="UTF-8"> <meta http-equiv="content-type" charset="utf8">和上面的是一樣的，都是指定編碼的 <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--兩秒之後跳轉到百度頁面(註意後面的引號，分別在秒數的前面和網址的後面)--> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <!--設定當前網頁的兼容模式為IE7(哪怕你用其他版本的瀏覽器打開，它也是支持IE7版本的)-->示例
非 meta標簽
<!--設置頭部圖標--> <link rel="icon" href = "http://www.jd.com/favicon.ico"> <link rel = "stylesheet" href = "css.css"> <script src="hello.js"></script> #加載js示例
3 body 內常用的標簽
基本標簽
<hn> :n 的取值範圍 1-6. 用來表示標題
<p> :段落標簽 .包裹的內容被換行,並且上下文之間有一行空白
<b> <strong> 加粗標簽
<strike> :為文字加上一條中線
<em> <i> 文字傾斜
<sup>和<sub> 上角標和下角標
<br> 換行
<hr> :水平線
<body>
<h1><span>sale $9.9</span> <del>原價9988元</del></h1>
<div id = "topbar">
<div class = "top-l">左邊區域</div>
<div class = "shopbar"> 購物<span>車</span></div>
<div class="info">登陸</div>
</div>
<div id = "header">
我是頭部
</div>
<div id ="container">
我是內容區域
</div>
<div id = "footer">
我是腳步
</div>
</body>
</html>
示例
總結知識點
標簽分類1
自閉和標簽:單標簽
閉合標簽:雙標簽
標簽分類2
塊級標簽:就是獨占一行 ,可以自己設置寬高 如div p h1 -h6
內聯標簽:按內容占位.高度和廣度是由自己的內容填充的 如 a br img
判斷塊級標簽和內聯標簽的方法：
1.是否獨占一行（可以通過設置背景顏色去判斷）
2.是否可以單獨為元素設置高度和寬度
<div></div> :其只是一個塊級元素,並無實際意義,主要通過css為其賦予不同的表現
<span></span> 並無實際意義主要通過css為其賦予不同的表現
圖形標簽:<img>
src:要顯示圖片的路徑
alt:圖片沒有加載成功的提示
title:鼠標懸浮時的提示信息
width:圖片的寬
height: 圖片的高(寬高兩個屬性只用1 個會自動等比縮放)
超鏈接標簽:<a></a>
什麽是超鏈接
所謂的超鏈接就是從一 個網頁指向一個目標的鏈接關系,這個目標闊以是另一個網頁,也闊以是相同網頁 上的不同位置,還可以是一個圖片,一個電子郵件地址,甚至一個應用程序
‘‘‘ <a href="" target="_blank" >click</a> href屬性指定目標網頁地址。該地址可以有幾種類型： 絕對 URL - 指向另一個站點（比如 href="http://www.jd.com） 相對 URL - 指當前站點中確切的路徑（href="index.htm"） 錨 URL - 指向頁面中的錨（href="#top"） ‘‘‘
表單標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> <meta name = "viewport" content = "width=device-width inital -scale =1 "> </head> <body> <form action ="https://www.baidu.com/s"> <input type = "text" name = "wd" value =""/> <input type="submit" value="搜索ya"> </form> </body> </html>
功能:表單用於向服務器傳輸數據,從而實現用戶與WEB服務器的交互.
表單能夠包含 input系列的標簽,比如文本字段,復選框,單選框,提交按鈕等
表單還可以包括textarea,select,fieldset 和label標簽
表單屬性:
action:表單提交到哪裏,,一般指向服務端的一個程序,程序接受到表單提交過來的數據(即表單元素值)
做相應處理
method:表單提交的方式,post/get默認取值就是get
##########################################
<!----src :鏈接的圖片資源-->
<!--alt: 圖片資源加載失敗,顯示的文本-->
<!--html標簽的特征
1 空白折疊現象
對空白和換行不敏感
標簽要嚴格封閉
html 中
1 行內標簽
(1) 在一行內顯示 span strong em i del a
不能設置寬高-->
<!--2 行內塊標簽
(1)在一行內顯示
(2) 可以設置寬高-->
<!--2塊級標簽-->
<!--(1)獨占一行
(2) 可以設置寬高,如果不設置寬高,默認的寬是父親的100%.高度是內容的寬高-->
前端相關1