HTML簡單知識的總結

qq_36407811發表於2018-06-24
HTML

基本格式：

<！DOCTYPE  HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html； charset=utf-8">

<title>製作我的第一個網頁</title>

<style type="text/css">

h1{font-size；color；text-align：center}

</style>

</head>

<body>

<h1>Hello World！ </h1>

</body>

</html>

註釋：<！--註釋文字-->

強調語氣：<strong>，<em>：前者實現加粗再加粗，後者實現加粗加斜   體。

<span>標籤：寫在style 裡設定單獨樣式。

<q></q>標籤：引用簡短文字，使引用的詩句等自己出現雙引號。

<blockquote>： 引用長文字，增加縮排量。

<br />： 換行標籤。

  ：程式碼之間實現空格。

<hr />： 段落之間分隔的橫線。

<address>： 定義一個地址（比如電子郵件地址）  ，簽名或者文件的作者身份。在瀏覽器上顯示的樣式為斜體。

<code>： 加入簡短程式碼。

<pre>： 加入一段長程式碼。


Ul-li標籤： 新增新聞資訊列表， 圖片列表， 無序文字列表。

Ol-li 標籤：新增有序列表，與ul-li 標籤類似。

<div> ：把一些獨立的邏輯部分劃分出來，形成欄目板塊。其中還可使用

<div  id=”  “>給板塊命名。

<table>： 製作表格。 

用CSS 樣式為表格新增邊框：<style  type=”text/css”>

黑色邊框： table tr td，th{border：1px solid #000；}</style>

<caption>：為表格新增標題和摘要。  <table  summary=’’”表格簡介文字”>

<caption>標題文字</caption> </table>

<a>：  實現超連結。<a href=”目標網址”    title=“滑鼠滑過顯示的文字”>連結顯示的文字</a>    預設在當前瀏覽器視窗開啟，新增“target—blank  ”在新的瀏覽器視窗開啟。

<mailto>：  在網頁中連結Email 地址。  <a href=”mailto：  yy@qq。com ?

Cc（抄送地址）=zsq@qq。com  &  bcc（密件抄送地址）=zjj@qq。com  &

subject=”主題”  &  body=“郵件內容”>傳送</a> 給多個收件人傳送，用分號隔開。第一個引數用？開頭，之後用 &隔開。 

<img>： 新增圖片。Src=”標識影象的位置。” alt=”指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字”

Title=“提供在影象可見時對影象的描述（滑鼠滑過圖片時顯示的文字）”

<form>：  表單標籤，與使用者互動使得瀏覽器可以處理使用者的資料。

<form  method=”資料傳送的方式（get/post）action=”瀏覽器輸入的資料被傳送到的地方，如一個 PHP 頁面（save。php）””

<label  for="username">使用者名稱：</label>

<input type="text" name="username" id="username" value="" />

<label  for="pass">密碼：</label>

<input type="password" name="pass" id="pass" value="" /> 瀏覽器顯示：   使用者名稱： 肯定存，啊 密碼：

表單文字輸入框，密碼輸入框：<form><input  type=”text/password”

name=”名稱（以備後臺使用）” value=“文字（設定預設值，提示作用）”>

文本域的多行輸入：<textarearows（height）=”行數” cols（width）

=”列數”>文字</textarea>

單選框，復選框：<input type=”radio（單選框）/checkbox（復選框）”

value=”  值 ” name=”  名 稱 ” checked=  “  checked  ”  /> 當 設 置

checked=”checked”時，該選項被預設選中。同一組按鈕，name 取值必須相同。

下拉選單框<select>：<label> XX </label>

<select>

<option value=”讀書” selected=”selected（被默認選中）”>讀書</option></select>

提交按鈕  submit：<input  type=”submit”  value=”提交”>重置按鈕  reset：<input  type=”reset”  value=”重置”>

<label>：<label for=”控制元件id 名稱”>慢跑  </label>

<input  type=”checkbox”  name=”gender”  id=”jogging”  />

for 屬性的值與id 屬性值一定要相同。

Placeholder：<input  type=”email”  id=”email”  placeholder=”Enter  email”>該提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。

CSS 樣式：定義文字的顯示樣式，如字型大小（font-size），顏色（color），加粗（font-weight：bold）等。

註釋語句：/*註釋語句*/。

內聯式 CSS 樣式：<p  style=”color：red  ；  font-size：12px”>紅色字體</p>

嵌入式 CSS 樣式：<style  type=”text/css”>span{  }</style>

外部式 CSS 樣式：在head 裡寫：<link href=”XX。css” rel=”stylesheet”

type=”text/css”>，在XX。css 裡寫：span{  }

三種方式的優先順序：相同權值下，內聯式  >嵌入式  >外部式。但是，嵌入式 >外部式的前提為嵌入式的位置一定在外部式的後面。

選擇器：每一條CSS 樣式定義由兩部分組成：選擇器{樣式；} 

標籤選擇器：如<html>，<body>，<h1>，<img>，<p  font，，>。

類選擇器：。類選擇名稱（可任意起名，。XX）{css 樣式程式碼；} -> <span class=”XX”></span>

ID 選擇器：#類選擇名稱（可任意，#XX）{css 樣式程式碼；} -><span

id=”XX”></span>只能在文件中使用一次。

“>”子選擇器：用於選擇指定標籤元素的第一代子元素。【直接後代】 first>span{border：1px  solid  red；}  <span>我還是一個<span>膽小如鼠</span>的小女孩</span>

包含（後代）選擇器：加入空格，用於選擇指定標籤元素下的後輩元素。【所有子後代元素】

通用選擇器：由一個*指定，匹配html 中所有標籤元素。在style 裡：

*{color：red；}

偽類選擇符  “  ：hover”：它允許給html 不存在的標籤（標籤的某種狀態）設定樣式。 a：hover{color：red；}滑鼠滑過時字型變為紅色。

分組選擇符  “  ，”：為多個標籤元素設定同一個樣式。  如h1，p{  }。

繼承：有些樣式具有繼承性如color，有些不具有如border。具有繼承性的允許樣式不僅應用於某個特定 html 標籤元素，而且應用於其後代。

權值：標籤的權值為1，類選擇符的權值為10，ID 選擇符的權值最高為 100。

p{color：red；} /*權值為1*/

p span{color：green；} /*權值為1+1=2*/

。warning{color：white；} /*權值為10*/

p span。warning{color：purple；} /*權值為1+1+10=12*/

#footer 。note p{color：yellow；} /*權值為100+10+1=111*/ 特殊性：繼承也有權值，但是隻有0。1 最低。

層疊：當有相同權重值時，後面的樣式會覆蓋前面的樣式。

重要性 ！important ：p{color：red！important；}這時p 段落中的文字會顯示紅色。！important 要寫在分號前面。

 




相關文章