HTML5+CSS3。。。。。。。。蒙古人
1.html5的基本結構
<!DOCTYPE html> //聲明HTML5結構，表示是否符合W3C的標準
<html>
<head> //頭部
<title>我的第一個網頁</title> //標題
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
//主題部分
寫自己需要的內容
<body>
</body>
</html>
2.網頁中的基本標簽以及特殊符號
(1)標題標簽
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h4></h4>
<h5></h5>
<h6></h6>
字體從大到小 h1>.......>h6
(2)段落標簽<p></p>
(3)換行標簽<br/>
(4)水平線標簽<hr/>
(5)字體加粗標簽<strong></strong>
(6)字體傾斜標簽<em></em>
(7)註釋： <!--表明註釋的內容-->
(8)特殊符號
空格：
大於號：>
小於號：⁢
引號："
版權符號：©
(9)圖像標簽：<img alt="圖像不顯示時代替的文字" src="圖像路徑">
(10)超鏈接標簽：<a href="超鏈接的頁面" target="添加屬性">超鏈接的內容可以是圖片</a>
應用場合：
頁面間鏈接：<a href="想要的連接的頁面網址" target="_blank">比如是百度頁面</a>
錨鏈接：<a href="#marker" >當前位置</a>
<a name="marker">目標位置</a>
功能性鏈接：[<a href="mailto:郵箱地址"></a>]
3.行內元素和塊兒級元素
(1)行內元素：不會自動換行
內聯元素(inline element)
a - 錨點
b - 粗體(不推薦)
br - 換行
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標簽
select - 項目選擇
small - 小字體文本
span - 常用內聯容器，定義文本內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
(2)塊兒級元素：自動換行
塊級元素(block element)
div -最常用的塊級元素
dl - 和dt dd搭配使用的塊級元素
form - 交互表單
h1 - 大標題
hr - 水平分隔線
ol - 排序表單
p - 段落
ul - 非排序列表
4.列表
(1)無序列表：
<ui> <li>難受</li> <li >痛苦</li> <li >悲哀</li> <li>難受</li> <li>難受</li> </ui>
(2)有序列表
<ol>
<li>男</li>
<li>女</li>
<li>中</li>
</ol>
(3)定義列表
<dl>
<dt>水果</dt>
<dd>蘋果</dd>
<dd>香蕉</dd>
<dd>句子</dd>
<dt>花</dt>
<dd>玫瑰</dd>
<dd>菊花</dd>
<dd>牡丹</dd>
</dl>
4.表格
(1)結構
tr：為行數 td：為列數
<table border="1px" style="text-align:center">
<tr>
<td colspan="3" >學生成績</td>
</tr>
<tr>
<td rowspan="2">張三</td>
<td>數學成績</td>
<td>80</td>
</tr>
<tr>
<td>語文成績</td>
<td>89</td>
</tr>
<tr>
<td rowspan="2">李斯</td>
<td>數學成績</td>
<td>98</td>
</tr>
<tr>
<td>語文成績</td>
<td>90</td>
</tr>
</table>
(2)表格的跨行與跨列
跨行： <tr>
<td rowspan="2">李斯</td>
<td>數學成績</td>
<td>98</td>
</tr>
跨列：
<tr>
<td colspan="3" >學生成績</td>
</tr>
5.HTML5的媒體元素
(1)視頻元素
<video controls>
<source src="bu/video.mp4" type="video/mp4"/>
<source src="bu/video.webm" type="video/webm"/>
</video>
(2)
<audio controls>
<source src="bu/video.mp4" />
<source src="bu/video.webm"/>
</audio>
6.HTML5頁面結構元素
<div id="box" style="margin:0px auto;border:1px solid red;width:100;height:20px;">
<header style="border:1px solid red;width:100;height:20px;">
頁面的頭部
</header>
<section style="border:1px solid blue;width:100;height:20px;">
主體部分
</section>
<footer style="border:1px solid blanck;width:100;height:20px;">
地步
</footer>
</div>
6.iframe屬性的使用
<body>
<a href="超鏈接的頁面" target="my">超鏈接的內容可以是圖片</a>
<a href="超鏈接的頁面" target="my">超鏈接的內容可以是圖片</a>
<a href="超鏈接的頁面" target="my">超鏈接的內容可以是圖片</a>
<iframe name="my" width="寬度" height="高度" src="上面想要連接的地址"/>
</body>
HTML5+CSS3。。。。。。。。蒙古人