課程介紹
1.前端：寫網頁(7天，掌握)
2.背景：Flask。Django。tornado(17天重點學會)
3.前端頁面：電商首頁搭建
4.搭建電商項目，OA系統
5.就業崗位：背景開發工程師，全棧開發工程師
網頁開發
環境準備
浏覽器：谷歌
編輯器
pycharm
HTML
html(hyper text mark-up language)：超文本标記語言
超文本：基本特征可以連接配接到其他的網頁
标記：
注意：html語言是做網站開發的語言(與python等價)
HTML語言的書寫格式
html語言：由内容和标簽組成
内容：頁面上顯示的資料
标簽：也叫标記
單标簽： < br > < hr>
雙标簽：< 特定字元>内容< /特定字元>
标簽屬性：屬性名稱=值
第一個html
頁面結構
我的第一個頁面
hello,world
頁面規範
字尾名：.html
浏覽器解析頁面
html标簽不區分大小寫，建議小寫
我是标簽1
我還是标簽1
雙标簽必須有閉合标簽/
标簽屬性值要加引号
我是标簽1
常用标簽
标題标簽
h1~h6
我是h1
我是h2
我是h3
我是h4
我是h5
我是h6
特點：
預設有字型式樣(字型粗細大小)
獨占一行
應用場景：新聞标題
檢視代碼f12到elements在到最左邊
[圖檔上傳失敗...(image-ff792a-1596804543185)]
段落标簽
[圖檔上傳失敗...(image-24e338-1596804543185)]
< p>内容< p>
有間隔，自動換行
實體字元
空格  ；
小于号< < ;
大于号> > ;
應用場景 層級關系
換行标簽
< br >
水準線标簽
< hr > 一般使用div設定邊框會比hr适用的地方更多
文本修飾标簽
i，em：傾斜标簽
b，strong ：加粗
u 表示下劃線
del 表示删除線
中公教育 > u就業
中公教育> u就業
中公教育 > u就業
中公教育 > u就業
div标簽和span标簽
沒有任何的樣式
div 獨占一行，span寬度與内容多少有關
div用于大的頁面布局
span用于小的内容修改
應用場景：頁面的布局
之前的布局：table
hello
hello
hello
hello
我是圖檔 ￥299.0 UR2020秋季新品女裝清熟 方領修身針織 連衣裙
[圖檔上傳失敗...(image-351db5-1596804543185)]
注意：幾乎所有标簽都有style屬性
圖檔标簽
img 圖檔标簽
scr 加載路徑
alt 圖檔的描述資訊，圖檔加載失敗後的顯示内容
title 标題，但滑鼠懸停在圖檔上顯示的内容
width 圖檔寬度
height 圖檔的高度
超連結标簽
< a > 超連結标簽
href 跳轉的目标路徑
target="_blank" 從新的頁面打開
哈哈哈哈點我一下你就知道
demo9
錨點定位
實作錨點定位功能：
1.給目标元素添加id屬性
2.在a标簽的href 中使用“#id值”的方式進行定位
拓展：幾乎所有的标簽都有id style 屬性
實作跳轉到頂部
頂部設定一個新空的div添加id值
底部添加跳轉< a >href #id值
到一層
到二層
到三層
一層樓 二層樓 三層樓
頂層
從其他頁面定位到頁面摸個位置
herf 路徑#id值
跳轉2層
清單标簽
無序清單
ul 無序清單标簽 li 清單行标簽
type 指定顯示效果：預設 實心圓形
circe 空心圓形
square 方塊
應用場景：新聞頁面
- pthon
- ui
- 大前端
- java
有序清單
ol 有序清單
type 序列的編号
- 湖人
- 快船
- 爵士
- 騎士
應用場景：熱詞榜單，排名等
自定義清單
dl 自定義清單
dt 表頭
dd 行
- python學科
- python基礎
- 資料庫
- linux
- pythonweb java學科
- java基礎
- ssm
- javaee
- python
-
- 環境安裝
- 基本文法
- 分支結構
- 循環結構
- 函數
- 資料結構
- 數字類型
- 字元串類型
- 清單類型
- 字典類型
- pythonweb
-
- 前端頁面開發
- 背景開發
清單的可嵌套
表格标簽
table 表格标簽
tr 行标簽
td 列标簽
caption 設定标題
| 姓名 | 年齡 | 性别 | 專業 |
| 張三 | 20 | 男 | python |
table 标簽的屬性
boder 邊框線的大小
cellpadding 内容到邊框的距離
cellspacing 每個邊框之間的距離
width 寬度
height 高度
tr 屬性
align：内容的水準對齊 left center right
valign：内容的豎直方向對齊 top middle bottom
| 姓名 | 年齡 | 性别 | 專業 |
| 張三 | 20 | 男 | python |
td 屬性
align：内容的水準對齊 left center right
valign：内容的豎直方向對齊 top middle bottom
tr td 合并
colspan 跨列合并
rowspan 跨行合并
表單
form 表單标簽 沒有樣式用于送出
action 送出路徑
method 送出方式 get 和post
注意：以下所有聲明 type屬性的都是input标簽中的type選項
type=“text” 表示将input解析成文本框
placeholder 設定提示語
readonly 設定隻讀方式
name 給input标簽起一個名字 作用用于文本框輸入值的送出
value 給文本框這是值，當資料回顯時候使用
注意：送出時資訊以鍵值對的形式送出 name屬性的值=value屬性的值
username=zs
url(網址)=
網絡協定
域名
參數
type="password" 密碼框 多個鍵值對之間用&連接配接
type="radio" 單選按鈕，name值相同才能單選
checked 設定預設選擇狀态
type=“checkbox” 多選框
上傳檔案：三要素
1.method=“post”
2.enctype=“multipart/form-data”
3.type=“file”
隐藏域，在也頁面上不顯示
當某些内容必須要送出到背景并且不能讓使用者看到
type=“hidden
select 下拉選項 option 表示選項的内容
type="button" 按鈕
type="reset" 重置按鈕
button：寫在表單中有送出作用，不在表單中就是普通按鈕
textarea 定義文本域标簽
placeholder="請自我介紹..."提示文字
type="submit" 具有送出功能的按鈕
使用者名：
密碼：
性别：
男
女
愛好：抽煙
喝酒
燙頭
頭像：
你喜歡的城市：
--請選擇城市--
廣州
佛山
湛江
深圳
我是表單中的按鈕，有送出作用
自我介紹：
表單外的按鈕
标簽分類
單标簽
hr、br、img、input、meta。DOCTYPE
單标簽不需要寫内容
雙标簽
html、head、bady、title、h、p、div、span、b、serong、u、i、em、del、table、tr、td、caption、li、
雙标簽一般可以寫内容