html基礎1(環境準備、標籤)

時間 2019-11-17

標籤 html 基礎環境準備標籤欄目 HTML 简体版

原文原文鏈接

學習目的css

1，能改前端的模板html

2，本身裝修頁面前端

三、先後端交互多個技術web

四、能操做網頁元素正則表達式

五、能和前端開發人員溝通數據庫

開發工具:後端

pycharm/webStormapi

EditPlus(適合初學)瀏覽器

sublime(各類模塊，推薦)網絡

Visual Studio/VSCode

Chrome(谷歌瀏覽器)

一、配置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>     <!--網頁結束-->

二、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>&amp;lt;h1&amp;gt;Python&lt;;h1&gt;</p>
     <p>小於 ------&amp;lt;</p>
     <p>大於 ------&amp;gt;</p>
     <p>&amp; ------&amp;apm;</p>
     <p>版權號 ----&copy;<p>
     <p>空格 ------&nbsp;&nbsp;&nbsp;------</p>
     <p>叉 ------ &times;</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{$@5}*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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。