學習html小總結

首先來認識html:

作用是可以用來製作網頁,但是html編寫的網頁都是通過瀏覽器訪問的。

想要編寫HTML網頁,直接在本地創建一個txt文件,然後把後綴名改成  .html 或者.htm都可以。


編寫網頁的標準規範是W3C組織制定的。





HTML 結構標準

<! DCOTYPE HTML>  聲明文檔類型

<html>                      根標籤

<head>           頭標籤

         <title></title>  標題標籤

</head>

<body>                      主題標籤

</body>

</html>


HTML語言的語法就是標籤,學會了標籤的使用,那麼就學會了html語言,並且這麼標籤是預定義的,不可以擴展。

標籤分類有兩種:

1.單標籤  <! DCOTYPE HTML>

2. 雙標籤  <html></html>


前端的開發工具:

         webstorm:很強大實際開發主流選擇

         DW:歷史很悠久了

         sublime :也是主流的企業級首選開發工具。

         hbuider:號稱最快的前端開發工具。



(單標籤)換行標籤 <br />和 水平線標籤<hr />  

    <p></p>段落標籤,上下自動生成空白行。

<h1></h1>h1-h6 字體逐漸變小,h1一個網頁中只能出現一次。(標題標籤)

<font></font>字體標籤

文本格式化標籤:

<strong></strong>表示加粗

<b></b>:加粗

<em></em><i></i>傾斜

<del></del><s></s>刪除線

<ins></ins> <u></u>下劃線

使用前面的,因爲標籤名稱更加有意義。

圖片標籤:


相對路徑:imgs/anta.PNG

絕對路徑:D:/HBuilder/hworksapce/html01/imgs/anta.PNG


列表分爲有序列表、無需列表、和自定義列表:

無序列表

<!--

         無序列表

        -->

        <ul type="circle" >

            <li>蘋果</li>

            <li>香蕉</li>

            <li>桃子</li>

            <li>火龍果</li>

        </ul>

       

        <ul type="disc" >

            <li>蘋果</li>

           <li>香蕉</li>

            <li>桃子</li>

            <li>火龍果</li>

        </ul>

       

       

        <ul type="square" >

            <li>蘋果</li>

            <li>香蕉</li>

            <li>桃子</li>

            <li>火龍果</li>

        </ul>


 有序列表

<!--

        有序列表

        -->

        <ol type="1" start="10" >

        <li>蘋果</li>

        <li>香蕉</li>

        <li>桃子</li>

        <li>火龍果</li>

        </ol>

       

       

        <ol type="A">

        <li>蘋果</li>

        <li>香蕉</li>

        <li>桃子</li>

        <li>火龍果</li>

        </ol>

 

        <ol type="i">

        <li>蘋果</li>

        <li>香蕉</li>

        <li>桃子</li>

        <li>火龍果</li>

        </ol>

 

自定義列表

<!--

        自定義列表

        -->

        <dl>

        <dt>遊戲</dt> <!-- 小標題-->

        <dd>LOL</dd<!-- 解釋標題-->

        <dd>農藥</dd>

        <dd>吃雞</dd>

        </dl>

<meta charset="utf-8">指定編碼集

<meta name="keywords"content="武漢宏鵬java培訓,PHP培訓,web前端培訓,UI培訓,人工智培訓" />有利於被搜索到。Seo

<meta name="description"content="武漢宏鵬java培訓,PHP培訓,web前端培訓,UI培訓,人工智培訓" />網站的介紹

<meta http-equiv="refresh"content="5;http://www.whhpjt.cn" />網頁重定向

 

<link rel="stylesheet"type="text/css"href="css/1.css"/>

引入樣式表

<link rel="icon" href="" />引入小圖標


<table></table>   表格

<tr></tr>

<td></td>


border="1"  邊框

         width="500" 寬度

         height="300" 高度

         cellspacing="0"單元格與單元格之間的距離

cellpadding="15"內容與邊框的距離

align="center"align="left"align="right"可以設置表格在網頁中的位置。

如果給tr或者td使用,tr或者td的內容居中。

bgcolor="pink":設置背景顏色

   表格的標準結構:

   <thead></thead>表頭

   <tbody></tbody>身體默認在網頁中會加上

   <tfoot></tfoot>腳部

colspan 行合併

rowspan 列合併

valign="bottom"  topcenter 垂直對齊方式




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章