超文本標(biāo)記語言(Hypertext Markup Language, HTML)

是一種用于創(chuàng)建網(wǎng)頁的標(biāo)記語言,不是一種編程語言,沒有邏輯的

HTML基礎(chǔ)文檔結(jié)構(gòu)

#聲明為HTML5文檔

#是文檔的開始標(biāo)記和結(jié)束的標(biāo)記,lang設(shè)置瀏覽器語言

#定義了網(wǎng)頁標(biāo)題,在瀏覽器標(biāo)題欄顯示,charset聲明編碼,否則會出現(xiàn)亂碼

網(wǎng)頁標(biāo)題　　#定義了網(wǎng)頁標(biāo)題,在瀏覽器標(biāo)題欄顯示

標(biāo)簽的語法

內(nèi)容部分標(biāo)簽名>

定義網(wǎng)頁標(biāo)題定義內(nèi)部樣式表定義JS代碼或引入外部JS文件引入外部樣式表文件 定義網(wǎng)頁原信息

標(biāo)簽分類

塊級標(biāo)簽(行級標(biāo)簽):

h1-h6, p, div, table, ol, ul, form,

內(nèi)聯(lián)標(biāo)簽(行內(nèi)標(biāo)簽):

a, img, span, strong, select, input

基本標(biāo)簽(塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽)

不加標(biāo)簽的純文字也是可以在body中寫的加粗

斜體

下劃線

刪除

標(biāo)題1

標(biāo)題2

標(biāo)題3

標(biāo)題4

標(biāo)題5

標(biāo)題6

---

#就是單獨(dú)個(gè)一個(gè)水平線

Meta標(biāo)簽兩個(gè)屬性分別是http-equiv屬性和name屬性

http-equiv屬性:

#如果把URL和后面的內(nèi)容去掉，就是2秒鐘刷新一次，這些內(nèi)容了解一下就行

#edge是微軟的一個(gè)全新的瀏覽器,其實(shí)就是告訴IE瀏覽器

name屬性: #關(guān)鍵字，也就是別人是可以通過這些關(guān)鍵字搜索到我的這個(gè)文章的，搜索引擎就是能夠這個(gè)content內(nèi)容來幫別人搜索到你的這個(gè)文檔的#SEO就是做這個(gè)的

#是對這個(gè)文檔的描述

a標(biāo)簽(超鏈接標(biāo)簽)

超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序

href屬性指定目標(biāo)網(wǎng)頁地址,該地址可以有幾種類型

絕對URL- 指向另一個(gè)站點(diǎn)(href="http://www.jd.com)

相對URL - 指當(dāng)前站點(diǎn)中確切的路徑(href="index.htm")

錨URL- 指向頁面中的錨(href="#top")

target:

_blank表示在新標(biāo)簽頁中打開目標(biāo)網(wǎng)頁

_self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)網(wǎng)頁頂點(diǎn)......回到頂部

#跳轉(zhuǎn)一個(gè)新標(biāo)簽頁

管理系統(tǒng)

#title 鼠標(biāo)放上去之后顯示出來的提示語(連接到圖片)

連接到指定文件

img標(biāo)簽

src的路徑又分為兩種:網(wǎng)上的一個(gè)圖片路徑和本地的一個(gè)相對圖片路徑#本地圖片

#網(wǎng)絡(luò)圖片

p段落標(biāo)簽：包裹的文字自成一個(gè)段落，此段落自帶行間距

黃山落葉松葉落山黃

上海自來水來自海上

山西運(yùn)煤車煤運(yùn)西山

div標(biāo)簽：除了換行什么都沒有

西湖垂柳絲柳錘西湖黃山落葉松葉落山黃

span標(biāo)簽：無任何效果,一行輸出

西湖垂柳絲柳錘西湖

黃山落葉松葉落山黃

table標(biāo)簽：自帶換行

tr: 定義table標(biāo)簽里的一行

td: 定義tr標(biāo)簽里的一個(gè)單元格

border="1"給表格加邊框

rowspan: 單元格豎跨多少行

colspan: 單元格橫跨多少列(即合并單元格)

caption: 表格的標(biāo)題

表格標(biāo)題

a	b	c	j
d		e		f	h	m

列表標(biāo)簽

ul無序列表

type屬性:

disc (實(shí)心圓點(diǎn),默認(rèn)值)

