HTML的前世此生

時間 2019-11-08

標籤 html 前世此生欄目 HTML 简体版

原文原文鏈接

　　　　　　　　　　　　　　　　　　　　HTML的基礎知識掃盲html

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　做者：尹正傑前端

　　三年前，我就聽周圍的一些工程師說，python就是一個腳本語言，沒啥好學的，學JAVA吧，python能幹的JAVA都能幹，並且性能又好。確實如此，Python能幹的活，JAVA都能幹，並且效率還能實現的比Python高。並且JAVA在近幾年的使用中排行榜中首居第一位。可是Python使用率是直線飆升我就不說了，這是你們有目共睹的。Python用途很廣，就說我經常使用Python就寫一些運維工具，連接數據庫啊，作備份啊，固然有的大牛直接用Python寫OA。爲了實現python全棧，咱們首先要懂一些前端的東西，好比HTMl,CSS，JavaScript等等。因此咱們先從最簡單的HTML開始提及，其實本篇博客就是在總結HTML這門語言的規則。接下來，就跟着正傑一塊兒來體會一下Html的奇妙之處吧。golang

一.什麼是HTML
web

 1 #！/usr/bin/env python
 2 #_*_coding:utf-8_*_
 3 #@author :yinzhengjie
 4 #blog:http://www.cnblogs.com/yinzhengjie/tag/python%E8%87%AA%E5%8A%A8%E5%8C%96%E8%BF%90%E7%BB%B4%E4%B9%8B%E8%B7%AF/
 5 #EMAIL:y1053419035@qq.com
 6 
 7 '''
 8 什麼是HTML：
 9     1.超文本標記語言，標準通用標記語言下的一個應用;
10     2.具備規則的一門語言，能夠被瀏覽器識別；
11     3.HTML那點事：
12         a>.後綴名稱能夠是不同，可是他們本質上就是作模板用的，如：*.html,*.tpl,*cshtml等等。
13         b>.靜態網頁，只要讀取文件直接就會返回給客戶，優勢是訪問速度快，沒有數據庫交互和邏輯交互
14         c>.動態網頁，動態網頁的本質就是替換，就是讀取到"*html"文件是，修改相應的字符串而後返回給用戶就
15         實現了動態網頁（因此說HTML本質上就是一個模板（本質上是字符串），用於被真正的數據替換掉，返回給用戶就實現了動態）。
16         d>.請求週期：指的是用戶請求數據，服務器講數據傳給給用戶的一個過程。
17         e>規則對應關係要掌握如：h1--->加大加粗。
18 '''

