前端學習之路-CSS介紹，Html介紹，JavaScript介紹

最後更新：2018-08-10 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：define html doc text 弱類型掌握 htm null 增量

CSS介紹

學前端必備掌握CSS樣式，css為層疊樣式表，用來定義頁面的顯示效果，加強使用者的體驗樂趣，那麼如何用css到html中呢？

style屬性方式

利用標籤中的style屬性來改變顯示樣式

<p style="background-color: #FFF000"> p標籤</p>

在head中加入style標籤

<head> <style type=”text/css”>  p { color: #FFF000;} </style></head>

連結方式

<link rel="stylesheet" type="text/css" href="head.css" media="screen" />

總結CSS

選取器名稱 {
屬性名稱：屬性值；
…….
}

屬性與屬性之間用分號隔開
屬性與屬性值用冒號串連

選取器

class選取器
id選取器

. class
# id

Html

html為超文字標記語言 (HTML)，通過標籤來定義的語言，代碼不用區分大小寫。

頭標籤

<head></head><title>：指定瀏覽器中標題列顯示的內容。<meta>：網頁的描述資訊。

在標籤中常用：

字型

<font size=5 color=red>標題標籤：<h1><h2>…..<h6>

列表

<dl> <dt>名稱</dt>  <dd>Tom</dd> <dt>名稱</dt>  <dd>Tom</dd></dl>

<ol> <ul> <li>

映像

映像標籤：<img>映像地圖：<map>

表格

表格標籤：<table>標題<caption> 表頭<th> 行<tr> 儲存格<td>

<table border="1" width=”100%”>    <caption>表格標題</caption>    <tr algin=”center”>        <th>姓名</th>        <th>年齡</th>    </tr>    <tr algin=”center”>        <td>dashucoding</td>        <td>10</td>    </tr></table>

超連結

超連結<a href=””>錨點<a href=”#標記”>

表單

文字框 text
密碼框 password
單選框 radio
複選框 checkbox
提交按鈕 submit
重設按鈕 reset
按鈕 button
映像 image

JavaScript介紹

JavaScript是基於對象和事件驅動的指令碼語言，為html提供資訊的動態互動，安全性高，跨平台性強。JS是基於對象，且是弱類型。

引入：

將JavaScript指令碼代碼嵌入到HTML文檔中

<script language="javascript" type="text/javascript">    document.write("歡迎來到JavaScript世界！");</script>

<script language="javascript" src="javascript.js"></script>

<input type="button" name="mybtn" value="偽URL引入" onclick="javascript:alert('按一下滑鼠！')"> <script language="javascript" type="text/javascript">function clickme(){    alert("按一下滑鼠！");}</script><form name="myform">   <input type="button" name="mybtn" value="按鈕" onclick="clickme()"></form>

指令碼代碼的位置

在<head></head>標記對之間放置
在<body></body>標記對之間放置

變數

變數名以字母或底線（"_"）開頭
變數可以包含數字、從 A 至 Z 的大小寫字母
JavaScript區分大小寫

變數的聲明和賦值

定義變數：var name;
賦值：name = dashucoding;

常量

整型
浮點型
字串型
資料類型
弱類型，區分大小寫

數值型

整型、浮點型
字串型
單引號或雙引號引起來
布爾型
true, false
Null、undefined

運算子

算術運算子

+、-、 * 、 / 、%、++、--

比較子

==、!=、>、>=、<、<=

邏輯運算子

&&、||、！

條件運算子

？：

函數

function  函數名(參數...){    執行語句；    return 傳回值；}

數組

var arr = new Array();

for(var x=0; x<arr.length; x++){    alert(arr[x]);}

迴圈語句

for語句
while語句
for…in語句
中斷迴圈語句

for(初始化;  條件;  增量){    語句;}

while(條件){                                      語句;             }

for(變數  in  對象){    語句;}

結語

本文主要講解?前端學習之路-CSS介紹，Html介紹，JavaScript介紹
下面我將繼續對Java、?Android中的其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

前端學習之路-CSS介紹，Html介紹，JavaScript介紹

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More