Day02 HTML

接下來的30天喜不喜歡都要過,為什么不做一件想做的事情呢?

  • 無序列表Unordered List:使用<ul>...</ul>標簽創建。
  <ul>
    <li>Apple</li>    <!--每一個li標簽都是無序序列的一項-->
    <li>Mi</li>
    <li>Meizu</li>
    ...
  </ul>

同理,有序序列Order List:使用<ol>...</ol>標簽創建。

  <ol>
    <li>Apple</li>    <!--每一個li標簽都是無序序列的一項-->
    <li>Mi</li>
    <li>Meizu</li>
    ...
  </ol>
  • <form>...</form>標簽可以創建表單,通過表單的action屬性可以使表單與服務器進行交互,action的值指定了接受表單數據服務器的地址。
<form action = "url you want to submit form data">...</form>
  • 表單中的文本輸入框(Text Input):用來獲取用戶輸入的文本框。
  <input type = "text">             <!-- type = "text" 表示輸入框的類型是文本-->

注:input自封閉的標簽,無需結束標記。
占位符(Placeholder Text):在input輸入框中,用戶輸入之前默認顯示的內容。使用input標簽的placeholder屬性可以指定默認的內容。

  <input type = "text" placeholder = "the default content">

必填屬性(required):使文本框必須填寫,如果不填,在點擊提交的時候會提示請輸入內容,否則不能提交。

  <input type = "text" placeholder = "the default content" required>
  • 提交按鈕(Submit Button):點擊提交按鈕,表單中的數據將會發送到form標簽action屬性指定地址的服務器上。
  <button type = "submit">確認</button>   <!-- submit按鈕一般緊跟文本輸入框 -->
  • 單選按鈕(Radio):輸入框的一種,只是type = radio。每個單選選項需要嵌套在自己的label標簽中,用來顯示按鈕上的內容。
  <label><input type = "radio" name = "food" >Rice</label>
  <label><input type = "radio" name = "food" >Noodle</label>
  <label><input type = "radio" name = "food" >Bread</label>

注:相關聯的一組單選選項必須有相同的name屬性!

  • 復選按鈕(Checkbox):輸入框的另一種類型,每個復選選項需要嵌套在自己的label標簽中,用來顯示按鈕上的內容。
  <label><input type = "checkbox" name = "food" >Rice</label>
  <label><input type = "checkbox" name = "food" >Noodle</label>
  <label><input type = "checkbox" name = "food" >Bread</label>

注:同理,相關聯的復選按鈕需要相同的name屬性!

  • Radio和Checkbox默認選中:checked屬性。
  <label><input type = "radio" name = "food" >Rice</label>
  <label><input type = "radio" name = "food" >Noodle</label checked>
  <label><input type = "radio" name = "food" >Bread</label>

注:默認選擇的是Noodle。

div元素

指division(層)元素,用于盛裝其他元素的通用容器,類似于PS中層的概念。每個div元素中的內容都是相互獨立。

可以利用CSS繼承關系,將div上的CSS傳給它的所有子元素。

  • 使用class類選擇器為一個div元素設置背景:
  <styel>
    .green-background {background-color: green;}
</style>

調用背景樣式:

  <div class = "green-background">...</div>
  • HTML元素的id屬性
    id屬性與class屬性類似,可以聲明選擇器,并且優先級高于類選擇器。HTML元素中id屬性是唯一的!
   #cat-photo-app {background-color: gray;}

類選擇器使用.前綴聲明,id選擇器用#前綴聲明。id選擇器的調用與類選擇器相同,在HTML標簽中是屬性id的值為id選擇器的名稱,但是去掉#

  <h2 id = "cat-photo-app">...</h2>

布局

HTML元素本質上是html頁面上小塊的矩形,代表頁面上的一小塊區域。影響HTML元素布局的三個重要屬性:margin外邊距、padding內邊距、border邊框。

  • padding屬性:控制元素內容與元素邊框之間的距離。
    四周邊距相同,CSS中樣式描述:
    .red-box {padding: 10px;}     /*用像素描述*/

四周邊距不等:

    .red-box {padding-top: 10px;   /*上邊距*/
              padding-right:20px;       /*右邊距*/
              padding-bottom:30px;   /*下邊距*/
              padding-left: 40px;}       /*左邊距*/

注:上述寫法可以簡寫:

    .red-box {padding: 10px 20px 30px 40px;}   /*按照上、右、下、左順時針填寫*/
  • margin屬性:控制元素邊框和元素所占實際空間的距離。
    四周邊距相等,CSS樣式描述:
    .red-box {margin: 10px;}     /*用像素描述*/

四周邊距不等:

    .red-box {margin-top: 10px;   /*上邊距*/
              margin-right:20px;       /*右邊距*/
              margin-bottom:30px;   /*下邊距*/
              margin-left: 40px;}       /*左邊距*/

注:上述寫法可以簡寫:

    .red-box {margin: 10px 20px 30px 40px;}   /*按照上、右、下、左順時針填寫*/

注:如果margin為負值,元素所占區域將會變大!

CSS的繼承

每個html頁面均有唯一的<body>...</body>元素,其余所有HTML元素均是body元素的子元素。

body元素可以應用CSS樣式,其內的所有子元素都將繼承body元素的樣式。使用選擇器為子元素重新賦予CSS樣式時,會覆蓋掉body元素繼承的樣式。

選擇器的優先級:
!important > id > class > element
注:其上四個均會覆蓋的從body繼承的樣式。

  • 相同類別的選擇器,優先級遵從就近原則:樣式聲明的位置越靠下,里應用樣式的HTML元素越近,優先級越高。
  <style>
    .blue-text {color: blue;}
    .red-text{color: red;}
</style>
    <h2 class = "blue-text red-text">...</h2>

注:h2元素應用的樣式為red-text,就近原則。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,599評論 32 459
  • 本課來自http://www.imooc.com/learn/9請不要用作商業用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,308評論 0 5
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,172評論 0 40
  • 一幢幢西方式的建筑訴說了上海曾經的“滿目瘡痍” 高樓大廈也在比著誰高,仿佛一個個不甘落后的競技者。 還好,夜晚的燈...
    至少上帝在看呢閱讀 251評論 2 2