前端基礎之HTML

2022-07-24 09:06:09 字數 3744 閱讀 8621

目錄web服務的本質

響應格式

響應狀態碼

請求方式

post請求

xml也可以書寫前端頁面,主要用於odoo框架中,書寫企業內部管理軟體

html注釋

由於html頁面結構比較複雜,內容比較多,不便於後期的維護,修改,通常在寫頁面的時候,習慣用下面的方式來人為的劃分**區域

······

······

html文件結構

:head內存放的內容不是給使用者看的,是給瀏覽器去識別做相應的操作

:body內存放的內容就是瀏覽器展示給使用者看到的花裡胡哨的頁面

html文件開啟方式pycharm自動呼叫瀏覽器開啟(推薦)

手動查詢路徑之後選擇瀏覽器開啟

標籤的分類

標籤的分類1

1. 雙標籤

2. 自閉和標籤

標籤的分類2

1.塊兒級標籤

獨佔一行(h1-h6、p、br、hr、div)

1.塊兒級標籤內部可以巢狀任意的塊兒級標籤和行內標籤

2.特例:p雖然是塊兒級標籤,但是它的內部只能巢狀行內標籤,不能巢狀塊兒級標 籤,如果巢狀了,沒問題,但是不符合html語法規範

2.行內標籤

(u、s、i、b、span)

自身文字多大,就佔多大

行內標籤內部不能巢狀塊兒級標籤和行內標籤

書寫標籤的時候,只需要寫標籤名字,之後tab鍵可以自動補全

此功能**於---> emmet外掛程式

head內常用標籤

title:定義網頁標題

style:內部支援直接寫css**

link:引入外部的css檔案

script:

1.內部可以直接編寫js**

2.可以通過src屬性引用外部js**

meta:

name屬性

keywords

description

url:統一資源定位符

body內常用標籤

基本標籤

h1—h6:標題標籤

s:刪除線

b:加粗

u:下劃線

i:斜體

p:獨佔一行

br:換行

hr:分割線

特殊符號

空格

a大於b a > b

a小於b a < b

a和b a & b

人民幣 ¥10000

註冊商標 ®

常用標籤

div		塊兒級標籤

span 行內標籤

本身沒有任何特殊意義,但是這兩個使用最多,這兩個標籤是用來做前期的頁面布局的

img 標籤

src1.可以寫乙個**位址

2.還可以寫本地的位址

3.url(自動朝該url傳送get請求獲取資料)

alt當載入不出來的時候,預設展示的提示資訊

title

當滑鼠懸浮在上的時候,展示的提示資訊

width,height

修改的寬高篇幅

修改乙個,另外乙個會自動等比例縮放

如果兩個都修改,就會丟幀

a 鏈結標籤

href

放乙個url

點選就會跳轉到該url所對應的資源

target

控制是否在當前頁跳轉

預設是在當前頁跳轉 _self

新建頁面跳轉 _blank

錨點功能

href不單單可以寫url,也可以寫另外乙個a標籤的id值

點選就會跳轉到該id值所對應的a標籤所在的位置

頁首中間回到頂部

回到中間

標籤應該具備的屬性

id屬性:類似於身份證號,用來唯一標識當前html頁面中的某乙個標籤(同乙個html頁面中,id值不能重複)

class屬性:類似於物件導向的繼承,直接引用別的類的樣式

列表標籤

無序列表(較多)

ul li

只要頁面上出現了比較有規則排列的文字,基本上都可以用無序列來實現

無序列表

有序列表

ol 有序列表

哈哈哈嘿嘿嘿

呵呵呵標題列表

dl dt標題

dd內容

標題列表

標題內容

**標籤

展示**資料的時候,一般情況下可以使用**標籤

border="1" 加**線

寫**標籤,先寫結構,然後寫資料

乙個tr就是一行

th和td之分:乙個加粗,乙個不加粗

通常情況下表頭用th,表單內容用td

rowspan="2" /colspan="2" 合併單元格

表單標籤

form標籤

獲取使用者輸入(輸入,選擇,上傳檔案...)並且將資料打包傳送給後端

action引數

用來控制資料提交的路徑(到底朝哪個後端伺服器提交資料)

三種寫法:

1.不寫,預設就是朝當前頁面所在的位址提交資料

2.全路徑(

3.只寫路徑字尾(/index/)

獲取使用者輸入input標籤 該標籤是乙個行內標籤

input類似於前端的變形金剛

type屬性

text 普通文字

password 密文

date 日期

radio 多選一

checkbox 多選多

預設選中 checked="checked"

當標籤與屬性名和屬性值相同的時候,可以只寫屬性名

reset 重置

button 普通按鈕

submit 觸發form表單提交動作

file 獲取檔案

select標籤 下拉框

乙個個選項就是乙個個option標籤

預設是單選的

可以加乙個multiple改成多選

加selected 可以讓option標籤預設選中

textarea標籤 獲取大段文字

label通常是配置input一起使用的

for用來填寫對應的input標籤的id值

點選label標籤內的內容,會自動讓對應的input標籤聚焦

能夠觸發form表單提交資料的按鈕

可以通過value屬性來指定按鈕文字內容

登入input獲取到的使用者輸入就類似於是字典的value

input中name屬性就類似於是字典的key

前端基礎之HTML

html 作為超文字標記語言主要是用來製作靜態頁面 html有標準 html4 標籤 原生標籤.標籤 橫線.結構標籤 字型標籤 使用 文字 標籤的屬性 標籤 屬性名 屬性值 屬性名 屬性值 段落標籤 p標籤 字型加粗標籤 b標籤 字型斜體標籤 i標籤 字型下劃線 u標籤 居中標籤 標籤 html的標...

前端基礎之HTML

import socket sk socket.socket sk.bind 127.0.0.1 8800 sk.listen 5 while 1 conn,addr sk.accept data conn.recv 1024 接收訊息 conn.send b http 1.1 200 ok r n...

前端基礎HTML基礎之CSS

一 id選擇器 class選擇器 標籤選擇器 屬性選擇器 組合選擇器 設定css樣式有三種,第一種是通過在head中style定義選擇器,寫css樣式 第二種通過在標籤中新增屬性的方式定義css樣式 style background color black 第三中方式通過定義css樣式表 三種樣式定...