從零開始，學習web前端之HTML基礎

時間 2019-12-11

標籤開始學習 web 前端 html 基礎欄目 HTML 简体版

原文原文鏈接

什麼是前端
前端對於網站來講，一般是指，網站的前臺部分包括網站的表現層和結構層。所以前端技術通常分爲前端設計和前端開發，前端設計通常能夠理解爲網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，如今最新的高級版本HTML五、CSS3，以及SVG等。因爲如今先後端分離的模式，還須要學習一些框架，目前比較流行的三大框架：Angular、Vue、React。前端的發展很是迅速了，並且前端能作的東西也愈來愈多了，基本上可以先後端通吃了。因此，前端的東西仍是不少的，也須要花不少精力去學習的。
前端設計也就是UI或美工他們的工做，他們負責設計出好看的效果圖。
前端開發的工做就是將美工或UI提供的效果圖經過HTML+CSS+JS技術來生成網頁javascript

認識網頁
1）網頁是由文字、圖片、音頻、視頻、超連接等組成的。
2）w3c組織制定了web的標準
html：結構標準（網頁的總體架構）
css：表現標準（網頁的美化）
js：行爲標準（網頁的交互）css

瀏覽器
咱們一般是經過瀏覽器去瀏覽網頁，有時候會發現用不一樣的瀏覽器或者不一樣的模式（極速模式/兼容模式）訪問同一個網頁顯示的效果不一樣，這是由於瀏覽器內核（渲染引擎）有差別。渲染引擎也是引發兼容性問題的根本緣由。
目前市面上的瀏覽器內核主要有四種html

一、Trident內核表明：Internet Explore
二、Gecko內核表明：Mozilla、Firefox
三、WebKit內核表明：Safari、Chrome
四、Presto內核表明：Opera前端

HTML
hyper text markup language：超文本標記語言java

Html的結構標準：程序員

<!DOCTYPE html> 聲明文檔類型 <html> 根標籤 <head> 頭部標籤 <meta charset="utf-8" /> 編碼方式：通用字符集 <title></title> 標題 </head> <body> 主體標籤 </body> </html>

Html標籤分類
1)單標籤: <! Doctype html> <br/> <hr/>
2)雙標籤 : <html></html> <head></head> <title></title>web

Html標籤關係分類
包含（嵌套關係） <head><title></title></head> 父子
並列關係 <head></head><body></body> 兄弟姐妹ajax

head標籤
在網頁中咱們通常是在head標籤中去設置網頁的屬性chrome

<head> <meta charset="UTF-8"> <link rel="shortcut icon" href="img/logo.ico"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="我的簡介"> <meta name="keywords" content="喻志強，我的網站，我的簡介，喻志強的我的網站，喻志強的我的簡介"/> <title>我的簡介</title> <link rel="stylesheet" href="css/base.css"/> <script type="text/javascript" src="js/center.js"></script> </head>

告訴瀏覽器以最新版本的ie內核去渲染頁面或者使用Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)去渲染頁面後端

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

網頁關鍵字，有利於seo的收錄

<meta name="keywords" content="喻志強，我的網站，我的簡介，喻志強的我的網站，喻志強的我的簡介"/>

網頁的描述

<meta name="description" content="我的簡介">

網頁重定向 2秒後跳轉到百度首頁

<meta http-equiv="refresh" content="2;https://www.baidu.com/" />

默認設置超連接打開新的窗口

<base target="_blank" />

網頁的logo 在線製做

<link rel="shortcut icon" href="img/logo.ico" />

連接外部樣式表

<link rel="stylesheet" href="css/base.css"/>

連接外部js腳本

<script type="text/javascript" src="js/center.js"></script>

經常使用標籤

<br/> 換行標籤 <hr/> 水平線

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 第一行<br/> 第二行 <hr /> </body> </html>

文本標籤

<p></P> 文本段落標籤 <font>文本標籤</font> <strong>加粗</strong> <b>加粗</b> <em>傾斜</em> <i>傾斜</i> <del>刪除線</del> <s>刪除線</s> <ins>下劃線</ins> <u>下劃線</u>

圖片標籤

<img src="img/34.jpg" alt="小狗" title="兩隻小狗" width="300px" />

Src：圖片的來源必寫屬性
Alt ：替換文本圖片不顯示的時候顯示的文字
Title：提示文本鼠標放到圖片上顯示的文字
Width ：圖片寬度
Height ：圖片高度
圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，若是隻更改圖片的寬度或者高度，圖片等比例縮放。

超連接

<a href="https://www.baidu.com/" target="_blank" title="百度官網">百度</a>

href ：去往的路徑（跳轉的頁面）必寫屬性
title ：提示文本鼠標放到連接上顯示的文字
target=」_self」：默認值在自身頁面打開（關閉自身頁面，打開連接頁面）
target=」_blank」：打開新頁面（自身頁面不關閉，打開一個新的連接頁面）

錨連接

1.先定義一個錨點

<div id="top">頂部</div>

2.超連接到錨點

<a href="#top">回到頂部</a>

特殊字符

列表
1）無序列表

<ul type="square"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>

type=」square」小方塊
Type=」disc」實心小圓圈
Type=」circle」空心小圓圈

2）有序列表

<ol type="1" start="2"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>

type=」1,a,A,i,I」 type的值能夠爲1,a,A,i,I
start=」3」決定了開始的位置。

3）自定義列表

<dl> <dt>標題</dt> <dd>內容</dd> <dd>內容</dd> <dd>內容</dd> </dl>

