Web | 一小時看懂前端語法
自從H5出來之後,web前端的勢頭好像就有點燎原之勢。國內網際網路的發展就是這樣,像之前的移動App(iOS、Android),簡直是火的一塌糊塗。所以不管是培訓機構也好,自學成才也好,都是一種途徑,能掌握好就是道理。
其他的不多說,直接步入主題,且看娓娓道來。
- 前端認識
Web前端,將效果圖生成網頁,結合Html+Css+Js等技術;網頁由文字、圖片、輸入框、視訊、音訊、超連結等組成。
型別 | 例項 | |
---|---|---|
Html | 網頁結構 | 人的肢體結構 |
Css | 美化樣式 | 穿漂亮衣服,化妝 |
Js | 行為事件 | 看見喜歡的就開心、看電視 |
- 兩大關鍵
瀏覽器
網頁的載體就是瀏覽器,現有的比較主流的瀏覽器包括IE、火狐、谷歌、Safari、騰訊、Opera等等。
URL
URL,也就是網頁的地址。比如https://www.baidu.com
- 開發工具
現在主流的web開發工具一般用sublime、webstorm。
- HTML基礎
HTML,是Hyper Text Markup Language 的縮寫,俗稱超文字標記語言。
<!DOCTYPE html> //宣告文件標籤
<html lang="en"> //根標籤
<head> //頭標籤
<meta charset="UTF-8"> //轉碼格式
<title>Document</title> //標題標籤
</head>
<body> //主體標籤
</body>
</html>
- 標籤分類
<br> //單標籤
<body></body> //雙標籤
<p></p> //雙標籤
- 文字標籤
<p>段落標籤</p>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<font size="6" color="red">文字標籤</font>
<strong>文字加粗標籤</strong>
<b>文字加粗標籤</b>
<em>文字傾斜標籤</em>
<i>文字傾斜標籤</i>
<del>刪除線標籤</del>
<s>刪除線標籤</s>
<ins>下劃線標籤</ins>
<u>下劃線標籤</u>
![](圖片連結地址)
<a href="連結路徑" title="提示文字" target="開啟方式">超連結</a>
- 三種列表
//有序列表
<ul type="circle">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ul>
// 無序列表
<ol type="1">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ol>
//自定義列表
<dl>
<dt>小標題</dt>
<dd>自定義列表</dd>
<dd>自定義列表</dd>
</dl>
- 表格
//四行三列表格
<table>
<tr> //行
<td>四行三列表格</td> //列
<td>四行三列表格</td>
<td>四行三列表格</td>
</tr>
<tr>
<td>四行三列表格</td>
<td>四行三列表格</td>
<td>四行三列表格</td>
</tr>
<tr>
<td>四行三列表格</td>
<td>四行三列表格</td>
<td>四行三列表格</td>
</tr>
<tr>
<td>四行三列表格</td>
<td>四行三列表格</td>
<td>四行三列表格</td>
</tr>
</table>
- 表單標籤
<form action="處理資訊" method="回撥方法 get/post">
使用者名稱:<input type="text" name="輸入框名稱" value="輸入框內容">
密碼:<input type="password" name="密碼輸入框">
//單選框
<input type="radio" name="" checked="checked">男
<input type="radio" name="">女
//下拉選單
<select>
<option value="">湖南</option>
<option value="">湖北</option>
</select>
// 多選框
<input type="checkbox" name="">喝酒
<input type="checkbox" name="">看電影
<input type="checkbox" name="">吃飯
//多行文字框
<textarea cols="輸入字元長度" rows="行數"></textarea>
//提交按鈕
<input type="submit" name="">
//普通按鈕
<input type="button" name="">
//重置按鈕
<input type="reset" name="">
</form>
- CSS基礎
Css概念:層疊樣式表(Cascading Style Sheets),用力愛美化HTML標籤。
兩種寫法:
//外鏈式寫法
<link rel="stylesheet" href="1.css">
//內嵌樣式表
<style type="text/css">在這裡寫入</style>
Css是以選擇器的形式出現,對網頁結構進行美化。
選擇器{屬性:值;屬性:值}
屬性 | 釋義 |
---|---|
Width | 寬 |
Height | 高 |
background-color | 背景顏色 |
font-size | 文字大小 |
text-align | 內容水平對齊方式 |
text-indent | 首行縮排 |
color | 文字顏色 |
- 選擇器型別
- 標籤選擇器:使用該標籤的都生效。
標籤名{屬性:值} - 類選擇器:呼叫者生效。
.類名{屬性:值} - ID選擇器:呼叫生效,但是一個頁面只能呼叫一次。
//#ID名{屬性:值} (這裡井號會變成大標題,所以我加了註釋//) - 萬用字元選擇器:所有標籤都會生效。
*{屬性:值} - 交集選擇器:兩個或者以上選擇器通過不同方式連線在一起。
標籤名.類名{屬性:值}
標籤#ID名{屬性:值}
6.後代選擇器:滿足包含關係,無限制隔代也可以,標籤選擇器、類選擇器、ID選擇器都可以自有組合。
標籤名 標籤名 類名{屬性:值} - 並集選擇器。
選擇器,選擇器,選擇器{屬性:值}
- 顯示方式
塊元素:獨佔一行,可以設定寬高,例如div、h1、p等。
行內元素:會在一行依次顯示,不能設定寬高,自適應內容,例如span、a、strong等。
行內塊元素:可以依次一行顯示,並且可以設定寬高,例如input、img等。
這些相互之間可以進行互相轉化,常用的是將元素轉化為行內塊元素。
span{
display:inline-block;
}
- 連結偽類
//預設狀態
a{
color:red;
}
//連結訪問之後的狀態
a:visited{
color:green;
}
//滑鼠放到連結上顯示的狀態
a:hover{
color:yellow;
}
//連結啟用的狀態
a:active{
color:pink;
}
- 盒子模型
margin:外邊距
border:邊框
padding:內邊距
! 注意 盒子的寬度=定義的內容寬度+邊框寬度+左右內邊距
- JS基礎
Javascript是由網景公司和sun合作而作,是一款執行在客戶端的網頁程式語言。
- Ecmascipt 標準
- Dom 通過js操作網頁元素
- Bom 通過API操作瀏覽器
Js主要有兩種書寫方式:
//內嵌式
<script type="text/javascript"> </script>
//外鏈式
<script src="1.js"> </script>
- 資料型別
//十進位制表示
var n1=23;
//十六進位制
var n2=0x4322;
//八進位制
var n3=0432;
//字串
var str="你好";
var s='123';
//布林資料型別
var n1=12;
var n2=23;
n1==n2; //false
n1<n2; // true
- 函式
//方法的定義
function test(){
alert("nh");
}
//方法的呼叫
test();
相關文章
- 小白教程|一小時上手最流行的前端框架vue前端框架Vue
- Web前端 ---HTML語言表單Web前端HTML
- 好程式設計師web前端培訓分享JavaScript基礎語法程式設計師Web前端JavaScript
- 一小時的時間,上手 WebpackWeb
- 一小時入門ReactReact
- 前端必備!5大mock省時提效小tips,用了提前下班一小時前端Mock
- 好程式設計師web前端分享HTML基本結構和基本語法程式設計師Web前端HTML
- 5分鐘看懂,未來1年Web前端開發最新趨勢Web前端
- 前端的flutter之路(一):語法前端Flutter
- 一小時向非程式設計師介紹 R 程式語言程式設計師
- 前端測試框架Jest——語法篇前端框架
- web_前端開發JS框架篇-Vue基礎入門版-基礎語法Web前端JS框架Vue
- 為什麼Web前端語言只有JavaScript?Web前端JavaScript
- 一小時搞懂Mysql鎖機制MySql
- 一小時學會 C# 6.0C#
- web前端陣列塌陷的解決辦法Web前端陣列
- web路途-基礎的JavaScript語法概要WebJavaScript
- 前端工程化之路-語法檢查前端
- 前端進階之 JS 抽象語法樹前端JS抽象語法樹
- 前端進階之 Javascript 抽象語法樹前端JavaScript抽象語法樹
- 「前端」看懂前端腳手架你需要這篇webpack前端Web
- 好程式設計師web前端分享:如何理解web語義化?程式設計師Web前端
- 期末前端web大作業——用前端語言寫一個小遊戲前端Web遊戲
- 鴻蒙前端開發3-ArkTS語言基本語法鴻蒙前端
- 面向 Web 前端的原生語言總結手冊Web前端
- web 前端Web前端
- VuePress手把手一小時快速踩坑Vue
- 微軟程式設計一小時--Longest Repeated Sequence微軟程式設計
- 一小時內破解16位強密碼密碼
- 高階前端基礎-JavaScript抽象語法樹AST前端JavaScript抽象語法樹AST
- 前端框架VUE——資料繫結及模板語法前端框架Vue
- 前端入門9-JavaScript語法之運算子前端JavaScript
- 前端入門11-JavaScript語法之陣列前端JavaScript陣列
- 前端碼農之蛻變 — AST(抽象語法樹)前端AST抽象語法樹
- 廣州藍景分享-web前端開發語言介紹Web前端
- Oracle 建表時LOB欄位語法Oracle
- 把握安全事件響應的黃金一小時事件
- 一小時學會 C# 6 的新特性C#