整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
在HTML中創(chuàng)建超鏈接非常簡(jiǎn)單，只需用標(biāo)簽環(huán)繞需要被鏈接的對(duì)象即可，其基本語(yǔ)法格式如下：
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>href屬性：鏈接的地址，鏈接的地址可以是一個(gè)網(wǎng)頁(yè)，也可以是一個(gè)視頻、圖片、音樂(lè)等等。
target屬性：
可以打開(kāi)別人的網(wǎng)頁(yè)：
<a href="https://www.baidu.com">在當(dāng)前窗口打開(kāi)百度</a><a href="https://www.baidu.com" target="_self">在當(dāng)前窗口打開(kāi)百度</a><a href="https://www.baidu.com" target="_blank">在新的窗口打開(kāi)百度</a>直接鏈接內(nèi)部頁(yè)面名稱(chēng)即可：
<a href="1.外部鏈接.html">打開(kāi)內(nèi)部鏈接</a>如果當(dāng)時(shí)沒(méi)有確定鏈接目標(biāo)時(shí)，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時(shí)為一個(gè)空鏈接：
<a href="#">空鏈接</a>通過(guò)創(chuàng)建錨點(diǎn)鏈接，用戶(hù)能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點(diǎn)鏈接分為兩步：
<h1 id="top">頂部</h1>...<a href="#top">回到頂部</a>跳轉(zhuǎn)到其他頁(yè)面：
<a href="5.錨點(diǎn)鏈接2.html#top">回到另一個(gè)頁(yè)面頂部</a>5.錨點(diǎn)鏈接2.html
<h1 id="top">頂部</h1>base 可以設(shè)置整體鏈接的打開(kāi)狀態(tài)
base 寫(xiě)到 head 之間
<head> <meta charset="utf-8"> <title>文檔標(biāo)題</title> <base target="_blank"></head><body> <a href="http://www.baidu.com">在新窗口打開(kāi)百度</a> <a href="http://www.baidu.com" target="_self">在當(dāng)前窗口打開(kāi)百度</a></body><body link="red" alink="yellow" vlink="green"> <a href="https://taobao.com">淘寶</a> <a href="https://jingdong.com">京東</a></body>輯導(dǎo)語(yǔ)：產(chǎn)品經(jīng)理在日常工作中會(huì)接觸到多方面的同事，也會(huì)產(chǎn)生比較多的交流，那除了接受需求以及判斷需求以外，更多的是與開(kāi)發(fā)小哥“battle”；本文作者分享了關(guān)于前端開(kāi)發(fā)工程師的一些工作日常，我們一起來(lái)了解一下。
今天要介紹的是產(chǎn)品經(jīng)理的小伙伴之一：前端開(kāi)發(fā)工程師，雖然天天和他們打交道，但是想必大家都沒(méi)有好好的“關(guān)心”過(guò)他們，今天我們一起來(lái)看看天天接觸的前端工程師到底在忙些什么。
現(xiàn)在移動(dòng)互聯(lián)網(wǎng)發(fā)展的這么快，前端開(kāi)發(fā)領(lǐng)域也越來(lái)越廣，前端早已經(jīng)告別了切圖崽的時(shí)代，在web端、移動(dòng)端（安卓、IOS）、Watch、小程序、公眾號(hào)開(kāi)發(fā)、混合app開(kāi)發(fā)都能看到前端開(kāi)發(fā)工程師的影子。
從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專(zhuān)業(yè)技能和工具將產(chǎn)品UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶(hù)PC端、移動(dòng)端網(wǎng)頁(yè)，處理視覺(jué)和交互問(wèn)題。
從廣義上來(lái)講，所有用戶(hù)終端產(chǎn)品與視覺(jué)和交互有關(guān)的部分，都是前端工程師的專(zhuān)業(yè)領(lǐng)域。
簡(jiǎn)單的說(shuō)，前端開(kāi)發(fā)工程師日常工作是創(chuàng)建Web頁(yè)面或移動(dòng)頁(yè)面等前端界面呈現(xiàn)給用戶(hù)的過(guò)程，通過(guò)前端三大件HTML、CSS、JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)界面交互 。
用戶(hù)看到的每一個(gè)網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（ Structure） 、 表現(xiàn)（ Presentation） 和行為（ Behavior）。
HTML、CSS、JavaScript是前端開(kāi)發(fā)中最基本也是最必須的三個(gè)技能；前端開(kāi)發(fā)中，在頁(yè)面的布局時(shí)， HTML將元素進(jìn)行定義，CSS對(duì)展示的元素進(jìn)行定位，再通過(guò)JavaScript實(shí)現(xiàn)相應(yīng)的效果和交互。接下來(lái)我們好好聊聊這三大件，知己知彼。
可以把HTML結(jié)構(gòu)想象成一個(gè)沒(méi)穿衣服的人。
HTML指超文本標(biāo)記語(yǔ)言（HyperText Markup Language），“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂(lè)、程序等非文字元素；前端開(kāi)發(fā)利用HTML標(biāo)簽（Tag）來(lái)標(biāo)記（Markup）網(wǎng)頁(yè)中的文字。
（html代碼示例）
上述代碼是一個(gè)最基礎(chǔ)HTML結(jié)構(gòu)，一個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)往往包括“頭”和“主體”，頭部的內(nèi)容使用header標(biāo)簽標(biāo)記，主要存放一些網(wǎng)頁(yè)信息，例如網(wǎng)頁(yè)標(biāo)題、內(nèi)容摘要、關(guān)鍵詞等，頭部?jī)?nèi)容也是SEO優(yōu)化的重要對(duì)象。
主體部分用標(biāo)簽body標(biāo)簽標(biāo)記，網(wǎng)頁(yè)的內(nèi)容全部放在body標(biāo)簽下，其內(nèi)部又包含了很多代表不同含義的標(biāo)簽（如下表所示，只展示部分常用的）。
這些形形色色的標(biāo)簽就構(gòu)成了頁(yè)面的內(nèi)容，要注意的是整個(gè)網(wǎng)頁(yè)的內(nèi)容都要放在一個(gè)頂層標(biāo)簽html標(biāo)簽下。
（常用標(biāo)簽）
例如：我們點(diǎn)擊某個(gè)鏈接，然后自動(dòng)跳轉(zhuǎn)一個(gè)新的頁(yè)面，這過(guò)程都是a標(biāo)簽在起作用；還有看到的圖片，就是img標(biāo)簽承載圖片的數(shù)據(jù)源。
最后，告訴大家兩個(gè)查看HTML源碼的方法，好奇的伙伴可以去試試。
可以把CSS想象成給一個(gè)沒(méi)穿衣服的人(HTML結(jié)構(gòu))化妝、穿衣服等，作用是讓它變得美美的 。
CSS 指層疊樣式表（Cascading Style Sheets），是一種將網(wǎng)頁(yè)內(nèi)容與網(wǎng)頁(yè)樣式分離的技術(shù)。
我們經(jīng)常會(huì)對(duì)一個(gè)網(wǎng)站評(píng)價(jià)道：這網(wǎng)站頁(yè)面怎么這么亂、這網(wǎng)站看起來(lái)真大氣——這背后都是受CSS影響。
CSS可以做什么？
1）CSS主要用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，美化網(wǎng)頁(yè)；它不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化；比如一開(kāi)始文字顯示是紅色，我點(diǎn)擊某個(gè)按鈕后文字變黑色了。
2）你可以輕松地控制頁(yè)面的布局，CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，因此我們能看到各式各樣的布局風(fēng)格。
3）在頁(yè)面制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制；例如通過(guò)文本屬性，可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)等等。
4）你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了；你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。
5）CSS在幾乎所有的瀏覽器上都可以使用。
CSS代碼示例
JS能夠讓HTML結(jié)構(gòu)這個(gè)人“跳舞”、“跑步”等動(dòng)作，主要目的是讓“人”動(dòng)起來(lái)。
JS（JavaScript）是一種屬于網(wǎng)絡(luò)的高級(jí)腳本語(yǔ)言，已經(jīng)被廣泛用于Web應(yīng)用開(kāi)發(fā)，常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶(hù)提供更流暢美觀的瀏覽效果；通常JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能的。
js可以做什么：
JS代碼示例
前端三大件到此介紹完畢，不過(guò)現(xiàn)在有些其他語(yǔ)言的程序猿在討論HTML、CSS、JS倒是算不算編程語(yǔ)言。
前端開(kāi)發(fā)工程師在精進(jìn)一步可以發(fā)展為全棧工程師，向T型人才或者π型人才發(fā)展。
全棧工程師熟悉多種開(kāi)發(fā)語(yǔ)言，同時(shí)具備前端和后臺(tái)開(kāi)發(fā)能力，既能做前端（需要熟悉前端三大件以及Vue等各種前端技術(shù)），又能做后端（需要熟悉Node.js或Java或ASP.net或php或Go等），可以獨(dú)自完成一個(gè)產(chǎn)品的前、后臺(tái)開(kāi)發(fā)工作。
簡(jiǎn)單了解下全棧工程師的技術(shù)棧有哪些：
我們可以看到，對(duì)于全棧工程師來(lái)說(shuō)，要活到老，學(xué)到老，其中最重要的屬性，就是不同的思維方式和強(qiáng)大的學(xué)習(xí)能力。
最后，請(qǐng)重新認(rèn)識(shí)一下你身邊那個(gè)平平無(wú)奇的前端小伙伴吧！也可以把本篇文章分享給他看看，到底有幾分像，哈哈。
作者：道三，電商PM；公眾號(hào): 產(chǎn)品大秘籍
本文由 @道三 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
s 獲取頁(yè)面中的script標(biāo)簽，這是網(wǎng)上的一段代碼，經(jīng)測(cè)試，可以獲取。
var child=document.children;
var arr=[];//用來(lái)存放獲取到的所有的標(biāo)簽
function fn(obj) {
for (var i=0; i < obj.length; i++) {
if (obj[i].children) {//當(dāng)當(dāng)前元素還存在子元素的時(shí)候,遞歸
fn(obj[i].children);
}
arr.push(obj[i]); //遍歷到的元素添加到arr這個(gè)數(shù)組中間
}
}
fn(child);
console.log(arr);//打印出最后獲取到的結(jié)果
for (var i=(arr.length - 1); i >=0; i--) {
console.log(arr[i]);
}
其實(shí)，這段JavaScript代碼的主要目的是獲取當(dāng)前頁(yè)面中的所有DOM元素，包括script標(biāo)簽，并將它們存儲(chǔ)在一個(gè)數(shù)組中。然而，它實(shí)際上并沒(méi)有針對(duì)script標(biāo)簽進(jìn)行特殊處理，而是獲取了document.children的所有直接子元素及其子孫元素。
如果要專(zhuān)門(mén)獲取頁(yè)面中的所有script標(biāo)簽，我們可以稍微修改一下這段代碼：
var arr=[];
function collectScripts(obj) {
for (var i=0; i < obj.length; i++) {
if (obj[i].nodeName==='SCRIPT') { // 當(dāng)前元素為script標(biāo)簽時(shí)
arr.push(obj[i]);
}
if (obj[i].children && obj[i].children.length > 0) {
collectScripts(obj[i].children); // 如果當(dāng)前元素還存在子元素，則遞歸查找
}
}
}
// 遍歷整個(gè)文檔對(duì)象模型以查找script標(biāo)簽
collectScripts(document.getElementsByTagName('html')[0].children);
console.log(arr); // 打印出所有找到的script標(biāo)簽
for (var i=(arr.length - 1); i >=0; i--) {
console.log(arr[i]);
}
看結(jié)果：
這里，我們首先通過(guò)document.getElementsByTagName('html')[0].children來(lái)獲取HTML文檔的頂層子元素，然后在遍歷過(guò)程中檢查每個(gè)元素是否是script標(biāo)簽，如果是則將其添加到數(shù)組arr中。同時(shí)保留了原有的遞歸結(jié)構(gòu)，以便能夠捕獲嵌套在其他標(biāo)簽內(nèi)的script標(biāo)簽。非常完美的實(shí)現(xiàn)了獲取頁(yè)面中的script標(biāo)簽。你也可以復(fù)制到瀏覽器的控制臺(tái)試試。非常好用！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
