初識html(1)
1⃣️、 HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。
CSS樣式是表現。就像網頁的外衣。比如,標題字型、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。
2⃣️、
<html></html>:html文件的開頭和結束
<body></body>:作為內容展示給讀者看到內容全部包含在裡面
<head></head>:文件的頭部描述了文件的各種屬性和資訊,包括文件的標題等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。比如:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title></title>:網頁標題,是整個網頁的名字,即在瀏覽器頂部的tab欄裡顯示的。搜尋引擎通過它來搜尋網頁。
<script></script>:編寫js語言
<style type="text/css">table tr td,th{border:1px solid #000;}</style>:為表格中每個<td></td>中的字加上邊框<p></p>:段落
<h1></h1>:一級標題 <h6></h6>:六級標題 <……><……>:……級標題 (共有1-6級標題)
<strong></strong>:字型加粗
<em></em>:斜體
<q></q>:雙引號,對文字的引用
<blockquote></blockquote>:對長文字的引用,並縮排
<br/>:回車
< >:空格
<hr/>:新增水平橫線
<address></address>:地址資訊。字型顯示為斜體;包含內容另起一行獨立顯示
<code></code>:一行程式碼,另起一行顯示
<pre></pre>:程式碼段
<ul></ul>:新增無序列表
<ol></ol>:新增有序資訊列表
<div></div>:為網頁劃分獨立的版塊
<div id=" "></div>:為每個版塊命名
<a href=" 超連結網址 " title=“ 滑鼠滑過連結文字時會顯示這個屬性的文字內容”>點選它就能超連結的文字</a>:
網頁中“點選它就能超連結的文字”這幾個字就做成了超連結且只能在當前瀏覽器視窗瀏覽,這幾個字顯示為藍色(被點選之後這幾個就變成紫色)
title屬性在實際網頁開發中作用很大,主要方便搜尋引擎瞭解連結地址的內容(語義化更友好)
<a href="超連結地址" target="_blank"></a>:在新的瀏覽器視窗開啟網址
3⃣️、表格
<tbody>
<table summary="摘要">//摘要中的內容不會顯示出來
<caption>統計表</caption>//表格名稱
<tr>
<th>班級</th>
<th>學生數</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80<td>
</tr>
</tbody>
列印結果:
統計表
班級 學生數 平均成績
一班 30 89
二班 35 85
三班 32 80
建立表格的四個元素:
table、tbody、tr、th、td
1、<table>…</table>:整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格載入完後才顯示。加上這些表格結構, tbody包含行的內容下載完優先顯示,不必等待表格結束後在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結構一塊塊的顯示,不在等整個表格載入完後顯示。)
3、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
4、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。
5、<th>…</th>:表格的頭部的一個單元格,表格表頭。
6、表格中列的個數,取決於一行中資料單元格的個數。
4⃣️、
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
//http型別:這個網頁是表現內容用的//content(內容型別):這個網頁的格式是文字的//charset(編碼):這個網頁的編碼是UTF-8,需要注意的是這個是網頁內容的編碼,而不是檔案本身的. 編碼不用說,content常見的還有xml等型別.meta,網頁html語言裡head區重要標籤之一.//http-equiv類似於http的頭部協議,他迴應瀏覽器一些有用的資訊,以幫助正確和精確地顯示網頁內容.常用的http-equiv型別有://Content-Type和Content-Lanauage(顯示字符集的設定) 說明:設定頁面使用的字符集,用以說明主頁製作所使用的語言和文字,瀏覽器會根據此來呼叫相應的字符集顯示網頁內容.
?圖片理解
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
</head>
<body> /////在網頁上要展示出來的頁面內容一定要放在body標籤中////
<h1>勇氣</h1> /////標題符號/////
<p>三年級時,我還是一個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> //段落符號//
<p>到了三年級下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf1020002''> //插入圖片//
</body>
</html>
?使用<hx>
標籤來製作文章的標題。標題標籤一共有6個,h1、h2、h3、h4、h5、h6
分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>
是最高的等級。語法:
?<span></span>:沒有語義,為了設定單獨的樣式
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的蓋茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天,一個想要成名名叫尼克•卡拉威(託比•馬奎爾Tobey Maguire 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私為王,股票飛漲的時代。為了追尋他的<span>美國夢</span>,他搬入紐約附近一海灣居住。</p>
<p>菲茨傑拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗輓歌,其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p>
</body>
</html>
?<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li> </ul>
<ol> <li>前端開發面試心法 </li> <li>零基礎學習html</li> <li>JavaScript全攻略</li> </ol>