雖" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 從零開始，學(xué)習(xí)web前端之HTML基礎(chǔ)

從零開始，學(xué)習(xí)web前端之HTML基礎(chǔ)

時(shí)間：2023-10-02 19:42:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-02 19:42:01 來源：網(wǎng)站運(yùn)營

從零開始，學(xué)習(xí)web前端之HTML基礎(chǔ)：

導(dǎo)讀

我在大學(xué)的專業(yè)是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，大學(xué)期間有這樣一門課是“網(wǎng)頁設(shè)計(jì)與制作”，當(dāng)時(shí)對這門課挺感興趣，就學(xué)習(xí)了下。通過簡單的html、css和js能展現(xiàn)出自己想要的東西，感覺挺有意思的。
雖然陰差陽錯(cuò)之下成為了一名Android開發(fā)工程師，但是前端方面的知識也一直在關(guān)注，空余時(shí)間也學(xué)習(xí)的一些東西，試著做了一些簡單的東西，我的個(gè)人網(wǎng)站：http://yuzhiqiang.name/
但是平時(shí)學(xué)習(xí)的話都是這個(gè)學(xué)學(xué)，那個(gè)看看，沒有一個(gè)系統(tǒng)的學(xué)習(xí)，總感覺知識點(diǎn)掌握的不是太牢靠。正好這段時(shí)間項(xiàng)目剛做完，決定系統(tǒng)的學(xué)習(xí)一下前端方面的知識，以備不時(shí)之需。
這個(gè)博客的話就當(dāng)是學(xué)習(xí)的時(shí)候做個(gè)筆記，同時(shí)也希望能夠給想學(xué)習(xí)前端的同學(xué)做一個(gè)參考。

什么是前端

前端對于網(wǎng)站來說，通常是指，網(wǎng)站的前臺部分包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層。因此前端技術(shù)一般分為前端設(shè)計(jì)和前端開發(fā)，前端設(shè)計(jì)一般可以理解為網(wǎng)站的視覺設(shè)計(jì)，前端開發(fā)則是網(wǎng)站的前臺代碼實(shí)現(xiàn)，包括基本的HTML和CSS以及JavaScript/ajax，現(xiàn)在最新的高級版本HTML5、CSS3，以及SVG等。由于現(xiàn)在前后端分離的模式，還需要學(xué)習(xí)一些框架，目前比較流行的三大框架：Angular、Vue、React。 前端的發(fā)展非常迅速了，而且前端能做的東西也越來越多了，基本上能夠前后端通吃了。所以，前端的東西還是很多的，也需要花很多精力去學(xué)習(xí)的。
前端設(shè)計(jì)也就是UI或美工他們的工作，他們負(fù)責(zé)設(shè)計(jì)出好看的效果圖。
前端開發(fā)的工作就是將美工或UI提供的效果圖通過HTML+CSS+JS技術(shù)來生成網(wǎng)頁

認(rèn)識網(wǎng)頁

1） 網(wǎng)頁是由文字、圖片、音頻、視頻、超鏈接等組成的。
2）w3c組織制定了web的標(biāo)準(zhǔn)
html：結(jié)構(gòu)標(biāo)準(zhǔn) （網(wǎng)頁的整體架構(gòu)）
css：表現(xiàn)標(biāo)準(zhǔn) （網(wǎng)頁的美化）
js：行為標(biāo)準(zhǔn) （網(wǎng)頁的交互）

瀏覽器

我們通常是通過瀏覽器去瀏覽網(wǎng)頁，有時(shí)候會發(fā)現(xiàn)用不同的瀏覽器或者不同的模式（極速模式/兼容模式）訪問同一個(gè)網(wǎng)頁顯示的效果不同，這是因?yàn)闉g覽器內(nèi)核（渲染引擎）有差異。渲染引擎也是引起兼容性問題的根本原因。
目前市面上的瀏覽器內(nèi)核主要有四種

