摘要:知識介紹服務(wù)本質(zhì)瀏覽器發(fā)請求協(xié)議服務(wù)端接收請求服務(wù)端返回響應(yīng)服務(wù)端把文件內(nèi)容發(fā)給瀏覽器瀏覽器渲染頁面是什么超文本標(biāo)記語言是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言。主要是通過樣式為其賦予不同的表現(xiàn)。這兩個元素是專門為定義樣式而生的。
Web服務(wù)本質(zhì)
瀏覽器發(fā)請求 --> HTTP協(xié)議 --> 服務(wù)端接收請求 --> 服務(wù)端返回響應(yīng) --> 服務(wù)端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁面
HTML是一種標(biāo)記語言(markup language),它不是一種編程語言。
HTML使用標(biāo)簽來描述網(wǎng)頁
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
聲明為HTML5文檔
html標(biāo)簽
head標(biāo)簽
title標(biāo)簽
body標(biāo)簽
HTML標(biāo)簽格式
標(biāo)簽的語法
幾個很重要的屬性
HTML標(biāo)簽分類
<meta charset="UTF-8" />
<html> html>
HTML標(biāo)簽關(guān)系分類
<head> head> <body> body>
<head> <meta charset="UTF-8" /> <title>百度一下,你就知道123title> head>
注釋是代碼之母。
標(biāo)簽 | 意義 |
---|---|
定義網(wǎng)頁標(biāo)題 | |
定義內(nèi)部樣式表 | |
定義JS代碼或引入外部JS文件 | |
引入外部樣式表文件 | |
定義網(wǎng)頁原信息 |
Meta標(biāo)簽介紹:
meta標(biāo)簽的組成:meta標(biāo)簽共有兩個屬性,它們分別是http-equiv屬性和name屬性,不同的屬性又有不同的參數(shù)值,這些不同的參數(shù)值就實(shí)現(xiàn)了不同網(wǎng)頁的功能。
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> <meta http-equiv="content-Type" charset=UTF8"> <meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"> <meta name="description" content="老男孩教育Python學(xué)院">
<b>加粗b> <i>斜體i> <u>下劃線u> <s>刪除s> <p>段落標(biāo)簽p> <h1>標(biāo)題1h1> <h2>標(biāo)題2h2> <h3>標(biāo)題3h3> <h4>標(biāo)題4h4> <h5>標(biāo)題5h5> <h6>標(biāo)題6h6> <br> <hr>
內(nèi)容 | 對應(yīng)代碼 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版權(quán) | © |
注冊 | ® |
div和span有什么區(qū)別?
塊級元素與行內(nèi)元素的區(qū)別
所謂塊級元素,是以另起一行開始渲染的元素,行內(nèi)元素則不需要另起一行。如果多帶帶在網(wǎng)頁中插入這兩個元素,不會對頁面產(chǎn)生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
注意:
關(guān)于標(biāo)簽嵌套:通常塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素,但內(nèi)聯(lián)元素不能包含塊級元素,它只能包含其它內(nèi)聯(lián)元素。
p標(biāo)簽不能包含塊級標(biāo)簽,p標(biāo)簽也不能包含p標(biāo)簽。
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標(biāo)懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
屬性名稱 | 作用 |
src(source) | 告訴瀏覽器需要插入 的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片 |
alt(alternate) | 規(guī)定圖像的替代文本, 只有 在src指定的路徑下找不到圖片 ,才會顯示alt指定的文本 |
title | 懸停文本(介紹這張圖片, 只有在鼠標(biāo)移動到圖片上時才會顯示) |
height | 設(shè)置圖片顯示的高度 |
width | 設(shè)置圖片顯示的寬度 |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img標(biāo)簽title>
head>
<body>
<img src="images/QRCode.jpg">
<img src="images/QRCode.jpg" width="300" height="478">
<img src="images/QRCode.jpg" width="100" height="478">
<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">
<img src="images/QRCode.jpg" width="100" title="這個是圖片">
<img src="images/QRCode1.jpg" width="100" alt="對不起, 你需要查看的圖片不見了">
body>
html>
img示例
<a href="http://www.baidu.com">百度a>
屬性名稱 | 作用 |
href(hypertext reference) | 指定跳轉(zhuǎn)的目標(biāo)地址 |
target | 告訴瀏覽器是否保留原始界面, _blank表示在新標(biāo)簽頁中打開目標(biāo)網(wǎng)頁, _self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)網(wǎng)頁 |
title | 懸停文本(介紹這個鏈接, 只有在鼠標(biāo)移動到超鏈接上時才會顯示) |
a標(biāo)簽的其它用法:
格式<a href="#">百度a> 格式<a href="javascript:">百度a>
格式<a href="#location">跳轉(zhuǎn)到指定位置a> 在頁面的指定位置給任意標(biāo)簽添加一個id屬性 例如 <p id="location">這個是目標(biāo)p>
格式: <a href="01-錨點(diǎn)鏈接.html#location">跳轉(zhuǎn)到指定位置a> 只需要在01-錨點(diǎn)鏈接.html頁面添加一個id位置即可
例如<a href="girl.zip">下載福利資源<a/>
列表標(biāo)簽的作用:給一堆數(shù)據(jù)添加列表語義,也就是告訴搜索引擎告訴瀏覽器這一堆數(shù)據(jù)是一個整體
分類:無序列表;有序列表;定義列表
給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都沒有先后之分
<ul type="disc"> <li>第一項(xiàng)li> <li>第二項(xiàng)li> ul>
type屬性
注意
應(yīng)用場景:1.新聞列表;2.商品列表;3導(dǎo)航條
有序列表的作用: 給一堆數(shù)據(jù)添加列表語義, 并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)都有先后之分
<ol type="1" start="2"> <li>第一項(xiàng)li> <li>第二項(xiàng)li> ol>
type屬性
給一堆數(shù)據(jù)添加列表語句;先通過dt標(biāo)簽定義列表中的所有標(biāo)題,然后再通過dd標(biāo)簽給每個標(biāo)題添加描述信息
<dl> <dt>標(biāo)題1dt> <dd>內(nèi)容1dd> <dt>標(biāo)題2dt> <dd>內(nèi)容1dd> <dd>內(nèi)容2dd> dl>
注意
應(yīng)用場景:做網(wǎng)站尾部的相關(guān)信息;做圖文混排。
表格是一個二維數(shù)據(jù)空間,一個表格由若干行組成,一個行又有若干單元格組成,單元格里可以包含文字、列表、圖案、表單、數(shù)字符號、預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。表格類數(shù)據(jù)是指最適合組織為表格格式(即按行和列組織)的數(shù)據(jù)。
<table> <caption>表格的標(biāo)題caption> <thead> <tr> <th>每一列的標(biāo)題th> tr> thead> <tbody> <tr> <td>數(shù)據(jù)td> tr> tbody> <tfoot> <tr> <td>數(shù)據(jù)td> tr> tfoot> table> caption作用: 指定表格的標(biāo)題 thead作用: 指定表格的表頭信息 tbody作用: 指定表格的主體信息 tfoot作用: 指定表格的附加信息
<table> <thead> <tr> <th>序號th> <th>姓名th> <th>愛好th> tr> thead> <tbody> <tr> <td>1td> <td>Egontd> <td>杠娘td> tr> <tr> <td>2td> <td>Yuantd> <td>日天td> tr> tbody> table>
功能:
表單屬性
屬性 | 描述 |
---|---|
accept-charset | 規(guī)定在被提交表單中使用的字符集(默認(rèn):頁面字符集)。 |
action | 規(guī)定向何處提交表單的地址(URL)(提交頁面)。 |
autocomplete | 規(guī)定瀏覽器應(yīng)該自動完成表單(默認(rèn):開啟)。 |
enctype | 規(guī)定被提交數(shù)據(jù)的編碼(默認(rèn):url-encoded)。 |
method | 規(guī)定在提交表單時所用的 HTTP 方法(默認(rèn):GET)。 |
name | 規(guī)定識別表單的名稱(對于 DOM 使用:document.forms.name)。 |
novalidate | 規(guī)定瀏覽器不驗(yàn)證表單。 |
target | 規(guī)定 action 屬性中地址的目標(biāo)(默認(rèn):_self)。 |
表單元素
基本概念:
HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合,因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理:
訪問者在瀏覽有表單的網(wǎng)頁時,可填寫必需的信息,然后按某個按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。當(dāng)數(shù)據(jù)完整無誤后,服務(wù)器反饋一個輸入完成的信息。
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接收上傳文件代碼
元素會根據(jù)不同的 type 屬性,變化為多種形態(tài)。如果說td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
type屬性值 | 表現(xiàn)形式 | 對應(yīng)代碼 |
---|---|---|
text | 單行輸入文本 | |
password | 密碼輸入框 | |
date | 日期輸入框 | |
checkbox | 復(fù)選框 | |
radio | 單選框 | |
submit | 提交按鈕 | |
reset | 重置按鈕 | |
button | 普通按鈕 | |
hidden | 隱藏輸入框 | |
file | 文本選擇框 |
屬性說明:
"en"> "UTF-8">表單和input標(biāo)簽練習(xí)34-表單練習(xí)
作用:label標(biāo)簽不會向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性
注意:表單元素要有一個id,然后label標(biāo)簽就有一個for屬性,for屬性和id相同就表示綁定了; 所有表單元素都可以通過label綁定
"text" id="account" /> "radio" name="sex" id="man" /> "checkbox" id="basketball" />
作用:給輸入框綁定待選項(xiàng)
"en"> "UTF-8">示例31-Datalist標(biāo)簽 請輸入你的車型: "text" list="cars">
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京option> <option selected="selected" value="2">上海option> <option value
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/1694.html
摘要:前言鑒于平時業(yè)務(wù)代碼寫多了,筆者對前端的一些基礎(chǔ)知識都開始生疏。同理,對于而言,的標(biāo)簽也是具有容器含義的,譬如標(biāo)簽顧名思義就是尾部標(biāo)簽,存放內(nèi)容的結(jié)尾塊,標(biāo)簽表示頭部。 前言 鑒于平時業(yè)務(wù)代碼寫多了,筆者對前端的一些基礎(chǔ)知識都開始生疏。有鑒于此,加上又到了一年一度的春招時間,在接下來的一段時間內(nèi)筆者將對整個前端體系的知識進(jìn)行一些梳理,同時會附帶上相關(guān)基礎(chǔ)知識中常見的面試題。在筆者復(fù)習(xí)的...
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識——標(biāo)簽詳解html基礎(chǔ)知識——與用戶交互!(表單標(biāo)簽)html基礎(chǔ)知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識——標(biāo)簽詳解html基礎(chǔ)知識——與用戶交互!(表單標(biāo)簽)html基礎(chǔ)知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
Web前端開發(fā)是創(chuàng)建Web頁面或app等前端界面呈現(xiàn)給用戶的過程。第一階段:前端基礎(chǔ)(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識——標(biāo)簽詳解html基礎(chǔ)知識——與用戶交互!(表單標(biāo)簽)html基礎(chǔ)知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4024·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4154·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00