前端之html

時間 2020-07-07

標籤前端 html 欄目 HTML 简体版

原文原文鏈接

前端之html

本節內容

前端概述
html結構
標籤探祕
<!DOCTYPE html>標籤
head標籤
body標籤

1.前端概述

一個web服務的組成分爲前端和後端部分，前端部分負責和用戶實現交互等操做，用戶能看到的東西都是前端實現的效果，前端具體包括html,css和javascript，其中html造成一個web展現的骨架，css是爲了給這個骨架填充血肉，使其更加豐滿。javascript主要是讓網站可以動起來，和人進行各類交互，都須要js來完成。javascript

這篇博客就是用來踏入前端的第一個部分，html的介紹。css

下面這段代碼其實已經實現了一個很簡單的web應用。其中<h1>Hello,World</h1>就屬於html裏面的一部分。html

import socket

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8089))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        buf = connection.recv(1024)

        connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))

        connection.sendall(bytes("<h1>Hello,World</h1>","utf8"))

        connection.close()

if __name__ == '__main__':

    main()

2.html結構

htyper text markup language 即超文本標記語言前端

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。java

標記語言: 標記（標籤）構成的語言.python

網頁==HTML文檔，由瀏覽器解析，用來展現的web

靜態網頁：靜態的資源，如xxx.html編程

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的後端

html文檔樹形結構圖：瀏覽器

3.標籤探祕

標籤訂義

是由一對尖括號包裹的單詞構成例如: <html> *全部標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

標籤的屬性

一般是以鍵值對形式出現的. 例如 name="alex"
屬性只能出如今開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

4.<!DOCTYPE html>標籤

因爲歷史的緣由，各個瀏覽器在對頁面的渲染上存在差別，甚至同一瀏覽器在不一樣版本中，對頁面的渲染也不一樣。在W3C標準出臺之前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差別(Quirks mode或者稱爲Compatibility Mode)；因爲W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict mode也有叫作Standarsmode)，這就是兩者最簡單的區別。

W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，不少頁面都是根據舊的渲染方法編寫的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使之前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,

這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。

若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的做用。

5.head標籤

注意：X-UA-Compatible

每一個主要版本IE新增的功能都是爲了讓瀏覽器更容易使用、增長安全性及更支持業界標準。以這些做爲IE的特點，其中一個風險就是舊版本網站沒法正確的顯示。

爲了將這個風險降到最低，IE6容許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"爲預設，這會使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱爲"strict mode")特色是支持業界標準最爲完善。然而要利用這個加強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏覽器沒法辨識，IE6會將它以IE6 standards mode顯示。由於少數網站已經包含<!DOCTYPE>指令，兼容性模式的切換至關成功。這使網頁開發人員能選擇將他們的網頁轉移爲standards mode的最佳時機。

隨著時間通過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來講，IE6 不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE作特定的對應。

當 IE7增長了對全域選擇器的支持，那些依賴IE6特色的網站便沒法偵測出這個新版本的瀏覽器。所以那些針對IE的特定對應沒法應用於IE7，形成這些網站便沒法如他們預期的顯示。因爲<!DOCTYPE>只支持兩種兼容性模式，受到影響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比以前的任何版本瀏覽器都更支持業界標準，所以針對舊版本瀏覽器設計的網頁可能沒法如預期般呈現。爲了幫助減輕全部問題，IE8引入文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增長了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁沒法在 ie8正確的顯示，你能夠更新你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特色的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確定如何顯示該網頁。若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。

非meta標籤

<title>title</title>  # title標籤標明網站的title
<link rel="icon" href="http://www.jd.com/favicon.ico">  # icon標明title前面的圖標
<link rel="stylesheet" href="css.css">  # 指定css文件的路徑，導入css文件
<script src="hello.js"></script>　  # 導入js文件

body標籤

1.基本標籤（塊級標籤和內聯標籤）

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.   # 塊級標籤
<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.  # 塊級標籤
<b> <strong>: 加粗標籤.  # 內聯標籤
<strike>: 爲文字加上一條中線.  # 內聯標籤
<em>: 文字變成斜體.  # 內聯標籤
<sup>和<sub>: 上角標 和 下角標.  # 內聯標籤（用來表示指數或者其餘數學特殊符號）
<br>:換行. 
<hr>:水平線  # 塊級標籤
<div>  # 塊級標籤，沒有任何屬性，使用最多
<span>  # 內聯標籤，沒有任何屬性

塊級標籤：<p><h1><table><ol><ul><li><form><div>
內聯標籤：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特色

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

inline元素的特色

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

對行內元素，須要注意以下

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

特殊字符

&lt; &gt；&quot；&copy;&reg;

2.圖形標籤:

src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

3.超連接標籤(錨標籤)<a>

href:要鏈接的資源路徑格式以下: href="http://www.baidu.com"
target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.
name: 定義一個頁面的書籤.
用於跳轉 href : #id.（錨）

4.列表標籤

<ul>: 無序列表
<ol>: 有序列表
         <li>:列表中的每一項.
<dl>  定義列表
         <dt> 列表標題
         <dd> 列表項

5.表格標籤: <table>

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
<tr>: table row
         <th>: table head cell
         <td>: table data cell
rowspan:  單元格豎跨多少行
colspan:  單元格橫跨多少列（即合併單元格）
<th>: table header <tbody>(不經常使用): 爲表格進行分區.

6.表單標籤<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"   

 name:表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的
 value:表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：
    type="button", "reset", "submit" - 定義按鈕上的顯示的文本
    type="text", "password", "hidden" - 定義輸入字段的初始值
    type="checkbox", "radio", "image" - 定義與輸入相關聯的值

 checked:  radio 和 checkbox 默認被選中
 readonly: 只讀. text 和 password
 disabled: 對所用input都好使.

<select> 下拉選標籤屬性

name:表單提交項的鍵.
size：選項個數
multiple：multiple 
    <option> 下拉選中的每一項 屬性：
        value:表單提交項的值.   selected: selected下拉選默認被選中
        <optgroup>爲每一項加上分組

<textarea> 文本域

name:    表單提交項的鍵.
cols:    文本域默認有多少列
rows:    文本域默認有多少行

<label>綁定input框和前面的提示文字

label標籤中的for和input標籤中的id的值要一致以實現綁定效果

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>標籤

將一些input輸入框放到一塊兒當作一個組。

<fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    體重：<input type="text" />
</fieldset>

相關標籤/搜索

每日一句

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