天天看點

Android程式員搞Web之HTNL(一)總結:可以搭建一個很醜的網頁了。

1、html主要包括:結構(重要,html)、樣式(css)、行為(js)三部分。

2、html的基本結構(固定不變的結構)

<html>//根節點
      <head>//頁面的頭部
            <title>标題</title>
      </head>
      <body>//頁面的内容
      </body>
</html>
           

3、html标簽分為單标簽和雙标簽,當标簽内帶有“/”表示标簽結束。

4、标題标簽(共六種)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html Test one</title>
</head>
<body>
    <h1>一級标題</h1>
    <h2>二級标題</h2>
    <h3>...</h3>
    <h6>六級标題</h6>
</body>
</html>
           

樣圖

5、段落标簽

<p>我是一個段落标簽</p>
           

6、橫線标簽與換行标簽

<hr/>//橫線
<br/>//換行
           

7、div 與span

<div>我是div</div>
    <div>我是div</div>

    <span>我是span</span>
    <span>我是span</span>
           

div與span分别表示盒子一行隻能有一個div,但是span可以一行有多個

8、文本格式化标簽

<strong>加粗字型</strong>
    <b>我也是加粗字型</b>

    <br/>
    <hr/>
    <i>我是文本傾斜</i>
    <em>我也是文本傾斜</em>
    <br/>
    <hr/>
    <s>我是删除線</s>
    <del>我也是删除線</del>
    <br>
    <hr>
    <u>我是下劃線</u>
    <ins>我也是下劃線</ins>
           

10、圖檔标簽

<img src="ic_launcher_round.png" />
           

常用屬性:

src:目的圖檔的路徑

alt:圖檔不能顯示的錯誤圖檔

title:滑鼠懸停與圖檔上方顯示的文字

width和 hight :寬度和高度(給一個就行了,會自動等比例縮放)

border:為圖檔添加邊框(參數為邊框寬度)

11、連結标簽

<a href="https://www.jianshu.com/u/2e5d001fdc4c">
        <img src="ic_launcher_round.png" alt="error.png" />
    </a>

<a>可以是文字或者圖像</a>
           

href:目的網站的連結

當未确定跳轉連結的時候可以将href内添加一個“#”,使得點選超連結無法跳轉。

target:預設參數為_self ,效果點選之後原頁面被替換。_blank參數,效果為點選之後建立新視窗進行顯示新頁面。寫法如下:

<a href="htmlTest1.html" target="_blank"></a>
           

12、錨點定位(類似于目錄效果)

<a href="#test" >目标内容</a>
        

<h1 id="test">就是這裡你猜對了</h1>
           

1)、<a href="#+目标id" >目标内容</a>

2)、<h1 id="目标id">就是這裡你猜對了</h1>

13、base标簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html Test one</title>
    <base target="_blank" />
</head>
<body>
    <a href="https://www.jianshu.com/u/2e5d001fdc4c" >簡書</a>
</body>
</html>
           

若頁面内所有的連結都用新視窗打開,則使用base标簽,如果頁面内某一個不需要新視窗打開則在該連結标簽内添加

target="_self "

屬性

14、特殊字元标簽

&nbsp;   表示:   空格
&lt;          表示:  小于号<
&gt;         表示:    大于号>
&amp      表示:    &
           

15、相對路徑

1)、網頁與圖檔位于同級的時候可以直接

src=""

;圖檔

2)、圖檔位于網頁的下一級路徑的時候

src="檔案夾名稱/圖檔名稱"

;

3)、圖檔位于網頁的上級路徑

src="../圖檔名稱"

16、絕對路徑

寫法

src="網絡連接配接"

17、清單标簽

1)、無序清單
<body>
    <ul>
        <li>第一個</li>
        <li>第二個</li>
    </ul>
</body>
           

a)、ul标簽内隻能放li标簽,如果放置其他的是不科學的

b)、li内可以放置其他标簽

2)、有序清單
<body>
    <ol>
        <li>第一個</li>
        <li>第二個</li>
        <li>第一個</li>
        <li>第二個</li>
        <li>第一個</li>
        <li>第二個</li>
    </ol>
           

總結:可以搭建一個很醜的網頁了。

繼續閱讀