HTML基礎作出屬於本身的完美網頁

時間  2019-11-11
標籤 html 基礎 作出 屬於 本身 完美 網頁 欄目 HTML 简体版
原文   原文鏈接

HTML

HTML解釋：css

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的規則（W3C），你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。html

瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶！python

網頁的組成：web

一個網頁通常由兩部分組成即：django

  • HTML（Hypertext Markup Language）
  • 和CSS（Cascade Style Sheets）

HTML負責描述網頁的結構和內容（如標題，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。瀏覽器

<head>和</head>之間的內容，是元信息和網站的標題 元信息通常是不顯示出來的,可是記錄了你這個HTML文件的不少有用的信息
<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這裏是網頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了以後的兩個元素。<head>和</head>|<body>和</body>安全

文檔結構以下：服務器

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

</body>
</html>

DOCTYPE部分

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔框架

HTML語言須要一個標準，當咱們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問咱們的代碼的時候就就按照HTML代碼裏指定的標準去讀取和渲染給咱們展示的頁面。ide

爲何要使用<!DOCTYPE html>這個去告訴瀏覽器呢？

DOCTYPE模式：

咱們先了解一下DOCTYPE的模式

  • BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
  • CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

問題產生：

當Netscape4（譯註：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並無遵循W3C提出的標準。Netscape4 提供了糟糕的支持，而IE4 雖然接近標準，但依舊未能徹底正確的支持標準。儘管IE 5 修復了IE4 許多的問題（bugs），可是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。

爲了保證本身的網站在不一樣的瀏覽器中都能正確展示，網頁開發者不得不依據各個瀏覽器的自身的規範來使用CSS。所以大部分網站的CSS實現並未符合W3C的標準。

然而隨着標準一致性變得愈來愈重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。可是改變現有CSS的實現，完整去遵循標準，會使許多網站或多或少受到破壞。若是瀏覽器忽然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。

所以當即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰時（譯註：微軟和網景之間的一段競爭）所產生的混亂。

解決方案：

  1. 容許網站開發者可以選擇他們所熟知的模式。
  2. 依然使用舊式規則顯示陳舊的網站。

換句話說，全部的瀏覽器須要提供兩種模式：怪異模式（即兼容模式）服務於舊式規則，嚴格模式服務於標準規則。Mac平臺的IE瀏覽器最早實現這兩種模式，Mozilla， Safari、Opera和Windows平臺的IE6也相繼實現了這兩種模式。WIndows平臺的IE5和Netscape4則只提供了怪異模式。

選擇使用哪一種模式須要一個觸發器，而 「DOCTYP切換」 則用於此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯註：DTD（文檔類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中容許有什麼，不容許有什麼，DOCTYPE正是用來告訴瀏覽器使用哪一種DTD,通常放在(X)HTML文檔開頭聲明）用以告訴其餘人 這個文檔的類型風格

  1. 產生於標準化浪潮之前的網頁並無DOCTYPE聲明。所以'沒有DOCTYPE'意味着觸發怪異模式：既依據舊式的CSS規則渲染網頁。
  2. 相反，若是開發者明確知道包含DOCTYPE，他們應該明白他們想要怎麼作。所以大部分的DOCTYPE聲明將觸發嚴格模式：即依據標準的CSS規則渲染網頁。
  3. 任何新的或未知的DOCTYPE將觸發嚴格模式。

 

 

head部分

 

一、Meta(metadata information)

 提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="refresh" content="5">  
    <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> 
    <meta name="keywords" content="博客,張巖林,帥哥,">
    <meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">
    <title>張巖林</title>
    <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  type="image/x-icon">
</head>
<body>

</body>
</html>

1>定義編碼格式

<meta charset="UTF-8">  #定義編碼爲utf-8

2>刷新和跳轉頁面

<meta http-equiv="refresh" content="5">     # 5秒跳轉

<metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" />   #跳轉至個人博客

3>關鍵字

關鍵字的做用：通常是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，若是你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，好比百度：若是他們收錄以後，他們搜索你的關鍵字的時候，就能找到我們的網站。

<meta name="keywords" content="博客,張巖林,帥哥,">

4>描述

