1. 程式人生 > 實用技巧 >前端語言之HTML基礎語句

前端語言之HTML基礎語句

sublime text3怎麼快速生成html程式碼

  1. Ctrl + N,新建一個文件。

  2. Ctrl + Shift + P,開啟命令模式,再輸入 sshtml 進行模糊匹配,將語法切換到html模式。

  3. 輸入 !,再按下 Tab鍵或者 Ctrl + E ,就能快速開啟HTML5的整體結構。

一、什麼是html

html(超文字標記語言) 用於建立網頁的標準標記語言,可以直接由瀏覽器執行

二、常見的標籤

1.h類標籤

2.p標籤

3.圖片標籤

<img src="圖片地址"/>

4.a 標籤是超連結,點選可跳轉到其他的網頁

5.<div></div>標籤 是一個塊級標籤,相當於一個盒子

6.其他標籤

<br/> 換行

&nbsp; 空格

<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 - 選取時間(小時和分鐘)