二.HTML基礎標籤以及表格用法展現數據庫

  1 <!DOCTYPE html>       <!--Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔。html這種模式兼容瀏覽器是最好的-->
  2 <html lang="en">
  3     <head  name="尹正傑" age="25">  <!--標籤的開頭,其裏面的內容（name="尹正傑"）是標籤的屬性,其屬性能夠定義多個。-->
  4         <meta charset="UTF-8"/>     <!--指定頁面編碼，咱們稱這種標籤類型爲自閉和標籤，由於咱們須要在標籤的結尾寫上「/」，爲了方便咱們識別標籤類型。-->
  5         <meta http-equiv="refresh" content="30; Url=http://www.cnblogs.com/yinzhengjie/"> <!--這是作了一個界面的跳轉，表示30s不運行的話就跳轉到指定的URL-->
  6         <title>尹正傑的我的主頁</title> <!--定義頭部(標籤)的標題-->
  7         <meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區" /> <!--「content」定義關鍵字，其做用就是讓瀏覽器經過搜索關鍵字時，會匹配該網站，這就是說若是你沒有單獨給百度錢的話，這些關鍵字就尤其重要啦！-->
  8         <meta name="description" content="博客園是一個面向開發者的知識分享社區。自建立以來，博客園一直致力並專一於爲開發者打造一個純淨的技術交流社區，推進並幫助開發者經過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。" />  <!--定義描述字符,其做用就告訴客戶你的這個網站是幹嗎使用的。-->
  9         <link rel="shortcut icon" href="https://baike.baidu.com/pic/%E9%82%93%E7%B4%AB%E6%A3%8B/6798196/0/d1a20cf431adcbef011db9bba6af2edda3cc9f66?fr=lemma&ct=single#aid=0&pic=d1a20cf431adcbef011db9bba6af2edda3cc9f66" type="image/x-icon" /> <!--定義頭部圖標-->
 10         <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--這個是IE的瀏覽器生效的規則，若是你用的是谷歌，360等瀏覽器的話，這行規則不生效，若是你用的是IE瀏覽器的話，表示用IE最新的引擎去渲染HTML-->
 11     </head> <!--標籤的結尾，結合該標籤的開頭，這種標籤類型咱們稱之爲主動閉合標籤。-->
 12     <body>
 13         <h1>尹正傑</h1><!--定義文件的內容，其中「h1」標籤中-->
 14         <h2>尹正傑</h2>
 15         <h3>尹正傑</h3>
 16         <h4>尹正傑</h4>
 17         <h5>尹正傑</h5>
 18         <h6>尹正傑</h6>
 19         <h1>You are a good boy!</h1>
 20         <div style="width: 4000px">  <!--是其縮進代碼的父級標籤，給其定義寬度屬性是200像素大小-->
 21                     <h1>尹正傑</h1><!--塊級標籤：也叫父級標籤，即本身單獨佔了一行空間，或者說是佔它父級標籤的100%。做用：定義文件的內容-->
 22                     <h1>You are a good boy!</h1>
 23         </div>  <!--div的標籤的結尾-->
 24         <p>素胚勾勒出青花筆鋒濃轉淡<br/>瓶身描繪的牡丹一如你初妝<br/>冉冉檀香透過窗心事我瞭然<br/>宣紙上走筆至此擱一半<br/>釉色渲染仕女圖韻味被私藏<br/>而你嫣然的一笑如含苞待放</p> <!--其中<br/>表示換行符的意思，<p></p>表示一個段落的意思。-->
 25         <a>yinzhengjie</a> <!--內聯標籤，以a開頭的標籤都是內聯標籤，這些標籤的內容時鏈接在一塊兒的。:-->
 26         <a>2017</a>
 27         <a href="http://www.cnblogs.com/yinzhengjie/" target="_blank">尹正傑博客</a>  <!--a標籤特有的性能，重定向，經過href屬性定義須要跳轉的網站，經過target="_blank"表示新打開一個標籤頁並打開新的URL地址-->
 28 
 29         <a href="#Y1">Golang第一章</a>  <!--a標籤特有的性能，作錨，找ID爲"Y1"的標籤並跳轉過去-->
 30         <a href="#Y2">Golang第二章</a>  <!--找ID爲"Y2"的標籤-->
 31         <a href="#Y3">Golang第三章</a>  <!--找ID爲"Y3"的標籤-->
 32 
 33 
 34 
 35         <div id="Y1" style="height:700px;background-color:antiquewhite">  <!--用id來定義標籤爲"Y1"（通常要具備惟一性，即儘可能不要讓標籤的id的值相同）,用style來定義高度爲700像素，顏色用background-color來定義。-->
 36                                                                             Golang進階之路Day1<br/>
 37              Go語言官方自稱,之因此開發Go 語言,是由於「近10年來開發程序之難讓咱們有點沮喪」。 這必定位暗示了Go語言但願取代C和Java的地位,成爲最流行的通用開發語言。博客地址：http://www.cnblogs.com/yinzhengjie/p/6482675.html
 38         </div>
 39 
 40         <div id="Y2" style="height:700px;background-color:rebeccapurple;">
 41                                 <br/>Golang進階之路Day2<br/>
 42             前者你們應該都很熟悉，由於我在上一篇（http://www.cnblogs.com/yinzhengjie/p/6482675.html）關於GO的博客中用"go build"命令編譯不一樣的版本，可是在這裏咱們仍是要演示一下go build的花式用法。博客地址：http://www.cnblogs.com/yinzhengjie/p/7000272.html
 43         </div>
 44 
 45         <div id="Y3" style="height:700px;background-color:brown;">
 46              Golang進階之路Day3<br/>
 47             固然我這裏只是介紹了Golang的冰山一角，對Golang感興趣的小夥伴，能夠看一下Golang官網的文檔說明。畢竟官方纔是最權威的，給出國內地址：https://golang.org/pkg/!博客地址：http://www.cnblogs.com/yinzhengjie/p/7043430.html
 48         </div>
 49 
 50         <!--功能最少的標籤，最純潔的易於加工的標籤,即他們沒有「h1」和"a"標籤那麼多的屬性。-->
 51         <div>我是塊標籤</div>
 52         <span>我是內聯標籤</span> 　　　
 53 
 54         <!--列表-->
 55         <ul>    <!--打印字符穿前面帶個小黑點-->
 56             <li>菜單一</li>
 57             <li>菜單二</li>
 58             <li>菜單三</li>
 59         </ul>
 60 
 61         <ol>  <!--打印字符串前面有數字標識-->
 62             <li>第一章</li>
 63             <li>第二章</li>
 64             <li>第三章</li>
 65         </ol>
 66 
 67         <ol>
 68             <dd>北京</dd>  <!--自帶縮進，能夠用於寫新聞的標題-->
 69                 <dt>朝陽區</dt>
 70                 <dt>亦莊經濟開發區</dt>
 71                 <dt>豐臺區</dt>
 72                 <dt>海淀區</dt>
 73             <dd>河北</dd>
 74                 <dt>石家莊</dt>
 75                 <dt>保定</dt>
 76             <dd>陝西</dd>
 77                 <dt>西安</dt>
 78                 <dt>安康</dt>
 79         </ol>
 80 
 81 
 82     <!--表格-->
 83     <table border="1">   <!--定義一個表格，其屬性是border="1"，表示加邊框的意思。-->
 84         <thead>    <!--定義表頭信息-->
 85             <tr>   <!--'tr'表示定義一行的數據，裏面的內容由子標籤<th></th>實現-->
 86                 <th>姓名</th>    <!--'th'定義同一行每一列的內容,也就是說只要帶有這個標籤的且在其父標籤"tr"標籤中就是寫的同一行內容。-->
 87                 <th>年齡</th>
 88                 <td>性別</td>
 89             </tr>
 90         </thead>
 91         <tbody> <!--定義表格的內容-->
 92             <tr>  <!--'tr'表示每一行的數據，其定義的是行的操做。-->
 93                 <td>尹正傑</td> <!--td用來定義當前行的每一列的內容，與thead中的'th'用法相同。只不過'th’有加粗效果！-->
 94                 <td>25</td>
 95                 <td>boy</td>
 96             </tr>
 97             <tr>  <!--'tr'表示每一行的數據-->
 98                 <td>尹正傑</td> <!--‘<td></td>’標籤訂義的是列的操做-->
 99                 <td colspan="2">26</td>     <!--注意，'td'標籤的colspan屬性表示向右佔鋸的空間，咱們給的值是「2」，就表示會從當前列日後在佔一個列，共計當前行的兩列空間！-->
