當前位置：首頁 > 编程语言 > python >内容正文

python

python之html和css基础

發布時間：2024/3/13 python 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 python之html和css基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Python學習:前端之HTML+CSS

概述

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標準語言（標記）。相當于定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：djangomoan模版引擎)

1. HTML

超文本標記語言，規則
作用：模板

a. 請求周期

b. 規則對應關系
h1 -> 加大加粗

c. 靜態&動態
學習規則：

頭部

meta系列,借用博客園的頭部信息
title
link

<head><meta charset="UTF-8" /><meta name="keywords" content="開發者,博客園,開發者,程序猿,程序媛,極客,編程,代碼,開源,IT網站,Developer,Programmer,Coder,Geek,技術社區" /><meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力并專注于為開發者打造一個純凈的技術交流社區，推動并幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><link rel="shortcut icon" href="favicon.ico"><title>矮哥Linux</title></head>

身體部分

<body></body> - p- br- div- span- table thead tbody tr th td : colpan rowspan- a: href target- img: src alt title- ul li ol li dl dt dd- 提交數據- form : action method enctype- input： text password radio checkbox file --> name value checked- input: submit button reset --> value- select option --> name value(option) selected multip- textarea: name

塊級和內聯

<h1>劉浩</h1><h1>吳春維</h1><a>矮       哥</a>

p段落標簽，br換行

<p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p><p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p><p>asdfasdfasdfasdfkas;dfkja;skdjf;askdjf;laskjdf;kajsdf;kjas;dfkja;sdljkf</p>

a標簽

<a href="http://www.oldboyedu.com" target="_blank">矮哥</a><a href="#c1">第一章</a><a href="#c2">第二章</a><a href="#c3">第三章</a><div id="c1" style="height: 700px;background-color: rebeccapurple;">辰東所著的第五部小說又稱《遮天前傳》，《圣墟》為后傳首發于起點，辰東結婚后的第一部作品一粒塵可填海，一根草斬盡日月星辰，彈指間天翻地覆。群雄并起，萬族林立，諸圣爭霸，亂天動地；問蒼茫大地，誰主沉浮？一個少年從大荒中走出，一切從這里開始 16年11月完美榮登2016中國泛娛樂指數盛典中國IP價值榜-網絡文學榜top10</div><div id="c2" style="height: 700px;background-color: antiquewhite">辰東所著的第五部小說又稱《遮天前傳》，《圣墟》為后傳首發于起點，辰東結婚后的第一部作品一粒塵可填海，一根草斬盡日月星辰，彈指間天翻地覆。群雄并起，萬族林立，諸圣爭霸，亂天動地；問蒼茫大地，誰主沉浮？一個少年從大荒中走出，一切從這里開始 16年11月完美榮登2016中國泛娛樂指數盛典中國IP價值榜-網絡文學榜top10</div><div id="c3" style="height: 700px;background-color: brown;">辰東所著的第五部小說又稱《遮天前傳》，《圣墟》為后傳首發于起點，辰東結婚后的第一部作品一粒塵可填海，一根草斬盡日月星辰，彈指間天翻地覆。群雄并起，萬族林立，諸圣爭霸，亂天動地；問蒼茫大地，誰主沉浮？一個少年從大荒中走出，一切從這里開始 16年11月完美榮登2016中國泛娛樂指數盛典中國IP價值榜-網絡文學榜top10</div>

h系列，標題標簽

<h1>矮哥</h1><h2>矮哥</h2><h3>矮哥</h3><h4>矮哥</h4><h5>矮哥</h5><h6>矮哥</h6><h6>矮哥</h6>

純潔標簽

<div>我是塊級</div><div>我是塊級</div><span>我是內聯</span><span>我是內聯</span>

列表

<ul><li>菜單一</li><li>菜單二</li><li>菜單上</li></ul><ol><li>菜單一</li><li>菜單二</li><li>菜單上</li></ol><dl><dt>標題一</dt><dd>內容一</dd><dd>內容一</dd><dd>內容一</dd><dt>標題一</dt><dd>內容一</dd><dd>內容一</dd><dd>內容一</dd></dl>

表格

