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操作