1. 程式人生 > >初識html(1)

初識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/>:回車

<&nbsp>:空格

<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>