HTML初識

時間 2019-11-12

標籤 html 欄目 HTML 简体版

原文原文鏈接

塊級標籤和行內標籤
    div和span標籤的特色：
        沒有自帶的樣式，方便後續使用CSS調整樣式！
    塊級標籤：
        本身獨佔一行！
        div、p、h1~h六、hr
        
        
    行內標籤（內聯標籤）：
        默認都在一行顯示！
        span、a、label、b、i、u、s
        
標籤嵌套
    1. 塊級標籤能夠包含內聯標籤
    2. p標籤不能包含p標籤和div標籤

標籤級別

1、Web服務本質 
Web的原理：
    瀏覽器地址欄輸入URL(瀏覽器發請求)
        --> 瀏覽器往服務端發消息(HTTP協議) 
            --> 服務端接收消息( 服務端接收請求)
                --> 服務端回消息（從文件中讀取數據）
                    --> 瀏覽器收到消息(按照一個約定好的規則展現出來)

import socket

sk = socket.socket()
sk.bind(('127.0.0.1', 8080))
sk.listen()


while 1:
    conn, addr = sk.accept()
    data = conn.recv(9000)
    print(data)
    # 按照HTTP協議的格式給瀏覽器回覆消息
    conn.send(b'HTTP/1.1 200 OK\r\ncontent-type: text/html; charset=utf-8\r\n\r\n')
    with open('s1.txt', 'rb') as f:
        msg = f.read()
    conn.send(msg)
    conn.close()


2、HTML初識
一、概念
HTML即超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言，它不是編程語言。
本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個標籤可能會有不一樣的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm


二、基本文檔結構
注意：HTML中把連續的空格和換行都解析成一個空格，不存在縮進的問題。

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css樣式優先級</title>
</head>
<body>

</body>
</html>


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



三、HTML註釋格式
<!--註釋內容-->


四、標籤格式
HTML標籤是由尖括號包圍的關鍵字，如<html>, <body>等
標籤一般是成對出現的，好比：<html>和</html>，第一個標籤是開始，第二個標籤是結束。注意，結束標籤的開頭應該有斜線，代表這是結束標籤。
可是也有單獨出現的標籤，好比：<br/>、<hr/>、<img/>等，須要知道的是，單獨的標籤也可不寫斜線，即<br>、<hr>也是能夠的。


標籤內還能夠設置本身的屬性：
<標籤名 屬性1=「屬性值」 屬性2=「屬性值」……>內容部分</標籤名>
<標籤名 屬性1=「屬性值」 屬性2=「屬性值」…… />

幾個通用且重要的屬性：
id：定義標籤的惟一ID，即咱們的身份證，是惟一的。
class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規定元素的行內樣式（CSS樣式）



五、HTML經常使用標籤介紹
5-1-一、head內經常使用標籤

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




5-1-二、Meta標籤
Meta標籤介紹：
<meta>元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。 

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

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu,com">

<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset="UTF8">

<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">


(2)name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,meta,meta屬性,name">  # 就是你在瀏覽器中搜索‘meta總結,meta,meta屬性,name’這些關鍵字能夠搜到這個網頁
<meta name="description" content="嘿嘿嘿嘿嘿">  # 就是搜到的網頁，還沒打開的時候，下面顯示的小字，描述信息



5-二、body內經常使用標籤
5-2-一、基本標籤
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>

<p>段落標籤</p>

<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

<br>    <!--換行-->

<hr>   <!--水平線-->


5-2-二、特殊字符

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
註冊	®

注意：特殊字符不止這幾個，這幾個只是比較常見而已，你也能夠去百度搜索：HTML特殊符號對照表 
 5-2-三、div標籤和span標籤 div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS爲其賦予不一樣的樣式。 span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS爲其賦予不一樣的樣式。 塊級元素與行內元素的區別： 所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。 這兩個元素是專門爲定義CSS樣式而生的。 注意： 關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。 p標籤比較特殊，它是塊級標籤，可是它不能包含塊級標籤，p標籤也不能包含p標籤。
div標籤也是塊級標籤，它能包含p標籤
 好比：
<p>
<p>嵌套</p>
</p>

在瀏覽器渲染的時候會自動幫第一個p補全結束標籤，爲最後一個p補全開始標籤，即上面的會變成：
<p></p>
<p>嵌套</p>
<p></p> 小結： 塊級標籤和行內標籤 div和span標籤的特色： 沒有自帶的樣式，方便後續使用CSS調整樣式！ 塊級標籤： 本身獨佔一行！ div、p、h1~h六、hr、ul、ol、li、dl 行內標籤（內聯標籤）： 默認都在一行顯示！ label、a、span、b、i、u、s 標籤嵌套 1. 塊級標籤能夠包含內聯標籤 2. p標籤不能包含p標籤和div標籤


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



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

<a href="http://www.baidu.com" target="_blank" >百度</a>

href屬性指定目標網頁地址。該地址能夠有幾種類型：
    絕對URL - 指向另外一個站點（好比 href="http://www.baidu.com）
    相對URL - 指當前站點中確切的路徑（href="index.htm"）
    錨URL - 指向頁面中的錨（href="#top"）
    
    
target：
_blank表示在新標籤頁中打開目標網頁
_self表示在當前標籤頁中打開目標網頁
    
    
    
錨的設置方法：
方法一：
1.設置一個錨點連接<a href="#mao">跳到錨點那個地方去</a>；（注意：href的屬性值最前面要加#）

