學習視頻，[狂神說Java]HTML5
一、初識HTML
一）、什么是HTML？
1、HTML
-
Hyper Text Markup Language(超文本標記語言)
超文本包括：文字、圖片、音頻、視頻、影片等
2、HTML5的優勢
- 世界知名瀏覽器廠商對HTML5的支持
- 微軟
- 蘋果
- Opera
- Mozilla
- 市場的需求
- 跨平臺
3、W3C標準
- W3C
- World Wide Web Consortium(萬維網聯盟)
- 成立于1994年，Web技術領域最權威和最具影響力的國際中立性技術標準機構
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C標準包括
- 結構化標準語言（HTML、XML）
- 表現標準語言（CSS）
- 行為標準（DOM、ECMAScript）
4、常見IDE
- 記事本
- Dreamweaver
- IDEA
- WebStorm
- ……
5、HTML基本結構
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
等成對的標簽，分別叫開放標簽和閉合標簽 自閉合標簽：單獨呈現的標簽（空元素），如
；意為用 **/** 來關閉空元素
6、注釋
<!-- 注釋 -->
<!-- DOCTYPE:告訴瀏覽器，我們要用什么規范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head標簽代表網頁頭部 -->
<head>
<!--meta描述性標簽，它用來描述網站的一些資訊-->
<!--meta一般用來做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="keywords相當于網站的關鍵詞描述">
<meta name="description" content="description描述來這個地方干啥">
<!--title網頁標題-->
<title>Title</title>
</head>
<!--body標簽代表網頁主體-->
<body>
Hello,World!
</body>
</html>
二、網頁基本標簽
1、塊元素
- 無論內容多少，該元素獨占一行
- （p，h1-h6…）
2、行內元素
- 內容撐開寬度，左右都是行內元素的可以排在一行
- （a，strong，em…）
具體有哪些標簽怎么分類，我還不清楚，暫時無法分類
- 標題標簽
- 段落標簽
- 換行標簽
- 水平線標簽
- 字體樣式標簽
- 注釋和特殊符號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標簽學習</title>
</head>
<body>
<!--標題標簽 <h1></h>-->
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<!--段落標簽 <p></p>-->
<p>我愛得忘乎所以，</p>
<p>高歌敞開心扉，</p>
<p>像大地一樣忠誠，</p>
<p>像天空一樣愛人，</p>
<p>我把自己甩掉，</p>
<p>我把自己忘了，</p>
<p>心靈只要</p>
<p>我情人的愛情，</p>
<!--水平線標簽-->
<hr/>
<!--換行標簽：<br/>，
換行標簽的本質上還是一個段落，只不過換行了，每一行顯得緊湊
不像<p></p>段落標簽顯得每一行中間有間隙-->
我愛得忘乎所以，<br/>
高歌敞開心扉，<br/>
像大地一樣忠誠，<br/>
像天空一樣愛人，<br/>
我把自己甩掉，<br/>
我把自己忘了，<br/>
心靈只要<br/>
我情人的愛情，<br/>
<!--字體樣式標簽：粗體，斜體-->
<h1>字體樣式標簽</h1>
粗體：<strong>這是粗體</strong>
斜體：<em>這是斜體</em>
<br/>
<!--特殊符號
&轉義字符
空格：
大于：>
小于：<
著作權符號：©
-->
空 格 <br/>
空 格 <br/>
大于符號：> <br/>
小于符號：< <br/>
著作權符號：© <br/>
</body>
</html>
三、影像，超鏈接，網頁布局
1、影像標簽
<img src="path" alt="text" title="text" width="x" height="y" />
<!--
src：影像的地址
alt：影像的替代文字
title：滑鼠懸停提示文字
width：影像寬度
height：影像高度
-->
- 常見的影像格式
- JPG
- GIF
- PNG
- BMP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影像標簽學習</title>
</head>
<body>
<!--
src：圖片地址
相對地址：../resources/images/戴拿的肯定.jpg
絕對地址：F:\代碼\HTML\resources\images\戴拿的肯定.jpg
../ 上一級目錄
alt：影像的替代文字(必填)
title：滑鼠懸停提示文字
width：影像寬度
height：影像高度
-->
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="滑鼠放在圖片上就顯示文字" width="300" height="300"><br/>
<img src="../resources/images/迪迦.jpg" alt="迪迦的肯定" title="滑鼠放在圖片上就顯示文字" width="300" height="300">
</body>
</html>
2、鏈接標簽
- 文本超鏈接
- 影像超鏈接頁面間鏈接
1）、從一個頁面鏈接到另一個頁面
<a href="path" target="目標視窗位置">鏈接文本或影像</a>
<!--
href="path"：鏈接路徑
target="表示視窗在哪里打開"：鏈接在哪個視窗打開，目標視窗位置常用值_self、_blank
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽學習</title>
</head>
<body>
<!--
herf：必填，表示要跳轉到哪個頁面
target：表示視窗在哪里打開
_blank 在新標簽中打開
_self 在自己的網頁中打開
-->
<a href="1.我的第一個網頁.html" target="_blank">跳轉到頁面一</a>
<a href="https://www.baidu.com" target="_self">點擊我跳轉到百度</a>
<br/>
<a href="1.我的第一個網頁.html">
<img src="../resources/images/戴拿的肯定.jpg" alt="戴拿的肯定" title="滑鼠放在圖片上就顯示文字" width="300" height="300"><br/>
</a>
</body>
</html>
2）、錨鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<!--錨鏈接
1.需要一個錨標記
2.跳轉到標記
用井號#
-->
<!--使用name作為標記-->
<h3>
<a name="top">天真的預言</a>
</h3>
<p>從一粒細沙中窺探世界</p>
<p>在一朵野花里尋覓天堂</p>
<p>掌中握無限</p>
<p>霎那成永恒</p>
<p>當真理被惡意利用時</p>
<p>比一切臆造的謊言猙獰</p>
<p>現實本來就這樣</p>
<p>人生來就要面對快樂和悲慘</p>
<p>只要能明了這一點</p>
<p>我們就不會再受傷害</p>
<p>將快樂和憂傷編織</p>
<p>披在我神圣的心上</p>
<p>窮人手里的一個銅板</p>
<p>抵得上非洲海岸的所有黃金</p>
<p>從勞動者手里砸取的一丁點錢</p>
<p>能買的下守財奴的所有土地</p>
<p>如果得到上帝的庇護</p>
<p>甚至可以買賣國土的全部</p>
<p>誰曾嘲笑純真的信念</p>
<p>他將被歲月和死亡譏諷</p>
<p>誰要動搖純真的信念</p>
<p>他將永遠被埋葬在陳腐的墓穴中</p>
<p>誰能尊重純真的信念</p>
<p>他將戰勝地獄和死亡</p>
<p>如果不相信自己的眼睛</p>
<p>將永遠不懂得去信任，請隨心而行</p>
<p>如果太陽和月亮心存猜疑</p>
<p>它們將會轉瞬消失</p>
<p>被激情圍繞就能擁有美好</p>
<p>情欲攻心則會迷失自我</p>
<p>每一個夜晚，每一個清晨</p>
<p>有人生來就為不幸傷神</p>
<p>每一個清晨，每一個夜晚</p>
<p>有人生來就被幸福擁抱</p>
<p>有人生來就被幸福擁抱</p>
<p>有人生來就被長夜圍繞</p>
<p>如果不是親眼所見</p>
<p>我們就會相信謊言</p>
<p>謊言在黑夜里生滅</p>
<p>靈魂在光芒中休眠</p>
<p>對掙扎在黑暗中的人</p>
<p>上帝散發出光明</p>
<p>對生活在白晝的人</p>
<p>上帝幻化為人性</p>
<a href="#top">回到詩的標題</a>
<br/>
<a name="down">詩的末尾</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用錨鏈接跳轉到另一個頁面的指定位置</title>
</head>
<body>
<a href="4.1.錨鏈接.html#down">跳轉到天真的語言詩的末尾</a>
</body>
</html>
注意：
- 無論是圖片還是網頁，一定要注意其地址
3）、功能性鏈接
…待定，還沒想好寫些什么
四、串列，表格，媒體元素
還在學習中，待定…
五、表單及表單應用
還在學習中，待定…
六、表單初級驗證
還在學習中，待定…
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267137.html
標籤：其他
上一篇：javascript中型別轉換