前端語言之HTML基礎語句
sublime text3怎麼快速生成html程式碼
Ctrl + N,新建一個文件。
Ctrl + Shift + P,開啟命令模式,再輸入 sshtml 進行模糊匹配,將語法切換到html模式。
輸入 !,再按下 Tab鍵或者 Ctrl + E ,就能快速開啟HTML5的整體結構。
一、什麼是html
html(超文字標記語言) 用於建立網頁的標準標記語言,可以直接由瀏覽器執行
二、常見的標籤
1.h類標籤
2.p標籤
3.圖片標籤
<img src="圖片地址"/>
4.a 標籤是超連結,點選可跳轉到其他的網頁
5.<div></div>標籤 是一個塊級標籤,相當於一個盒子
6.其他標籤
<br/> 換行
空格
<hr/> 水平分割線
<span></span> 與其他標籤在同一行,不換行
7.無序列表和有序列表
ul標籤type屬性 disc 實心圓 circle 空心圓 square 小方塊 ol標籤的type屬性 1 數字表示(1,2,3...) A 大寫字母表示(A,B,C...) A 小寫字母表示(a,b,c...) I 大寫羅馬數字表示(I,II,III…) i 小寫羅馬數字表示(i,ii,iii…) 8.樣式
三、表格
<caption> 表格標題 </caption>
<table>表格</table>
<th>表頭</th>
<tr>行</tr>
<td>列</td>
<table border="1"> 邊框
<table cellspacing="0"> 設定單元格與單元格之間的距離
<table cellpadding="2px"> 設定文字與單元格之間的距離
<table width="3px"> 設定表格的寬度
<table height="3px"> 設定表格的高度
<table bgcolor="green"> 背景顏色<th colspan="2">合併兩列</th>
<th rowspan="2">合併兩行</th>
四、表單
1.基本操作
<form name=”” method=”” action=””>
<!-- name:表單的名字
method:請求方式:get post
action:有效的url,如果沒有則傳送到包含表達的頁面的url -->
</form>
2.表單物件
<form>
<input type="text" name="控制元件名稱" value="文字欄位的預設取值"
size="控制元件的長度" maxlength="最長字元數"/>
<!--type:text(文字),password(密碼) ,submit(提交),reset(重置)
radio (單選)checkbox (複選框)-->
<!--單選 name 需要一樣-->
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女
</form>
3.下拉選單
<select name="select">
<option value="福州">福州</option>
<option value="廣州">廣州 </option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
4.文字域
多行文字用:
<textarea cols=”30” rows=”5”>
clos
代表列數,rows
代表行數</textarea>
5.影象
<img src=”url” alt=””/>
src:圖片的地址
alt :圖片不顯示時代替的文字
五、框架的使用
<iframe src="URL" frameborder="0" >
<!-- URL指向不同的頁面
frameborder :顯示邊框–>
</iframe>
六、HTML5新特性
<section>章節、頁首、標題</section>
<article>文章</article>
<nav>定義超連結的區域</nav>
<header>定義文件的頁面,通常引用引導導航資訊</header>
<footer>頁尾</footer>
<aside>側邊欄:嵌入內容</aside>
七、html5表單
1.
<datalist>帶搜尋的選擇框</datalist>
<form autocomplete="on" novalidate="ture">
<!--
autocomplete="on":記憶輸入過的值
nvalidate="ture":不驗證
<input> 型別:text, arch, url, telephone, email, password, datepickers, range 以及 color。
-->
<input autofocus="autofocus"/> 游標獲取的焦點
<input multiple=""/>可選擇多個值email file
<input pattern="[A-z]{4}" /> 正則表示式
<input placeholder="提示" /> 提示
<input required="required" /> 必填
2.輸入型別type
<input type="email" name="user_email" /> 郵箱地址驗證
<input type="url" name="user_url" /> url地址
<input type="number" name="points" min="0" max="10" step="2" value="2"/> :數值,min:最小值;max:最大值;step;間隔 ;value:預設值
<input type="range" name="points" min="0" max="10" step="2" value="2"/>:滾動條
<input type="color" name="colordemo" />顏色選擇
日期選擇器
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鐘)