例如博客園的描述以下：

<meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">

5>title 

設置標籤爲張巖林

<title>張巖林</title>

6>標籤圖標Link

<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  type="image/x-icon">

7>導入CSS相似python中導入模塊相似

<link rel="stylesheet" href="css/css_model.css">

8>、Style

　　一、在當前文件中寫Css樣式

　　二、在其餘文件中寫Css樣式相似python的模塊導入的方式把Css樣式導入到當前文件中使用

9>、Script

　　一、在當前文件中寫JS

　　二、在其餘文件中寫JS相似python的模塊導入的方式把JS導入到當前文件中使用

 

 

body部分

 

body裏面分爲兩類標籤：塊級標籤和內聯標籤。

一、塊級標籤：<p><h1><table><ol><ul><form><div>

二、內聯標籤：<a><input><img><sub><sup><textarea><span>

塊級標籤元素的特色
　　① 老是在新行上開始；
　　② 高度，行高以及外邊距和內邊距均可控制；
　　③ 寬度缺省是它的容器的100%，除非設定一個寬度。
　　④ 它能夠容納內聯元素和其餘塊元素

內聯標籤元素的特色
　　① 和其餘元素都在一行上；
　　② 高，行高及外邊距和內邊距不可改變；
　　③ 寬度就是它的文字或圖片的寬度，不可改變
　　④ 內聯元素只能容納文本或者其餘內聯元素

對行內元素，須要注意以下 
　　設置寬度width 無效。
　　設置高度height 無效，能夠經過line-height來設置。
　　設置margin 只有左右margin有效，上下無效。
　　設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

 一、基本標籤

　　<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

　　<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

　　<b> <strong>: 加粗標籤.

　　<strike>: 爲文字加上一條中線.

　　<em>: 文字變成斜體.

　　<sup>和<sub>: 上角標 和 下角表.

　　<br>:換行.

　　<hr>:水平線

 　　<div><span>

 廢話很少說，直接擼碼分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>張巖林</title>
</head>
<body>
    <br>
    <hr>
    <h1>張巖林</h1>
    <h2>張巖林</h2>
    <h3>張巖林</h3>
    <h4>張巖林</h4>
    <h5>張巖林</h5>
    <h6>張巖林</h6>
    <hr>
    <p>段落標籤1</p>
    <p>段落標籤2</p>
    <hr>
    <b>加粗文字方法一</b>
    <br>
    <strong>加粗文字方法二</strong>
    <hr>
    <p>原價：<strike>299 </strike> 現價：10     文字中間加橫線</p>
    <p><em>斜體字</em></p>
    <p> 2<sup>n</sup> 上角標</p>
    <p>h<sub>2</sub>o 下角標</p>
    <p>&lt; 小於號</p>
    <p>&gt; 大於號</p>
    <p>&copy; </p>
    <p>&reg;</p>

</body>
</html>

效果以下：

二、圖形標籤<img>

　　src: 要顯示圖片的路徑.

　　alt: 圖片沒有加載成功時的提示.

　　title: 鼠標懸浮時的提示信息.

　　width: 圖片的寬

　　height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

<img src="111426147.jpg" alt="圖片加載失敗" title="美女">

三、超連接標籤(錨標籤)<a>:

　　href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

　　target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

　　name: 定義一個頁面的書籤.

　　用於跳轉 href : #書籤名稱.

<a href="http://www.cnblogs.com/aylin/p/5608175.html"  target="_blank">猛戳這裏</a>

還有一種本頁標籤跳轉，經過定義ID來進行查找到內容

<a href="#a">李白</a>
<div id="a" style="background-color: #197991">牀前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉。</div>

四、列表標籤：

　　<ul>: 無序列表

　　<ol>:有序列表

      　　   <li>:列表中的每一項.

　　<dl> 定義列表

      　　   <dt> 列表標題

         　　<dd> 列表項

<body>
    <ol>
        <li>無序一</li>
        <li>無序二</li>
        <li>無序三</li>
        <li>無序四</li>
    </ol>
    <ul>
        <li>有序一</li>
        <li>有序二</li>
        <li>有序三</li>
        <li>有序四</li>
    </ol>
    </ul>
    <dl>
        <dt>第一章</dt>
        <dd>1.1</dd>
        <dd>1.2</dd>
        <dd>1.3</dd>
        <dd>1.4</dd>
    </dl>

