前端基礎——HTML

時間 2019-11-19

標籤前端基礎 html 欄目 HTML 简体版

原文原文鏈接

1、HTML網頁結構css

　　1.文檔聲明：（新版HTML的聲明）html

<!DOCTYPE html>

　　2.頭部：title, base, link, meta, script, style等經常使用標籤前端

<head>
    <meta charset="UTF-8">
    <title>bootstrap的js插件</title>
    <!-- 引入外部的css文件-->
    <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
    <!-- 先引入jQuery，再引入js-->
    <script src="bootstrap\js\jquery.min.js"> </script>
    <script src="bootstrap\js\bootstrap.min.js"> </script>
</head>

　　//例如文檔的聲明編碼，文件自己的編碼（使用editplus能夠方便的修改）jquery

　　3.主體：web

<body>
    
</body>

　　4.註釋：bootstrap

HTML—— 框架

　　CSS—— /*CSS註釋*/ide

　　JS——//單行註釋　　/*段註釋*/oop

2、基本標籤佈局

　　1.標題標籤 <h1>~<h6>，數字越小，字體越大

　　站長之家權重查詢（0-10等級劃分）：http://rank.chinaz.com/

　　通常而言，一個網頁使用一個<h1>（多個將會被百度認爲做弊行爲），<h5><h6>已經基本不用

　　2.段落標籤 <p>　　行內標籤<span>

　　<span>標籤是無語義的標籤，做用是單獨設置樣式的。

　　<i>：斜體，一般用於區域塊中引入小圖標（<em>也可用於文本斜體，也是強調斜體語義）　　

　 <b> ：粗體（<strong>用於強調關鍵字等強調做用），通常都是在文本中（<p>段落中）嵌套使用

　　3.盒子 <div>

　　網頁經常使用樣式：（標籤都會有一些默認的邊距等）

　　　　外邊距：margin　　內邊距（填充）：padding　　

　　　　邊距方向：上 ,右, 下, 左（0px,0px,0px,0px）　　上下 , 左右（0px,0px）

　　　　邊框：border　寬度：width　　高度：height

　　　　實例：

<div style="width: 350px;height: 300px;border: 2px solid red">
        <div style="width: 150px;height: 100px;border: 3px solid green; margin:30px 40px"> 內部DIV </div>
    </div>

　　通常而言，能夠設置通用的邊距來避免默認的邊距問題：

　　<style type="text/css"> *{margin: 0px;padding: 0px}
　　　　/*只設置div盒子的邊距：html,body,div{margin: 0px;padding: 0px}*/

    </style>

　　4.字體標籤 <font>　　——h5已經規定再也不使用！由CSS的font樣式代替

　　設置顏色，字體，大小等

<font color="red" size="24" face="微軟雅黑">個人字體</font>

　　5.超連接 <a>

　　一個是常規的頁面跳轉： <a href="#"><a>

　　一個是用來作錨點導航：<a name="m">錨點</a>　　<a href="#m"></a>

　　經常使用的屬性：如打開的頁面是否爲本頁，連接標題等，請參見w3school

　　 <a href="#computer">電腦</a>
    <a href="#phone">手機</a>
    <div style="width: 100%;height: 600px;border: 2px solid red">
        <a name="phone">手機</a>
    </div>
    <div style="width: 100%;height: 600px;border: 2px solid red">
        <a name="computer">電腦</a>
    </div>

　　僞類：經過樣式修改超連接點擊後的狀態（例如點擊先後顏色等）：

link 未訪問（默認） hover 鼠標懸停（鼠標劃過） active 連接激活（鼠標按下） visited 訪問事後（點擊事後）

<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
    <style type="text/css"> a:link{color: red;} a:hover{color: green;}
    </style>
</head>

　　6.圖片標籤 <img>

　　經常使用屬性：src　　alt（圖片加載失敗提示文本）　　title（圖片提示信息）　　

　 7.預格式 <pre>

　　8.文本域 <textarea>

　　寬高樣式請不要經過 cols rows屬性，請使用CSS樣式進行代替

　　9.內框架 <iframe>

　　10無序列表 <ul> <li>——ul標籤中應當只存在 li 爲子元素！（嵌套請嵌套在li中）

　　去掉列表的小圓點：.nav ul li{list-style: none;}

　　通常用導航欄的話可使用ul生成一個，以後的動態循環生成便可，而使用 a 標籤則寫法不靈活，改變佈局不方便

　　經常使用轉義符：

　　　　空格—— 

