html基礎1(環境準備、標簽)
學習目的
1，能改前端的模板
2，自己裝修頁面
3、前後端交互多個技術
4、能操作網頁元素
5、能和前端開發人員溝通
開發工具:
pycharm/webStorm
EditPlus(適合初學)
sublime(各種模塊，推薦)
Visual Studio/VSCode
Chrome(谷歌瀏覽器)
1、配置HTML模板
打開sub,crtl+alt+h 生成一個html模板 或 file->New File ->HTML
<!doctype html> <!-- html標準 H5標準,只能出現在第一句第一行--><html> <!--網頁開始--> <head> <!--用來設置網頁的屬性--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--網頁屬性值--> <meta name="Keywords" content=""> <!--關鍵字 類似百度google搜索時的關鍵字--> <meta name="description"content=""> <!---描述 搜索到關鍵字後顯示的內容--> <title>title</title> <!--標簽頁標題--> <style type="text/css"> *{margin:0;padding:0;} </style> <!--‘/‘表示嚴格與不嚴格模式--> <link href="" rel="stylesheet"> </head> <!--頭部--> <body> <!--主體、內容--> </body> </html> <!--網頁結束-->
2、html標簽:
標簽是由尖括號<> 把關鍵詞括起來，通常是成對出現
2.1HTML規範
1)由閉合的標簽必須閉合
2)所有的標簽一律小寫
3)開發的適合，註意代碼縮進(通常四個空格或兩個空格)
4)特殊符號規範使用，並以分號結尾
2.2定義標題
<body> <h1>Python</h1> <!--加粗順序約大字體越小,一個頁面當中一般來說只會出現一次h1，可以供我們的搜索引擎進行關鍵字匹配--> <h2>Java</h2> <!--也有換行的功能--> <h3>C++</h3> <h4>C#</h4> <h5>Go</h5> <h6>VB</h6> 《Python 3程序開發指南》本書首先講述了構成Python語言的8個關鍵要素，之後分章節對其進行了詳盡的闡述，包括數據類型、控制結構與函數、模塊、文件處理、調試、進程與線程、網絡、數據庫、正則表達式、GUI程序設計等各個方面，並介紹了其他一些相關主題。全書內容以實例講解為主線，每章後面附有練習題，便於讀者更好地理解和掌握所講述的內容。 </body>
2.3段落標簽
<p></p>,前後的元素都會被換行
<body> <h1>Python</h1> 《Python 3程序開發指南》本書首先講述了構成Python語言的8個關鍵要素，之後分章節對其進行了詳盡的闡述，包括數據類型、控制結構與函數、模塊、文件處理、調試、進程與線程、網絡、數據庫、正則表達式、GUI程序設計等各個方面，並介紹了其他一些相關主題。全書內容以實例講解為主線，每章後面附有練習題，便於讀者更好地理解和掌握所講述的內容。 <p> Mark Summerfield，Qtrac公司的所有人，同時還是一位在Python、C++、Qt以及PyQt等領域卓有專長的獨立培訓專家、顧問、技術編輯與作者。Mark Summerfield撰寫的書籍包括《Rapid GUI Programming with Python》以及《Qt：The Definitive Guideto PyQt Programming》（Addison—Wesley，2008），並與Jasmin Blanchette共同編寫了《C++GUI Programming with Qt 4》（Addison—Wesley，2006）。作為Trolltech的文檔管理者，Mark創立了並負責編輯Trolltech的技術雜誌《Qt Quarterly》。 </p> </body>
效果:
2.4特殊符號 < > amp; ©
<h2>特殊符號使用</h2> <p>&lt;h1&gt;Python<;h1></p> <p>小於 ------&lt;</p> <p>大於 ------&gt;</p> <p>& ------&apm;</p> <p>版權號 ----©<p> <p>空格 ------ ------</p> <p>叉 ------ ×</p> <p> 換 <br/> 行 </p>
效果:
2.5標簽
sub編輯器 ctrl+alt+enter 輸入p等關鍵字，可對所選區加標簽
alt+shift+w
sub編輯器 ctrl+d 多選，選中後可esc鍵，撤銷關鍵詞
谷歌瀏覽器ctrl+r 刷新
b 加粗
p 段落
strong 同加粗區別是能被SEO搜索引擎優化
a <a href="">This is a標簽</a> 增加跳轉
<a href="http:\\www.baidu.com">This is a標簽</a> #跳轉到百度
<a href="#">This is a標簽</a> #跳轉到當前頁面
<a href="#" name="top">this is top</a> <!--跳轉的位置--> <a href="#top">This is a標簽</a> <!--跳轉到上文-->
<p id="p"> <!--其它類型標簽跳轉，只能取一次--> <a href="#p">This is a標簽</a>
2.6圖片
1)BMP 點陣圖，占用空間大，色彩豐富。
2)JPEG,JPG 有損壓縮，在頁面中一般都采用此格式
3)gif 動圖
4)png 支持Alpha通道，支持透明，半透明，支持無損壓縮
<img src="" alt="" width="500" height="" />
src:圖片路徑
width:寬度,單位像素
height:高度
alt:搜索引擎關鍵字
2.7列表
1)無序列表
disc:圓形黑色實心
square:方形黑色實心
circle:空心圓
<ul type="square">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
2)有序列表
<ol>
li{[email protected]}*3 #sub中從5開始創建創建3列
</ol>
i:小寫羅馬字符序列號
I:大寫羅馬字符序列號
A:大寫字母序列號
a:小寫字母序列號
<ol type="I"> <li>5</li> <li>6</li> <li>7</li> </ol>
3)定義一個列表
<dl> <dt>標題1</dt> <dd>data定義數據</dd> </dl>
html基礎1(環境準備、標簽)