效果以下：

五、表格標籤: <table>:

　　border: 表格邊框.

　　cellpadding: 內邊距

　　cellspacing: 外邊距.

　　width: 像素 百分比.（最好經過css來設置長寬）

　　<tr>: table row

     　　    <th>: table head cell

         　　<td>: table data cell

　　rowspan: 單元格豎跨多少行

　　colspan:  單元格橫跨多少列（即合併單元格）

　　<th>: table header <tbody>(不經常使用): 爲表格進行分區.

    <table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px">
        <tr>
            <td>編號</td>
            <td>姓名</td>
            <td>班級</td>
            <td>數學</td>
            <td>語文</td>
            <td>英文</td>
        </tr>
        <tr>
            <td>001</td>
            <td>張巖林</td>
            <td>S1</td>
            <td>120</td>
            <td>109</td>
            <td>120</td>
        </tr>
                <tr>
            <td>001</td>
            <td>張林</td>
            <td>S1</td>
            <td>100</td>
            <td>19</td>
            <td>100</td>
        </tr>
        <tr>
            <td>001</td>
            <td>小康</td>
            <td>S1</td>
            <td>89</td>
            <td>100</td>
            <td>10</td>
        </tr>
                <tr>
            <td>001</td>
            <td>小虎</td>
            <td>S1</td>
            <td>10</td>
            <td>19</td>
            <td>12</td>
        </tr>
    </table>
code

效果以下：

表格中還有合併單元格:

    <table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td colspan="3">1 2 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6 9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>

        </tr>
    </table>

六、表單標籤（django）<form>:

      表單用於向服務器傳輸數據。

      表單可以包含 input 元素，好比文本字段、複選框、單選框、提交按鈕等等。

      表單還能夠包含textarea、select、fieldset和 label 元素。

 

1>.表單屬性

　　HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.

　　action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web　　

　　method: 表單的提交方式 post/get 默認取值 就是 get（信封）

　　get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

　　post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

　　get/post是常見的兩種請求方式.

2>.表單元素

     <input>     type:     text 文本輸入框

     password 密碼輸入框

     radio 單選框

     checkbox 多選框  

     submit 提交按鈕            

     button 按鈕(須要配合js使用.) button和submit的區別？

     file 提交文件：form表單須要加上屬性enctype="multipart/form-data"

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

</head>
<body>
        <div style="background-color: aquamarine;height: 590px;width: 292px; margin: 0 auto;margin-top: 6%">
            <img src="QQ圖片20160624092733.png">
            <br>
            <p style="text-align: center">與世界分享你的知識、經驗和看法</p>
            <hr>
            <form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
                <p> 用 戶 <input type="text" name="username"></p>
                <p> 密 碼 <input type="password" name="passwd"></p>
                <hr>
                <p> 性 別 男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p>
                <hr>
                <p> 愛 好
                    籃球<input type="checkbox" name="lanqiu" value="籃球">
                    足球<input type="checkbox" name="zuqiu" value="足球">
                    排球<input type="checkbox" name="paiqiu" value="排球">
                    檯球<input type="checkbox" name="taiqiu" value="檯球">
                </p>
                <hr>
                <br>
                城 市
                <select name="language"  >
                    <optgroup label="河北省">
                        <option value="保定市">保定市</option>
                         <option value="邯鄲市">邯鄲市</option>
                         <option value="承德市">承德市</option>
                    </optgroup>
                    <optgroup label="河南省">
                         <option value="洛陽市">洛陽市</option>
                         <option value="信陽市">信陽市</option>
                         <option value="鄭州市">鄭州市</option>
                    </optgroup>
                    <br>
            </select>
                <hr>
                <p style="text-align: center">備 注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p>
                <p><input type="file" name="file_name" ></p>
                <hr>
                <p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳這裏"></p>

            </form>
        </div>
<table >
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

</body>
</html>
from表單

效果有點low，講究看吧

 

 下面咱就來分析一下每一個代碼的意義：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程