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