<table border="1"><thead><tr><th>序號</th><th>主機名</th><th>端口</th></tr></thead><tbody><tr><td>1</td><td colspan="2">c1.com</td></tr><tr><td>2</td><td>c1.com</td><td>80</td></tr><tr><td>3</td><td rowspan="2">c1.com</td><td>80</td></tr><tr><td>4</td><td>80</td></tr></tbody></table>

lable和fieldset

<label for="user">用戶名</label> <input id="user" type="text" /><fieldset><legend>登錄</legend>asdfasdfasdfas</fieldset>

input和select

img

2.CSS

層疊樣式表

找到某個或某些

選擇器

直接

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>/*!* ID選擇器 *!*//*#wc{*//*color: red;*//*}*//*!* 屬性選擇器 *!*//*input[type="text"] {*//*color: rebeccapurple;*//*}*//*!* class選擇器 *!*//*.c1{*//*color: red;*//*}*//*!* 標簽選擇器 *!*//*a{*//*color: red;*//*}*//*.c1{*//*color: green !important;*//*}*//*.c2{*//*color: red;*//*}*//*div p{*//*color: green;*//*}*/.c1 > p span{color: green;}.c10:hover{color: green;}</style> </head> <body><div class="c1 c2">矮哥</div><img src="../1.HTML部分/2.jpg"><div class="c1" id="i2"><p id="wc">矮哥</p><p n="1" class="c1">矮哥<a>阿斯頓發斯蒂芬</a>根</p><a><p>a<span>asdf</span>sdf</p></a></div><a n="1">矮哥</a><p class="c1">矮哥</p><input type="text" /><input type="text" /><input type="text" /><input type="password" /><div class="c3">fff</div><a class="c4">aaa</a><a class="c10">菜單一</a></body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style></style> </head> <body><a style="background-color: rebeccapurple;height: 200px;width: 400px;display: inline-block;">asdfasdf</a><a style="background-color: green;height: 200px;width: 400px;display: inline-block;">asdfasdf</a> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.c1{color: red;font-size: 30px;}.hide{display: none;}</style> </head> <body><input type="button" value="出現吧" onclick="showDiv();" /><input type="button" value="小時吧" onclick="hideDiv();" /><div id="i1" class="c1 hide">aaaaaaaaaaaaaa</div><script>function showDiv() {document.getElementById('i1').classList.remove('hide');}function hideDiv() {document.getElementById('i1').classList.add('hide');}</script> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.modal{height: 300px;width: 400px;background-color: white;position: fixed;left: 50%;margin-left: -200px;top: 50%;margin-top: -150px;z-index: 99;}.hide{display: none;}.zz{position: fixed;background-color: black;top:0;left: 0;right: 0;bottom: 0;z-index: 98;opacity: 0.5;}</style> </head> <body><div style="height: 3000px;background-color: #dddddd"><input type="button" value="出現吧" onclick="showDiv();" /><div>asdfjas;dfiupasjdf;aksjdfpoiuas;df;askdjfpalsjdf;lkajsdf;kajsd;fkj</div></div><div id="i2" class="zz hide"></div><div id="i1" class="modal hide"><input type="button" value="取消" onclick="hideDiv();" /></div><script>function showDiv() {document.getElementById('i1').classList.remove('hide');document.getElementById('i2').classList.remove('hide');}function hideDiv() {document.getElementById('i1').classList.add('hide');document.getElementById('i2').classList.add('hide');}</script> </body> </html>

間接：

# 層級選擇器div p{color: green;}div>p{color: green;}

偽類

hover 當鼠標放在上部時，css生效.c10:hover{color: green;}<a class="c10">菜單一</a>

PS: 優先級

1. ID選擇器屬性選擇器 class選擇器標簽選擇器2. 相同選擇器：就近原則3. !important

“穿衣服”