1、Trident內(nèi)核代表：Internet Explore
2、Gecko內(nèi)核代表：Mozilla、Firefox
3、WebKit內(nèi)核代表：Safari、Chrome
4、Presto內(nèi)核代表：Opera

HTML

hyper text markup language：超文本標(biāo)記語言

Html的結(jié)構(gòu)標(biāo)準(zhǔn)

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

Html標(biāo)簽分類

1)單標(biāo)簽: <! Doctype html> <br/> <hr/>
2)雙標(biāo)簽 : <html></html> <head></head> <title></title>

Html標(biāo)簽關(guān)系分類
包含（嵌套關(guān)系） <head><title></title></head> 父子
并列關(guān)系 <head></head><body></body> 兄弟姐妹

head標(biāo)簽

在網(wǎng)頁中我們一般是在head標(biāo)簽中去設(shè)置網(wǎng)頁的屬性

<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="個(gè)人簡介"> <meta name="keywords" content="喻志強(qiáng)，個(gè)人網(wǎng)站，個(gè)人簡介，喻志強(qiáng)的個(gè)人網(wǎng)站，喻志強(qiáng)的個(gè)人簡介"/> <title>個(gè)人簡介</title> <link rel="stylesheet" href="css/base.css"/> <script type="text/javascript" src="js/center.js"></script> </head>告訴瀏覽器以最新版本的ie內(nèi)核去渲染頁面或者使用Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)去渲染頁面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">網(wǎng)頁關(guān)鍵字，有利于seo的收錄

<meta name="keywords" content="喻志強(qiáng)，個(gè)人網(wǎng)站，個(gè)人簡介，喻志強(qiáng)的個(gè)人網(wǎng)站，喻志強(qiáng)的個(gè)人簡介"/>網(wǎng)頁的描述

<meta name="description" content="個(gè)人簡介">網(wǎng)頁重定向 2秒后跳轉(zhuǎn)到百度首頁

<meta http-equiv="refresh" content="2;https://www.baidu.com/" />默認(rèn)設(shè)置超鏈接打開新的窗口

<base target="_blank" />網(wǎng)頁的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>

常用標(biāo)簽

<br/> 換行標(biāo)簽<hr/> 水平線<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 第一行<br/> 第二行 <hr /> </body></html>





文本標(biāo)簽

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





圖片標(biāo)簽

<img src="img/34.jpg" alt="小狗" title="兩只小狗" width="300px" />Src： 圖片的來源 必寫屬性
Alt ： 替換文本 圖片不顯示的時(shí)候顯示的文字
Title：提示文本 鼠標(biāo)放到圖片上顯示的文字
Width ： 圖片寬度
Height ： 圖片高度
圖片沒有定義寬高的時(shí)候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放。







超鏈接

<a href="https://www.baidu.com/" target="_blank" title="百度官網(wǎng)">百度</a>href ： 去往的路徑（跳轉(zhuǎn)的頁面） 必寫屬性
title ： 提示文本 鼠標(biāo)放到鏈接上顯示的文字
target=”_self” ： 默認(rèn)值 在自身頁面打開（關(guān)閉自身頁面，打開鏈接頁面）
target=”_blank”： 打開新頁面 （自身頁面不關(guān)閉，打開一個(gè)新的鏈接頁面）

錨鏈接

1.先定義一個(gè)錨點(diǎn)

<div id="top">頂部</div>2.超鏈接到錨點(diǎn)

<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” 實(shí)心小圓圈
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>標(biāo)題</dt> <dd>內(nèi)容</dd> <dd>內(nèi)容</dd> <dd>內(nèi)容</dd> </dl>





滾動







表格

表格一般用于展示數(shù)據(jù)，推薦使用標(biāo)準(zhǔn)的表格結(jié)構(gòu)，有利于seo

