HTML經常使用標籤

HTML經常使用標籤

1.head內經常使用標籤

標籤	意義
<title></title>	定義網頁標題
<style></style>>	定義內部樣式
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件或網站圖標
<meta/>	定義網頁原信息

Meta標籤

Meta標籤介紹:

• <meta>元素可提供有關頁面的元信息(mata_information),針對搜索引擎和更新頻度的描述和關鍵詞.
• <meta>標籤位於文檔的頭部,不包含任何內容
• <meta>提供的信息是用戶不可見的

meta標籤的組成:meta標籤公有兩個屬性,它們分別是http_equiv屬性和name屬性,不一樣的屬性又有不一樣的參數值,值就實現了不一樣的網頁功能

1.http-equiv屬性:至關於http的文件頭做用,它能夠向瀏覽器傳回一些有用的信息,以幫助正確地顯示網頁內容,與之對應的屬性爲content,content中的內容其實就是各個參數的變量值

<!--指定文檔的編碼類型(須要知道)-->

<meta http-equiv="content-Type" charset=UTF8">

<!--2秒後跳轉到對應的網址，注意引號(瞭解)-->

<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

<!--告訴IE以最高級模式渲染文檔(瞭解)-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性:主要用於描述網頁,與之對應的屬性值爲content,contenet中的內容主要是便於搜索引擎機械人查找信息和分類信息用的.

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="python學院">

2 body內經常使用標籤

基本標籤(塊級標籤和內聯標籤)

1. <b>加粗</b>
2. <i>斜體</i>
3. <u>下劃線</u>
4. <s>刪除</s>
5. <P>段落標籤</P>
6. <h1>標題1</h1>
7. <h2>標題2</h2>
8. <h3>標題3</h3>
9. <h4>標題4</h4>
10.<h5>標題5</h5>
11.<h6>標題6</h6>
<!--換行-->
<br>
<!--水平線--><hr>

特殊字符

內容	對應代碼
空格	 
>	>
<	&lt;
&	&amp;
¥	&yen;
版權	&copy;
註冊	&reg;

div標籤和span標籤

div標籤用來定義一個塊級元素,並沒有實際意義.主要經過CSS樣式爲其賦予不一樣的表現.

span用來定義內聯(行內)元素,並沒有實際的意義.主要經過CSS樣式爲其賦予不一樣的表現.

塊級元素與行內元素的區別:

所謂塊元素,是以另外一起行開始渲染的元素,行內元素則不須要另起一行.若是單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響

這兩個元素是專門爲定義CSS樣式而生的

注意:

關於標籤嵌套:一般塊級元素能夠包含內聯元素或某些塊級元素,但內聯元素不能包含塊元素,它只能包含其它內聯元素.

p標籤不能包含塊級標籤,p標籤也不能包含p標籤

img標籤

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

a標籤

超連接標籤

什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分組成
第1部分：爲協議：http://、ftp://等 
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。

<a href="http://www.baidu.com" target="_blank">點我</a>

href屬性指定目標網頁地址.該地址能夠有幾種類型:

