初識前端

時間 2019-12-12

標籤前端简体版

原文原文鏈接

Html和css的關係javascript

學習web前端開發須要掌握：html，css，javascript等語言php

1， html是網頁內容的載體，內容就是網頁製做者放在頁面上想要讓用戶瀏覽的信息，能夠包括文字圖片，視頻等。css

2， css樣式是表現。就像網頁的外衣。好比標題字體，顏色變化，或爲標題加入背景圖片，邊框等。全部這些用來改變內容外觀的東西稱之爲表現html

3， javascript是用來實現網頁上的特效效果，如：鼠標滑過彈出下拉菜單。，鼠標滑過表格的背景顏色改變，焦點圖片的輪換，有動畫的，有交互的通常都是javascript來實現的前端

標籤的語法java

一、標籤由英文括號<和>括起來，如<html>就是一個標籤。程序員

二、 Html中標籤通常都是成對出現的，分開始標籤和結束標籤，結束標籤比開始標籤多了一個/。web

如：windows

（1）<p></p>後端

(2)<div></div>

(3) <span></span>

3,標籤與標籤之間是口蹄疫嵌套的，可是前後順序必須保持一致。

4 html標籤不區分大小寫，但建議小寫，由於大部分程序員都以小寫爲準

認識html文件基本結構

一個html文件是有本身固定的結構的

<html>

</html>

代碼講解：

1.<html></html>爲根目錄，全部的網頁標籤都在<html></html>中。

2<head>標籤用於定義文檔的頭部，它是多有頭部元素的內容器。頭部元素有<title>.<script>,<style>,<link>,<meta>等標籤

4，在<body>和</body>標籤之間的內容是網頁的主要內容。

認識head標籤

Head部分：

<head>

<meta>

<link>

</head>

<title>標籤：在<title></title>標籤之間的的文字是網頁的標題信息，他會出如今瀏覽器的標題的標題中。網頁的title標籤用於告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出網頁的主題。每一個網頁的內容都是不一樣的，每一個網頁都有獨一無二的title

瞭解html的代碼註釋

代碼註釋的做用是幫助程序員標註代碼的用途，過一段時間再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼註釋不只方便程序員回憶起之前代碼的用途，還能夠幫助其餘程序員很快的讀懂你的程序的功能，方便多人合做開發網頁代碼。

語法：

<!- -註釋文字- ->

語義化，讓你的網頁更好的被搜索引擎理解

明白每一個標籤的用途，文章的標題就是用標題標籤等

優勢：

1，更容易被搜索引擎收錄

2，更容易讓屏幕閱讀器讀出網頁內容

加入強調語氣，使用<strong>和<em>標籤

<em>表示強調,斜體表示<strong>更強烈的強調加粗形式

<span>單獨設置樣式

<q>引用標籤，表現形式是加入雙引號，簡短文本使用

<blockquote>表現是縮進形式引用標籤適用於長文本

<br /> 換行

&nbsp；空格

<code>插入代碼語言 <pre>插入多行代碼

列表

1，無序列表

<ul>

</ul>

2，有序列表

<ol>

</ol>

認識div在排版中的做用

在網頁製做過程當中，能夠單獨把一些獨立的邏輯劃分出來。放在一個<div>標籤中，這個<div>標籤的做用至關於一個容器

語法：

給div命名，使邏輯更加清晰

用id屬性來爲<div>提供惟一的名稱

Table 標籤，認識網頁上的表格

建立表格的四個元素：

table tbody tr th td

1,<table>….</table>:這個表格以<table>標記開始，</table>標記結束。

2<tbody>…</tbody>加上這些表格結構，tbody包含行的內容加載完優先顯示，沒必要等待表格結束後顯示，同時若是表格很長，用tbody分段，能夠一部分一部分地顯示

3，<tr>…</tr>:表格的一行，全部的幾對tr表格就幾行

4，<td>…</td>表格的一個單元格

5<th>…</th>頭部單元格

5，表格中列的個數，取決於一行中數據單元格的個數

用css樣式爲表格加入邊框

Table tr td,th{border:1px solid #000;}

</style>

Caption標籤，爲表格添加標題和摘要

摘要：

摘要的內容不會在瀏覽器中顯示出來，它的做用是增長表格可讀性

語法：<table summary=」表格簡介文本」>

標題

語法： <caption>標題文本</caption>

使用<a>標籤，連接到另外一個網頁

語法：<a href=」目標網址」 title=「鼠標滑過顯示的文本」>連接顯示的文本</a>‘

在新建瀏覽器窗口打開連接

語法：<a href=」目標網址「 target=」_blank」>顯示的文本</a>

使用mailto在網頁中連接Email地址

語法：<a href="mailto:yy@imooc.com?subject=主題名稱&body=郵件內容">

認識<img>標籤，爲網頁插入圖片

語法：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">、

使用表單標籤，與用戶交互

表單是能夠把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就能夠處理表單傳過來的數據

語法：

講解：

1.<form>:<form>標籤是成對出現的，以<form>開始，以</form>結束

1， action：瀏覽者輸入的數據被傳送到的地方，好比一個php頁面（save.php）

</form>

注意:

1、全部表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（不然用戶輸入的信息可提交不到服務器上哦！）。

2、method : post/get 的區別這一部份內容屬於後端程序員考慮的問題。感興趣的小夥伴能夠查看本小節的 wiki，裏面有詳細介紹。

文本輸入框，密碼輸入框

1. type :

當type = 「text」時，輸入框爲文本輸入框；

當type = 「password」，輸入框爲密碼輸入框

2. name：爲文本框命名，以備後臺程序使用

3. values：爲文本輸入框的默認值

文本域，支持多行文本輸入

當用戶須要在表單中輸入大段文字時，須要用到文本輸入域

語法：<textarea rows=」行數」 cols=「列數「></textarea>

1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標籤之間能夠輸入默認值。

舉例：

<form method="post" action="save.php"> <label>聯繫咱們</label> <textarea cols="50" rows="10" >在這裏輸入內容...</textarea> </form>

使用單選框、複選框，讓用戶選擇

一、type:

當 type="radio" 時，控件爲單選框

當 type="checkbox" 時，控件爲複選框

二、value：提交數據到服務器的值（後臺程序PHP使用）

三、name：爲控件命名，以備後臺程序 ASP、PHP 使用

四、checked：當設置 checked="checked" 時，該選項被默認選中

使用下拉列表框，節省空間

、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

</select>

使用下拉列表框進行多選

下拉列表也能夠進行多選操做，在<select>標籤中設置multiple="multiple"屬性，就能夠實現多選功能，在 windows 操做系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），能夠選擇多個選項。以下代碼：

</select>

</form>

使用提交按鈕，提交數據

</form>

使用重置按鈕，重置表單信息

</select>

</form>

form表單中的label標籤

<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /><br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /><label for="email">輸入你的郵箱地址</label> <input type="email" id="email"placeholder="Enter email"> </form>

相關標籤/搜索

每日一句

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