2.在頁面中某個位置設置錨點<a name="mao"></a>；（注意：a標籤中要寫一個name屬性，屬性值要與1中href的屬性值同樣，不加#）標籤中按需填寫必要的文字，通常不寫內容


方法二：

1.設置一個錨點連接<a href="#mao">跳到錨點那個地方去</a>；（注意：href的屬性值最前面要加#）同方法一的1

2.設置錨點的位置  <h1 id="mao">這是H1標籤</h1>；在要跳轉到的位置的標籤中添加一個id屬性，屬性值與1中href的屬性值同樣，不加#

方法二不用單獨添加一個a標籤來專門設置錨點 ，只在須要的位置的標籤中添加一個id便可。




5-2-六、列表
1.無序列表ul，列表內的項用li標籤對
<ul type="circle">
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ul>

type屬性：
    disc（實心圓點，默認值）
    circle（空心圓圈）
    square（實心方塊）
    none（無樣式）

無序列表ul的type樣式還能夠用CSS設置：
ul {
　　list-style-type:none;  // 跟type的可用屬性同樣
}


2.有序列表ol，列表內的項用li標籤對
<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>
type屬性：
    1 數字列表，默認值
    A 大寫字母
    a 小寫字母
    Ⅰ大寫羅馬
    ⅰ小寫羅馬

start：代表從哪裏開始


3.標題列表
<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>




5-2-七、表格
表格標籤table
表格內的表頭標籤thead  ---> table head：tr表明一行，th表明一個單元格(列)，默認會加粗變黑
表格內的主體標籤tbody  ---> table body：tr表明一行，td表明一個單元格(列)

<table>

  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  
  <tbody>
  <tr>
    <td>1</td>
    <td>小明</td>
    <td>打球</td>
  </tr>
  <tr>
    <td>2</td>
    <td>小紅</td>
    <td>發豪</td>
  </tr>
  </tbody>
  
</table>


table屬性:
    border: 表格邊框.
    cellpadding: 內邊距
    cellspacing: 外邊距.
    width: 像素百分比.（最好經過css來設置長寬）
    
td(th)屬性：
    width: 像素百分比.（最好經過css來設置長寬）
    rowspan: 單元格豎跨多少行（即合併單元格，合併多少行）
    colspan: 單元格橫跨多少列（即合併單元格，合併多少列）



5-2-八、表單form
1.form功能：
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label標籤。


表單from屬性

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




2.表單內的標籤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" />

<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
    <p>
        <label for="i1">用戶名：</label>
      <input id="i1" type="text" name="username">
    </p>
    
    <p>
        <label>密碼：
            <input type="password" name="pwd">
        </label>
    </p>
    
    <p>
        郵箱：
        <input disabled type="email" name="email">
    </p>
    
    <p>出生日期：
        <input type="date" name="birthday">
    </p>
    
    <p>
        頭像：
        <input type="file" name="avatar">
    </p>
    
    <p>
        隱藏的輸入框：
        <input type="hidden">
    </p>
    
    <p>性別：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
    </p>
    
    <p>
        愛好：
        <input type="checkbox" name="hobby" value="basketball">籃球
        <input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="doublecolorball">雙色球
    </p>
    
    <input type="button" value="按鈕">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

代碼示例

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


注意事項：
    1. 表單提交時，用戶輸入的內容是以字典的形式提交給服務器的：{"name屬性的值": 用戶填寫的內容}    
        所以，用於獲取用戶輸入的標籤(text,password,textarea等)必需要設置name屬性，
        而讓用戶進行選擇的標籤(checkbox,radio等)，必需要設置name和value的屬性值。
    2. form標籤有action屬性和method屬性
        1. action：控制往哪裏提交數據
        2. method：控制用什麼方式提交
        3. 上傳文件須要額外配置enctype="multipart/form-data"
    3. form要提交數據必需要有submit按鈕        
    4.label標籤能夠關聯表單內的input和select等標籤、
        <label for="i1">用戶名：</label>
        <input id="i1" type="text" name="username">
        
        或者：
        
        <label>密碼：
            <input type="password" name="pwd">
        </label>
        



3.表單內的標籤select
<form action="" method="post">
    <label for="s1">城市</label>
    <select id="s1" name="city1">
        <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="020">廣州</option>
        <option value="0755" selected="selected">深圳</option>
    </select>
    
    <select name="city2" multiple="multiple">
            <option value="010">北京</option>
        <option value="021">上海</option>
        <option value="020">廣州</option>
        <option value="0755" selected="selected">深圳</option>
    </select>
</form>

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

4.表單內的標籤label
定義：<label> 標籤爲 input、select等元素定義標註（標記）。
說明：
    label 元素不會向用戶呈現任何特殊效果。
    <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
    
使用：
<form>
    <label for="i1">用戶名：</label>
    <input id="i1" type="text" name="username">

    或者：

    <label>密碼：
        <input type="password" name="pwd">
    </label>
</form>



5.表單內的標籤textarea
textarea：多行文本
<form>
<p>
    <label for="t">我的簡介：</label>
    <textarea id="t" name="info"  cols="30" rows="10">
        默認內容
    </textarea>
</p>
</form>


屬性說明：
    name：名稱
    rows：行數
    cols：列數
    disabled：禁用

相關標籤/搜索

每日一句

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