標簽分類

block（塊級標簽）——自己獨占一行

inline（內聯標簽）——按內容劃分

HTML 不是一種編程語言，而是一種標記語言 (markup language)
HTML 使用標記標簽來描述網頁

<!DOCTYPE html> 告訴瀏覽器使用什么樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

標簽的語法：

閉合標簽、自閉合標簽

<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標簽名>
<標簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

標簽嵌套：

塊級標簽和嵌套塊級標簽和內聯標簽

內聯標簽只能嵌套內聯標簽

head常用標簽

<meta>標簽

meta介紹
<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位于文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。

(1)name屬性: 主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
 
<meta name="description" content="老男孩培訓機構是由一個很老的男孩創建的">

(2)http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引號，分別在秒數的前面和網址的后面)
 
<meta http-equiv="content-Type" charset=UTF8">
 
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

非meta標簽

    <title>oldboy</title>
    <link rel="icon" >
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

body常用標簽

基本標簽（塊級標簽和內聯標簽）

'''
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.

<b> <strong>: 加粗標簽.

<strike>: 為文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

特殊字符：
      &lt; &gt；&quot；&copy;&reg;

'''

<div>和<span>

<div></div> ： <div>只是一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.

塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。

圖形標簽: <img>

'''
src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

'''

超鏈接標簽(錨標簽): <a> </a>

什么是超級鏈接？
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上
的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

<a href="" target="_blank" >click</a>

href屬性指定目標網頁地址。該地址可以有幾種類型：

    絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）

'''

列表標簽

'''
<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

'''

表格標簽: <table>

表格概念
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
表格的基本結構：

<table>
         <tr>
                <td>標題</td>
                <td>標題</td>
         </tr>
         
         <tr>
                <td>內容</td>
                <td>內容</td>
         </tr>
</table>

屬性：

'''

<tr>: table row

<th>: table head cell

<td>: table data cell


屬性:

    border: 表格邊框.

    cellpadding: 內邊距

    cellspacing: 外邊距.

    width: 像素 百分比.（最好通過css來設置長寬）

    rowspan:  單元格豎跨多少行

    colspan:  單元格橫跨多少列（即合并單元格）

'''

表單標簽: <form>

功能：表單用于向服務器傳輸數據，從而實現用戶與Web服務器的交互

表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label標簽。

表單屬性

action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的提交方式 post/get默認取值就是get

表單元素

基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息

<input>系列標簽

'''
<1> 表單類型

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(需要配合js使用.) button和submit的區別？

             file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 
            
            上傳文件注意兩點：

                     1 請求方式必須是post
                     2 enctype="multipart/form-data"

 <2> 表單屬性

 name:    表單提交項的鍵.

           注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；
           而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的

value:    表單提交項的值.對于不同的輸入類型，value 屬性的用法也不同：

                type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
                type="text", "password", "hidden" - 定義輸入字段的初始值
                 
                type="checkbox", "radio", "image" - 定義與輸入相關聯的值


checked:  radio 和 checkbox 默認被選中

readonly: 只讀. text 和 password

disabled: 對所用input都好使.

'''
lable標簽 ：為文本和輸入框綁定關系，點擊文本，光標可以選中輸入框

<label for="c1">姓名1：</label>
<p>姓名2：<input type="text" name="name" placeholder="username" id="c1"></p>

select標簽

'''
 <select> 下拉選標簽屬性


          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 
                 <optgroup>為每一項加上分組

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

'''

<textarea> 多行文本框

'''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=“寬度” rows=“高度” name=“名稱”>
                   默認內容
        </textarea>
</form>

'''

<label>標簽

定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。

'''

<form method="post" action="">

        <label for=“username”>用戶名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>

'''

<fieldset>標簽

'''

<fieldset>
    <legend>登錄吧</legend>
    <input type="text">
</fieldset>

'''

前端之CSS

CSS 語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

'''
        selector {
                  property: value;
                  property: value;
             ...  property: value
         
          }
         
'''

例如：

1	`h1 {color:red; font-size:14px;}`

css的四種引入方式

1.行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

<p style=

" padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan<

/p>

2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3 鏈接式

將一個.css文件引入到HTML文件中

1	`<link href="mystyle.css"` `rel="stylesheet"` `type="text/css"/>`

4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：

<style type="text/css">
 
          @import"mystyle.css"; 此處要注意.css文件的路徑
 
</style>　

注意：

導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。

css選擇器

基本選擇器

組合選擇器

E,F   多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔      :div,p { color:#f00; }
 
E F   后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素選擇器，匹配所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟選擇器（以破折號分隔）                 :.div1 ~ p{font-size: 30px; }

注意，關于標簽嵌套：

一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要注意的是，p標簽不能包含塊級標簽。

屬性選擇器

E[att]          匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 
E[att=val]      匹配所有att屬性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
E[att~=val]     匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配屬性值以指定值開頭的每個元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配屬性值以指定值結尾的每個元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配屬性值中包含指定值的每個元素    div[class*="test"]{background:#ffff00;}

posted on 2017-10-01 19:25 小白凹凸曼閱讀(138) 評論(0) 收藏舉報

刷新頁面返回頂部