前端零基礎教學開始第一天 01 -day

時間  2019-11-26
標籤 前端 零基礎 教學 開始 第一天 day 简体版
原文   原文鏈接

引言： 我所教授的前端知識適用於純小白，零基礎。之後將來發展方向是前端領域，須要系統學習的人，從零到1的人 轉載需備註地址---- 我是（我想靜靜）一個要把代碼寫出藝術感的人！ 寫代碼的男人很帥氣！php

學習注意： 加星 都是重點

一、web 標準是什麼？ 三個東西 一、 結構 二、表現 三、行爲css

DOCTYPE html  是什麼 是聲明文檔類型 如今是HTML5 
<!DOCTYPE html>  
    Lang 是語言信息
<html lang=「en"> head 頭 <head> head 裏面的全部東西 都是給瀏覽器看的 meta 元信息 charset 是 字符集 utf-8 字符集編碼 <meta charset=「UTF-8">  
	 title 標題   
	<title>Document</title>
</head>
<body>
	body 是給用戶看的主體，全部給用戶看的都在body 裏面
</body>
</html>
複製代碼

謹記 ：用戶只會關心 body 裏面的內容html

標籤的學習 ：

標題標籤前端

<h1> -<h6> h1 標籤最好只寫一次
複製代碼
<!-- 決定了頁面全部的a標籤 超連接打開方式 -->
  <base target="_blank">
  <!----> 這是註釋 --> 
  本人Mac電腦是 command + 斜槓 /
  &nbsp 是空格 符號 由於在html5 裏面不管增長多少空格只會顯示一個因此須要使用&nbsp   按住 shift + 7 能夠打出來
&lt; 小於號 
&gt; 大於號
&yen; 人民幣
## 文件夾路徑： 上一級 ../ 下一級 / 很是重要路徑問題 新手容易犯的錯不少在路徑上
div  span 是沒有語義的 咱們網頁佈局主要的2個盒子 想必聽過 css + div 
div就是 divsion 的縮寫
div 獨佔一行 
span  跨度範圍
標籤語義化： 合適的地方給一個最爲合理的標籤
複製代碼

hr 是水平線標籤html5

P 是段落標籤web

br 是換行瀏覽器

Strong 與 b 是文字加粗安全

em 與 i 文字傾斜bash

Del 與 s 是刪除線編輯器

Ins 與 u 是下劃線

Sup 是 上標 使用以下 5 2

sub 是 下標 使用以下 5 2 

圖片標籤  src 圖片的來源  title 提示文本  alt 替換文本，在圖標不顯示時候顯示 width 寬  
 height 高  border 邊框 
<img src="" title="" alt="" width="" height=""  border="">
複製代碼
href 連接的路徑   title 提示文本   target="_blank" 打開的方式_blacnk是在新窗口打開，原窗口不關閉
<a href="" title="" target="_blank"></a>

<a href="#"> 空鏈接</a>
複製代碼
<!-- 增長錨點 -->
  <a href="#bottom">去底部</a>
   <p id="top">
   	據東北新聞網報道 記者從有關部門獲悉，加拿大公民邁克爾，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動，於2018年12月10日，被遼寧省丹東市國家安全局依法審查。目前，案件正在審理中。
	另據環球網消息，邁克爾的公司此前剛剛將一些遊客和冰球運動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名。
	據東北新聞網報道 記者從有關部門獲悉，加拿大公民邁克爾，英文名：Spavor Michael Peter
   </p>
	<p>據東北新聞網報道 記者從有關部門獲悉，加拿大公民邁克爾，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動，於2018年12月10日，被遼寧省丹東市國家安全局依法審查。目前，案件正在審理中。
	另據環球網消息，邁克爾的公司此前剛剛將一些遊客和冰球運動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名。
	</p>
	<p>據東北新聞網報道 記者從有關部門獲悉，加拿大公民邁克爾，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動，於2018年12月10日，被遼寧省丹東市國家安全局依法審查。目前，案件正在審理中。
	另據環球網消息，邁克爾的公司此前剛剛將一些遊客和冰球運動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名。</p>
	<p id="bottom">
	據東北新聞網報道 記者從有關部門獲悉，加拿大公民邁克爾，英文名：Spavor Michael Peter Todd，因涉嫌從事危害中國國家安全的活動，於2018年12月10日，被遼寧省丹東市國家安全局依法審查。目前，案件正在審理中。
	另據環球網消息，邁克爾的公司此前剛剛將一些遊客和冰球運動員送往朝鮮。他本人也因幫助前NBA球星羅德曼訪問朝鮮而聞名。
	</p>
	<a href="#top">去頂部</a>
