前端第一篇---前端基礎之HTML內容

時間  2019-11-13
標籤 前端 一篇 基礎 html 內容 欄目 HTML 简体版
原文   原文鏈接

前端基礎之HTML內容

閱讀目錄(Content)

1、HTML初識

1.web服務本質

import socket

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

while 1:
    conn,addr = sk.accept()
    conn.recv(1024)
    conn.send(b"http/1.1 200 OK\r\n\r\n")  要有這句話
    conn.send(b"<h1>hello<h1>")

    conn.close()

2.HTML是什麼

  • 超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則
  • 瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）
  • 靜態網頁文件擴展名：.html 或 .htm

3.HTML不是什麼

HTML不是一種編程語言，而是一種標記語言（mark language）css

HTML使用標記標籤來描述網頁html

2、HTML文檔結構

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

</body>
</html>

<!DOCTYPE html>聲明爲HTML5文檔。
<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
<body>、</body>之間的文本是可見的網頁主體內容。

　注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。　前端

3、HTML標籤格式

  • HTML標籤是由尖括號包圍的關鍵字，如<html>, <div>等
  • HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
  • 也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg" />等。
  • 標籤裏面能夠有若干屬性，也能夠不帶屬性。

標籤的語法：web

  • <標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」……>內容部分</標籤名>
  • <標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」…… />

幾個很重要的屬性：django

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

4、HTML註釋

<!--註釋內容-->

一個好的代碼註釋必不可少編程

5、HTML經常使用標籤

1.<!DOCTYPE> 標籤

<!DOCTYPE>聲明必須是HTML文檔的第一行，位於<HTML>標籤以前
<!DOCTYPE>聲明不是HTML標籤；他是指示web瀏覽器關於頁面使用哪一個HTML版本進行編寫的指令。

2.head經常使用標籤　

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

 

 

 

 

 

2.1 Meta標籤

Meta標籤介紹：瀏覽器

  • <Meta>元素可提供有關網頁的原信息（mata-information），針對搜索引擎和更新頻度的描述和關鍵詞　　
  • <Meta>標籤位於文檔的頭部，不包含任何內容
  • <Meta>提供的信息是用戶不可見的

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

2.1.1http-equiv屬性

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

<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.1.2name屬性

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

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

3.body內經常使用的標籤

3.1基本標籤　　

<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>

　3.2特殊字符　

 

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

 

3.3 div標籤和span標籤

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

span標籤是用來定義內聯（行內）元素，並沒有實際意義。主要是經過css樣式爲其賦予不一樣的表現。

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

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

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

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

p標籤不能包含塊級標籤。

http://www.cnblogs.com/a438842265/p/8509747.html

3.4 img標籤

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

3.5 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
各部分之間用「/」符號隔開。
URL 
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>

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

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

 

target：

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

提示：若是沒有使用 href 屬性，則不能使用 hreflang, media, ping, rel, target 以及 type 屬性。
提示：一般在當前瀏覽器窗口中顯示被連接頁面，除非規定了其餘 target。
提示：請使用 CSS 來改變連接的樣式。

3.6 列表

3.6.1.無序列表

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

　

type屬性：

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

3.6.2.有序列表

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

type屬性：

  • 1 數字列表，默認值
  • A 大寫字母
  • a 小寫字母
  • Ⅰ大寫羅馬
  • ⅰ小寫羅馬　

3.6.3.標題列表

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

3.7 表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：

<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: 單元格橫跨多少列（即合併單元格）

4.form

　功能：

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

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

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

表單屬性

表單元素


基本概念：

HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。

表單通常用於收集用戶的輸入信息

訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。 
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]
Django接收上傳文件代碼

5.input

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

屬性說明:

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

6.select標籤

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

　

屬性說明：

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

　

7.label標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。
說明：

    1. label 元素不會向用戶呈現任何特殊效果。
    2. <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同
<form action="">
  <label for="username">用戶名</label>
  <input type="text" id="username" name="username">
</form>

8.textarea多行文本

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

屬性說明：

  • name：名稱
  • rows：行數
  • cols：列數
  • disabled：禁用
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程