• 絕對URL-指向另外一個站點(好比href="htttp://www.jd.com)
• 相對URL-指向前站點中確切的路徑(href="index.htm")
• 錨URL- 指向頁面中的錨(href="#top")

target:

• _blank表示在新標籤頁中打開目標網頁
• _self表示在當前標籤頁中打開目標網頁

列表

1.無序列表

<ul type="disc">
    <li>第一項<li>
    <li>第二項<li>
<ul/>

type屬性:

• disc(實心圓點,默認值)
• circle(空心圓圈)
• square(實行方塊)
• none(無樣式)

2.有序列表

<ol type="1" start="2">
    <li>第一項</li>
    <li>第二項</li>
</ol>

type屬性:

• 1數字列表,默認值
• A大寫字母
• a小寫字母
• I大寫羅馬
• i小寫羅馬

3.標題列表

<dl>
    <dt>標題1</dt>
        <dd>內容1</dd>
    <dt>標題2</dt>
        <dd>內容1</dd>
        <dd>內容2</dd>
</dl>

表格

表格是一個二維數據空間,一個表格由若干行組成,一個行又有若干個單元格組成,單元格里能夠包含文字,列表,圖案,表單,數字符號,預置文本和其它的表格等內容.

表格最重要的目的是顯示錶格數據.表格類數據是指最適合組織爲表格格式(即按行和列組織)的數據.

表的基本結構:

<table>
　　<thead>
　　　　<tr>
　　　　　　<th>序號</th>
　　　　　　<th>姓名</th>
　　　　　　<th>愛好</th>
　　　　</tr>
　　</thead>
　　<tbody>　　　　
<tr>
　　　　　　 <td>1</td>
　　　　　   <td>Egon</td>
　　　　　　 <td>槓娘</td>
　　　　　</tr>　　　　
<tr>
　　　　　　  <td>2</td>
　　　　　　　<td>Yuan</td>
            <td>日天</td>
　　　　　　</tr>　　
　　　　</tbody>
</table>

屬性:

• border:表格邊框
• cellpadding:內邊距
• cellspacing:外邊距
• width:像素 百分比(最好經過CSS設置長寬)
• rowspan:單元格豎跨多少行
• colspan:單元格橫跨多少列(即合併單元格)

form

功能:

表單用於香服務器傳輸數據,從而實現用戶與web服務器的交互

表單可以包含input系列標籤,好比文本字段,複選框,單選框,提交按鈕等等

表單還能夠包含textarea,select,fieldset和label標籤

表單屬性:

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。若是是上傳文件須要將enctype="multipart/form-data"
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

表單元素:

基本概念:

HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。

input:

<input>元素會根據不一樣的type屬性,變化爲多種形態

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

屬性說明:

• name: 表單提交時的"鍵",注意和id的區別
• value：表單提交時對應項的值
  • type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
  • type="text","password","hidden"時，爲輸入框的初始值
  • type="checkbox", "radio", "file"，爲輸入相關聯的值
• checked: radio和checkbox默認被選中的項
• readonly: text和password設置只讀
• disabled: 全部input均適用

select標籤

<form action="" method="post">
    <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" values="2">上海</option>
        <option value="3">廣州</option>
        <option valuse="4">深圳</option>
    </select>
</form>

屬性說明:

• multiple:布爾屬性,設置爲後選,不然默認單選
• disabled:禁用
• selected:默認選中該項
• value: 定義提交時的選項值

label標籤

定義:<lable>標籤爲input元素定義標註(標記)

說明:

​ 1.label元素不會像用戶呈現任何特殊效果.

​ 2.<label>標籤的for屬性值應當與相關元素的id屬性值相同

<form action="">
　　<label for="username">用戶名</label>
　　<input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cola="30" rows="10">默認內容</textarea>

屬性說明:

• name:名稱
• rows:行數
• cols:列數
• disabled:禁用

標籤的總結：

塊級元素：塊級大多爲結構性標記

  <h1>...</h1>  標題一級

  <h2>...</h2>  標題二級

  <h3>...</h3>  標題三級

  <h4>...</h4>  標題四級

  <h5>...</h5>  標題五級

  <h6>...</h6>  標題六級

  <hr>  水平分割線

  <p>...</p>  段落

  <ul>...</ul>  無序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定義列表

  <table>...</table>  表格

  <form>...</form>  表單

  <div>...</div>

行內元素：行內大多爲描述性標記

  <span>...</span>

  <a>...</a>  連接

  <br>  換行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  圖片

  <i>...</i>  斜體

  <em>...</em>  斜體

  <del>...</del>  刪除線

  <u>...</u>  下劃線

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表

·塊級元素

  1.老是重新的一行開始

  2.高度、寬度都是可控的

  3.寬度沒有設置時，默認爲100%

  4.塊級元素中能夠包含塊級元素和行內元素

·行內元素

  1.和其餘元素都在一行

  2.高度、寬度以及內邊距都是不可控的

  3.寬高就是內容的高度，不能夠改變

  4.行內元素只能行內元素，不能包含塊級元素