複製代碼

關於編輯器Sublime 的使用

！+tab 基本機構
標籤加單詞 自動補全
com + shift + D 快速複製一行
com + shift + k 快速刪除一行
com + shift + 上箭頭 上移動
com + shift + 下箭頭 下移動
com + 鼠標左鍵單機 集體編輯
com + f 快速 查找 
com + l  快速選中
com + B + k 快速 隱藏側邊欄
複製代碼

關於列表 : 一共三種

一、無序列表 ul 無序列表沒有順序之分

二、有序列表

三、自定義列表

** ** ul 裏面 只能嵌套 li li裏面能夠容納嵌套任意標籤 p div 等等

<ul> <!--  無序列表 -->
  	<li></li> <!--  li 就是列表項  -->
  	<li></li>
  </ul>
複製代碼
<!-- 有序列表 工做中使用較少  -->
 <ol>
 	<li>列表項</li>
 	<li>列表項</li>
 	<li>列表項</li>
 </ol>	

複製代碼
<!--自定義列表 多用於底部展現 footer   -->
 <dl>
 	<dt>**自定義列表的標題**</dt>
 	<dd>解釋項</dd>
 	<dd>解釋項</dd>
 	<dd>解釋項</dd>
 </dl>
複製代碼

table表格

表格經常使用處理，顯示錶格式數據

<!-- 表格  -->
cellspacing ="默認是兩個2 能夠改爲0就會沒有邊線，設置單元格與單元格邊框之間的空白間距"
cellpadding ="能夠給表格加 cellpadding 表格內容距離邊框的距離"
align="" 設置表格在網頁中的水平對齊方式  有 left  center  right
align對齊方式，能夠給table 和tr 加 給 table 加就是整個表格對齊方式，給tr加就是 內容 對齊的方式
th是表頭
caption 表格的標題與表格是一體的，必須緊隨table 以後增長，只能有一個居中在表格之上
表格若是去掉寬，高有必定的默認距離 
table  tr  td 用來建立表格的基本標籤 
td 裏面能夠嵌套任意標籤

table>tr*5>td*3 表格的快速簡寫方式  table 裏面包含 tr 有5個 tr裏面有td td有三個 

<table width="" height="" border="" cellspacing="2" cellpadding="10">
    <caption>表格的標題</caption>
	<!-- tr 是行  -->
	<tr>
	    <th>有語義化</th>給SEO 用的
	</tr>
	<tr>
	    <!-- td 是單元格 -->
            <td></td>
	    <td></td>
	</tr>	
</table>
複製代碼
增長 thead  與 tbody  都是爲了seo  搜索  tfoot 有兼容問題 
<table>
		<thead>   表格頭部 thead 
			<tr>
				<td></td>
			</tr>
		</thead>
		<tbody>  表格 身體 tbody 
			<tr>
				<td></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>tfoot 多數是不使用的由於 有瀏覽器兼容問題</td>
			</tr>
		</tfoot>
	</table>
複製代碼

table 表格 合併單元格

<!-- 跨行合併 rowspan   垂直合併 也叫跨行合併 --> 
<!-- 跨列合併 colspan   水平合併也叫跨列合併 -->
複製代碼

合併單元格的思想 ： 將多個內容合併的時候，就會有多餘的東西，把他刪除，列如把3個td 合併成一個，那就多餘了2個 須要刪除 公式 ： 刪除的個數 = 合併的個數 -1

