Web學習之html

時間 2019-12-16

標籤 web 學習 html 欄目 HTML 简体版

原文原文鏈接

　　超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。HTML是一種基礎技術，常與CSS、JavaScript一塊兒被衆多網站用於設計使人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。網頁瀏覽器能夠讀取HTML文件，並將其渲染成可視化網頁。javascript

　　HTML是最基礎的網頁語言，html都是由標籤組成。多數標籤都是有開始標籤和結束標籤，其中有個別標籤由於只有單一功能，或者沒有要修飾的內容能夠在標籤內結束。想要對被標籤修飾的內容進行更豐富的操做，就用到了標籤中的屬性，經過對屬性值的改變，增長了更多的效果選擇。屬性與屬性值之間用「=」鏈接，屬性值能夠用雙引號或單引號或者不用引號，通常都會用雙引號，具體規範按照公司書寫規範。注意：標籤是支持嵌套的。css

html基本格式以下：html

 1 <html>
 2     <head>
 3         放置一些屬性信息，輔助信息。
 4         引入一些外部的文件。（css，javascript）
 5         它裏面的內容會先加載。
 6     </head>
 7     <body>
 8         存放真正的數據。
 9     </body>
10 </html>

排版標籤java

<br/> 換行
<p></p> 段落標籤在開始和結束的位置上會留一個空行，屬性align:對齊方式，可選項爲left right center justify。
<hr/> 一條水平線，屬性width:寬度，可選項爲npx，或者是百分比(50%)；屬性align:對齊方式，可選項爲left right center；屬性size，水平線高度，單位爲px。
<div> 聲明一塊區域，瀏覽器一般會在 div 元素先後放置一個換行符。
<span> 聲明一塊區域，瀏覽器一般不會再span元素後放置一個換行符。

字體標籤瀏覽器

<font> 文本內容屬性size:字體大小，可選項1-7(7字體最大，1最小)；還有屬性color和face，可是font已不建議使用。
<h1>...</h1>~<h6>...</h6> 標題標籤 h1標題最大，h6標題最小。
<b> 粗體
<i> 斜體

列表標籤安全

<dl> 列表標籤 dl標籤下有dt和dd標籤，dt標籤是上層項目，dd標籤是下層項目。特色是自動對齊，自動縮進。

1 <dl>
2    <dt>計算機</dt>
3    <dd>用來計算的儀器 ... ...</dd>
4    <dt>顯示器</dt>
5    <dd>以視覺方式顯示信息的裝置 ... ...</dd>
6 </dl>

顯示效果如圖：服務器

<ol> 有序列表屬性start:從第幾個開始；屬性type:列表前序標號，可選值爲1 A a I i。

 1 <ol>
 2   <li>咖啡</li>
 3   <li>牛奶</li>
 4   <li>茶</li>
 5 </ol>
 6 
 7 <ol start="50">
 8   <li>咖啡</li>
 9   <li>牛奶</li>
10   <li>茶</li>
11 </ol>

顯示效果如圖：post

<ul> 無序列表 ul標籤下有li標籤。

1 <ul>
2   <li>咖啡</li>
3   <li>茶</li>
4   <li>牛奶</li>
5 </ul>

顯示效果如圖：字體

圖片標籤大數據

<img> 圖片標籤屬性src:圖片路徑；width:圖片寬度，單位px；height:圖片高度；alt:圖片說明文字，當瀏覽器下載圖片失敗時顯示的文字信息。

超連接標籤

<a> 超連接屬性href:資源路徑，必須指定，若是href不指定，默認是file文件協議。若是href中指定的協議，瀏覽器不能解析，就會調用相應的應用程序，能夠解析的程序就能夠打開。

表格標籤

<table> 表格標籤屬性border:表格邊框的寬度；屬性width:表格的寬度；cellpadding:單元邊沿與其內容之間的空白。table標籤下有th、tr和td標籤，th標籤會加粗，tr表示表格中的標準單元格。
<tr> 表格中的行屬性align:對齊方式，可選值爲left right center。
<td> 表格中的標準單元格屬性align:對齊方式，可選值爲left right center；屬性colspan:規定單元格可橫跨的列數

 1 <html>
 2 <body>
 3 
 4 <table border="1" width="200px">
 5   <caption>Monthly savings</caption>
 6   <tr>
 7     <th>Month</th>
 8     <th>Savings</th>
 9   </tr>
10   <tr align="right">
11     <td align="right">January</td>
12     <td>$100</td>
13   </tr>
14   <tr>
15     <td colspan="2">January</td>
16   </tr>
17 </table>
18 
19 </body>
20 </html>

顯示效果如圖：

表單標籤

<form> 表單標籤，用於和服務器進行交互屬性action:提交的請求位置；屬性name:表單的名稱；method:提交方式(get和post)，若是method沒有寫默認是get方式提交。get和post區別：get方式表單封裝的數據直接顯示在url上。post方式數據不顯示在url上；get方式安全級別較低，post級別較高；get方式url數據長度有限制，post支持大數據。
<input> 輸入框屬性type:input元素的類型，可選項爲text(文本框)、password(密碼)、submit(提交按鈕)、reset(重置按鈕)、file(上傳文件輸入框)、button(按鈕)、image(圖片，也是提交按鈕)、hidden(隱藏標籤，用戶看不到的，開發時可能用到，能夠把數據封裝到隱藏標籤，和表單一塊兒提交到後臺)、redia(單選按鈕)、checkbox(多選按鈕)；屬性name:元素名稱；屬性value:原始顯示的值。
<select> 選擇標籤 select標籤下有option標籤，表示一個選擇項。
<textarea> 文本域用於書寫文本的區域

 1 <form action="/example/html/form_action.asp" method="post">
 2   用戶名: <input type="text" name="username"/> <br/>
 3   密&nbsp;碼: <input type="password" name="password"/> <br/>
 4   上&nbsp;傳: <input type="file" name="upload_file"/> <br/>
 5   圖&nbsp;片: <input type="image" src="pic.jpg" width="40px" height="20px"/> <br/>
 6   單&nbsp;選: <input type="radio" name="sex" checked="checked" value="man"/>男<input type="radio" name="sex" value="women"/>女 <br/>
 7   多&nbsp;選: <input type="checkbox" name="sex2" checked="checked" value="man"/>男<input type="checkbox" name="sex2" value="women"/>女 <br/>
 8   城&nbsp;市: <select name="city">
 9                 <option value="null">--請選擇--</option>
10                 <option value="beijing">北京</option>
11                 <option value="shanghai">上海</option>
12                 <option value="hangzhou">杭州</option>
13             </select> <br/>
14   留言板: <textarea>
15         </textarea> <br/>
16   <input type="submit" value="提交" /> <input type="reset" />