html介紹
目錄css
1 HTML介紹
1.1 web服務的本質
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
conn,addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
conn.send(b'<h1>Hellow world!</h1>')
conn.close()
過程：瀏覽器發出請求——>HTTP協議——>服務端接收請求——>服務端返回響應——>服務端把HTML 文件內容發送給瀏覽器——>瀏覽器進而渲染頁面。html
1.2 HTML是什麼？
- 超文本標記語言(Hypertext Markup Language,HTML)是一種用於建立網頁的標記語言。
- 本質上是瀏覽器可識別的規則，咱們在寫頁面的時候要遵循html的規則，瀏覽器就會根據規則來渲染咱們的頁面，對於不一樣的瀏覽器來講可能對於同一個標籤有不一樣的解釋，這個是兼容性的問題。
- 網頁文件的擴展名：name.html 或者 name.htm
1.3 HTML 不是什麼？
HTML 是一種標記語言（markup language）,他不是一種編程語言。python
html使用標籤來描述網頁。web
1.4 html文檔結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>標題欄</title>
</head>
<body>
</body>
</html>
- ==<!DOCTYPE html>==（聲明爲HTML5文檔）告訴瀏覽器應該用什麼版本的html解析。
- ====是文檔的開始標記和結束標記的標記。是html頁面的跟元素，在他們之間的是文檔的頭部（head）和主體（body)。在其中間的標籤如==lang = "en"==表示是那個國家的語言。==lang="zh"==表示中文。en表示英文。
- == ==表示編碼格式是utf8,必需要聲明，不然會出現亂碼，另外還有GBK編碼格式等。
- ==
==定義了網頁的標題，在瀏覽器標題欄上顯示。 - ====在其中的文本是可見的網頁主體內容。
1.5 HTML標籤的格式
- HTML標籤是由尖括號包圍的關鍵字，如,
等。
- HTML標籤一般是成對出現，好比是
和，第一個標籤是開始，第二個標籤是結束。通常結束標籤都會有一個/斜線。
- 也有一部分是單獨出現的標籤好比：
、
等。 - 標籤裏面能夠有若干屬性，也能夠不帶屬性。
標籤的語法django
- <標籤名 屬性1="「屬性值1」" 屬性2="「屬性值2」"> 填充內容
- <標籤名 屬性1="「屬性值1」" 屬性2="「屬性值2」/">
重要的屬性編程
- id：定義標籤的惟一ID,HTML文檔樹中的惟一。
- class：爲html元素定義一個或者多個類名（classname）（class樣式類名）
- style：規定元素的行內樣式(css樣式)
1.6HTML 註釋
<!--註釋內容-->
1.7 標籤<!DOCTYPE>
- <!DOCTYPE>聲明必須是HTML文檔的第一行，位於標籤最前面。
- <!DOCTYPE>聲明不是HTML標籤，它是指示web瀏覽器關於頁面使用那個HTML版本進行編輯的指令。
2 HTML經常使用標籤
2.1head內經常使用的標籤
| 標籤 | 含義 |
|---|---|
| 定義網頁的標題 | |
| 定義內部的樣式表（css） | |
| 定義JS代碼或者引入外部的JS文件 | |
| 引入外部樣式表文件或者網站圖標 | |
| 定義網頁原信息 |
link的用法瀏覽器
<head>
<link rel="stylesheet" type="text/css" href="a.css"/>
</head>
script的用法服務器
<!--方法一-->
<script src="a.js"></script>
<!--方法二-->
<script>
alert("窩窩頭，一塊錢4個，嘿嘿")<!--頁面提醒 alert-->
</script>
meta標籤介紹網絡
- == ==元素可提供有關頁面的原信息(meta-information),針對搜索引擎和更新頻度的描述和關鍵詞。
- == ==標籤位於文檔的頭部，不包含任何信息。
- == ==提供的信息用戶是看不見的。
meta標籤的組成：meta標籤一共有倆個屬性，他們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網絡功能。socket
http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，能夠幫助正確的顯示頁面的內容，與之相對應的屬性值爲content ，content中的內容其實就是各個參數的變量值。
<!-- 指定文檔的編碼類型--> <meta http-equiv="content-type" charset="UTF-8"> <!-- 2秒後跳轉到對應的網址--> <meta http-equiv="refresh" content="2,URL=https://www.cnblogs.com/SkyOceanchen/"> <!-- 告訴IE瀏覽器用最高級模式進行渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge">name屬性：主要用於描述網頁，與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta用法,meta屬性,meta跳轉"><meta name="description" content="豆瓣醬瓣豆">
2.2特殊字符
| 內容 | 對應代碼 |
|---|---|
| 空格 |  ； |
| > | >； |
| < | <； |
| & | &； |
| ¥ | ¥； |
| 版權© | ©； |
| 註冊® | ®； |
2.3 body內經常使用的標籤
基本標籤
<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>
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 https://www.cnblogs.com/SkyOceanchen/ url的組成： 第一部分：爲協議：http://、ftp:\\等 第二部分：爲站點地址：能夠是域名或IP地址 第三部分：爲頁面在站點中的目錄：stu 第四部分：爲頁面名稱，如intro.html 各個部分之間用"/"符號隔開。 <a href="https://www.cnblogs.com/SkyOceanchen/" target="_blank">點擊</a>
href屬性指定目標網址。該地址可能有幾種類型：
- 絕對URL — 指向另一個站點（好比 href = "http://www/jd.com"）
- 相對URL—指當前站點中確切的路徑（href="index.htm"）
錨點URL—指向頁面中的錨 （href="#top"）,通常是定義的id
target:
- _blank表示在新標籤中打開目標網址
_self表示在當前網頁中打開目標網頁
2.4列表
無序列表
<ul type = "disc"> <li>愛你呦</li> <li>窩窩頭</li> </ul>type屬性
- disc(實心圓、默認值)
- circle(空心圓圈)
- square(實心方塊)
- none(沒有樣式)
有序列表
<ol type="1" start="2"> <li>摸摸噠</li> <li>嘿嘿</li> </ol>type屬性：
- 1 數字列表、默認
- A大寫字母
- a小寫字母
- I大寫的羅馬
- i小寫的羅馬
標題列表
<dl> 定義列表（definition list） <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dt>內容2</dt> </dl>- 標題1
- 內容1
- 標題2
- 內容2
2.5表格
-
表格是一個二維數據空間，一個表格由若干行組成，一個又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其餘的表格等內容。
表格裏面最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式(即按行和列組織)的數據。
表格的結構：
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>chen</td>
<td>拉呱</td>
</tr>
<tr>
<td>2</td>
<td>sky</td>
<td>長大</td>
</tr>
</tbody>
</table>
| 屬性 | 值 | 描述 |
|---|---|---|
| border | pixels | 規定表格邊框的寬度。 |
| cellpadding | pixels % |
規定單元邊沿與其內容之間的空白。 |
| cellspacing | pixels % |
規定單元格之間的空白。 |
| rowspan | pixels | 單元格豎跨多少行 |
| colspan | pixels | 單元格橫跨多少行（即合併單元行） |
| width | % pixels |
規定表格的寬度。像素 百分比.（最好經過css來設置長寬） |
| frame | void above below hsides lhs rhs vsides box border |
規定外側邊框的哪一個部分是可見的。 |
| rules | none groups rows cols all |
規定內側邊框的哪一個部分是可見的。 |
| summary | text | 規定表格的摘要。 |
| align | left center right |
不同意使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。 |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
不同意使用。請使用樣式代替。規定表格的背景顏色。 |
3 表單
功能
基本概念：
HTML 表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息。
表單工做原理：
訪問者在瀏覽器中有表單的網頁的時候，可填寫必需的信息，而後按某一個按鈕進行提交，這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤，當數據完整而且無誤後，服務器會反饋一個輸入完成的信息。
# Django接收上傳文件代碼
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),
]
3.1 input
input—元素會根據不一樣的type屬性，變化爲多種形態
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type = "text"> |
| password | 密碼輸入框 | <input type="password"> |
| date | 日期輸入框 | <input date="date"> |
| checkbox | 複選框 | <input type="checkbox"> |
| radio | 單選框 | <input type="radio"> |
| submit | 提交按鈕 | <input type="submit" value="提交"> |
| reset | 重置按鈕 | <input type="reset" value="重置"> |
| button | 普通按鈕 | <input type="普通按鈕" > |
| file | 文本輸入框 | <input type="file"> |
| hidden | 隱藏輸入框 | <input type="hidden"> |
屬性說明：
- name:表單提交時候的「鍵」，注意和id的區別
- value:表單提交時候對應項的值
- type="button","reset","submit"的時候，爲按鈕上顯示的文本內容。
- type="text","password","hidden"的時候，爲輸入框的初始數值。
- type="check","radio","file",爲輸入相關聯的數值。
- checked:radio和checkbox默認被選中的項
- readonly：text和password設置只讀。
- disabled:全部的input都適用，禁用
3.2 select標籤
<form action="" method="">
<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:定義提交時的選項值
- action:提交的目的網頁
- method:提交的方式：get/post等
3.3label標籤
定義<label>標籤爲iput元素定義標註。
說明：
- lable元素不會向用戶呈現任何特殊效果
- lable標籤的for屬性值應當與相關原屬的id屬性值相同。
<form action="">
<lable for="username">用戶名</lable>
<input type="text" id="username" name="username">
</form>
3.4textarea多行文本
<textarea name="memo" id="medo" cols="30" rows="10" placeholder="請介紹本身"></textarea>
屬性說明：
- name：名稱
- rows：行數
- cols：列數
- disable:禁用
- placeholder : 提示輸入內容（半隱藏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form action="1011表單.html" method="post">
<div>
<label>姓名</label>
<input type="text" name="username" value="請輸入姓名">
解釋 <input type="text" name="salk" value="解釋沒法寫入" readonly="readonly">
</div>
<div>
密碼:<input type="password" name="pwd" value="">
</div>
<div>
日期：<input type="date" name="date" value="請輸入時間">
</div>
<div>
性別：<input type="radio" name="sex" value="1" checked="checked"> 男
<input type="radio" name="sex" value="0"> 女
</div>
<div>
<input type="checkbox" name="hobby" value="sing"> 唱歌
<input type="checkbox" name="hobby" value="dance" checked> 跳舞
<input type="checkbox" name="hobby" value="love" disabled> 撩妹
</div>
<p><input type="file" name="file" value="上傳文件哦"></p>
<div>
隱藏輸入框<input type="hidden" value="隱藏輸入框">
</div>
<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4" selected="selected">深圳</option>
</select>
<br>
<select name="date" multiple="multiple">
<option value="1">1996</option>
<option value="2">05</option>
<option value="3">27</option>
<option value="4">12</option>
</select>
<br>
<br>
<textarea name="memo" cols="30" rows="10" placeholder="請介紹本身"></textarea>
<div>
<input type="submit" name="submit" value="登錄">
<input type="reset" name="reset" value="重置">
<input type="button" name="button" value="普通按鍵">
</div>
</form>
</body>
</html>
標籤的總結：
塊級元素：塊級大多爲結構性標記 <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.行內元素只能行內元素，不能包含塊級元素
相關文章
- 1. HTML介紹
- 2. Html介紹——001
- 3. html介紹
- 4. HTML的介紹
- 5. HTML 介紹
- 6. HTML DOM介紹
- 7. html標籤介紹
- 8. HTML語法介紹
- 9. HTML基礎介紹
- 10. HTML簡單介紹
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • HTML 指南 - 網站建設指南
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML介紹
- 2. Html介紹——001
- 3. html介紹
- 4. HTML的介紹
- 5. HTML 介紹
- 6. HTML DOM介紹
- 7. html標籤介紹
- 8. HTML語法介紹
- 9. HTML基礎介紹
- 10. HTML簡單介紹