穿衣服走一波

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.sb{/*字體顏色*/color: white;/*背景顏色*/background-color: red;/*字體大小*/font-size: 16px;/*font-weight: bold;*//*高度*//*height: 200px;*//*height: 10%;*//*寬度*//*width: 400px;*//*width: 40%;*/background-image: url(2.jpg);background-repeat: no-repeat;height: 200px;}.c1{background-image: url(5.png);background-repeat: no-repeat;background-position-y: -111px;background-position-x: -106px;/*background: url(5.png) no-repeat -106px -111px;*/height: 60px;width: 60px;}</style> </head> <body><div class="sb">矮哥有話說</div><div class="c1"></div> </body> </html> /*字體顏色*/color: white; /*背景顏色*/background-color: red; /*字體大小*/font-size: 16px;/*font-weight: bold;*/ /*高度*//*height: 200px;*//*height: 10%;*/ /*寬度*//*width: 400px;*//*width: 40%;*/ /* 背景圖片 */background-image: url(5.png);background-repeat: no-repeat;background-position-y: -111px;background-position-x: -106px; 隱藏標簽display: none;隱藏設置內聯&塊級display: block;display: inline;display: inline-block; 邊框border: 3px solid rebeccapurpleborder-left: 3px solid rebeccapurple <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.c2{background-color: #dddddd;padding: 10px;border-left: 3px solid transparent;}.c2:hover{border-left: 3px solid rebeccapurple;}</style> </head> <body><div style="height: 200px;border: 1px solid red;"></div><div style="background-color: #dddddd;border-left: 3px solid rebeccapurple;padding: 10px;">搜索數據</div><br/><div class="c2">搜索數據</div> </body> </html> 邊距內邊距padding外邊距margin 鼠標移動上方時，顯示的圖標 cursor: wait; positionposition: relative;position: absolute;position: fixed;1. 場景一：position: fixed; # 永遠在窗口的某個位置2. 場景二：position: absolute; # 滾動滑輪看效果3. 場景三：position: relative; # 單獨使用，并沒有任何效果。有點類似標簽position: absolute; # 找到relative進行定位 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.tip{position: fixed;bottom: 300px;right: 0;}.ab{position: absolute;bottom: 10px;right: 0;}.rel{position: relative;height: 300px;width: 300px;background-color: rebeccapurple;}.abs{position: absolute;top: 0;right: 0;}</style> </head> <body><div class="rel"><div><div class="abs">asdf</div></div></div><div style="background-color: #dddddd;height: 2000px;"></div><div class="tip">返回頂部</div><div class="ab">返回頂部</div></body> </html> float：float: left<div style="clear: both;"></div> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body{margin: 0;}</style> </head> <body><div style="height: 48px;background-color: brown;line-height: 48px;">矮哥<a>矮哥</a><a>矮哥</a><a>矮哥</a></div><br/><div style="background-color: rebeccapurple;"><div style="float: left;background-color: green;">內容一</div><div style="float: left;background-color: green;">內容一</div><div style="float: right;background-color: green;">內容二</div><div style="clear: both;"></div></div><div style="height: 48px;background-color: brown;line-height: 48px;">矮哥</div><br/><div style="height: 48px;background-color: brown;text-align: center;">矮哥</div></body> </html> line-height & text-align上下居中：line-height:48px;左右居中：text-align:center; body{margin:0; # 去掉邊距，或者叫做占滿屏} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title></head> <body><div style="margin: 50px;background-color: rebeccapurple;color: white;">鼻子</div><div style="padding: 50px;background-color: rebeccapurple;color: white;">鼻子</div> </body> </html> 布局屬性：.w{width: 980px;margin: 0 auto;}CSS存在形式- 標簽- 當前頁面 <style></style>- 文件 <link rel='stylesheet' href='' /> * <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>body{margin: 0;}.w{width: 980px;margin: 0 auto;}.left{float: left;}.right{float: right;}.pg-header{height: 48px;background-color: brown;color: white;line-height: 48px;}.pg-header .menus a{padding: 0 10px;display: inline-block;}.pg-header .menus a:hover{background-color: bisque;}</style> </head> <body><div class="pg-header"><div class="w"><div class="menus left"><a href="#">菜單一</a><a href="#">菜單一</a><a href="#">菜單一</a><a href="#">菜單一</a></div><div class="menus right"><a href="#">登錄</a><a href="#">注冊</a></div></div></div><div class="pg-body"><div class="w">asdka;sdfjk;alsd</div></div> </body> </html>

轉載于:https://www.cnblogs.com/can-H/articles/6703792.html

總結

以上是生活随笔為你收集整理的python之html和css基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：数据库（day02）
下一篇：《Python 数据科学实践指南》读书笔