前端之html

時間 2019-11-13

標籤前端 html 欄目 HTML 简体版

原文原文鏈接

前端之HTML

web服務的本質：

瀏覽器發送請求———>HTTP協議———>服務器端接受請求————>服務端返回響應———>服務端把HTML文件內容發送給瀏覽器———>瀏覽器渲染頁面html

什麼是HTML:

超文本標記語言（Hypertext Markup Language， HTML）是一種用於建立網頁的標記語言前端

HTML 是一種標記語言，不是一種編程語言web

HTML是使用標籤來描述網頁的編程

HTML文檔結構：

<!--
1.<!DOCTYPE html>聲明爲HTML5文檔
2.<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
3.<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
4.<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
5.<body>、</body>之間的文本是可見的網頁主體內容。
注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。
6.<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。

7.<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。
-->

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

</body>
</html>

HTML標籤格式：

1.HTML標籤是由尖括號包圍的關鍵字，如, json

等
2.HTML標籤一般是成對出現的，好比：

和

，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
3.也有一部分標籤是單獨呈現的，好比：
、

、

等。
4.標籤裏面能夠有若干屬性，也能夠不帶屬性。

HTML標籤的幾個重要屬性：

id：定義標籤的惟一ID，HTML文檔樹中惟一
class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規定元素的行內樣式（CSS樣式）後端

head內經常使用標籤

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

meta標籤

元素可提供有關頁面的源信息，針對搜索引擎和更新頻度的描述和關鍵詞瀏覽器

標籤位於文件的頭部，不包括任何內容安全

提供的信息是用戶不可見的服務器

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能網絡

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

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

