HTML(一)

時間 2019-11-17

標籤 html 欄目 HTML 简体版

原文原文鏈接

HTML(一)javascript

HTML結構詳解>>>html

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼以下：前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

1. 文檔聲明頭 (<!DOCTYPE html> )java

　　出如今HTIL頁面第一行開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。瀏覽器

2. 頭標籤(head)app

　　head標籤放在頭部分之間,包含: <title>, <meta>, <link>, <style>ide

<title> : 制定整個網頁的標題,在瀏覽器最上方顯示.字體

二. body標籤中相關標籤

字體標籤：

h1~h六、<font> 、<u>: 下劃線、<b>:加粗、<strong>:加粗, <em>: (斜體)、<sup>: (上標)、<sub>: (下表)

排版標籤:

<div> 、<span> 、 <br>: (換行標籤)、<hr>: (水平線標籤)、<center>: (居中標籤)、<pre>: (預約義標籤)

超連接 :　　<a>　

圖片標籤 : 　　<img>

h1~h6

>>>標題使用<h1>至<h6>標籤進行定義, <h1>定義最小的標題,具備align屬性,屬性值能夠是: left,center,right.

字體標籤>>>

<!--文檔的聲明 一個html文件就是一個文檔-->
<!doctype html>
<html lang="前端">
<head>
    <!--head標籤中的內容不會顯示到瀏覽器上-->
    <!--單閉合標籤 定義文檔的編碼類型-->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端第一天</title>
</head>
<!--body中的內容都會顯示到瀏覽器中-->
<body>
    菜菜
    <!--h1塊級模塊: 獨佔一行-->
    <h1>輝哥</h1><h6>輝哥</h6>
    <h2>輝哥</h2>
    <h3>輝哥</h3>
    <h4>輝哥</h4>
    <h5>輝哥</h5>
    <!--下劃線-->
    <u>姜玉陽</u>
    <!--加粗-->
    <b>周傳雄</b><strong>周杰倫</strong>
    <!--換行-->
    <br>
    <!--分割線-->
    <hr><hr>
    <!--斜體-->
    <em>哈哈哈</em>
    <!--空白摺疊: 換行和空格摺疊成一個-->
    <pre>
        關不上的窗破碎的酒杯
        破碎的酒杯
    </pre>


</body>
</html>

字體標籤

排版標籤>>>

段落標籤<p> (paragraph縮寫).

　　文本級標籤,放文字,圖片,表達元素

　　align="屬性值": 對齊方式. 屬性包括: left, center, right

　　<p>這是一個段落</p>

　　<p align="center">這是另外一個段落</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <!--記住:p標籤只能放 字體標籤和img 表單 input,它不能放塊-->
        <p>若是要想保證圖片等比例縮放，請只設置width和height中其中一個。</p>
        <p>若是要想保證圖片等比例縮放，請只設置width和height中其中一個。</p>
        <p>若是要想保證圖片等比例縮放，請只設置width和height中其中一個。</p>
        <p>若是要想保證圖片等比例縮放，請只設置width和height中其中一個。</p>

        <!--p標籤中不能放塊級標籤-->
        <p>
            哈哈哈
            <!--<div>嘿嘿</div>-->
            <p>嘿嘿</p>
        </p>
    </div>
</body>
</html>

View Code

塊級標籤<div>(division) 和<span>

　　div: 把標籤中的內容做爲一塊對待,必須單獨佔一行

　　align="屬性值": 設置塊的位置,可選擇: left,right,center

　　span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。

　　<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。

　　若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，　　　　　　　　DIV+CSS來實現各類樣式。

超連接>>>

　　<a href="">段落段落段落段落段落段落</a>　　a是一個文本級標籤

　　herf: 目標url

　　title: 懸停文本

　　name: 設置一個錨點的名稱

　　target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：

_self：在同一個網頁中顯示（默認值）
_blank：在新的窗口中打開
_parent：在父窗口中顯示
_top：在頂級窗口中顯示

1.外部連接: 連接到外部文件

　　<a herf="new.html">點擊進入到進網頁</a>

　　a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。

　　href是英語hypertext reference超文本地址的縮寫。讀做「喝瑞夫」，不要讀做「喝夫」。

2.錨連接：

　　在本頁面或者其餘頁面的的不一樣位置進行跳轉

　　3.特殊連接

返回頁面頂部的位置

 <a href="#">跳轉到頂部</a>

與js有關：

 <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a>

javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</2
javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。例如：<ahref="javascript:alert()">內容</a>

圖片標籤<img/>(image) >>>

img標籤的經常使用其它屬性

width：寬度
height：高度
title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。
align：指圖片的水平對齊方式，屬性值能夠是：left、center、right
alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）

兩個寫法:相對路徑和對決路徑,網路路徑 src(source)

　　1.　　<img src="images/1.jpg">

　　2.　　<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

　　3　　網路路徑<img src="http://www.baidu.com/2016040102.jpg">

<!DOCTYPE html>
<html lang="小米商城首頁">
<head>
    <meta charset="UTF-8">
    <title>小米商城首頁</title>
</head>
<body>
        <div id="top" style="width: 1000px;">
            <div class="top-1">
                <span>小米商城</span><span class="stp">|</span>
                <span>MIUI</span><span class="stp">|</span>
                <span>IoT</span><span class="stp">|</span>
                <span>雲服務</span><span class="stp">|</span>
                <span>金融</span><span class="stp">|</span>
                <span>有品</span><span class="stp">|</span>
                <span>小愛開放平臺</span><span class="stp">|</span>
                <span>政企服務</span><span class="stp">|</span>
                <span>下載app</span><span class="stp">|</span>
                <span>Select Region </span><span class="stp">|</span>
                <div class="login">
                    <a href="#">登陸</a>
                    <a href="#" class="sep">|</a>
                    <a href="#">註冊</a>
                    <a href="#" class="sep">|</a>
                    <a href="#">消息通知</a>
                    <span><img src="./tupian/gou.jpg" alt="" height="20">購物車(<span class="count">0</span>)</span>

            </div>

            <div class="top-2">
                <a href="#">小米手機</a>
                <a href="#">紅米</a>
                <a href="#">電視</a>
                <a href="#">筆記本</a>
                <a href="#">空調</a>
                <a href="#">新品</a>
                <a href="#">路由器</a>
                <a href="#">智能硬件</a>
                <a href="#">服務</a>
                <a href="#">社區</a>
                <form action="https://www.baidu.com/s" method="get">
                    <input type="text" name="wd" value="小米8 小米MIX2S">
                    <input type="submit" value="搜索">
                </form>
            </div>

            <div class="list">
                <u1 type="square">
                    <li>手機</li>
                    <li>電視<li>
                    <li>筆記本<li>
                    <li>家電<li>
                    <li>出行<li>
                </u1>
            </div>

            <div class="xiaolist">

                <table border="1" style="border-collapse: collapse;" width="300px">
                    <tr height="100">
                        <td>選購手機</td>
                        <td>企業團購</td>
                        <td>F碼通道</td>
                    </tr>
                    <tr height="100">
                        <td>米粉卡</td>
                        <td>以舊換新</td>
                        <td>話費充值</td>
                    </tr>
                </table>
                <img src="./tupian/gou.jpg" alt="" height="1000">

            </div>

        </div>
</body>
</html>