<table border="1px" width="500" height="300" cellpadding="0" cellspacing="0" > <caption>表頭</caption> <thead> <tr> <td colspan="4">標(biāo)題</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” 內(nèi)容距邊框的距離
align=”left | right | center”
如果直接給表格用align=”center” 表格居中
如果給tr或者td使用 ，tr或者td內(nèi)容居中。
bgcolor=”red” 背景顏色。
表頭 <caption></caption>
colspan=”2” 合并同一行上的單元格
rowspan=”2” 合并同一列上的單元格
<th></th>用法和td一樣，標(biāo)題的文字自動加粗水平居中對齊
垂直對齊方式：Valign=”top | middle | bottom”
表格邊框顏色：bordercolor="red"

表單

表單一般是由提示信息和表單控件組成的，用于收集信息。平時(shí)網(wǎng)頁上的登錄，注冊就是表單。
表單域

<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” 將輸入框設(shè)置為只讀狀態(tài)（不能編輯）
disabled=“disabled” 輸入框未激活狀態(tài)
name=“username” 輸入框的名稱
value=“大前端” 默認(rèn)值

密碼輸入框

<input type="password" name="pwd" />文本輸入框的屬性和密碼輸入框?qū)傩酝ㄓ?br>

單選框

<input type="radio" name="gender" value="男" checked="checked"/>男<br /><input type="radio" name="gender" value="女" />女<br />只有將name的值設(shè)置相同的時(shí)候，才能實(shí)現(xiàn)單選效果。
checked=”checked” 設(shè)置默認(rèn)選擇項(xiàng)。

復(fù)選框

<input type="checkbox" name="sing" />唱歌<input type="checkbox" name="eat" />吃飯<input type="checkbox" name="game" />玩游戲checked=”checked” 設(shè)置默認(rèn)選中項(xiàng)

下拉列表

<select name="city"> <optgroup label="浙江省"> <option>杭州市</option> <option>洛陽市</option> <option>信陽市</option> <option>南陽市</option> </optgroup> </select>multiple=“multiple” 將下拉列表設(shè)置為多選項(xiàng)
selected=”selected” 設(shè)置默認(rèn)選中項(xiàng)目
<optgroup></optgroup> 對下拉列表進(jìn)行分組。
label=”” 分組名稱。

多行文本域

<textarea name="introduce" cols="20" rows="5"> </textarea>cols 控制輸入字符的長度。
rows 控制輸入的行數(shù)

文件上傳

<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="重置" />將信息重置到默認(rèn)狀態(tài)

表單分組

<form> <fieldset> <legend>注冊</legend> </fieldset></form><fieldset></fieldset> 對表單信息分組
<legend></legend> 表單信息分組名稱

<input type="url" /> 網(wǎng)址輸入框<input type="date" /> 日期控件<input type="time" /> 時(shí)間控件<input type="email" /> 郵件輸入框<input type="number" step="2" /> 數(shù)字，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>





標(biāo)簽語義化

好的語義化的網(wǎng)站標(biāo)準(zhǔn)就是去掉樣式表文件之后，結(jié)構(gòu)依然很清晰。比如w3cSchool
標(biāo)簽語義化概念：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）

標(biāo)簽語義化意義：
1:網(wǎng)頁結(jié)構(gòu)合理
2:有利于seo:和搜索引擎建立良好溝通，有了良好的結(jié)構(gòu)和語義你的網(wǎng)頁內(nèi)容自然容易被搜索引擎抓?。?br>3:方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）
4:便于團(tuán)隊(duì)開發(fā)和維護(hù)
標(biāo)簽語義化注意事項(xiàng)
1：盡可能少的使用無語義的標(biāo)簽div和span；
2：在語義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
3：不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
4：需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；

想要加入一起學(xué)習(xí)的小伙伴可以私信我或是給我留言。

作者：XeonYu

鏈接：從零開始，學(xué)習(xí)web前端之HTML基礎(chǔ)

關(guān)鍵詞：基礎(chǔ),學(xué)習(xí)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