HTML5-基础语法
為什么要學習HTML5
1>未來的一種趨勢
2>增加面試，開發競爭力
前端工程師：HTML、CSS、JavaScript、框架使用
互聯網原理：
請求數據。 用戶通過在瀏覽器輸入一個網址，通過HTTP協議向服務器發送一個請求，服務器做出響應，將相關的網頁數據傳輸到本地計算機，在瀏覽器上渲染出來。 【輸入網址->Browser發送請求->Server做出響應-> Browser獲取網頁數據->視圖渲染】 數據：文字、圖片、視頻、音頻等。 服務器：Server保存我們的數據。 瀏覽器：Browser。作用：HTTP請求的發起、接收，都是由瀏覽器來完成的。IE、谷歌(Chrome)、火狐(FireFox)、蘋果(Safari)、歐朋 臨時文件夾作用：第二次訪問同一個網站速度會變快，因為第一次瀏覽的時候，大部分文件已經緩存到本地了。 Http請求 HTTP發送請求的方法：直接輸入網址，點擊超鏈接。 請求：Request，瀏覽器根據網址向對應的服務器發送請求。 響應：Response，服務器根據請求響應文件，將頁面數據傳輸給客戶端，在瀏覽器中進行頁面的渲染。訪問頁面時會同時發送多個HTTP請求，包含網頁的圖片，視頻，音頻等文件。?
手機App的開發模式
1>原生(純OC)
2>純HTML5
3>原生+HTML5
4>React Native
網頁的組成:
一個有具體功能的完整的頁面，一般由三部分組成
①HTML: 網頁的具體內容和結構
②CSS: 網頁的樣式
③JavaScript【掌握】網頁的交互效果，比如對用戶鼠標事件作出響應。
什么是HTML：
HyperText Markup Language, 超文本標記語言, 其實就是文本，由瀏覽器負責將它解析成具體的網頁內容。
HTML組成：N個標簽（節點、元素、標記組成）
簡單的HTML結構
<!--網頁三要素：關鍵字，描述，標題--> <!DOCTYPE html> <!--聲明文檔類型,向下兼容老版本--> <html lang="en"> <!-- 網頁最大的便簽,圈地 lang=“en”網頁翻譯用的 --> <head><!-- 設置網頁的基本信息,與瀏覽器通信--><!--設置語言的編碼格式，一般采用UTF-8--><meta charset="UTF-8"><!-- 設置關鍵詞方便搜索引擎查找 --><meta name="Keywords" content="簡單的HTML結構"><!-- 設置網頁描述信息--><meta name="Description" content="簡單的HTML基礎語法講解"><!-- 設置標題--><title>簡單的HTML結構</title> </head> <!--網頁主題結構標簽 給用戶看的--> <body><div ><p>簡單的HTML結構~</p></div> <!--script:定義客戶端腳本元素既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。 必需的type 屬性規定腳本的 MIME 類型。--> <script type="text/javascript"></script> </body> </html>?HTML語法：
<!-- 1.標簽之間對空格、換行、縮進是不敏感。 -->? 標簽對之間對嵌套敏感。注意：標簽嵌套注意縮進。 <!-- 2.文本內容空白折疊現象。-->? 我們文本內容對空格、換行、縮進會進行折疊。不管你有多少個空格、換行、縮進。在網頁中只顯示一個空格，這種現象就是空白折疊現象。 <!--3.標簽語法 -->? ①雙標簽必須成對出現（有開始和結束標簽），單標簽除外.<button></button>.【單標簽 <img>】 ②標簽必須寫在一對尖括號里，里面書寫標簽名。 ③結束標簽必須書寫結束符號/。 ④標簽的分類：容器級標簽、文本級標簽 【h1是一個容器級標簽，內部可以書寫任何內容，包括標簽和任何文本】 【p標簽是文本級標簽，可以書寫文本級內容，本文，圖片，表單元素，font,b,u,i等廢棄標簽】 H：容器級標簽，可以存放Div,ul。 <h2>? <div>這是Div</div>? <p>這是段落</p></h2>? <!--文本級標簽-->? <p><img src="images/2.jpg" alt=""> </p>①H系列標簽 容器級標簽，可以存放Div,ul。
用于給文本添加標題,語義,不能添加樣式, 共6級,H1最大，H6最小. (h-Headline的縮寫) 注意:h系列標簽不能相互嵌套
<!--注意點:? 1.H標簽是給文本添加標題語義的,而不是用來修飾文本樣式的2.H標簽一共有6個,從H1到H6,最多只能到6,超過6則無效3.被H系列標簽包裹的內容會獨占一行? 4.在H系列的標簽中,H1最大,H6 最小? 5.在企業開發中,一定要慎用H系列的標簽,特別是H1標簽,在企業開發中一般情況下一個界面只能出現一個H1 標簽?和SEO 有關??--> <h1>我是標題h1</h1>? <h2>我是標題h2</h2><h3>我是標題h3</h3><h4>我是標題h4</h4>? <h5>我是標題h5</h5><h6>我是標題h6</h6>我是普通文本h7②P標簽,Paragraph的縮寫，表示一個段落(段落標記). [文本級的標簽，只能書寫文字或者圖片以及表單元素,font等廢棄標簽].
語義：給文本添加段落的一個語義。
<p>我是段落p </p>標簽br和p有什么區別？
<br>是強制換行(讓后面的文字、圖片強制換行)，<p>是段落。換行后<br>不會空行，而<p>換行后會空一行。
<hr>標簽，是分割線
字符實體表
顯示結果----------描述----------實體名稱----------實體編號---------------------空格---------- ----------  <--------------------小于號---------- <---------- < >--------------------大于號---------- >---------- > &--------------------和號---------- &---------- & "--------------------引號---------- " ---------- " '--------------------撇號---------- ' (IE不支持)---------- ' ￠--------------------分---------- ¢---------- ¢ ￡--------------------鎊---------- £---------- £ ￥--------------------日圓---------- ¥---------- ¥ €--------------------歐元---------- €---------- € §--------------------小節---------- §---------- § ?--------------------版權----------©---------- © ?--------------------注冊商標---------- ®---------- ® ?--------------------商標---------- ™---------- ™ ×--------------------乘號---------- ×---------- × ÷--------------------除號---------- ÷---------- ÷③img圖像標簽
src指定圖片路徑，width和height設置圖片寬高，alt 設置占位文字，文件路徑或者文件名格式錯誤，則無法加載圖片
<img src="images/1.jpg" width="450" height="700" alt="未加載圖片">圖片路徑：
我們可以通過路徑查找到目標文件。路徑分為相對路徑和絕對路徑。
相對路徑：從文件本身出發進行目標文件查找。
1>同級路徑查找：直接書寫文件名+擴展名
<img src="home.png" alt="">2>子級路徑查找：書寫文件夾名稱+/繼續查找，一直查找到需要的目標文件，最終是文件名+擴展名
<img src="images/demo/home.png" alt="">3>上級路徑查找：【跳出當前文件夾】../+所需要的文件夾的名字/，繼續查找，一直查找到需要的目標文件，最終是文件名+擴展名
<img src="../img/images/home.png" alt="">注意：1? ../只能出現在路徑的開頭，只能出現一層。
? ? ? ? 2? 相對路徑不能跨盤符查找
絕對路徑：從盤符出發進行目標文件查找
①從盤符出發進行查找。
可以雙擊路徑欄
/Users/MengYu/Desktop/img/images/home.png
把文件直接拖拽到瀏覽器中，網址就是圖片的絕對路徑：
file:///Users/MengYu/Desktop/img/images/home.png
②以http://開頭的網址都是絕對路徑（常用）
http://a.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=e49b8c6c3d9b033b2c88fbdc2df551ee/
?
④a超鏈接
使用方法:
href：是設置超級鏈接跳轉路徑。
title：設置鼠標懸停文本
target：目標，設置超級鏈接打開方式。
<a href="https://www.baidu.com" target="打開方式" name="頁面錨點名稱">鏈接文字或者圖片</a> <!--href :引入鏈接的地址，可以是一個網頁，也可以是一個視頻、圖片、音樂等等.--><!--href="#"當前頁面刷新--><!--href="//jd.com" 也可以跳轉--><!--默認target屬性是self 當前窗口打開 回得來--><!--target="_blank" 新建一個窗口打開 回不來--><!--target="_self" 在當前窗口打開--><!--target="_parent" 在父窗口打開--><!--target="_top" 在頂層窗口打開--><a target="_parent" href="http://www.jd.com">我的超鏈接</a><br><!--# 表示當前頁面--><a href="#">當前頁面刷新</a><br><!--href 是引入--><a href="//jd.com">京東</a>1.根據id值進行跳轉
<a href="#tiaozhaun1">跳轉到標題1</a> <h3 id="tiaozhaun1">標題1</h3>2根據name值進行跳轉
<a href="#tiaozhaun2">跳轉到標題2</a> <a href="" name="tiaozhuan2"></a>跳轉到頁面頂部和底部和中部：通過 name 和 href 屬性 #+定義的name 名稱
<a href="#bottom">跳轉到底部</a><a href="#middle">跳轉到中部</a><p>原標題：他們用一生詮釋“我愛你中國”！背后的故事太感!</p> <a name="middle"></a>? <h1>這是中部</h1> <a href="#top" name="bottom">跳轉到定部</a><a href="#middle">跳轉到中部</a>設置超鏈接樣式
1>link? 設置連接顏色
<body link="blue"></body>2>vlink? 已經訪問了的鏈接顏色?
<body vlink="yellow"></body>3>alink? 正在被點擊的鏈接顏色??
<body alink="red"></body>?
⑤列表標簽有3種：有序列表、無序列表、定義列表
1.無序列表ul：
給我們的文本添加無序的列表語義。每一項之間沒有順序的先后之分。
ul無序列表；li 列表項。兩個標簽必須同時出現，不能單獨書寫。
ul里可以嵌套一個或多個li標簽。
ul里面只能放li標簽，不能放其他內容。
容器級標簽，可以放置任何的內容標簽，甚至可以放置ul>li.
ul和li只能添加無序列表的語義，不會給你增加前面小圓點的樣式。
<ul>? <li>蘋果</li>? <li>華為</li>? <li>小米</li>? </ul> list-style: none;/*清楚列表指示器*/清楚點點點...2.有序列表ol：
給文本添加有序列表的語義
ol: ordered list 有序的列表 li:列表項
必須同時出現，ol只能嵌套li標簽，li不能脫離ol自己出現。ol可以嵌套多個li.
雖然顯示會有阿拉伯數字排序，但ol的作用僅僅是添加有序列表的語義，數字樣式不是ol的作用。
快捷鍵：生成嵌套關系的快捷鍵：ol > li? + Tab鍵
? ? ? ? ? ?生成多個同種標簽 ? ? ? ? ol > li* 3? + Tab鍵
?
<ol>? <li>html成績</li>? <li>css成績</li>? <li>js成績</li>? <li>node成績</li>? </ol>3.定義列表 dl,dt,dd：(名詞解釋)
定義列表包含3個標簽：dl,dt,dd
給我們的文本添加定義列表的語義。
dl：definition list 定義列表?
dt ：definition title 定義標題?
dd：definition Description 定義描述
dl里面嵌套dt和dd。dt和dd同一級的標簽。dd是對dt的解釋、說明、定義。dl里面只能放置dt和dd.
dt和dd都是容器級標簽，里面的內容是不受限制的。
dl里面可以放置多個dt和dd.dt后面的dd可以有多個，這些dd都是在解釋上面的dt,dt后面可以沒有dd表示沒有解釋說明。
實際工作中，經常將每一組dt和dd單獨放在一個dl標簽內部。
<dl>? <dt>蘋果</dt>? <!--dd是對dt的解釋-->? <dd>公司有多種產品,手機,平板,臺式電腦,手表</dd>?? <dt>三星</dt>? <dd>三星是一個韓國公司,最近有一個爆炸門事件</dd>?? <dt>華為</dt>? <dd>華為是一個本土公司,企業感比較強</dd>? </dl>總結：根據需要和語義決定使用哪種列表。
⑥Div和Span
1.div和span的語義
<div>今天是HTML第二天的學習!</div>? <div>今天是HTML第二天的學習!</div>? <div>今天是HTML第二天的學習!</div>??<span>今天是HTML第二天的學習!</span><span>今天是HTML第二天的學習!</span>? <span>今天是HTML第二天的學習!</span>語義：div是大的區域，span是小的跨度區域
div：塊級元素 division 范圍，區域，分割? 容器級標簽，可以放置任何標簽和內容。(本身在網頁中沒有任何的默認樣式，里面可以存放一些相近、相同功能的標簽。會把div內部的元素分割成一個小的區域)
span：內聯元素 小范圍，小跨度。文本級的標簽，只能放文字、圖片、表單元素等。
大的內容放在div里，小的元素放在span??div是獨占一行，span只會占用一小部分，內容多少就占多少，是靜態排列。
span和div嵌套關系：<div><span></span></div>
div+css 布局，結構和樣式分離
盒模型
?
盒子外邊距 margin?
盒子內邊距 padding?
盒子邊框寬度 border
盒子寬度：width
盒子高度：height
⑦table表格
1、
tr：table rows 表格的行
td：table dock 單元格
border：設置分割線的寬度，以及樣式
cellspacing? 規定單元格之間的空白。
cellpadding?規定單元邊沿與其內容之間的空白
frame? ? ? ? ??規定外側邊框的哪個部分是可見的
rules? ? ? ? ? ??規定內側邊框的哪個部分是可見的
caption? 設置表格的標題
三個標簽的一個嵌套關系：table > tr > td?
最簡單的，要求每一行的單元格個數都相同；
如果表格有表頭的概念，只需要將tr換成th（table head）
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>HTML表格</title><style></style> </head> <body> <table width="960px" height="240" border="1px" align="center" cellspacing="2px" cellpadding="4px" frame="box" rules="all"><caption align="top">表格的標題</caption><tr bgcolor="#d3d3d3" align="left" valign="center"><!--width="100px" height="80" rowspan="2" colspan="2"--><th bgcolor="blue" align="center">班級</th><th>姓名</th><th>年齡</th><th>成績</th></tr><tr><td>四年級一班</td><td>張三</td><td>16</td><td>80</td></tr><tr><td>四年級一班</td><td>李四</td><td>18</td><td>85</td></tr><tr><td>四年級一班</td><td>王五</td><td>17</td><td>99</td></tr><tr><td>四年級一班</td><td>劉三</td><td>19</td><td>88</td></tr> </table> </body> </html>//案例二+表頭thead
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格復雜練習</title><style>th,td{width: 200px;text-align:center;}</style> </head> <body><table border="1"><!--表格標題部分--><caption>各地區固定資產投資情況</caption><!--表頭--><thead><tr><th rowspan="2">地區</th><th colspan="2">按總量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累計(億元)</th><th>比去年同期增長(%)</th><th>自年初累計(%)</th><th>去年同期(%)</th></tr></thead><!--表格主題部分--><tr><td>全國</td><td>187670.98</td><td>9.6</td><td>100.0</td><td>100.0</td></tr><tr><td>東部地區</td><td>84509.91</td><td>10.9</td><td>45.0</td><td>44.6</td></tr><tr><td>北京市</td><td>2200.84</td><td>7.0</td><td>1.2</td><td>1.2</td></tr><tr><td>天津市</td><td>2200.84</td><td>7.0</td><td>1.2</td><td>1.2</td></tr><tr><td>河北省</td><td>2200.84</td><td>7.0</td><td>1.2</td><td>1.2</td></tr></table> </body> </html>?
?案例3：簡單的網頁布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>簡單的網頁布局</title><style></style> </head> <body topmargin="0" leftmargin="0"><table border="0" width="960" align="center" cellspacing="0" cellpadding="0"><tr height="90px" bgcolor="red" align="center"><td><font size="6" color="white"><b>網頁的頭部</b></font></td></tr><tr ><td><!--使用嵌套表格 --><table bgcolor="yellow" height="500px" width="30%" align="left"><tr align="center"><td><font size="6" color="white"><b>網頁的左部分</b></font></td></tr></table><table bgcolor="#00ffff" height="500px" width="70%" align="left"><tr align="center"><td><font size="6" color="white"><b>網頁的右部分</b></font></td></tr></table></td></tr><tr height="90px" bgcolor="#f4a460" align="center"><td><font size="6" color="white"><b>網頁的底部</b></font></td></tr></table> </body> </html>?
2、合并單元格
td有兩個屬性可以合并單元格。
?rowspan : 跨行合并
?colspan：跨列合并
屬性值：是幾就合并幾個單元格。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>合并單元格</title><style>td{width: 100px;}</style> </head> <body> <table border="1"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td rowspan="2">6</td><td colspan="2">7</td><td>8</td><td>9</td></tr><tr><td colspan="4">10</td></tr><tr><td>11</td><td colspan="2">12</td><td colspan="2">13</td></tr> </table> </body> </html>⑧Form表單
?
用于為用戶創建HTML表單，向服務器傳輸數據。
action 規定當提交表單時向何處發送表單數據。
method 用于規定發送form-data的HTTP方法。
target 規定在何處打開action URL
1>單行文本框
<form action="1.php" method="post"><p>單行文本框(賬號)<input type="text" name="手機號" value="15136485334" placeholder="請輸入手機號?"></p> </form>2>密碼框
<p>密碼框<input type="password" placeholder="請輸入密碼"></p>3>單選按鈕
<p>單選按鈕<input type="radio" name="gender">男<input type="radio" name="gender">女<input type="radio" name="gender">保密</p>4>文本域(textarea)，相當于OC-UITextView
<p>文本域(相當于OC的UITextView)<textarea name="" id="textView" cols="30" rows="10">請輸入多行文字，我是一個文本域!</textarea></p>5>下拉框
<p>下拉框:<select name="city" ><option value="北京市">北京市</option><option value="上海市">上海市</option><option value="杭州市" selected="selected">杭州市</option><option value="鄭州市">鄭州市</option></select></p>6>按鈕
<p><input type="button" value="按鈕"></p>7>重置
<p><input type="reset" value="重置"></p>8>提交表單submit
<p><!--submit 此操作會向瀏覽器提交用戶輸入的內容，格式為：name=value 即手機號=15136485334--><input type="submit" value="提交"></p>?
⑨結構性標簽：負責上下文的語義
article 文章主題內容
footer 標記腳部分區域內容
section 區域章節描述
nav 菜單導航，鏈接導航
?案例:新聞詳情頁
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>罕見！部委和省級黨政一把手，為了這件事密集出鏡</title> </head> <body><!--文章--><article><!--頭部--><header><h2>罕見！部委和省級黨政一把手，為了這件事密集出鏡</h2><h4>百家號11-1708:53</h4></header><!--內容--><p>“比如，有的人提出所謂‘民營經濟離場論’，說民營經濟已經完成使命，要退出歷史舞臺；有的人提出所謂‘新公私合營論’，把現在的混合所有制改革曲解為新一輪‘公私合營’；有的人說加強企業黨建和工會工作是要對民營企業進行控制，等等。”在11月1日的座談會上，說。</p><img width="60%" height="300" src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=236939424,2143050445&fm=173&app=49&f=JPEG?w=640&h=430&s=8B1A6585089B2ECE7C3808630300E048" alt=""><p>在座談會召開之后，兩高先后召開會議對座談會上的講話精神進行傳達。就在11月14日，中央政法委全體會議召開，在這個中央政法委書記郭聲琨、公安部部長趙克志、最高法院院長周強、最高檢檢察長張軍出席的會議上，審議了一個重要文件——中央政法委關于依法保障和服務民營企業健康發展的指導意見。</p><img width="60%" height="300" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=582020858,3268209347&fm=173&app=49&f=JPEG?w=640&h=435&s=7D925B9F160D40EC3CF5F0F103000031" alt=""><br><a href="#">回到頂部</a></article><hr><meter value="60" max="100" min="20"></meter><br><progress value="100" max="200"></progress></body> </html>?
?
?
轉載于:https://www.cnblogs.com/StevenHuSir/p/HTML_Grammar.html
總結
以上是生活随笔為你收集整理的HTML5-基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java第二次考试
- 下一篇： 偶尔用得上的MySQL操作