了解HTML
- 是一種描述網(wǎng)頁的一種語言
- 是一種超文本標(biāo)記語言
- 不是編程語言,是一種標(biāo)記語言
HTML5所包含的知識
HTML XHTML CSS CSS3 JavaScript jquery HTML5
HTML5的新特性
- 用于繪畫的canvas標(biāo)簽 比較重要
- 用于媒介播放的video和audio 比較重要
- 對本地離線存儲的更好的支持
- 新的特殊內(nèi)容元素 比如:article,footer,header,nac,section
- 新的表單控件 比如:calendar,date,time,email,url,search
- 瀏覽器的支持 比較流行
HTML的基礎(chǔ)知識
- 聲明 表明html的版本 就是第一行的東西 doctype html5的聲明<!DOCTYPE html>
- <html> 所有的代碼包含在這里面
- <head> 頭部的東西 <meta charset="UTF-8"> 這里控制的是編碼的格式
UTF-8是通用的編碼格式 默認(rèn)的是這個 <title>這個設(shè)置的是標(biāo)題 - <body> 身體里的東西 網(wǎng)頁的內(nèi)容都是在這里面
HTML的標(biāo)簽
- HTML 標(biāo)題 h1 --> h6 6種不同的標(biāo)題 主要是文字的大小的區(qū)別
- HTML的段落 通過 p 來進(jìn)行定義 通過p標(biāo)簽定義的段落是另起一行 定義的是新的一段文字
- HTML的超鏈接 a 來進(jìn)行定義
<a >百度</a> - HTML的圖片 img 來進(jìn)行定義
<img src="圖片的地址">
HTML的元素 指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有的代碼
- <br / 空標(biāo)簽 換行的意思 開始新的一行
- 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉
- 大多數(shù)的HTML元素中可擁有元素
- 大多數(shù)的HTML元素都是可以嵌套的
HTML的屬性
- 標(biāo)簽可以擁有屬性為元素提供更多的信息
- 屬性以鍵值對的形式出現(xiàn)
比如href ="www.baidu.com" - 常見標(biāo)簽屬性
h1 :align 對齊的方式 left center right 默認(rèn)的是居右
<h1 align="right">標(biāo)題h1</h1>
body :bgcolor 背景顏色
background是設(shè)置背景圖片的 bgcolor是設(shè)置的背景的顏色
a :target 固定在何處打開連接
_self 默認(rèn)的,不再開辟新的頁面
_blank 開辟新的頁面,舊的頁面仍然存在
_parent _top 這兩個屬性在框架的時候用到 - 通用屬性
class :規(guī)定元素的類名
id :規(guī)定元素的唯一ID
class 和 ID 主要的方便以后引用
style:規(guī)定元素的樣式
title:規(guī)定元素的額外信息
HTML的格式化
- html的格式化
Paste_Image.png
歡迎來到H5的學(xué)習(xí)<br/>
<b>歡迎來到H5的學(xué)習(xí)</b><br/>
<big>歡迎來到H5的學(xué)習(xí)</big><br/>
<em>歡迎來到H5的學(xué)習(xí)</em><br/>
<i>歡迎來到H5的學(xué)習(xí)</i><br/>
<small>歡迎來到H5的學(xué)習(xí)</small><br/>
<strong>歡迎來到H5的學(xué)習(xí)</strong><br/>
歡迎來到H5的學(xué)習(xí)<sub>歡迎來到H5的學(xué)習(xí)</sub><br/>
歡迎來到H5的學(xué)習(xí)<sup>歡迎來到H5的學(xué)習(xí)</sup><br/>
<ins>歡迎來到H5的學(xué)習(xí)</ins><br/>
<del>歡迎來到H5的學(xué)習(xí)</del><br/>
HTML的樣式
- 標(biāo)簽:
<style>:樣式的定義
<link>:資源的引用 比如引用一些css的樣式 - 屬性:
rel="stylesheet":外部樣式表
type="text/css":引入文檔的類型
margin-left:邊距
3.有三種插入方法:
外部樣式表: <link rel="stylesheet" type="text/css" href="mystyle.css">
內(nèi)聯(lián)樣式表: <p style = "color:red">
內(nèi)部樣式表:
<style type="text/css">
body {background-color:red}
p {margin-left:20px}
<style/>
HTML的鏈接
- 鏈接數(shù)據(jù):文本鏈接 圖片鏈接
- 屬性:
href屬性:指向另一個文檔的鏈接
name屬性:創(chuàng)建文檔內(nèi)的鏈接 - img標(biāo)簽屬性:
alt:替換文本屬性 當(dāng)圖片不顯示的時候顯示這個
width:寬
height:高 ``` <a target="_blank">baidu</a> <a target="_blank"> <img src="html.png" height="20px" width="20px" alt="這是一個圖片"></a> <a name="nihao">跳轉(zhuǎn)到這里來了</a> <a href="#nihao">進(jìn)行跳轉(zhuǎn)的文檔內(nèi)的內(nèi)容</a>```
HTML的表格
表格標(biāo)簽
<table border="1px" cellpadding="10" cellspacing="10" bgcolor="aqua"> <caption>我是標(biāo)題</caption> <tr> <th>單元</th> <th>單元</th> <th>單元</th> </tr> <tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td> </tr> <tr> <td>單元格1</td> <td>單元格2</td> <td>單元格3</td> </tr> </table>
3.一些屬性:
cellpadding指的是單元格內(nèi)容與邊框的距離
cellspacing指的是單元格直接的距離
align:排列單元格內(nèi)容的對齊方式
HTML的列表
html中的列表
- 無序列表 使用標(biāo)簽 ol li
屬性:disc默認(rèn)前標(biāo),這個是實(shí)體的圓的效果 cirle 空心圓的效果 square 方塊的實(shí)體,也可以使用自定義的方式,使用CSS進(jìn)行更改
<ul type= "disc">
- 有序列表 使用標(biāo)簽 ol li
屬性:A 字母排序,大寫的A開頭 a 字母排序,小寫的a開頭 l大寫的羅馬數(shù)字排序 i 小寫的羅馬數(shù)字排序 start 默認(rèn)的是數(shù)字,在這里規(guī)定數(shù)字的開始的第一位
<ol type="A">
- 嵌套列表 使用標(biāo)簽 ul ol li
- 自定義列表 使用標(biāo)簽 dl dt dd這個是描述
HTML 塊
- 塊元素
塊元素在顯示的時候,通常會以新行開始 比如h1 p ul
- 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素通常不會以新行開始 比如 b a img
- div 元素
div元素也被稱為塊元素,其主要是組合HTML元素的容器 主要是使用CSS進(jìn)行更改屬性更改
- span元素
span元素是內(nèi)聯(lián)元素,可以作為文本的容器
span元素與div元素的區(qū)別是span指定是文本的容器,div沒有進(jìn)行指定
HTML的布局
- div元素布局
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0px;
}div不用添加也行
div#container{
width: 100%;
height: 950px;
background-color: burlywood;
}
div#heading{
width: 100px;
height: 10%;
background-color: aqua;
}
div#content_menu{
width: 20%;
height: 80%;
background-color: burlywood;
/添加從左到右的浮動 不添加menu不是左右的效果是上下的效果/
float: left;
}
div#content_body{
width:80%;
height: 80%;
background-color: black;
float: left;
}
div#footing{
width: 100%;
height: 10%;
background-color: yellow;
/上面設(shè)置了浮動,下面也要跟著下面的浮動進(jìn)行改變,在這里要清除浮動/
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">頭部</div>
<div id="content_menu">內(nèi)容菜單</div>
<div id="content_body">內(nèi)容主體</div>
<div id="footing">底部</div>
</div>
</body> - table元素布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: aliceblue" >
<tr>
<td colspan="2" width="100%" height="10%" style="background-color:aqua">這是頭部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: yellow">左菜單
<ul>
<li>ios</li>
<li>android</li>
<li>html5</li>
</ul>
</td>
<td width="70%" height="80%" style="background-color: burlywood">右菜單</td>
</tr>
<tr>
<td width="100%" height="10%" style="background-color: blue" colspan="2">底部</td>
</tr>
</table>
</body>
</html>