circle(空心圓圈)

square(實(shí)心方塊)

none(無樣式)

ol有序列表

type屬性: start是從數(shù)字幾開始1數(shù)字列表,默認(rèn)值

A 大寫字母

a 小寫字母

Ⅰ大寫羅馬

ⅰ小寫羅馬

dl標(biāo)題列表(就像大綱一樣,有一個(gè)層級效果)

通過dt定義一級元素

通過dd定義二級元素

• a
• b

c

d

標(biāo)題1

內(nèi)容1

標(biāo)題2

內(nèi)容2

form表單

功能：

表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互

表單能夠包含input系列標(biāo)簽,比如文本字段、復(fù)選框、單選框、提交按鈕等等

表單還可以包含textarea、select、fieldset和 label標(biāo)簽

表單屬性

屬性描述

accept-charset

規(guī)定在被提交表單中使用的字符集(默認(rèn)：頁面字符集)。

action

規(guī)定向何處提交表單的地址(URL)(提交頁面)。

autocomplete

規(guī)定瀏覽器應(yīng)該自動完成表單(默認(rèn)：開啟)。

enctype

規(guī)定被提交數(shù)據(jù)的編碼(默認(rèn)：url-encoded)。

method

規(guī)定在提交表單時(shí)所用的 HTTP 方法(默認(rèn)：GET)。

name

規(guī)定識別表單的名稱(對于 DOM 使用：document.forms.name)。

novalidate

規(guī)定瀏覽器不驗(yàn)證表單。

target

規(guī)定 action 屬性中地址的目標(biāo)(默認(rèn)：_self)

input

元素會根據(jù)不同的type屬性,變化為多種形態(tài)

type屬性值表現(xiàn)形式對應(yīng)代碼

text

單行輸入文本

password

密碼輸入框(不顯示明文)

date

日期輸入框

checkbox

復(fù)選框

radio

單選框

submit

提交按鈕

#發(fā)送瀏覽器上輸入標(biāo)簽中的內(nèi)容，配合form表單使用，頁面會刷新

reset

重置按鈕

?#頁面不會刷新，將所有輸入的內(nèi)容清空

button

普通按鈕

hidden

隱藏輸入框

file

文本選擇框

(等學(xué)了form表單之后再學(xué)這個(gè))

屬性說明:

name：表單提交時(shí)的'鍵',注意和id的區(qū)別

value：表單提交時(shí)對應(yīng)項(xiàng)的值

type="button", "reset", "submit"時(shí),為按鈕上顯示的文本年內(nèi)容

type="text","password","hidden"時(shí),為輸入框的初始值

type="checkbox", "radio", "file",為輸入相關(guān)聯(lián)的值

checked：radio和checkbox默認(rèn)被選中的項(xiàng)

readonly：text和password設(shè)置只讀

disabled：所有input均適用

select標(biāo)簽

屬性說明：

multiple：布爾屬性，設(shè)置后為多選下拉框，否則默認(rèn)單選

disabled：禁用

selected：默認(rèn)選中該項(xiàng)

value：定義提交時(shí)的選項(xiàng)值

label標(biāo)簽

定義：標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記),如果不用這個(gè)label給input標(biāo)簽一個(gè)標(biāo)記,input會變黃,不影響使用,只是提示你,別忘了給用戶一些提示,也就是這個(gè)label標(biāo)簽

說明：

label 元素不會向用戶呈現(xiàn)任何特殊效果.但是點(diǎn)擊label標(biāo)簽里面的文本,那么和他關(guān)聯(lián)的input標(biāo)簽就獲得了光標(biāo),讓你輸入內(nèi)容 標(biāo)簽的 for屬性值應(yīng)當(dāng)與相關(guān)元素的 id 屬性值相同。

extarea多行文本

屬性說明：

name：名稱

rows：行數(shù)#相當(dāng)于文本框高度設(shè)置

cols：列數(shù) #相當(dāng)于文本框長度設(shè)置

disabled：禁用

用戶名

密碼

選項(xiàng)1

選項(xiàng)2

選項(xiàng)3

選項(xiàng)4

選項(xiàng)1選項(xiàng)2

選項(xiàng)1選項(xiàng)2選項(xiàng)3

總結(jié)

以上是生活随笔為你收集整理的python前端代码_python前端HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。