web前端開發(fā)入門HTML5知識點

發(fā)布時間：2020-10-20 20:38:01 來源：網(wǎng)絡(luò) 閱讀：237 作者：wx5dad8c26324df 欄目：web開發(fā)

1、首先我們先了解一下什么是前端，簡單說，就是我們平常所瀏覽的網(wǎng)頁啊，以及app首頁和小程序。

2、我們經(jīng)常訪問瀏覽器的時候，經(jīng)常會輸入網(wǎng)址，又可稱為域名http://www...com.
有時候是http有時候又是https，二者的區(qū)別在于后者更加安全些，有秘鑰。www就是萬維網(wǎng)，后綴com、org、edu、cn以及DNS稱為域名。

3、web開發(fā)設(shè)計的基礎(chǔ)之一是html。html基本框架有以下幾部分組成：
結(jié)構(gòu)
<html>
<!DOCTYPE html> .//聲明網(wǎng)頁類型
lang="en" // 語言 en ch
<meta charset="UTF-8"> //信息標(biāo)簽 charset="UTF-8" 網(wǎng)頁的編碼類型 utf-8
<head>
<title>標(biāo)題</title>
</head>
<body>
內(nèi)容
</body>
</html>
以上標(biāo)簽都是帶結(jié)尾的閉合，當(dāng)然也有自閉和。

3、了解過html的結(jié)構(gòu)，下面我們配置開發(fā)環(huán)境，我所用的軟件是JetBrains WebStorm10.這個軟件是要錢的，然后登錄后首先進(jìn)入File-setting-font-color 或者alt+ctrl+s設(shè)置字體大小和顏色。然后在file-new-dicrectory新建一個目錄，然后在這目錄下建html5文件即file-new-html5 file.

4、創(chuàng)建完一個文件后，了解基本用法和相關(guān)標(biāo)簽
alt+F2 瀏覽或右上角也可快速瀏覽
按alt鍵+鼠標(biāo)單擊，可以在不同地方輸入相同文字
在每一行的末尾ctrl+D 進(jìn)行行復(fù)制
輸入lorem按tab鍵，可以添加測試文本
p*數(shù)字按tab鍵，可以輸入多行標(biāo)簽P

5、建立一個網(wǎng)頁
在body下編輯內(nèi)容，設(shè)計網(wǎng)頁常用標(biāo)簽

a）超鏈接
<a href="鏈接的目標(biāo)地址" target="打開目標(biāo)窗口"></a>
target: _blank 在新窗口打開
_parent 在源窗口打開錨記：

1、跳轉(zhuǎn)到同一個頁面的不同位置
在跳轉(zhuǎn)位置處添加一個錨記，<a name="名稱"></a>
創(chuàng)建鏈接 <a href=“#錨記名稱”>點擊內(nèi)容</a>

2、跳轉(zhuǎn)到不同頁面的不同位置
在跳轉(zhuǎn)位置處添加一個錨記，<a name="名稱"></a>
創(chuàng)建鏈接 <a href=“文件名#錨記名稱”>點擊內(nèi)容</a>

b）發(fā)送郵件：mailto:郵箱地址
c）路徑：
絕對路徑：從根目錄開始
相對路徑：從當(dāng)前目錄開始
d）常用標(biāo)簽
水平線 <hr width="寬度" color="顏色" size="線粗細(xì)"/>
html注釋  ctrl+shift+/
換行 <br/>
空格：全角狀態(tài)下空格
標(biāo)題 h2~h7
<pre></pre> 預(yù)格式化
<em></em>斜體 <i></i>
<b></b>加粗 <strong></strong>
<big></big>字體放大 <small></small>
<code></code>放置代碼
<del></del>刪除線
<sub></sub>下標(biāo)
<sup></sup>上標(biāo)
單位：像素( px) 百分比(%) em rem

圖片插入所用標(biāo)簽：
<img src="圖片路徑" alt="信息提示" title=“圖片描述” width=“圖片寬度”height=“圖片高度”/>

e）表格
<table border="邊框線" cellspacing="邊框單元格間距" cellpadding="單元格填充" width="表格寬度">
<caption>表頭</caption>
<tr>
<th>標(biāo)題行</th>
</tr>
<tr align="對方方式">
<td>單元格</td>
</tr>
</table>
跨行跨列
rowspan colspan

f）列表
無序列表
<ul type="">
<li></li>
</ul>
type:disc(默認(rèn)實心圓) square 方塊 circle 空心圓
有序列表
<ol type="" start="">
<li></li>
</ol>
type:1 a A i I start:起始位置
自定義列表
<dl>
<dt></dt>
<dd></dd>
</dl>
g）表單
文本框 <input type="text"/>
密碼框 <input type="password"/>
單選按鈕 <input type="radio"/>
復(fù)選框 <input type="checkbox"/>
文件域 <input type="file"/>
按鈕 <input type="submit"/> 提交
<input type="reset"/> 重置
<input type="button" value="值"/>
<button></button>
下拉列表
<select>
<option></option>
<option selected></option>
</select>
文本域
<textarea rows="行數(shù)" cols="列數(shù)"></textarea>

h）表單分組
<fieldset>
<legend></legend>
name:~~
</fieldset>
label 標(biāo)簽

向AI問一下細(xì)節(jié)

web前端開發(fā)入門HTML5知識點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