<table width="800" height="400" cellspacing="0" border="1" align="center"  >
		<!-- 跨行合併 rowspan   垂直合併 --> 
		<!-- 跨列合併 colspan   水平合併-->
		<tr>
			<td colspan="4"></td>
			注意：在colspan以後 後面的3個 td 都要刪除掉 
			<!--<td></td>-->
			<!--<td></td>-->
			<!--<td></td>-->
		</tr>
		<tr>
			<td rwospan="2"></td> 跨行合併 須要刪除下面tr 裏面相同部位的td 
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<!--<td></td>-->
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<!--<td></td>-->
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>	
複製代碼

form input的表單提交 重要

method  一共兩種 方法 get 和post  
get 提交的方式會在 瀏覽器地址欄顯示
post 不會顯示
action 做用就是 收集的信息交給誰處理
method 信息提交的方法
下面是演示代碼
複製代碼
<form action="1.php" method="get" >
		姓名：<input type="text" name="userName"> <br>
		密碼：<input type="password" name="pwd"> <br>
		<input type="submit" name="">	
	</form>
複製代碼
method  一共兩種 方法 get 和post  
複製代碼
<form action="2.php" method="post" >
		姓名：<input type="text" name="userName"> <br>
		密碼：<input type="password" name="pwd"> <br>
		<input type="submit" name="">	
	</form>
複製代碼
<form action="1.php" method="post">
		<!-- 
			單行文本輸入框 
			name 表單的名字 ，這樣後臺能夠經過這個name屬性找到這個表單，頁面中的表單不少，name 主要做用就是用於區別不一樣的表單
			value 就是表單內的默認值
			maxlength 最長字符數是 6 限制用戶輸入 固定的就是6 
			size 能夠輸入的字符長度
		-->
暱稱： <input type="text" name="userName" value="默認值" maxlength="6" size="30"> <br>
密碼： <input type="password" name="pwd">			
	</form>
複製代碼

單選框

男 女 
<form action="1.php" method="post">
	<!-- 性別單選按鈕 若是想要實現單選效果，必須把 name 裏面的值設置爲相同的 -->
	<!-- 添加默認選中選項 checked = "checked" -->
	男 <input type="radio" name="gender" >
	女 <input type="radio" name="gender" checked="checked">		
</form>
複製代碼

複選框 也叫多選框

愛好： 吸菸 喝酒 燙頭 
<form action="1.php" method="post">
	<!-- 多選框 checkbox  也能夠添加 默認選中 checked   -->
	愛好： <input type="checkbox" name=""> 吸菸
	     <input type="checkbox" name="">喝酒
	     <input type="checkbox" name="" checked="checked">燙頭
</form>
複製代碼

文本域 多用於評論 textarea 控件能夠輕鬆的建立多行文本輸入框

cols 每行中能夠輸入的字符數
rows 顯示的行數

<textarea name="" cols="30" rows="10">
	
</textarea>
複製代碼

select 下拉菜單

出生日期 

<!--option是下拉菜單選項 -->
<select name="" id="">
	<option value=""> 1991</option> 
	<option value=""> 1992</option> 
	<option value=""> 1993</option> 
</select>
複製代碼

文件上傳控件

file就是文件的意思 上傳信息 ： 

<input type="file">
複製代碼

label標籤提高用戶使用

用於綁定一個表單元素，當點擊label 標籤的時候，被綁定的表單元素就會得到輸入焦點 包裹的 input， 在點擊 請輸入後會在input 裏面有提示 是把請輸入綁定在了 input 上面

第一種用法

<label> 
	<!-- 第一種方法 -->
	請輸入<input type="text" name="" value="這個是label標籤">
</label>
複製代碼

第二種方法

經過for把 input 的id 綁定在了一塊兒點擊姓名

沒有生效須要瀏覽器試驗！

<label for="user">姓名：</label> <input type="text" id="user">
複製代碼

按鈕系列 重要





<!-- 普通按鈕 -->
<!-- 普通按鈕 配合js 使用  -->
<button>普通按鈕</button>	<br>
<input type="button" value="普通按鈕"> <br>

<!-- 圖片按鈕 -->
<!-- 圖片按鈕能夠 提交 src 圖片來源 -->
<input type="image"  src=""> <br>

<!-- 重置按鈕 -->
<!-- 重置按鈕 能夠 恢復到默認狀態  -->
<input type="reset">
複製代碼

當初自學第一天與次日課程

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程