前端
前端
web標準
- web標準
w3c針對網頁開發指定了web標準：
1）結構標準 --heml負責網頁內容的顯示
2）表現標準 --css負責網頁內容的樣式和佈局
3）行爲標準 --javascript負責網頁內容的變化
2.結構標準 --html(超文件標示語言)
html程式碼寫在後綴是.html的檔案中，一個html檔案表示一個網頁
網頁內容：文字，圖片，超鏈接，輸入框，按鈕，視訊，音訊，flash等
網頁結構：整個網頁是一個html標籤，html中有head和body倆個兄弟便籤
html標籤 --表示整個網頁
head標籤 --表示網頁的頂部
body標籤 --表示網頁內容部分
html基礎語法
什麼是html
html是超文件標示語言
標示語言：在不同的文字中加不同的標記讓文字的意義和功能不同，例如：makdown，html
- 標籤 --就是標記，不同的標籤功能把不一樣
HTML大小寫不敏感：HTMLhtmlhTml(大小寫功能一樣)
標籤是html的基本結構，不同的標籤功能不一樣
語法：
雙標籤(標準標籤)：<標籤名 屬性=屬性值>標籤內容</標籤名>
單標籤:<標籤名 屬性=屬性值> 或者<標籤名 屬性=屬性值/>
說明：
<>和</> --固定寫法
標籤名 --不是程式設計師自己命名，有那些標籤名是html規定好的。哪些標籤是單標籤哪些是雙標籤也是固定好的。
注意：標籤名前後不能隨意新增空格，
屬性 --以屬性=屬性值的形式存在，多個屬性之間用空格隔開；不同的標籤有哪些是屬性也是確定的；屬性值不管是什麼數據都必須放到’'中
標籤內容 --雙標籤開始標籤和結束標籤中間的部分就是標籤內容
標籤內容很靈活可以是獨立的文字，也可以是一個標籤，還可以多個標籤或者多個標籤和文字的組合
3.標籤的分類
1）從可見性來分：
可見標籤：p標籤，a標籤，img標籤
不可見標籤：meta標籤，tyle標籤，script標籤，link標籤
2）head中的標籤和非head中的標籤(body標籤)
head中的標籤：meat，title，style，link，scriot，base
body中的標籤：p，a，b，img，table，lable，ul，ol，li等
head中的標籤
head中可以使用的標籤：meat，title，style，link，scriot，base
meat標籤 --網頁元數據，主要用來對網頁進行基本設定，包括：設定文字編碼方式，設定網頁搜尋鍵碼，網頁簡介，網頁型別
title標籤：–網頁標題
link標籤： --匯入外部檔案(匯入圖片作爲網頁圖示；匯入外部樣式表)
link標籤的使用：
rel屬性 --設定匯入檔案的作用。stylesheet：外部樣式表 icon：網頁圖示
type屬性：--指定匯入檔案的型別和後綴。檔案型別/檔案後綴名
test/css：匯入一個後綴名是.css的文字檔案
image/png:匯入一個後綴是.png的圖片檔案
herf屬性：--設定被匯入的檔案的路徑
檔案路徑的寫法：
絕對路徑：檔案在計算機中的全路徑
例如：D:\成都python03\前段\day01--HTML基礎/https://blog.csdn.net/m0_46253614/article/details/img/baidu.ico
相對路徑：1）使用.表示當前目錄(當前寫程式碼的檔案對應目錄表示當前目錄)
. --表示當前目錄
例如：相當於 D:\成都python03\前段\day01--HTML基礎
2）.. --表示當前目錄的上一層目錄
3）... --表示當前目錄的上一層目錄的上層目錄
文字標籤
1.標題標籤 h1~h6
如果文字的意義是標題的時候就選標題標籤
<h1>我是一級標題<\h1>
<h2>我是二級標題<\h2>
<h6>我是最大的6級標題</h6>
2）段落標籤：p
一個段落就對應一個p標籤
<p></p>
3）其他的普通文字標籤font span
font的size --設定字型大小
font的color --設定字型顏色
<font size="" color="">發佈時間：08-1-2020</font>
<font size="" color="">發佈者</font>
4）文字效果相關的標籤和符號
html中手動敲回車無用，手動新增空格也沒有用。如果需要在內容中加換行
需要新增<br>標籤；
在內容中加空格，需要使用html符號：%nbsp --空一個畫素；&emsp--空一個空格
<p>
明月幾時有，把酒問青天。
不知天上宮闕，今夕是何年。
我欲乘風歸去，又恐瓊樓玉宇。
</p>
加粗：b標籤，strong標籤(有強調的意思)
傾斜：i標籤，em標籤(有強調的意思)
列表
1.無序列表 ul-li
ul標籤 --表示整個容器
li標籤 --列舉容器中的元素，個數和元素的個數一樣
2.有序列表 ol-li
ol標籤 --表示整個容器
li標籤 --表示列表中的元素
3）自定義列表：dl-dt-dd
dl --表示整個列表
dt --分類
dd --每個分類中的元素
學科介紹
- python
- java
- h5
辣雞
分佈式開發
- 洗乾淨，去頭
- 準備材料：蔥薑蒜，辣椒，啤酒
- 炒料：火鍋底料加辣椒等
- 加小龍蝦
- 加啤酒燜煮
麻辣小龍蝦做法
</ol>
<h1 id='x'>學科</h1>
<dl>
<dt>理科</dt>
<dd>物理</dd>
<dd>化學</dd>
<dd>生物</dd>
<dt>文科</dt>
<dd>歷史</dd>
<dd>地理</dd>
<dd>政治</dd>
<dt>綜合</dt>
<dd>語文</dd>
<dd>英語</dd>
<dd>數學</dd>
</dl>
<a href="#p">培訓</a>
<a href="#z">做飯</a>
<a href="#x">學習</a>
</body>
圖片和超鏈接
src屬性 --圖片地址：
可以是本地圖片的相對路徑；也可以是網路圖片地址
title屬性 --設定圖片標題(滑鼠懸停在圖片上的時候纔會顯示)
alt屬性 --圖片載入失敗的提示資訊
2.超鏈接：a
1）標籤內容：超鏈接可點選可以看見的部分
2）href屬性：跳轉目的地
a.一個網頁的地址 --跳轉到指定的網頁
b.原生的html檔案路徑 --直接開啓html檔案對應的頁面
c.id選擇器(在id選擇器前加#) --將當前頁面卷動到id選擇器指定的位置
d.空 --重新整理
3）target屬性 --_self在當前頁面中載入內容
_blank在新的視窗載入新的頁面
圖片標籤
百度
列表
id選擇器
重新整理
<img width=「599」 height=「369」 title=「點選檢視源網頁」 src="http://asean.zwbk.org/admin/textimage/20110929/20110929160126_3183.jpg"alt=‘載入失敗’>
表格
1.表格標籤：table-tr-td
table標籤 --表示整個表格
tr標籤 --表示一行
td標籤 --表示一個單元格
table>tr3>td3
table:
border:設定邊框線的寬度(預設是0)
cellspacing：設定單元格和單元格之間的間隙(預設是1)
bgcolor：設定整個表格的背景顏色
width：設定整個表格的寬度
height：設定整個表格的高度
cellpadding：設定表格內容和邊框之間的間距
align：left/right/center;設定整個表格在網頁中的對齊方式
tr：
bgcolor：設定整個行的背景顏色
height：設定整個行的高度
align：left/right/center;設定整個行所有的單元格內容居中
td：
bgcolor：設定一個單元格的背景顏色
width：設定td所在列的寬度
align：left/right/center;設定指定單元格的對齊方式
細線表格：設定table的背景顏色爲邊框的顏色；
設定每個單元格的顏色爲格子的顏色
設定cellspacing單元格的間隙爲邊框的寬度
| 姓名 | 年齡 | 性別 |
| 張三 | 12 | 男 |
| 李四 | 18 | 女 |
表單標籤
表單標籤：form
是一個容器標籤，本身單獨用沒有意義，一般 結合表單結合表單相關的標籤(input,select,textrae)來使用
他可以對錶單標籤中所有使用者資訊收集相關的標籤的內容進行整體的重置和提交
action屬性：後端數據介面的地址
method屬性：請求方式(get/post)
input標籤
input是表單相關便籤，可以放在form標籤中做數據的提交和重置
1）type屬性 --設定標籤型別
a.text預設值 --普通文字輸入框
value屬性 --和輸入框中的內容是關聯的
nane屬性 --用來區分不同的數據和對數據進行提交的(因爲提交數據的是以name=value的形式提交)
placeholder屬性 --設定輸入提示資訊
maxlength屬性 --設定輸入長度
disabled屬性 --設定爲disabled，表示標籤不可用
b.password
value屬性 --和輸入框中的內容是關聯的
nane屬性 --用來區分不同的數據和對數據進行提交的(因爲提交數據的是以name=value的形式提交)
placeholder屬性 --設定輸入提示資訊
maxlength屬性 --設定輸入長度
disabled屬性 --設定爲disabled，表示標籤不可用
radio --無線電鈕
value屬性： --單選選中的時候被選中的值(選項值)
name屬性 --提交和區分
cheaked屬性 --置設定爲預設選擇
cherkbox --複選按鈕
value屬性： --單選選中的時候被選中的值(選項值)
name屬性 --提交和區分以爲，還可以將相同的name作爲一個組，在同一個組只能選中一個選項
cheaked屬性 --置設定爲預設選擇
button --按鈕
value屬性 --按鈕上顯示的文字
submit --提交按鈕
將當前表單中設定了name屬性的標籤內容，以name=value的形式提交
reset --重置按鈕
將當前表單中相關的標籤回到初始化狀態
password
radio
select和textsarea
1.下拉選單:select-option
name屬性：--是select屬性，用來提交和區分
value屬性：--是option屬性，表示當前選項的值和提交數據
option標籤內容 --用來展示選項
selected屬性 ---是option屬性，設定預設選項
2.optgroup --選項分組標籤
3.多行文字域 ---textarea
rows屬性：設定一行最多能顯示的行數(預設是2)
cols屬性：設定一行的列數
placeholder屬性：佔位符
name屬性：---用來區分和提交
maxlength屬性：--限制個數
無語意標籤
<!--div和span
div和span本身無語意，也是html中比較輕量級的標籤
1.span --用於一行顯示多個內容的時候
2，div --主要用於介面標籤的分塊和分組
<span>我是標題1</span>
<span>我是標題2</span>