標號（8）：python(就業階段)——html和css入門

阿新 • • 發佈：2018-11-19

<1>html概述及html文件基本結構

1、html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，檔案的副檔名為html或者htm。
ps:l超文字指的是超連結，標記指的是標籤。

2、html文件基本結構

 <!DOCTYPE html>    	<!--第一行是文件宣告-->
    <html lang="en">  	<!--語言：英語--> 

	<html> 	<!--二行“<html>”標籤和最後一行“</html>”定義html文件的整體-->
	    <head>          
	      <!--“<head>”標籤裡面負責對網頁進行一些設定以及定義標題，設定包括定義網頁的編碼格式，外鏈css樣式檔案和javascript檔案等，設定的內容不會顯示在網頁上，標題的內容會顯示在標題欄.-->
		“<head>”標籤和“<body>”    <!--標籤是它的第一層子元素 -->
	        < 
meta name="viewport" content="width=device-width, initial-scale=1.0"> 	<!--顯示比例-->
	        <meta charset="UTF-8">	<!--編碼格式-->
	        <title>網頁標題</title>
	    </head>
	    <body>    <!--“<body>”內編寫網頁上顯示的內容-->
	          網頁顯示內容
	    </body> 
	
	<!--“<head>”標籤和“<body>”標籤是它的第一層子元素-->
	</html>

3、web前端技術及web標準

（1）html: 標籤.（結構標準）
（2）css: 漂亮.（樣式標準/表現標準）
（3）javascript: 動作.（行為標準）

<2>html標籤入門

1、標籤的的使用方法

（1）雙閉合標籤

   <h1>致青春</h1>
   <p>懷念啊我的青春</p>

（2）單閉合標籤

   你好！<br>

（3）帶屬性的標籤

   <img src="images/1.jpg" alt="該照片不存在" width = 100px >
   <a href="http://www.baidu.com" target="_blank">林志玲</a>

（4）標籤的巢狀

   <div>
      <p>
        我是盒子
      </p>
   </div>    <!--div——相當於收納盒，更加美觀，操作簡便-->

2、html標籤元素

（1）塊元素

塊元素在佈局中預設會獨佔一行，寬度預設等於父級的寬度，塊元素後的元素需換行排列。

常用塊元素標籤

1>標題標籤，表示文件的標題，除了具有塊元素基本特性外，還含有預設的外邊距和字型大小

  <h1>一級標題</h1>      <!--h1 常用於網站logo,h1 到 h6-->

2>段落標籤，表示文件中的一個文欄位落，除了具有塊元素基本特性外，還含有預設的外邊距

  <p>實現自身價值</p>

3>通用塊容器標籤，表示文件中一塊內容，具有塊元素基本特性，沒有其他預設樣式

<div>這是一個div元素</div>

（2）內聯元素

內聯元素：元素之間可以排列在一行，設定寬高無效，它的寬高由內容撐開。

常用內聯元素標籤

1>超連結標籤，連結到另外一個網頁，具有內聯元素基本特性，預設文字藍色，有下劃線

  <a href="02.html">第二個網頁</a>  
  <!--a連結   target=“_blank”跳轉新的頁面開啟,herf = '#' ——跳轉到頁面最頂端（點選後不跳轉）-->

2>通用內聯容器標籤，具有內聯元素基本特性，沒有其他預設樣式

  <span>我是span1</span><span>我是span2</span><span>我是span3</span>

3>圖片標籤，在網頁中插入圖片，具有內聯元素基本特性，但是它支援寬高設定。

  <img src="images/pic.jpg" alt="圖片" />

（3）常用html字元實體

  &nbsp;<!--在段落前想縮排兩個文字的空格，使用空格的字元實體：-->
  &lt; <!--小於 '<' -->
  &gt; <!--大於 '>'-->

<3>css介紹

1、css概述

CSS是( Cascading Style Sheets )層疊樣式表

2、css基本語法

選擇器是將樣式和頁面元素關聯起來的名稱。語法格式：選擇器 { 屬性：值；屬性：值；屬性：值；}

3、css引入方式

1、內聯式：通過標籤的style屬性，在標籤上直接寫樣式。

  <div style="width:100px; height:100px; background:red ">......</div>

2、嵌入式：通過style標籤，在網頁上建立嵌入的樣式表。

  <style>
		樣式表
  </style>

3、外鏈式：通過link標籤，連結外部樣式檔案到頁面中。

  <link rel="stylesheet" type="text/css" href="css/main.css">

4、html佈局

（1）網頁佈局原理

標籤在網頁中會顯示成一個個的方塊，先按照行的方式，把網頁劃分成多個行，再到行裡面劃分列，也就是在表示行的標籤中再巢狀標籤來表示列，整體按照先整體，後區域性，先大後小的順序來書寫結構。

（2）標籤語義化