　　　　尖括號——< <　　>>

　　塊級標籤與行內標籤轉換：

　　　　一般塊級標籤能夠由width等來設置寬高，而行內標籤一般由內容進行撐開

　　　　dispaly:bolck　換行的塊級　display:inline-block　　不帶換行的塊級

　　　　轉換爲塊級標籤後即可以直接使用width進行寬高設置了（實例見導航實例）

　　無序列表——導航實例：

　　基礎 a 標籤版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px}
        .top{width: 80%;height: 45px;background: #808080;margin:45px 60px;}
        .top .nav a{font-size: 16px;color:#FFF;font-family: "微軟雅黑";
                    /*消除超連接下劃線*/text-decoration:none;
                    display: block;width: 100px;height: 10px;float: left;
                    text-align: center;line-height: 45px}
        .top .nav{width: 450px;height: 45px;margin-left: 80px}    
        .top .nav a:hover{color: #696969    }        
    </style>
</head>
<body>
    <!--導航 開始-->
    <div class="top">
        <div class="nav">
            <a href="#">Java</a>
            <a href="#">Python</a>
            <a href="#">C++</a>
            <a href="#">Hadoop</a>
        </div>
    </div>
    <!--導航 結束-->
</body>
</html>

View Code

　　經常使用 li 標籤版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
    <style type="text/css">
        html,body,div{margin: 0px;padding: 0px}
        .nav{width: 100%;height: 45px;background: #808080;margin:45px 60px;}
        .nav ul li{list-style: none;display: inline-block;width: 80px;text-align: center;padding: 0px 15px;}
        .nav ul li a{text-decoration: none;font-size: 16px;color: #FFF;font-family: "微軟雅黑";text-align: center;line-height: 45px;}
        .nav ul li a:hover{color: black;}
    </style>
</head>
<body>
    <!--導航 開始-->
        <div class="nav">
            <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">關於我</a></li>
                <li><a href="#">心路歷程</a></li>
                <li><a href="#">技術分享</a></li>
            </ul>
        </div>
    <!--導航 結束-->
</body>
</html>

View Code

　　二級小導航：

<!doctype html><!--網頁文檔頭部文檔聲明 doc=document(文檔)，type(類型)-->
<html><!--主體開始-->
    <!--網頁頭部區域-->
    <head>
        <!--聲明當前頁面的編碼集charset=utf-8,中文編碼集(gbk,gb2312),國際編碼集(utf-8)-->
        <meta charset="utf-8" /><!--元信息標籤 聲明編碼集-->
        <!--聲明當前頁面文檔三要素-->
        <!--標題-->
        <title>努力_幸運-凡事都不肯意將就</title>
        <!--關鍵字-->
        <meta name="Keywords" content="web前端" />
        <!--描述-->
        <meta name="Description" content="必定要把Web前端學好學出色" />

        <!--base,link,style,script-->
        <style type="text/css">
            html,body,div,ul,li,a{margin:0px;padding:0px;}/*初始化標籤默認的邊距*/
            .nav{width:248px;height:35px;margin:50px 0 0 30px;border:2px solid red;}
            .nav ul li{width:120px;height:35px;float:left;text-align:center;/*文本水平居中*/line-height:35px;/*文本垂直居中*/list-style:none;margin:0 1px;}
            .nav ul li a{color:#fff;width:120px;height:35px;display:block;background:#000;
            text-decoration:none;/*消除文本下劃線*/}

            /*sel-style*/
            /*
                .nav ul li .sel li
                首先找到.nav導航盒子，再找裏面的無序列的列表項，再找列表項裏面的無序列表
            */
            .nav ul li .sel li{width:120px;height:35px;font-size:12px;text-align:center;
            line-height:35px;background:#ff9966;/*背景顏色*/margin-bottom:2px;}
            .nav ul li .sel{display:none;/*隱藏*/}
            .nav ul li:hover .sel{display:block;/*顯示*/}
            .nav ul li .sel li:hover{background:#cc99ff;}
            
        </style>
    </head>

    <!--網頁身體區域-->
    <body>
        <!--導航區塊 開始-->
        <div class="nav">
            <ul>
                <li>
                    <a href="#">web前端</a>
                    <ul class="sel">
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>
                </li>
                <li>
                    <a href="#">Java</a>
                    <ul class="sel">
                        <li>HTML/CSS/JavaScript</li>
                        <li>JEE</li>
                        <li>Oracle</li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--導航區塊 結束-->
    </body>
</html><!--主體結束-->