100             </tr>
101             <tr>  <!--'tr'表示每一行的數據-->
102                 <td>yinzhengjie</td> <!--‘<td></td>’標籤訂義的是列的操做-->
103                 <td rowspan="2">26</td>     <!--注意，'td'標籤的rowspan屬性表示向下佔據的空間，咱們這裏給的是仍是「2」，即從當前行的當前列，向下擴充空一列內容。-->
104             </tr>
105             <tr>  <!--'tr'表示每一行的數據-->
106                 <td>yinzhengjie</td> <!--‘<td></td>’標籤訂義的是列的操做-->
107                 <td >26</td>     <!--表示這個'td'標籤佔兩列的空間-->
108             </tr>
109         </tbody>
110     </table>
111     </body>
112 </html>

三.HTML表單類的數據編程

　　表單類的數據主要目的是講數據發送給後端。後端

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>尹正傑</title>
 6 </head>
 7 <body>
 8     <label for="user">用戶名</label> <input id="user" type="text"> <!--這個input標籤和label標籤就創建關聯關係了，只要用戶點擊label的文字就會將光標投入到input標籤裏面喲。須要注意的是要給label標籤設置for屬性的值等於input標籤id的值方能生效。-->
 9     <fieldset> <!--建立一個框，把內容都輸入到該框內-->