在佈局中需要儘量使用帶語義的標籤，使用帶語義的標籤的目的首先是為了讓搜尋引擎能更好地理解網頁的結構，提高網站在搜尋中的排名(也叫做SEO)，其次是方便程式碼的閱讀和維護。

帶語義的標籤

1、h1~h6：標題標籤
2、p：表示段落
3、img：表示圖片
4、a：表示連結

不帶語義的標籤

1、div：表示一塊內容
2、span：表示行內的一塊內容

5、css選擇器

（1）標籤選擇器

標籤選擇器，此種選擇器影響範圍大，一般用來做一些通用設定，或用在層級選擇器中。

（2）類選擇器

通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。

（3）層級選擇器

子代選擇器 div>p
後代選擇器 div span
主要應用在標籤巢狀的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器,它可與標籤選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用範圍。

6、css屬性

（1）佈局常用樣式屬性：

樣式屬性	概述
width	設定元素(標籤)的寬度，如：width:100px;
height	設定元素(標籤)的高度，如：height:200px;
background	設定元素背景色或者背景圖片，如：background:gold; 設定元素背景色為金色
background-color
border	設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1畫素寬的黑色實線
border-top	設定頂邊邊框，如：border-top:10px solid red;
border-left	設定左邊邊框，如：border-left:10px solid blue;
border-right	設定右邊邊框，如：border-right:10px solid green;
border-bottom	設定底邊邊框，如：border-bottom:10px solid pink;
padding	設定元素包含的內容和元素邊框的距離，也叫內邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:padding-top、padding-left、padding-right、padding-bottom。
margin	設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:margin-top、margin-left、margin-right、margin-bottom。
float	設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;

（2）文字常用樣式屬性一：

樣式屬性	概述
color	設定文字的顏色，如： color:red;
font-size	設定文字的大小，如：font-size:12px;
font-family	設定文字的字型，如：font-family:‘微軟雅黑’;為了避免中文字不相容，一般寫成：font-family:‘Microsoft Yahei’;
font-weight	設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗700 == blod ，100-700
line-height	設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行佔有的高度是24px
text-decoration	設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-align	設定文字水平對齊方式，如text-align:center 設定文字水平居中
text-indent	設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
text-indent:2em	縮排兩個字元
text-indent：-9999em	設定logo時使用（供開發人員使用）

（3）小標籤：

  <i>i</i>   <em>em</em>  <!--傾斜-->
  <s>s</s>   <del>del</del>  <!--刪除像-->
  <u>u</u>   <ins>ins</ins> <a href="#">a</a>  <!--下劃線:-->
  <b>b</b>  <strong>strong</strong>  <!--加粗:-->

標號（8）：python(就業階段)——html和css入門

<1>html概述及html文件基本結構 1、html概述 HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文字標記語言，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的檔案儲存的是一個文字檔案，

標號（10）：python(就業階段)——html和css高階

<1>表格 1、表格的含義 table標籤，就是表格標籤，用於展現資料 <tr>  <!--<td>和<th>標籤

標號（9）：python(就業階段)——html和css進階

1、相對地址與絕對地址相對地址：相對於引用檔案本身去定位被引用的檔案地址絕對地址：相對於磁碟的位置去定位檔案的地址 ps：當整體檔案遷移，頂層目錄和碟符改變而找不到檔案 2、列表標籤（1）有序列表 <ol> <li>列表

標號（12）：python(就業階段)——javascript入高階

<1>陣列及操作方法 1、陣列（1）定義：陣列就是一組資料的集合（數組裡面的資料可以是不同型別）（2）建立方法： 1>物件的例項建立 var aList = new Array(1,2,3); 2>直接量建立

標號（11）：python(就業階段)——javascript入門及進階

