一個簡單的html實例css
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
各項說明html
<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6>
一共只有6級標題
格式:<hr/>效果:頁面顯示水平橫線
html5
格式:web
<p>我是一段文本</p>
<p>我是一段文本</p>
我是一段普通文本
我是一段普通文本
格式:面試
<img src="/i/eg_tulip.jpg"
alt="上海鮮花港 - 鬱金香"
title="你好"
width="300" height="478"/>解釋:
src:圖片的路徑
alt:圖書沒法顯示時,替換的文字
title:鼠標放到圖片上顯示的文字
width:圖片的寬度
height:圖片的高度
同時修改高度和寬度會致使圖片變形,可選擇其中一個設置,系統會自動進行比列調整
圖片標籤中的路徑問題
其實想給src屬性賦值有兩種方式
經過相對路徑賦值(掌握)
相對路徑就是每次都從.html文件所在的文件夾開始查找, 咱們稱之爲相對路徑
同級瀏覽器
<a href="指定須要跳轉的目標界面">須要展示給用戶查看的內容</a>
a標籤中有一個叫作target屬性, 這個屬性的做用就是專門用於控制如何跳轉服務器
<a href="#center">跳轉到中部</a>`
`<h2 id="center">我是中部</h2>
注意點:網絡
<a href="13-錨點測試界面.html#bottom" target="_blank">跳轉到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面33333</h2>
什麼是列表標籤?app
格式:框架
<ul>
<li>須要顯示的條目</li>
</ul>
li實際上是英文list item的縮寫
<ol>
<li></li>
</ol>
<dl>
<dt></dt>
<dd></dd>
</dl>
什麼是表格標籤?
<table>
<tr>
<td>須要顯示的內容</td>
</tr>
</table>
<td colspan="2"></td>
含義: 把當前單元格當作兩個單元格來看待
注意點:
<td rowspan="2"></td>
含義: 把當前單元格當作兩個單元格來看待
格式:
<form>
表單元素
</form>
常見的表單元素
1.input標籤:input標籤有一個type屬性, 這個屬性有不少類型的取值, 取值的不一樣就決定了input標籤的功能和外觀不一樣
<form>
<!--明文輸入框-->
帳號:<input type="text"><br>
<!--暗文輸入框-->
密碼:<input type="password"><br>
<!--給輸入框設置默認值-->
帳號:<input type="text" value="lnj"><br>
密碼:<input type="password" value="123"><br>
<!--
單選框
注意點:
1.默認狀況下單選框不會互斥, 要想單選框互斥那麼必須給每個單選框標籤都設置一個name屬性, 而後name屬性還必須設置相同的值
2.要想讓單選框默認選中某一個框子, 那麼能夠給input標籤添加一個checked屬性
3.在HTML中若是屬性的取值和屬性的名稱同樣, 能夠只寫一個. 可是在XHTML中必須寫上取值, 因此在企業開發中咱們推薦你們不要省略取值
-->
性別:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>
<!--多選框-->
愛好:
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球
<input type="checkbox" checked="checked">足浴
</form>
2.按鈕標籤button
定義一個普通按鈕
做用:配合JS完成一些操做
<input type="button" value="我是按鈕" onclick="alert('lnj')">
定義一個圖片按鈕
做用:配合JS完成一些操做
<input type="image" src="images/register.jpg" onclick="alert('lnj')">
定義重置按鈕
做用:清空表單中的數據
注意點:
重置按鈕有默認的按鈕標題, 默認叫作 重置
也能夠經過value屬性來修改默認標題
<input type="reset" value="清空">
定義提交按鈕
<input type="submit">
做用:將表單中的數據提交到遠程服務器
注意點:
要想把表單中的數據提交到遠程服務器,必須知足兩個條件
1.告訴表單須要提交到哪一個服務器
能夠經過form標籤的action屬性來告訴表單,須要提交到那個服務器
2.告訴表單,表單中的哪些數據須要提交
隱藏域
做用: 用於悄悄咪咪的收集用戶的一些數據, 隱藏域是不會出如今界面中的
<input type="hidden" name="cc" value="it666">
3.Label標籤
1.默認狀況下文字和輸入框是沒有關聯關係的, 也就是說點擊文字輸入框不會聚焦, 若是想點擊文字時讓對應的輸入框聚焦, 那麼就須要讓文字和輸入框進行綁定
2.要想讓輸入框和文字綁定在一塊兒, 那麼咱們可使用Label標籤
3.綁定的格式:
3.1將文字利用label標籤包裹起來
3.2給輸入框添加一個id屬性
3.3在label標籤中經過for屬性和輸入框中的id進行綁定便可
<label for="account">帳號:</label><input type="text" id="account">
4.Datalist標籤
做用: 給輸入框綁定待選項
datalist格式:
<datalist>
<option>待選項內容</option>
</datalist>
如何給輸入框綁定待選列表
請輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>奔馳</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
5.select標籤
做用: 用於定義下拉列表
格式:
<select>
<optgroup label="分組名稱">
<option>列表數據</option>
</optgroup>
</select>
注意點:
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>廣西</option>
<option selected="selected">武漢</option>
</select>
6.textarea標籤
做用: 定義一個多行輸入框
格式:
<textarea>
11111
</textarea>
注意點:
placeholder
<input type="text" placeholder="請輸入用戶名">
用於指定input輸入框的佔位符號, 特色: 用戶輸入數據以後佔位符號會自動消失
autofocus
<input type="text" autofocus>
用於指定默認讓哪個輸入框獲取焦點, 特色: 不能同時讓多個輸入框獲取焦點
multiple
<input type="file" multiple>
type="file" 就是告訴瀏覽器, 當前的input輸入框是須要選擇文件
特色: 默認狀況下只能選擇一個文件
若是在input標籤中添加一個multiple屬性, 就可讓input同時選擇多個文件
autocomplete
<input type="text" autocomplete="off">
記錄用戶提交過的數據, 注意點: input輸入框必須有name屬性才能記錄, 而且只有提交以後才能記錄
required
<input type="text" required>
強制用戶輸入內容, 若是沒有輸入內容不能提交表單
accesskey
<input type="text" accesskey="s">
能夠經過配置快捷鍵讓輸入框獲取焦點
快捷鍵就是 Alt + 指定的符號
表單練習
<form action="http://www.baidu.com">
<fieldset>
<legend>註冊界面</legend>
<p>
帳號: <input type="text" name="account">
</p>
<p>
密碼: <input type="password" name="pwd">
</p>
<!--
在單選框和多選框中,全部的項目的name必須一致
在表單標籤中,除了按鈕標籤之外的標籤,均可以經過value來指定須要提交到服務器的數據
-->
<p>
性別:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" checked="checked" name="gender" value="yao">保密
</p>
<p>
愛好:
<input type="checkbox" name="sport" value="basketball">籃球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" checked="checked" name="sport" value="crazy">足浴
</p>
<p>
簡介:
<textarea cols="30" rows="10" name="desc"></textarea>
</p>
<p>
生日:
<input type="date" name="birthday">
</p>
<p>
郵箱:
<input type="email" name="email">
</p>
<p>
電話:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="註冊">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
什麼是video標籤?
做用: 播放視頻
格式:
<video src="">
</video>
video標籤的屬性
src: 用於告訴video標籤須要播放的視頻地址
autoplay: 用於告訴video標籤是否須要自動播放視頻
controls: 用於告訴video標籤是否須要顯示控制條
poster: 用於告訴video標籤視頻沒有播放以前顯示的佔位圖片
loop: 通常用於作廣告視頻, 用於告訴video標籤視頻播放完畢以後是否須要循環播放
preload: 預加載視頻, 可是須要注意preload和autoplay相沖, 若是設置了autoplay屬性, 那麼preload屬性就會失效
muted:靜音
width/height: 和img標籤中的如出一轍
第二種格式
格式:
<video>
<source src="" type="">
<source src="" type="">
</video>
第二種格式存在的意義:
因爲視頻數據很是很是的重要, 因此五大瀏覽器廠商都不肯意支持別人的視頻格式, 因此致使了沒有一種視頻格式是全部瀏覽器都支持的
這個時候W3C爲了解決這個問題, 因此推出了第二個video標籤的格式
video標籤的第二種格式存在的意義就是爲了解決瀏覽器適配問題
video 元素支持三種視頻格式, 咱們能夠把這三種格式都經過source標籤指定給video標籤, 那麼之後當瀏覽器播放視頻時它就會從這三種中選擇一種本身支持的格式來播放
注意點:
當前經過video標籤的第二種格式雖然可以指定全部瀏覽器都支持的視頻格式, 可是想讓全部瀏覽器都經過video標籤播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標籤, 不然一樣沒法播放
在過去的一些瀏覽器是不支持HTML5標籤的, 因此爲了讓過去的一些瀏覽器也可以經過video標籤來播放視頻, 那麼咱們之後能夠經過一個JS的框架叫作html5media來實現
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
播放音頻
<audio src="">
</audio>
<audio>
<source src="" type="">
</audio>
注意點:
做用:利用summary標籤來描述概要信息, 利用details標籤來描述詳情信息
默認狀況下是摺疊展現, 想看見詳情必須點擊
格式:
<details>
<summary>概要信息</summary>
詳情信息
</details>
做用: 跑馬燈
格式:<marquee>內容</marquee>
屬性:
爲何HTML中有一部分標籤會被廢棄?
由於當前的HTML中的標籤只有一個做用, 就是用來添加語義
而早期的HTML標籤中有一部分標籤是沒有語義的,
有一部分標籤是用來修改樣式的
因此這部分標籤就被淘汰了
<br> <hr> <font>
<b> <u> <i> <s>
以上標籤都是沒有語義的,都是用來修改樣式的
什麼是字符實體?
在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含義的, 是不能在瀏覽器中直接顯示出來的, 那麼這些東西要想顯示出來就必須經過字符實體
空格, 一個 就是一個空格, 有多少個 就有多少個空格
< 小於符號 <
(less than)
> 大於符號 >(greater than)© 版權符號