前端標(biāo)簽
標(biāo)簽的分類
1. 單標(biāo)簽
img br hr
<img />
2. 雙標(biāo)簽
a h p div <a></a>
3. 按照標(biāo)簽屬性分類
1. 塊兒標(biāo)簽
# 自己獨自占一行
h1-h6 p div
2. 行內(nèi)(內(nèi)聯(lián))標(biāo)簽
# 自身文本有多大就占多大
a span u i b s
div標(biāo)簽和span標(biāo)簽
這兩個標(biāo)簽它是沒有任意意義的，主要用來'布局'頁面
div一般用在占位置布局
span一般用在占文本布局
標(biāo)簽的嵌套
標(biāo)簽之間是可以互相嵌套的，標(biāo)簽套標(biāo)簽
塊兒級元素是可以嵌套所有的標(biāo)簽的
p標(biāo)簽不能夠嵌套塊兒級元素，但是它可以嵌套行內(nèi)元素
行內(nèi)元素只能嵌套行內(nèi)元素，不能夠嵌套塊兒級元素，非寫了嵌套，也不報錯，只不過是沒有效果
"""針對于前端來說，不會輕易的報錯! 如果你寫的不對，只會沒有對應(yīng)的效果"""
img標(biāo)簽
展示圖片的
https://img2.baidu.com/it/u=464791776,3312333293&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1698771600&t=9777764d1fe6560f394478126fb7563b
<img src="123.png" title="你看我好看嗎" width="200px" alt="">
src：
1. 內(nèi)部的圖片地址
2. 寫外鏈的地址
title：
鼠標(biāo)懸浮的時候顯示的內(nèi)容(是所有標(biāo)簽都要的)
width: 圖片的寬度
height：圖片的高度
### 一般情況下只寫一個，等比例縮放
alt：當(dāng)圖片不存在的時候，顯示的內(nèi)容
a標(biāo)簽
<a target="_blank" >點我</a>
href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：
● 絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
● 相對URL - 指當(dāng)前站點中確切的路徑（href="index.htm"）
● 錨URL - 指向頁面中的錨（href="#top"）
target：
● _blank表示在新標(biāo)簽頁中打開目標(biāo)網(wǎng)頁
● _self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)網(wǎng)頁
標(biāo)簽的兩個自帶重要屬性
id 值: 相當(dāng)于是人的身份證，一個文檔中，id值不能夠重復(fù)，必須唯一
class 值：是可以有多個的，一個標(biāo)簽可以有多個class值，一個class值也可以被多個標(biāo)簽擁有
<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>
#d1
.c1
要想使用id值，必須使用#開頭
要想使用class值，必須使用 .開頭
列表
1.無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性：
● disc（實心圓點，默認值）
● circle（空心圓圈）
● square（實心方塊）
● none（無樣式）
2.有序列表
3.標(biāo)題列表
表格
id name age gender salary
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
1 kevin 20 male 2000
table標(biāo)簽
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
屬性:
● border: 表格邊框.
● cellpadding: 內(nèi)邊距
● cellspacing: 外邊距.
● width: 像素 百分比.（最好通過css來設(shè)置長寬）
● rowspan: 單元格豎跨多少行
● colspan: 單元格橫跨多少列（即合并單元格）
form表單標(biāo)簽
<form action="">
<p>
<label for="inp1">
username: <input type="text" id="inp1">
</label>
</p>
<p>
<label for="inp2">
password: <input type="password" id="inp2">
</label>
</p>
<p>
<label for="inp3">
password: <input type="date" id="inp3">
</label>
</p>
<p>
<input type="checkbox" name="hobby"> read
<input type="checkbox" name="hobby"> music
<input type="checkbox" name="hobby"> tangtou
</p>
<p>
<input type="checkbox" name="hobby1"> read1
<input type="checkbox" name="hobby1"> music1
<input type="checkbox" name="hobby1"> tangtou1
</p>
<p>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
<input type="radio" name="gender"> 未知
</p>
<p>
<input type="hidden" value="123">
</p>
<p>
<input type="file" multiple>
</p>
<p>
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">河南</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10">
</textarea>
<p>
<input type="submit" value="登錄">
<input type="reset" value="重置">
</p>
</form>
屬性說明:
● name：表單提交時的“鍵”，注意和id的區(qū)別
● value：表單提交時對應(yīng)項的值
○ type="button", "reset", "submit"時，為按鈕上顯示的文本年內(nèi)容
○ type="text","password","hidden"時，為輸入框的初始值
○ type="checkbox", "radio", "file"，為輸入相關(guān)聯(lián)的值
● checked：radio和checkbox默認被選中的項
● readonly：text和password設(shè)置只讀
● disabled：所有input均適用
select屬性
屬性說明：
● multiple：布爾屬性，設(shè)置后為多選，否則默認單選
● disabled：禁用
● selected：默認選中該項
● value：定義提交時的選項值
驗證form表單朝后端提交數(shù)據(jù)
<form action="">
action:
"""寫朝后端提交的地址"""
這里你寫什么地址就朝這個地址提交數(shù)據(jù)，應(yīng)該填寫后端的地址
1. 什么都不寫：朝當(dāng)前地址提交
2. 全寫：http://127.0.0.1:5000/index/ 朝這個地址提交
3. 只寫后綴
/index/-------->IP:PORT/index
"""form表單要想把數(shù)據(jù)提交到后端，每一個標(biāo)簽都要有一個name屬性."""
name的屬性值就是提交到后端數(shù)據(jù)的key值，用戶輸入的內(nèi)容就是value值
針對于復(fù)選框、單選框標(biāo)簽都應(yīng)該有一個value屬性，用于區(qū)別前端用戶選擇的哪個選項
## 對于文件數(shù)據(jù)的提交需要滿足以下兩個條件：
1. 請求方式必須是post
2. 數(shù)據(jù)編碼方式：
1. application/x-www-form-urlencoded
2. multipart/form-data
3. json
3. 編碼方式必須是multipart/form-data才能提交問價
4. urlencoded只能夠提交不是文件的數(shù)據(jù)，form-data是可以提交普通數(shù)據(jù)和文件數(shù)據(jù)
5. urlencoded形式的數(shù)據(jù)長什么樣子：
username=&password=&date=&hidden=123&myfile=&city=
6. form-data編碼格式的數(shù)據(jù)：
username=&password=&date=&hidden=123&myfile=&city=
boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
文件數(shù)據(jù)
"""對于form-data提交的數(shù)據(jù)，后端還是在form里面去普通數(shù)據(jù)，而在files里面去文件數(shù)據(jù)"""
7. form表單不能夠提交json數(shù)據(jù)
8. 如果想提交json格式的數(shù)據(jù)：Ajax技術(shù)、第三方的api工具postman
CSS介紹
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
"""CSS就是對HTML標(biāo)簽做樣式的，讓不好看的變得更加的好看"""
CSS語法：
選擇器 {
屬性名1:屬性值;
屬性名2:屬性值;
屬性名3:屬性值;
屬性名4:屬性值;
屬性名5:屬性值;
}
CSS注釋:
/*這是注釋*/
HTML注釋：
<!-- 這是注釋 -->
注釋符號的快捷鍵是：ctrl + ?
CSS的幾種引入方式:
行內(nèi)樣式:
<p style="color: red">Hello world.</p>
內(nèi)部樣式：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: #2b99ff;
}
</style>
</head>
外部樣式：
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
"""如何學(xué)習(xí)CSS?"""
1. 先學(xué)習(xí)如何找到標(biāo)簽
2. 找到標(biāo)簽之后在進行屬性操作
選擇器種類非常之多，但是，大多數(shù)都是了解的，用的最多的也就幾個，對我們來說，只需要掌握這幾個就可以了
基本選擇器：
ID選擇器
類選擇器
元素選擇器
通用選擇器
組合選擇器
后代選擇器
"""
我們使用親戚關(guān)系表示標(biāo)簽之間的關(guān)系
<div id="div1"> div是p的父親，p是div 的兒子
<p class="c1"> p是a的父親，a是p的兒子，a是div的孫子
<a href="">點我把</a>
<a href="">點我把</a>
<a href="">點我把</a>
</p>
div
<a href="">我會不會變顏色呢</a> a是p的兄弟
</div>
<p> p是div的兄弟
<a href="">哈哈哈哈</a>
</p>
"""
效果 代碼
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.kuangjia1{
margin: auto;
width: 1200px;
height: 100%;
position: relative;
}
.you1{
width: 20%;
position: absolute;
left: 0%;
}
.zhuo1{
color: #b6f1ff;
/*margin: auto;*/
/*background: rgba(77,94,255,0.5);*/
background-image: url("https://www.freeimg.cn/i/2023/10/30/653f9a3803ed8.jpg") ;
background-repeat:no-repeat;/*圖片適應(yīng)窗口大小，這里設(shè)置的是不進行平鋪*/
background-attachment: fixed;/*圖片相對于瀏覽器固定,這里設(shè)置背景圖片固定，不隨內(nèi)容滾動*/
width: 70%;
background-size: 70% 100%;/*指定圖片大小，此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小*/
/*背景圖片的位置*/
background-position: center;
background-origin: border-box;/*從邊框區(qū)域顯示*/
-webkit-filter: opacity(100%);/* 透明度*/
position: absolute;
left: 34%;
}
</style>
</head>
<body>
<div id="kuangjia " class="kuangjia1 ">
<div id ='zhuo' class="zhuo1">
<!-- 無序列表-->
<ul type="none" >
<li>第一項</li>
<li>第二項</li>
</ul>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p >
<label for="name1">
username:<input type="text" id ='name1' value="tony" name="名字">
</label>
</p>
<p>
<label for="work">
passwork:<input type="password" id="work" value="123" name="密碼">
</label>
</p>
<p>
多選框<input type="checkbox" name="多選框1" checked>
多選框<input type="checkbox" name="多選框2">
多選框<input type="checkbox" name="多選框3">
</p>
<p>
<label for="sj">
時間：<input type="datetime-local" name="時間" id="sj">
</label>
</p>
<p>
單選框<input type="radio" name="單選框" checked>
</p>
<p>
文本選擇<input type="file" multiple name="文件">
</p>
<p>
提交<input type="submit" name="提交" value="登入">
</p>
<p>
重置<input type="reset" name="重置" value="撤回">
</p>
<p>
<select name="地址" multiple >
<option value="上海"> 上海</option>
<option value="杭州"> 杭州</option>
<option value="北京" selected> 北京</option>
</select>
</p>
<p>
<textarea name="文字框" cols="50" rows="20"></textarea>
</p>
</form>
</div>
<div id="you" class="you1">
<p><h3>練習(xí)</h3></p>
<img src="91881040_p0.jpg" width="400px">
<table border="1" bgcolor="#fffdc7">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
</div>
</div>
<form></form>
</body>
</html>
py文件
from flask import Flask,request
app=Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form)
print(request.files)
return 'index'
app.run()
文章來源地址http://www.zghlxwxcb.cn/news/detail-718176.html
文章來源：http://www.zghlxwxcb.cn/news/detail-718176.html
到了這里，關(guān)于HTML5前端標(biāo)簽練習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