<1>javascript介紹 1、JavaScript是執行在瀏覽器端的指令碼語言 2、JavaScript主要解決的是前端與使用者互動的問題，包括使用互動與資料互動，JavaScript是瀏覽器解釋執行的。 3、瀏覽器彈窗 <script> alert(

標號（7）：python(就業階段)——網路TCP

<1>TCP概念英文全拼(Transmission Control Protocol)簡稱傳輸控制協議，它是一種面向連線的、可靠的、基於位元組流的傳輸層通訊協議. <2>TCP特點 1、面向連線 TCP不適用於廣播的應用程式，基

標號（6）：python(就業階段)——網路UDP

<1>UDP含義：英文全拼(User Datagram Protocol)簡稱使用者資料報協議，它是無連線的、不可靠的網路傳輸協議 <2>UDP特點：無連線、資源開銷小（udp每個資料包最大是64K）、傳輸速度快、沒有超時重發機制

標號（5）：python(就業階段)——網路概述

一、網路概述 <1>網路含義將具有獨立功能的多臺計算機通過通訊線路連線起來，在網路管理軟體及網路通訊協議下，實現資源共享和資訊傳遞的虛擬平臺。 <2>ip地址 >1、作用：通過ip地址找到網路中唯一一臺裝置，然後可以給裝置傳送資料 2

標號（4）：python(就業階段)——Linux系統命令（3）——《vim編輯器》

三、編輯器vim >vim是一個功能強大、高度可定製的文字編輯器 <1>vim有三種基本工作模式： 1、命令模式 |命令|功能| |:----|:-----| |移動游標:|h: 左移 j: 下移 k: 上移 l: 右移| |M|游標移動到中間行 | |G

標號（3）：python(就業階段)——Linux系統命令（2）——《遠端登入和遠端拷貝》

二、遠端登入和遠端拷貝 <1>ssh介紹 >（1）SSH（Secure Shell）是專為遠端登入會話和其他網路服務提供安全性的協議。常用於遠端登入，以及使用者之間進行資料拷貝。（2）SSH 為建立在應用層和傳輸層基礎上的安全協議。（3）利用SSH協議可以有效防止遠端管

標號（2）：python(就業階段)——Linux系統命令（1）——《高階Linux命令及命令選項的使用》

一、高階Linux命令及命令選項的使用 <1>重定向命令：> Linux允許將命令執行結果重定向到一個檔案，本應顯示在終端上的內容儲存到指定檔案中。 1、ls >> test.txt 輸出重定向則會追加到檔案的尾部。 2、ls > test.t

Python基礎（8）：python中的特性進階篇（迭代，列表生成式，生成器，迭代器）

python中還包括一些高階特性，以下簡單介紹。迭代定義：用for迴圈來遍歷物件的過程，叫做迭代。作用物件：可迭代物件如何判斷是否為可迭代物件：isinstance(xxx,Iterable)，Iterable型別來源於collections模組。應用場景： 1

python學習（五）：Python類中super()和init()的關係

1.單繼承時super()和__init__()實現的功能是類似的 class Base(object): def __init__(self): print 'Base create' class childA(Base): def __init__(sel

python學習（6）：python爬蟲之requests和BeautifulSoup的使用

前言： Requests庫跟urllib庫的作用相似，都是根據http協議操作各種訊息和頁面。都說Requests庫比urllib庫好用，我也沒有體會到好在哪兒。但是，urllib庫有一點不爽的

Django學習筆記（二）：使用Template讓HTML、CSS參與網頁建立

Django學習筆記（二）：使用Template讓HTML、CSS參與網頁建立通過本文章實現：瞭解Django中Template的使用讓HTML、CSS等參與網頁建立利用靜態檔案應用網頁樣式一、Template的使用 Template是Django利用渲染器將模板檔案與資料內容結合

Python從菜鳥到高手（8）：print函數、賦值與代碼塊

images rec 控制臺輸出 error enter sam 運算賦值編程語言 1.神奇的print函數 ??print函數相信讀者一定對它不陌生，因為在前面的章節，幾乎每個例子都使用了print函數，這個函數的功能就是在控制臺輸出文本。不過print在輸出文本時還

ApolloStudio高手之路（8）：用Python呼叫.Net（C#、VB.Net等）開發的動態連結庫（DLL庫檔案）實現相互協作

ApolloStudio是基於.Net與Python雙架構下的實現，這樣的架構體系使得其具有傳統定製軟體無法比擬的超強拓展性，在本文中我們將介紹這兩者是如何在ApolloStudio平臺上實現優勢互補的。由於在ApolloStudio中使用的更易學習的Python作為主導指令碼語言，這裡我們將介

python快速學習系列（8）：異常處理

-異常通常出現的處理方式 ·條件語句：if/else ·異常處理：try/except/else/finally 1.python中的異常和相關語法 ·exception：python內建的異常類 ·raise：丟擲異常 ·try：嘗試執行以下語句 ·except：在try語句之後，捕獲

Python影象處理（8）：邊緣檢測

快樂蝦歡迎轉載，但請保留作者資訊此前已經得到了單個區域植株影象，接下來似乎應該嘗試對這些區域進行分類識別。通過外形和葉脈進行植物種類的識別顯然是一種直觀的做法，然而由於葉片交疊和光照等現實條件的存在，限

Python（8）： Lambda，列表解析器，生成器表示式，range函式

看到這裡，我覺得之前的幾個文章裡面的內容，如果熟悉了就算是入門了。之後的內容，很多都是用到了才需要。甚至很多內容只是提高效率來用的，完全可以通過基礎的東西做出來。作為一個初學者，知其然就可以了，不必強求所以然。這個時候，應該去下載別人的一些程式碼來看看，自己修改，手動

標號（8）：python(就業階段)——html和css入門

<1>html概述及html文件基本結構

1、html概述

2、html文件基本結構

3、web前端技術及web標準

<2>html標籤入門

1、標籤的的使用方法

2、html標籤元素

<3>css介紹

1、css概述

2、css基本語法

3、css引入方式

4、html佈局

5、css選擇器

6、css屬性

相關推薦