Web前端基礎 HTML以及CSS簡單標籤
目錄
HTML
head中常見的標籤
body中常見的標籤
HTML實體
HTML：超文字標記語言（英語：HyperText Markup Language）是一種用於建立網頁的標準標記語言
用HTML語法寫成的檔案稱為網頁檔案，字尾為 .html 或 .htm
一個最簡單的網頁：
*<html> <head> <title> 第一個網頁 </title> </head> <body> <p> hello,word! </p> </body> </html>* <html> ：該標籤是根，所有內容放在它裡面 <head> : 該標籤放一些頭部的資訊 <body> : 正文部分，裡面的內容直接用於顯示
<head 中常見的標籤>
：該標籤提供了元資料，元資料不顯示在頁面上，但會被瀏覽器解析。meta 元素通常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他元資料。meta標籤的作用有：搜尋引擎優化（SEO），定義頁面使用語言，自動重新整理並指向新的頁面，實現網頁轉換時的動態效果，控制頁面緩衝，網頁定級評價，控制網頁顯示的視窗等！meta標籤的組成：meta標籤共有兩個屬性，它們分別是 http-equiv屬性和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能
<meta charset="UTF-8" > //指定網頁的編碼 <meta http-equiv="content-Type" content="text/html;charset=UTF-8"> //指定網頁內容的型別，和文字編碼 <meta http-equiv="refresh" content="5;url=http://www.baidu.com"> //5秒之後跳轉到指定頁面 <meta http-equiv="refresh" content="2"> //每隔2秒重新整理一次頁面 <meta http-equiv="Set-Cookie" content="cookievalue=xxx;"> //設定cookie <meta name="keywords" content="資訊保安"> //為搜尋引擎設定關鍵字 <meta name="description" content="黑客 技術 安全"> //為網頁定義描述內容 <meta name="author" content="xie"> //定義網頁作者
影象域———image 影象域是指可以用在“提交”按鈕位置上的圖片，這幅圖片!具有按鈕功能。使用預設的按鈕形式往往會讓人覺得單調，如果網頁使用了較為豐富的色彩，或稍微複雜的設計，在使用表單預設的按鈕形式會破壞整體的美感。這時，可以使用影象域，建立和網頁整體效果相統一的“影象提交”按鈕。其語法如下：影象域——image 新手製作諒解
<input type ="image" src="影象地址" name="影象域名稱" />在該語法中，影象地址可以是絕對地址或相對地址。
<base>：該標籤描述了基本的路徑，該網頁下的所有連結檔案預設都是從該路徑下找檔案
`<base href="../xie">` //該網頁下的檔案預設都是從這個目錄去找
<link>：該標籤定義了文件與外部資源之間的關係，通常用於連結到樣式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>：該標籤定義了HTML文件的CSS樣式檔案
<style type="text/css">
p{
color:red;
}
</style>
<style type="text/css">
p{
color:blue
}
</style>
body中常見的標籤
標題： <h1>一級標題 </h1> ........ <h6>六級標題</h6>
段落 ： <p> 段落 </p>
程式碼 ： <pre> </pre>
超連結：<a href="" target=”_blank / _parent"> </a>
target=_blank的時候，是開啟一個新頁面; target=_parent的時候，是在原頁面開啟
超連結有三種：站內連結；站外連結；錨鏈接
超連結的動作
<style>
a{text-decoration: none;} /*去除超連結的下劃線*/
/*順序必須是: l - v - h - a */
a:link {color:#000000;} /* 未訪問連結*/
a:visited {color:#00FF00;} /* 已訪問連結 */
a:hover {color:#FF00FF;font-size: larger; background-color: #2299ff;} /* 滑鼠移動到連結上 */
a:active {color:#0000FF;} /* 滑鼠點選時 */
</style>
<a href="http://www.baidu.com" target=”_blank / _parent"> </a>
圖片: <img src=” ” width=”50” height="50" alt="" title=""/>
alt是當圖片載入不出來的時候顯示的東西 ,title是當滑鼠放上去的時候顯示的東西
換行： <br/>
畫橫線 <hr/>
刪除線：<del></del>
下劃線：<ins></ins>
上標： <sup>
下標： <sub>
無序列表 <ul> <li></li> <li><li> </ul>
有序列表 <ol> <li></li> <li><li> </ol>
自定義列表 <dl> <dt></dt><dd></dd> </dl>
字元實體： 空格 大於：> 小於： < 雙引號: "
音樂：<audio src="1.mp3" autoplay="autoplay" loop="loop" controls="controls"> </audio>
視訊：<video src="1.mkv" controls="controls" loop="loop" width="1100px" height="500px"></video>
下拉列表： <select name="xueli" id=""> </select>
表格：<table border='1px' cellspacing='1px' cellpadding='1px'> </table>
cellspacing是單元格之間的距離，cellpadding文字與單元格之間的距離
表單：
<form action='action.php' method="get/post"> <input type=''/></form>
type屬性: button、checkbox、file、hidden、image、password、radio、reset、submit、text、number
框架 <frameset> <frame src=”” /> < /frameset>
文字域：<textarea name="intro" rows="10" cols="30">自我介紹</textarea>
ifame框架：<iframe src='' width='' height=''></frame>
用法如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<title>小夥灬劉的博博系</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>這個p元素定義了 HTML 文件中的一個段落。這個元素擁有一個開始標籤，以及一個結束標籤</p>
<pre>
def Test():{
print("hello,word!")
}
</pre>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a> <br/>
錨鏈接：<a href="#zhuce">去註冊</a> <br/>
<img src="1.jpg" width="433" height="262" title="黑客" alt="hack"> <br/>
<del>刪除線</del> <br/>
<ins>下劃線</ins> <br/>
<hr/>
2<sup>3</sup> <br/>
log<sub>10</sub> <br/>
大於：> <br/>
小於：< <br/>
雙引號：" <br/>
空 格 <br/>
<ul>
<li>無序列表one</li>
<li>無序列表two</li>
<li>無序列表three</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<dl>
<dt>劉濤</dt>
<dd>著名女演員</dd>
<dt>成龍</dt>
<dd>著名男演員</dd>
</dl>
<table border="1px" cellspacing="1px" cellpadding="1px" width="200px" >
<caption>課程表</caption>
<tr>
<th>aa</th>
<th>sss</th>
<th>dd</th>
<th>bbbb</th>
</tr>
<tr>
<td colspan="2">aasdfa</td>
<td>dd</td>
<td rowspan="2">bbbb</td>
</tr>
<tr>
<td>aa</td>
<td>sssafda</td>
<td>
<table border="1" cellpadding="10" cellspacing="10">
<tr><td>111</td><td>222</td></tr>
<tr><td>3333</td><td>4444</td></tr>
</table>
</td>
</tr>
</table>
<form action="action.php" method="POST">
<a name="zhuce"></a>
賬號： <input type="text" name="username" placeholder="請輸入你的使用者名稱"/> <br/>
密碼： <input type="password" name="passwd"/> <br/>
性別： <input type="radio" name="sex" value="man" checked/>男
<input type="radio" name="sex" value="woman"/>女 <br/>
愛好： <input type="checkbox" name="hobby" value="sport"/>運動
<input type="checkbox" name="hobby" value="music"/>聽音樂
<input type="checkbox" name="hobby" value="reader"/>閱讀 <br/>
選擇城市：<select name="city" id="">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="gaozhong">廣州</option>
<option value="tainjin">天津</option>
</select> <br/>
個人描述： <br/>
<textarea cols="30" rows="10"></textarea> <br/>
<input type="submit" value="註冊"/>
<input type="reset" value="重置"/>
</form>
<audio src="1.mp3" autoplay="" controls="controls"></audio> <br/>
<video src="1.mp4" controls="controls" width="1000px" height="300px"></video> <br/>
<iframe src="https://www.baidu.com" width="1000" height="1000" frameborder="0"> </frame>
</body>
</html>
**識別符號**
|顯示結果| |描述| | 實體名稱|
空格
< 小於號 <
> 大於號 >
& 和號 &
" 引號 "
' 撇號 '(IE不支援)
￠ 分（cent） ￠
£ 鎊（pound） £
¥ 元（yen） ¥
€ 歐元（euro） €
§ 小節 §
© 版權（copyright） ©
® 註冊商標 ®
™ 商標 ™
× 乘號 ×
÷ 除號 ÷