<!--指定文檔的編碼類型(須要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒後跳轉到對應的網址，注意引號(瞭解)-->
<meta http-equiv="refresh" content="2;URL=https://www.taobao.com">
<!--告訴IE以最高級模式渲染文檔(瞭解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge"
                                                    
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各種服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！">
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">

body 內標籤

基本標籤

1. <!--h1~h6: 標題標籤-->
<h1>我是h1,一級標題</h1>
<h2>我是h2，二級標題</h2>
<P>段落標籤</P>

3.<s>199</s><!--中劃線，刪除線-->
4 <u>下劃線</u>
5 <B>加粗</B>
6 <i>斜體</i>
7 <br> <!--換行-->
8 <hr> <!--水平分隔線-->

特殊符號

展現 ：1 <a
 &lt; 小於號：        1 &lt; a 
 &gt; 大於號：        2 &gt; b
 &yen 人民幣符號
 &copy
 &reg
 &nbsp  空格
 &amp;  &符號

標籤分類1:

雙標籤： h1~h6

自閉合標籤 : img br hr

標籤分類2：塊級標籤和行內標籤

塊級標籤：獨佔一行，塊級標籤能夠嵌套（div嵌套）塊級標籤和行內標籤

注： p標籤雖然是塊級標籤可是不能嵌套任意的塊級標籤

塊級標籤可以設置長寬

行內標籤：自身內容有多大就佔多少

行內標籤不能設置長寬

URL: 統一資源定位符

URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。

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

經常使用標籤

div標籤和 span 標籤和 imag標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。

塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

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

<!--img 標籤： 
scr 圖片路徑： 能夠是本地也能夠是網絡
alt 當圖片加載失敗以後自動展現的提示信息
title 鼠標懸停在圖片上的時候顯示的內容
width 調節寬度
-->
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

<div>
    div標籤（屬於塊級標籤） 
</div>
<span>span標籤（行內標籤）</span>
<!--
a標籤 ： 鏈接標籤
    能夠經過 href 跳轉到指定的網址
    錨點功能： 回到頂部
    全部的html標籤默認都應該有一個id屬性，用來惟一標識當前標籤的 爲後續的DOM操做提供基礎
    也就意味着同一份html文件中標籤的id不能重複
    ps： target 屬性用來控制是都在當前頁面跳轉
            默認是 _self
            _blank 打開新的頁面
-->
<a href="http://www.baidu,com" target="_self">clieck me</a>  
<a href="http://www.baidu,com" target="_blank">clieck me</a>
<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=7ba00c935466d0166a14967af642bf62/8326cffc1e178a82fb7af0fef003738da977e82e.jpg">
<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=7ba00c935466d0166a14967af642bf62/8326cffc1e178a82fb7af0fef003738da977e82e.jpg">

a標籤：超連接標籤

所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

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

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

target：

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

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

列表標籤

<!--無序列表：u1 標籤的type屬性： disc -- 實心圓點，circle -- 空心圓圈， square -- 實心方塊 ，none -- 無樣式-->
<ul type="disc">
    <li>json</li>
    <li>egon</li>
    <li>kevin</li>
    <li>qzk</li>
    <li>qby</li>
    <li>zdc</li>
</ul>
<!--有序列表: type 屬性： 1數字列表，默認值  A大寫字母 a小寫字母 I大寫羅馬 i小寫羅馬-->
<ol type="I">
    <li>json</li>
    <li>egon</li>
    <li>kevin</li>
    <li>qzk</li>
    <li>qby</li>
    <li>zdc</li>
    
</ol>
<!--標題列表-->
    <dl>
         <dt>標題1</dt>
        <dd>內容2</dd>
        <dt>標題2</dt>
        <dd>內容2</dd>
    </dl>

表格標籤

tr ：一個tr表示一行

border：調整列表邊框

cellspacing：調整單元格與外邊框之間的距離

cellpadding : 調整文本與單元格之間的距離

rowspan：垂直方向合併

colspan：水平方向合併單元格

<table border='5'，cellspacing="20",cellpadding="10">
    <thead>
        <tr>
            <!--一個tr表示一行-->
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jason</td>
            <td>18</td>
            <td rowspan=2>睡覺</td> <!--豎直方向合併單元格-->
        </tr>
            <tr>
            <td>qzk</td>
            <td>18</td>
        </tr>
            <tr>
            <td>qby</td>
            <td>18</td>
            <td>睡覺</td>
        </tr>
    </tbody>
</table>

form表單（******）

功能：

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

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

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

form 表單中，只有「input」的「type」類型爲「submit」纔會觸發提交信息的動做

若是不想經過input標籤提交數據，能夠直接協程button按鈕

表單屬性

屬性	描述
accept-charset	規定在被提交的表單中使用的字符集（默認：頁面字符集）
action	規定向何處提交表單的地址（URL）（提交頁面）
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）
enctype	規定被提交數據的編碼（默認：URL-encoded）
method	規定在提交表單時全部的HTTP方法（默認：GET）
name	規定識別表單的名字（對於DOM使用：document.forms.name）
novalidate	規定瀏覽器不驗證表單
target	規定action屬性中地址的目標

input 標籤

經過控制type類型從而實現不一樣的獲取用戶輸入的標籤的樣式

type	表現形式	對應代碼
text	單行輸入文本
password	密碼輸入框
date	日期輸入框
checkbox	複選框
radio	單元框
submit	提交按鈕
reset	重置按鈕
button	普通按鈕
hidden	隱藏輸入框
file	文本選擇框

input標籤的屬性說明

屬性名	做用
name	表單提交的時候的「鍵」，注意和id的區別
value	表單提交時對應項的值
checked	radio 和 checkbox 默認被選中的項
readonly	text和password 設置爲只讀
disabled	全部input均適用

注意： value中：

type="button","reset","submit",爲按鈕上顯示的文本內容
type="text","password","hidden"時，爲輸入框的初始值
type="checkbox","radio","file",爲輸入相關聯的值

select標籤

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

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
 name：名稱，rows：行數，cols：列數，disabled：禁用
</textarea>

<form action="">
    <!--  input 是行內標籤
    checked = "checked"

    -->
    <p>
       username<input type="text"> 
    </p>
     <p>
       password<input type="password"> 
    </p>
    
    <p>
        birth<input type='datatime'>
    </p>
     <p>
        性別：
         男<input type="radio",name='gender'> 
         女<input type="radio",name='gender',checked> 
         男<input type="radio",name='gender'> 
    </p>
    <p>hobby:
        <input type="checkbox">籃球
        <input type="checkbox">足球
    </p>
    <P>province:
        <select name="" id="">
            <option value="">上海</option>
        </select>
    <P>province2:
        <select name="" id="">
            <opgroup value="">上海</option>
                <option value="">浦東新區</option>
                <option value="">徐匯新區</option>
        </select> 
    </P>
        <P>info:
         <textarea name="" id="" clos="30" row="20">
         
         </textarea>
         
        </P>
    <p>
        提交<input type="submit" vaule="註冊">
        <input type="button" value="普通按鈕">
        <input type="reset" value="重置">
        <button>
            button按鈕
        </button>
    </p>
</form>