HTML知識(shí)點(diǎn)
HTML規(guī)范由W3C組織制定的劲妙。
W3C的創(chuàng)始人是Sir Timothy John Bermers-Lee (李爵士)
命令行whois用來查看某個(gè)域名擁有者的身份
Dribbble.com (追波網(wǎng))設(shè)計(jì)師的社交網(wǎng)絡(luò)色鸳，查看優(yōu)秀的設(shè)計(jì)作品铃剔，可以仿項(xiàng)目提升css水平联逻。
<b>表示加粗，<strong>表示內(nèi)容重要纵刘。
p標(biāo)簽的英文全稱是paragraph
a標(biāo)簽的英文全稱是anchor
不能有內(nèi)容的標(biāo)簽[空元素]：img土榴、input、meta印机、link矢腻、hr门驾、br射赛、col、colgroup
HTML5不推薦使用閉合的標(biāo)簽奶是，推薦:<input type = " text ">
可以出現(xiàn)在<head>內(nèi)的元素：base title meta link script noscript
iframe: iframe可以擁有一個(gè)name聂沙，a標(biāo)簽的target可以通過name指向這個(gè)iframe;現(xiàn)代前端開發(fā)中秆麸，iframe很少用；iframe用于在當(dāng)前頁(yè)面里嵌入一個(gè)頁(yè)面及汉。
meta聲明當(dāng)前頁(yè)面的charset:
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
body標(biāo)簽的默認(rèn)margin是8像素沮趣。
div,ul,h1默認(rèn)display為block。
img input video 是可替換元素坷随，寬高由自己決定房铭，也可以通過屬性和樣式改變大小。
HTML代表什么意思：Hyper Text Markup Language
誰(shuí)在制定Web標(biāo)準(zhǔn)：The World Wide Web Consortium(W3C)
李爵士發(fā)明了HTML温眉，他的同事后來發(fā)明了CSS
<em>標(biāo)簽表示語(yǔ)氣重缸匪，<strong>標(biāo)簽表示地位重。
在新窗口打開鏈接：<a href="url" target="_blank">
內(nèi)聯(lián)元素展示的時(shí)候不需要另起一行类溢。
有序列表<ol>
子彈列表<ul>
CheckBox：<input type = "checkbox">
text input: <input type="text">
drop-down list: <select>
text area: <textarea>
插入一個(gè)標(biāo)簽：<img src="image.gif" alt="MyImage">
插入背景圖片：<body style = "background-image:url(background.gif)">
HTML注釋：
塊級(jí)元素是另起一行的凌蔬。
<title>定義了文檔的title。
HTML5的doctype: <!DOCTYPE html>
<footer>定義了HTML頁(yè)腳闯冷。
可以嵌入一個(gè)svg直接到頁(yè)面里砂心。
正確的播放video： <video>
正確的播放audio：<audio>
內(nèi)容可編輯contenteditable屬性：<div contenteditable>你好</div>
svg是XML形式。
<canvas>元素用來畫圖蛇耀。
在HTML中辩诞，required屬性被用來input必須被填充。
<input type="search"> 搜索框蒂窒，圓角邊框躁倒，多出一個(gè)清空按鈕荞怒。
<input type="range"> 滑動(dòng)塊。
<nav>定義了一個(gè)導(dǎo)航鏈接秧秉。
<aside>定義了和文章不相關(guān)的內(nèi)容褐桌。
<header>定義了header。
<a>標(biāo)簽和<button>的區(qū)別：到一個(gè)新頁(yè)面用a標(biāo)簽象迎，打開一個(gè)彈框荧嵌，用button。
<section>表示一個(gè)章節(jié)砾淌。
&要寫成&
常見標(biāo)簽
-
iframe 標(biāo)簽
iframe也是一個(gè)可替換標(biāo)簽啦撮，默認(rèn)高度50，寬度100
點(diǎn)擊標(biāo)簽時(shí)汪厨，iframe變換為相應(yīng)頁(yè)面
frameborder消除邊框
name要結(jié)合a標(biāo)簽才有用
嵌套頁(yè)面
<iframe src="https://www.baidu.com" name="xxx"></iframe>
- a 標(biāo)簽
跳轉(zhuǎn)頁(yè)面（HTTP GET 請(qǐng)求）
<a target = "_blank">QQ</a> //新窗口打開
<a target = "_self">QQ</a> //本窗口打開
<a target = "_parent">QQ</a> //在父頁(yè)面打開
<a target = "_top">QQ</a> //在頂層窗口打開
download屬性
<a download>下載</a>
content-type: application/octet-stream 瀏覽器就會(huì)以下載的形式接受請(qǐng)求,而不是在頁(yè)面上展示赃春。
如果沒有寫，就content-type: text/html,就在a標(biāo)簽上寫 download 強(qiáng)制下載劫乱。
href
<a href = "qq.com" >QQ</a> //相對(duì)地址织中，當(dāng)做當(dāng)前子頁(yè)面
<a >QQ</a> //跳轉(zhuǎn)到QQ網(wǎng)站
<a >QQ</a> //使用當(dāng)前網(wǎng)站協(xié)議，并跳轉(zhuǎn)
<a href = "xxx.com" >QQ</a> //跳轉(zhuǎn)到/xxx.html
<a href = "#xxx" ></a> //錨點(diǎn)不發(fā)請(qǐng)求衷戈，頁(yè)面內(nèi)的跳轉(zhuǎn)
<a href = "?name=xxx" ></a> //跳轉(zhuǎn)到...?name=xxx 發(fā)起一個(gè)get請(qǐng)求
<a href = "javascript: alert(1);" ></a> //偽協(xié)議狭吼，彈出1
<a href = "javascript: ;" ></a> //和#相比，#會(huì)刷新頁(yè)面殖妇，并跳轉(zhuǎn)到頁(yè)首刁笙，javascript: ;不變化
屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
- form 標(biāo)簽
跳轉(zhuǎn)頁(yè)面（HTTP POST 請(qǐng)求）
如果form表單里面沒有提交按鈕，就無法提交表單谦趣。
get和post區(qū)別：get獲取內(nèi)容疲吸，post上傳內(nèi)容。
form也有target屬性蔚润。
密碼在http中是明文傳輸?shù)陌醢保灰腥嗽谶@中間做監(jiān)聽，就能獲取到密碼嫡纠。
傳輸過程中烦租，一個(gè)英文占一個(gè)UTF-8字節(jié)，一個(gè)漢字占3個(gè)UTF-8字節(jié)除盏，漢字會(huì)轉(zhuǎn)義叉橱，%加編碼x3個(gè)。
file協(xié)議不支持post
get沒有第四部分者蠕，post可以有第一部分
沒有method就是get請(qǐng)求
屬性見 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
-
input / button
區(qū)別：是否為「空標(biāo)簽」
input按鈕窃祝，type=button，不會(huì)成為提交按鈕踱侣。type=submit粪小，才會(huì)成為提交按鈕大磺。
checkbox,點(diǎn)擊文字，選中多選框探膊，label的for和input的id是一對(duì)杠愧，要一起出現(xiàn)
不使用for和id也能點(diǎn)擊文字選中input的方法
老司機(jī)寫法
完整表單
預(yù)覽圖
提交結(jié)果
下拉分組
multiple設(shè)置可以多選；disabled設(shè)置不能選中逞壁；selected設(shè)置默認(rèn)選中
多行文本
resize:none設(shè)置不能拖拽流济，rous設(shè)置行數(shù)纷妆，但不準(zhǔn)厢岂，推薦寫寬高
input 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input
一個(gè)form表單中，只有一個(gè)button按鈕而叼，會(huì)自動(dòng)提升為提交按鈕姿骏。如果寫了type="button"糖声，就是一個(gè)按鈕，沒有提交按鈕工腋。
button 的屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button
-
table 標(biāo)簽示例
用于展示數(shù)據(jù)
border-collapse:collapse邊框合并
屬性見：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
知識(shí)點(diǎn)：
- 空標(biāo)簽
- 可替換標(biāo)簽
- 全局屬性
- display 不止 3 種
網(wǎng)站HTML
布局劃分
明年會(huì)出Grid布局姨丈，可以復(fù)雜布局。
HTML代碼
HTML代碼
全部代碼
<!DOCTYPE html>
<html>
<head>
<title>個(gè)人簡(jiǎn)歷</title>
<link rel="stylesheet" href="./a.css">
</head>
<body>
<div class="topNavBar clearfix">
<a class="logo" href="#" alt="logo" style="float: left; ">
<span class="rs">RS</span><span class="card">card</span>
</a>
<nav style="float: right;">
<ul class="clearfix">
<li><a href="#">關(guān)于</a></li>
<li><a href="#">技能</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">日歷</a></li>
<li><a href="#">聯(lián)系方式</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
</div>
<div class="banner" style="background-image: url(#)"></div>
<main>
<div class="card">
<div class="pictureAndText">
<div class="picture">
<img src="" alt="頭像">
</div>
<div class="text">
<div class="profile">
<span class="welcome">Hello</span>
<h1>XXX</h1>
<p>前端開發(fā)工程師</p>
<hr>
<dl>
<dt>年齡</dt>
<dd>18</dd>
<dt>所在城市</dt>
<dd>北京</dd>
<dt>郵箱</dt>
<dd>fangyinghang@foxmail.com</dd>
<dt>手機(jī)</dt>
<dd>13812345678</dd>
</dl>
</div>
</div>
</div>
<footer class="media">
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
<a href="#"><img src="#" alt="..."></a>
</footer>
</div>
<a class="button" href="#">下載 PDF 簡(jiǎn)歷</a>
<p>
資深前端工程師擅腰，資深前端講師，現(xiàn)在在 饑人谷 教前端課程翁潘。<br>
技能：前端開發(fā)趁冈，Rails 開發(fā)，Node.js 開發(fā)
</p>
</main>
<section>
<h2>技能</h2>
<ol>
<li>HTML 5 & CSS 3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue</li>
<li>React</li>
<li>HTTP</li>
</ol>
</section>
<section>
<h2>作品集</h2>
<nav>
<ol>
<li>所有</li>
<li>框架</li>
<li>原生JS&CSS</li>
</ol>
</nav>
<div class="jobs">
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</section>
</body>
</html>
