HTML5
1.初識(shí)HTML
- Hyper Text Markup Language 超文本標(biāo)記語言
- 超文本：文字、圖片、音頻、視頻、動(dòng)畫
- 標(biāo)記：利用標(biāo)簽的語言
- 2013-5-6-HTML5
- W3C（World Wide Web Consortium） 萬維網(wǎng)聯(lián)盟
- 結(jié)構(gòu)化標(biāo)準(zhǔn)語言（HTML、XML）
- 表現(xiàn)標(biāo)準(zhǔn)語言（CSS）
- 行為標(biāo)準(zhǔn)（DOM、ECMAScrip）
2.網(wǎng)頁基本信息
- 注釋：<!— —>
- DOCTYPE 告訴瀏覽器我們使用什么規(guī)范
- Ctrl+/ 注釋的快捷鍵
- meta 描述性標(biāo)簽，描述網(wǎng)站的一些信息，一般用來做SEO
<!--meta描述性標(biāo)簽，一般用來描述我們的網(wǎng)站，用來做SEO-->
<meta charset="UTF-8">
<meta content="hi" name="keywords">
<meta content="你好" name="description">
3.網(wǎng)頁基本標(biāo)簽
- 標(biāo)題標(biāo)簽h1、h2、h3
- 段落標(biāo)簽p
- 換行標(biāo)簽br
- 水平線標(biāo)簽hr
- 字體樣式標(biāo)簽strong、em
- 注釋和特殊符號(hào)
- pre標(biāo)簽：保留輸入內(nèi)容原始格式顯示，不用輸空格和換行
- body屬性:
- bgcolor背景顏色
- background背景圖片
<!--標(biāo)題標(biāo)簽-->
<h1>一級(jí)標(biāo)簽</h1>
<h2>二級(jí)標(biāo)簽</h2>
<h3>三級(jí)標(biāo)簽</h3>
<h4>四級(jí)標(biāo)簽</h4>
<h5>五級(jí)標(biāo)簽</h5>
<h6>六級(jí)標(biāo)簽</h6>
<!--段落標(biāo)簽-->
<p>兩只老虎兩只老虎愛跳舞</p>
<p>一直沒有尾巴一直沒有耳朵</p>
<p>真奇怪真奇怪</p>
<!--換行標(biāo)簽-->
兩只老虎兩只老虎愛跳舞 <br/> 一直沒有尾巴一直沒有耳朵
<!--水平線標(biāo)簽-->
<hr/>
<!--字體樣式標(biāo)簽-->
<h1>字體樣式標(biāo)簽</h1>
粗體： <strong>i love u</strong>
<br/>
斜體：<em>i love u</em>
<br>
<!--特殊符號(hào)-->
空 格：<br>
空 格
大于號(hào)>
<br>
小于號(hào)<
<br>
版權(quán)符號(hào)©
<!--特殊符號(hào)記憶方式
& ；
-->
4.圖像標(biāo)簽
- 常見的圖像格式
- JPG
- GIF
- PNG
- BMP
- ……
- img標(biāo)簽
<!--
src：圖片地址
相對(duì)地址、絕對(duì)地址
../ 代表上一級(jí)目錄
-->
<img alt="圖片名字" src="../resources/image/1.JPG"title="懸停文字"width="300"height="300">
5.超鏈接標(biāo)簽a
- 分類
- 文本超鏈接
- 圖像超鏈接
<a name="top">頂部</a>
<!--快捷鍵a標(biāo)簽+table
href必須填，表示跳轉(zhuǎn)到哪個(gè)頁面
target:表示窗口在哪里打開
_blank 在新頁面中打開
——self在自己網(wǎng)頁中打開
-->
<a href="1.我的第一個(gè)網(wǎng)頁.html" target="_blank">點(diǎn)我跳轉(zhuǎn)到頁面1</a>
<br>
<br>
<a target="_self">點(diǎn)我跳轉(zhuǎn)到百度</a>
<br>
<br>
<a href="1.我的第一個(gè)網(wǎng)頁.html">
<img alt="圖片名字" height="300" src="../resources/image/1.JPG" title="懸停文字" width="300">
</a>
<br>
<!--錨鏈接
1.先要標(biāo)記名稱
2.通過 # 跳轉(zhuǎn)到標(biāo)記
-->
<a href="#top">回到頂部</a>
<br>
<a name="down">底部</a>
<!--功能型鏈接
郵件鏈接：mailto：
QQ鏈接：在qq推廣上自動(dòng)生成代碼，復(fù)制到代碼里
-->
<a href="mailto:2951986411@qq.com">點(diǎn)擊聯(lián)系我</a>
<!--第三個(gè)頁面直接跳轉(zhuǎn)到第四個(gè)-->
<a href="4.超鏈接標(biāo)簽.html#down">頁面4的底部</a>
6.塊元素和行內(nèi)元素
- 塊元素
- 無論內(nèi)容多少，獨(dú)占一行
- p、h1-h6
- 行內(nèi)元素
- 內(nèi)容撐開寬度，左右都是行內(nèi)元素的可以排在一行
- a、strong、em
7.列表標(biāo)簽
- 列表是信息資源的一種展示形式，可能使信息結(jié)構(gòu)化和條理化，并以列表的樣式顯示出來，瀏覽者可以更快捷的獲得相應(yīng)信息
- 列表的分類
- 無序列表
- 有序列表
- 定義列表
<!--有序列表-->
<ol>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>pythom</li>
<li>后端</li>
<li>前端</li>
</ol>
<hr>
<!--無序列表
應(yīng)用范圍：導(dǎo)航、側(cè)邊欄......
-->
<ul>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>pythom</li>
<li>后端</li>
<li>前端</li>
</ul>
<hr>
<!--自定義列表
dl：標(biāo)簽
dt：列表title
dd：列表內(nèi)容
-->
<dl>
<dt>語言</dt>
<dd>java</dd>
<dd>python</dd>
<dd>C</dd>
<dd>C++</dd>
<dt>位置</dt>
<dd>新疆</dd>
<dd>北京</dd>
<dd>南京</dd>
8.表格標(biāo)簽
- 作用：
- 簡單通用
- 結(jié)構(gòu)穩(wěn)定
- 基本結(jié)構(gòu)
- 單元格
- 行
- 列
- 跨行、合并單元格
- 跨列、合并單元格
<!--表格table
行 tr (row)
列 td (data)
-->
<table border="1px">
<tr>
<!--colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
9.媒體元素
- 視頻元素video、音頻元素audio
<!--媒體元素：音頻和視頻
controls 控制開關(guān)、暫停、播放的按鈕
autoplay 自動(dòng)播放
-->
<video src="../resources/video/我該用什么把你留住——使用Clipchamp制作.mp4"controls autoplay></video>
<audio src="../resources/audio/福祿壽FloruitShow%20-%20我用什么把你留住.mp3 "controls autoplay></audio>
10.頁面結(jié)構(gòu)分析
<header><h2>網(wǎng)頁頭部</h2></header>
<section><h2>網(wǎng)頁主體</h2></section>
<footer><h2>網(wǎng)頁腳步</h2></footer>
11.iframe內(nèi)聯(lián)框架
<!--<!–<iframe allowfullscreen="true" border="0"–>-->
<!--<!– frameborder="no" framespacing="0" scrolling="no" –>-->
<!--<!– src="http://player.bilibili.com/player.html?aid=925251644&bvid=BV1kT4y1G7KW&cid=179432384&page=1">–>-->
<!--</iframe>-->
<iframe src="https:\\www.bilibili.com"name="hello" frameborder="0"width="800px"height="400px"></iframe>
<iframe src=""name="hello" frameborder="0"width="800px"height="400px"></iframe>
<a href="1.我的第一個(gè)網(wǎng)頁.html"target="hello">點(diǎn)擊跳轉(zhuǎn)</a>
12.表單語法
- 用戶名、密碼、輸入框、按鈕
- form標(biāo)簽 屬性 method action 必填
- method規(guī)定如何發(fā)送表單數(shù)據(jù)，get、post
- action表示向何處發(fā)送表單數(shù)據(jù)
<h1>注冊</h1>
<!--表單form
action：提交的位置可以是網(wǎng)站，也可以是一個(gè)請求處理地址
method:post\get提交方式
get方式提交可以在url中看到提交的信息，不安全但高效，不能傳輸大文件
post方式提交比較安全，可以傳輸大文件，但仍然可以被抓包發(fā)現(xiàn)
-->
<form action="1.我的第一個(gè)網(wǎng)頁.html" method="post"></form>
<!--文本輸入框 <input type="text"> -->
<p>名字：<input name="username" type="text"></p>
<!--密碼框：<input type="password"name="pwd"-->
<p>密碼：<input name="pwd" type="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
13.文本框和單選框
-
表單元素格式文章來源：http://www.zghlxwxcb.cn/news/detail-502435.html
-
name：與java相關(guān)聯(lián)，程序讀取就讀取name文章來源地址http://www.zghlxwxcb.cn/news/detail-502435.html
<h1>注冊</h1>
<!--表單form
action：提交的位置可以是網(wǎng)站，也可以是一個(gè)請求處理地址
method:post\get提交方式
get方式提交可以在url中看到提交的信息，不安全但高效，不能傳輸大文件
post方式提交比較安全，可以傳輸大文件，但仍然可以被抓包發(fā)現(xiàn)
value:默認(rèn)初始值
maxlength:z最長寫幾個(gè)字符
size：文本框長度
-->
<form action="1.我的第一個(gè)網(wǎng)頁.html" method="post"></form>
<!--文本輸入框 <input type="text"> -->
<p>名字：<input maxlength="8" name="username" size="30" type="text" value="請輸入用戶名"></p>
<!--密碼框：<input type="password"name="pwd"-->
<p>密碼：<input name="pwd" type="password" ></p>
<!--單選框標(biāo)簽
type：radio
value：單選框的值
name：表示組，sex組只能選一個(gè)
-->
<p>性別：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl"name="sex">女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
14.按鈕和多選框按鈕
<!--多選框
type：checkbox
-->
<p>愛好
<input type="checkbox"value="sleep"name="hobby">睡覺
<input type="checkbox"value="code"name="hobby">敲代碼
<input type="checkbox"value="play"name="hobby">玩
<input type="checkbox"value="eat"name="hobby">吃
</p>
<!--按鈕
type：button
type:image----圖片按鈕
type:submit---提交按鈕
type：reset---重置按鈕
-->
<p>按鈕
<input type="button"name="btn1"value="點(diǎn)擊變長">
<input type="image"src="../resources/image/1.JPG">
</p>
15.列表框文本域和文件域
<!--下拉框、列表框
select
selected:默認(rèn)選中
-->
<p>下拉框：
<select name="國家" >
<option value="china">中國</option>
<option value="usa">美國</option>
<option value="瑞士"selected>瑞士</option>
<option value="JP">日本</option>
</select>
</p>
<!--文本域
textarea
-->
<p>反饋
<br>
<textarea name="text1" cols="50" rows="10">文本內(nèi)容</textarea>
</p>
<!--文件域
type:file
name:files
-->
<input type="file"name="files">
<input type="button"value="上傳" name="upload">
16.搜索框滑塊和簡單驗(yàn)證
<!--郵件驗(yàn)證 type:email-->
<p>郵箱：
<input type="email"name="email">
</p>
<!--URL type:url-->
<p>URl：
<input type="url"name="url">
</p>
<!--數(shù)字 type：number-->
<p>數(shù)字：
<input type="number"name="num"max="100"min="0"step="10">
</p>
<!--滑塊 type:range-->
<p>滑塊
<input type="range"name="voice" min="0"max="100"step="2">
</p>
<!--搜索框 type:search-->
<p>搜索
<input type="search"name="search">
</p>
17.表單的應(yīng)用
- 分類
- 隱藏域hidde
- 只讀readonly標(biāo)簽
- 禁用disable標(biāo)簽
- 通過隱藏域傳遞默認(rèn)值
<p>名字：<input maxlength="8" name="username" size="30" type="text" value="請輸入用戶名"readonly></p>
<!--密碼框：<input type="password"name="pwd"-->
<p>密碼：<input name="pwd" type="password"hidden value="123456"></p>
<p>性別：
<input name="sex" type="radio" value="boy"disabled>男
<input name="sex" type="radio" value="girl">女
</p>
<!--增強(qiáng)鼠標(biāo)可用性
點(diǎn)擊“你點(diǎn)我試試”，鼠標(biāo)即鎖定mark的位置
-->
<p>
<label for="mark">你點(diǎn)我試試</label>
<input id="mark" type="text">
</p>
18.表單初級(jí)驗(yàn)證
- 常用方式
- placeholder
- required
- pattern
//placeholder一直在輸入框中顯示起到提示信息作用
<p>名字：<input maxlength="8" name="username" size="30" type="text"placeholder="請輸入用戶名"></p>
//required 非空判斷
<p>名字：<input maxlength="8" name="username" size="30" type="text"placeholder="請輸入用戶名"required></p>
//pattern 正則表達(dá)式
<!--pattern
可以通過腳本之家查找正則表達(dá)式
-->
<p>自定義郵箱：
<input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ">
</p>
到了這里，關(guān)于一篇隨筆學(xué)會(huì)HTML的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