10         <legend>登陸</legend> <!--在該框的最外側（左上）的提示符-->
11         <p>Q Q 帳號：</p>  <!--定義一行的內容-->
12         <p>用戶密碼：</p>
13     </fieldset>
14     <a href="http://www.xiaohuar.com"> <!--因爲img標籤只是加載圖片的，沒法實現跳轉，所以咱們能夠在外面給他添加一個a標籤來實行點擊圖片就跳轉到指定的網站！-->
15           <img src="尹正傑.jpg" alt="該圖片加載失敗，你咬我啊！" title="我是尹正傑"> <!--用img標籤來定義打印一張圖片在網頁上，src表示文件的url(能夠是絕對路徑，也能夠是相對路徑)，
16     alt表示當圖片不存在或是加載失敗時會提示給用戶的報錯信息，而title表示當你把鼠標移動到圖片上時，會有提示信息，就是title的內容！-->
17     </a>
18 
19 
20     <from action="url" method="GET" enctype="multipart/form-data">  <!--接受from傳來的數據，用action指定將參數傳給誰（能夠是一個URL地址），用method指定以哪一種形式傳參數，這裏是以GET形式傳參數，還能夠用POST方法；
21 【GET傳參會將傳來的值放在URL上發送，而POST傳參會將傳來的值放在請求體上發送，不會被用戶在URL直接看到，可是這2種傳參方式都不安全，post咱們能夠用自帶的瀏覽器查看數據】一個html能夠有多個from用來接收用戶輸入的值.用enctype="multipart/form-data"屬性使得用戶經過瀏覽器上傳文件才能成功。-->
22         <div>
23             <span>用戶名：</span>
24             <input type="text" name="username" value="yinzhengjie"/>   <!--定義一個輸入框，類型指定爲文本類型（普通文本框），表示輸入的字符串是明文顯示給用戶，用name定義一個變量username存放着用戶輸入的用戶名;
25 用value來定義name的默認值。-->
26             <input type="email" name="em">  <!--定義郵箱格式的文本框，用於檢測是否有@符號，通常適用於高版本瀏覽器，建議不要輕易使用，若是要驗證能夠用js來寫，這樣兼容性會比它自帶的要好。-->
27             <input type="text" name="sex" placeholder="請輸入內容"> <!--表示會在輸入框用淺色提示用戶輸入信息,可是placeholder也是高版本瀏覽器支持，低版本就夠嗆了，建議用js本身寫。-->
28         </div>
29         <div>
30             <span>密碼：</span>
31             <input type="password" name="pwd"/> <!--定義一個密碼格式的文本框，類型指定爲密文（密碼格式文本框），表示輸入的字符串是，密文顯示給用戶，用name定義一個變量pwd存放着用戶輸入的密碼。-->
32 
33          <div>  <!--同一個div標籤能夠佔一整行，定義一個單選框,須要用到關鍵字「radio」-->
34              <input type="radio" name="yinzhengjie" value="1" checked>男 <!--type="radio"定義出一個可選的按鈕,若是在同一個div標籤的兩個值要二選一的話，能夠定義其name的值相等，這樣的話就只能從中選出一個啦！checked表示默認選擇的類型，因此這裏若是你本身不選的話系統會默認選擇你是男。-->
35              <input type="radio" name="yinzhengjie" value="0">女  <!--要注意的是提交按鈕是，發送這個標籤的不是發送的"男"或者"女",而是value的值.也就是說你選擇的是男就會把value的值（即：「1」）發送給後端，反之亦然。-->
36 
37              <div>   <!--定義一個複選框，即多選框，須要用到關鍵字「checkbox」-->
38                 <input type="checkbox" name="habby" value="100"  />男
39                 <input type="checkbox" name="habby" value="200" />女
40                 <input type="checkbox" name="habby" value="300" />男女通吃
41             </div>
42 
43 
44              <div> <!--須要from有enctype="multipart/form-data"屬性才能把文件成功提交。-->
45                  <input type="file"  name="data" >
46                  <textarea name="memo">我是默認值</textarea> <!--定義一個表格能夠多行輸入，默認值都在2兩個標籤之間-->
47              </div>
48 
49 
50          </div>
51             <input type="submit" value="Submit提交" />  <!--"submit"用於定義提交內容的按鈕-->
52             <input type="button" value="Button提交" onclick="alert(123);" />  <!--"button"默認是什麼功能都沒有,用onclick="alert(123);"來定義當用戶輸入了123就會出現一個小的對話框，更多功能得用js來開發。咱們提交數據用"submit"便可。-->
53             <input type="reset" value="重置"> <!--表示清空用戶的選擇，恢復默認狀態-->
54 
55 
56         </div>
57 
58         <dir>
59             <select name="city"> <!--定義一個下拉框-->
60                 <option value="bj" selected="selected">北京</option>  <!--用selected="selected"定義默認北京北選中了，最終傳至也不是傳的「北京」字符串而是value所對應的值，即「bj」。-->
61                 <option value="sh">上海</option>
62                 <option value="sz">深圳</option>
63             </select>
64 
65             <select name="city2" multiple> <!--定義多個下拉框，咱們能夠用關鍵字multiple屬性來定義能夠多選。-->
66                 <option value="bj" selected="selected">朝陽</option> <!--定義默認北京和上海被選中，由於他們都有selected="selected"-->
67                 <option value="sh" selected="selected">海淀</option>
68                 <option value="sz">亦莊</option>
69             </select>
70         </dir>
71 
72 
73         </from>
74 </body>
75 </html>


　關於HTML的更多符號學習網址：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。