滾動

表格
表格通常用於展現數據，推薦使用標準的表格結構，有利於seo

<table border="1px" width="500" height="300" cellpadding="0" cellspacing="0" > <caption>表頭</caption> <thead> <tr> <td colspan="4">標題</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <th>4</th> </tr> </tbody> </table>

屬性：
Border=」1」邊框
Width=」500」寬度
Height=」300」高
cellspacing=」2」單元格與單元格的距離
cellpadding=」2」內容距邊框的距離
align=」left | right | center」
若是直接給表格用align=」center」表格居中
若是給tr或者td使用，tr或者td內容居中。
bgcolor=」red」背景顏色。
表頭 <caption></caption>
colspan=」2」合併同一行上的單元格
rowspan=」2」合併同一列上的單元格
<th></th>用法和td同樣，標題的文字自動加粗水平居中對齊
垂直對齊方式：Valign=」top | middle | bottom」
表格邊框顏色：bordercolor="red"

表單
表單通常是由提示信息和表單控件組成的，用於收集信息。平時網頁上的登陸，註冊就是表單。
表單域

<form action='http://www.123.com/postValue' method="post"></form>

屬性：action:處理信息
Method=」get | post」
Get經過地址欄提供（傳輸）信息，安全性差。
Post安全性高。

文本輸入框

<input type="text" name="userName" /

maxlength=」6」限制輸入字符長度
readonly=」readonly」將輸入框設置爲只讀狀態（不能編輯）
disabled=」disabled」輸入框未激活狀態
name=」username」輸入框的名稱
value=」大前端」默認值

密碼輸入框

<input type="password" name="pwd" />

文本輸入框的屬性和密碼輸入框屬性通用

單選框

<input type="radio" name="gender" value="男" checked="checked"/>男<br /> <input type="radio" name="gender" value="女" />女<br />

只有將name的值設置相同的時候，才能實現單選效果。
checked=」checked」設置默認選擇項。

複選框

<input type="checkbox" name="sing" />唱歌 <input type="checkbox" name="eat" />吃飯 <input type="checkbox" name="game" />玩遊戲

checked=」checked」設置默認選中項

下拉列表

<select name="city"> <optgroup label="河南省"> <option>鄭州市</option> <option>洛陽市</option> <option>信陽市</option> <option>南陽市</option> </optgroup> </select>

multiple=」multiple」將下拉列表設置爲多選項
selected=」selected」設置默認選中項目
<optgroup></optgroup> 對下拉列表進行分組。
label=」」分組名稱。

多行文本域

<textarea name="introduce" cols="20" rows="5"> </textarea>

cols 控制輸入字符的長度。
rows 控制輸入的行數

文件上傳

<input type="file" multiple="multiple" accept="application/msword" />

multiple=」multiple」多選
accept=」application/msword」選擇的文件格式

提交按鈕

<input type="submit" value="註冊" />

具備提交功能

普通按鈕

<input type="button" value="按鈕" />

普通按鈕，通常配合js使用

圖片按鈕

<input type="image" src="img/34.jpg" width="100" />

重置按鈕

<input type="reset" value="重置" />

將信息重置到默認狀態

表單分組

<form> <fieldset> <legend>註冊</legend> </fieldset> </form>

<fieldset></fieldset> 對錶單信息分組

<legend></legend> 表單信息分組名稱

<input type="url" /> 網址輸入框 <input type="date" /> 日期控件 <input type="time" /> 時間控件 <input type="email" /> 郵件輸入框 <input type="number" step="2" /> 數字，step：步長 <input type="range" /> 滑塊控件 還有不少其餘的控件

例如：

<form action="register.jsp" method="get"> <fieldset> <legend>註冊</legend> 用戶名:<input type="text" name="userName" value="yzq" /><br /> 密碼：<input type="password" name="pwd" /><br /> <input type="checkbox" name="sing" />唱歌 <input type="checkbox" name="eat" />吃飯 <input type="checkbox" name="game" />玩遊戲<br /> <input type="radio" name="gender" value="男" checked="checked"/>男<br /> <input type="radio" name="gender" value="女" />女<br /> <select name="city" multiple="multiple"> <option>北京市</option> <optgroup label="河南省"> <option>鄭州市</option> <option>洛陽市</option> <option>信陽市</option> <option>南陽市</option> </optgroup> </select> <br /> <textarea name="introduce" cols="20" rows="5"> </textarea><br /> <input type="file" multiple="multiple" accept="application/msword" /> <input type="submit" value="註冊" /> <input type="button" value="按鈕" /> <input type="image" src="img/34.jpg" width="100" /> <input type="reset" value="重置" /> <input type="url" /> <input type="date" /> <input type="time" /> <input type="email" /> <input type="number" step="2" /> <input type="range" /> </fieldset> </form>

標籤語義化
好的語義化的網站標準就是去掉樣式表文件以後，結構依然很清晰。好比w3cSchool
標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）

標籤語義化意義：
1:網頁結構合理
2:有利於seo:和搜索引擎創建良好溝通，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取；
3:方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
4:便於團隊開發和維護
標籤語義化注意事項
1：儘量少的使用無語義的標籤div和span；
2：在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
3：不要使用純樣式標籤，如：b、font、u等，改用css設置。
4：須要強調的文本，能夠包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）；

零基礎學習web前端課程到知海匠庫http://www.zhihaijiangku.com，課程研發來自網易系，項目教學貼合企業用人需求，讓你成爲一名優秀的程序員。