整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言：在各類網站論壇上,沒有找到與工作比較貼切的技能,所以特此寫一些對剛步入工作或者工作中沒有重視的技能與問題,各位大牛請及時關閉文章.
ps：即使你是一個后端工程師,前端必備技能的學習一樣很重要,雖然我不是特別牛逼的前端,但常用的前端知識還是略懂一二的,我的文章內容是希望讓已經步入工作但尚未"修煉升仙"的同學們得到一些幫助,純屬個人原創見解,若不正確,請各位批評指正.
HTML4常用標簽
標題圖
為什么不介紹HTML5標簽呢,因為呢,我們現在工作中所做的項目還需考慮兼容性問題,目前還沒有完全普及HTML5,所以我們還是把HTML4中的常用標簽熟悉起來才是重中之重
下面我根據功能分類介紹常用的標簽(我只介紹沒有兼容性問題的并且十分常用的標簽,非常用標簽一律不介紹,我相信工作中你也用不到)
基礎標簽示例
上圖代碼的效果圖如下:
效果圖
總結基礎標簽:
html:我們頁面的總包商
head:頭部定義一些總體內容,比如瀏覽器標題,編碼格式,樣式文件引用
title:定義瀏覽器標題
meta:定義關于 HTML 文檔的元信息,諸如例子中的編碼格式,IE渲染模式(可以解決大部分IE兼容問題)
link:鏈接外部資源,如上圖中鏈接瀏覽器標題旁的小圖標,也經常用來鏈接css樣式文件
style:在標簽內定義css樣式
body:我們肉眼看到的內容顯示區域
script:在標簽內定義js代碼
br:換行符
h1~h6:不同字體大小的標題標簽(塊元素,什么是塊元素?下篇文章詳細介紹)
p:段落標簽(塊元素)
hr:水平分割線(塊元素)
了解了基本元素,你就已經可以畫一個簡單網頁了,但網頁可能很單調,所以請繼續閱讀
格式標簽
上圖代碼的效果圖如下:
效果圖
總結格式標簽:
b:字體加粗(行元素,什么是行元素?下篇文章詳細介紹)
strong:字體加粗,同b標簽(行元素)
blockquote:引用標簽,如果你的頁面中需要引用一些文章內容時,使用該標簽(塊元素,細心的同學已經發現了塊元素與行元素的一點區別了)
del:刪除標簽,標記廢除的內容,通常用來標記原價,而優惠價則正常顯示(行元素)
ins:下劃線填寫標簽,標記可變的內容,或需要輸入的內容(行元素)
em:斜體標簽,用來強調(行元素)
i:斜體標簽,同em(行元素)
看到這里,說明你確實想好好學習html,小編已經將工作常用的標簽都羅列了出來,所以你不再需要通篇的閱讀w3c中的內容,有了對格式標簽的了解,你就可以編寫一個攜帶樣式的網頁了,但你的網頁可能缺少與用戶的交互,那么請繼續堅持閱讀下去吧
表單標簽
上圖代碼效果圖如下:
效果圖
總結表單標簽:
form:表單包裹標簽,里面的內容一般都是表單元素,通常結合table一并使用(塊元素)
table:表格標簽(table比較特殊,單獨屬于table元素,效果與塊元素差不多)
thead:表格頭部
tbody:表格主體內容部分
tr:表格行
th:表格單元格,一般用于顯示標題,默認加粗樣式
td:表格單元格,一般用于存放信息或輸入框
input:各類表單輸入元素,如上圖中的輸入框,單選框,復選框,隱藏的輸入框以及按鈕(行元素)
select:下拉框,比如用于選擇省市區,民族等(行元素)
textarea:多行輸入框,一般提供給用戶輸入簡介,理由,多行文本等(行元素)
label:表單的提示信息,一般還用于包裹單選框,復選框使用,讓用戶點擊文字也能實現勾選,即點擊上圖中的男,女文字一樣可以勾選文字前面的勾選框(行元素)
學會了表單元素,我們就可以與用戶互動了,讓用戶能夠在我們網頁中輸入信息以及點擊按鈕,但我們的網頁還不夠豐富,我們繼續介紹其他常用的標簽
下面我們把其他常用的標簽一并進行介紹
其他標簽示例
上圖代碼效果圖如下:
效果圖
1.圖像
img:圖片標簽,這個很簡單,就是引用一個圖片資源進行展示,如上圖展示百度的圖片(行元素)
2.鏈接
a:超鏈接標簽,點擊a標簽包裹的內容,即可跳轉到我們事先定義的網絡路徑,如上圖中點擊百度圖片則可跳轉到百度的網址(行元素)
3.列表
ul:無序列表標簽,內部只能是li標簽(塊元素)
li:列表項內容標簽,包裹在ul中
dl:全稱definition list,定義列表,即有一個標題,有一些解釋信息的標簽,如上圖中的北京是標題,下面兩行是解釋(塊元素)
dt:結合dl標簽,一般用于顯示標題
dd:結合dl標簽,一般位于dt下面,用于解釋dt包裹的標題內容
可能有同學會問:還有個有序列表呢,我想說:有序列表實在太丑,已經被淘汰,所以小編只介紹我們工作中可能用到的標簽,不常用以及不推薦使用的標簽不作為本文重點
ul與dl的應用場景區別:
總的來說:
ul適合樣式類似的列表,如導航欄,新聞列表等場景,如下圖:
ul場景
dl適合有一個標題的列表場景,如下圖:
dl場景
4.通用標簽
div:最典型并常用的塊元素
span:最典型并常用的行元素
這兩個最常見的元素,小編最后才介紹是有深意的,正因為他們經常用,所以我們更需要了解其他的標簽,而不是一味的使用這兩個標簽實現所有的頁面展示效果,我們應該使用最合適的標簽展示對應的效果,這也是為什么上面著重介紹了ul與dl標簽
結尾總結:
由淺入深的理解與熟悉小編列出的所有常用標簽,如有缺失,請留言評論
認真琢磨各標簽的應用場景,而非全部使用div與span(這樣才不枉費小編的辛苦總結,哈哈)
次我們展示多個圖標動畫特效！上次有人在問，為什么不寫 font-family，就調用不了圖標。很簡單，你在 @font-face 中，指定 font-family 名字為 'FishC-icon';
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
那么在偽元素中就要告訴腳本，勞資就用'FishC-icon'里的圖標！
這次因為有多個動畫對象，所以用延遲參數形成動畫序列，先寫 5 個 div 吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖標元素2</title>
<style type="text/css">
@font-face {
font-family:'FishC-icon';
src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
}
.icon{
display: inline-block;
margin-right: 33px;
}
.android::before{
content: "\e65f";
font-size: 66px;
font-family: 'FishC-icon';
}
.app::before{
content: "\e660";
font-size: 66px;
font-family: 'FishC-icon';
}
.page::before{
content: "\e64d";
font-size: 66px;
font-family: 'FishC-icon';
}
.show::before{
content: "\e647";
font-size: 66px;
font-family: 'FishC-icon';
}
.victor::before{
content: "\e648";
font-size: 66px;
font-family: 'FishC-icon';
}
</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>
效果圖：
此時由于沒有隱藏文字，這是上一講的點睛之筆 ，有興趣自己去找。但不同之處在于此處的圖標都設置為“inline-block”，使之能夠橫向排列。現在修改樣式
.icon{
display: inline-block;
cursor: help;
width: 111px;
height: 111px;
font-size: 0px;
line-height: 100px;
border-radius: 50%;/*圓框*/
background:#7FE;
color: #000;
text-align: center;
animation:move 1s
}
效果圖：
例如，使圖標位置向下偏移 -100%。
然后在向上移動回到初始位置，此過程中讓圖標從完全透明化變為完全不透明。
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}
}
效果圖：
利用 transform 屬性的 translateY 方法來實現圖標的向下偏移。
然后使用 opacity 屬性設置圖標的透明度，0.0 （完全透明）到 1.0（完全不透明）。
由于未設置單個圖標的延遲，所以一下子 5 個同時出現。
既然提到了延遲，那就設置一下咯～
使用 animation-delay 屬性設置延遲：
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
效果圖：
光這么直棱棱也不好玩。
然后我們自己設置貝塞爾（cubic-bezier）速度曲線，達到不同速率節奏效果 ～
假設你穿越成功，會看到：
拖動粉點（起始點），藍點（終點）即可以生成坐標。
生成的結果為 cubic-bezier(.86,.15,.18,.9)。
.icon{
animation-fill-mode: both;
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
效果圖：
其中 animation-fill-mode 屬性用來屬性規定動畫在播放之前或之后，其動畫效果是否可見。。
設置完成后，防止圖標閃現。
學習HTML5開發培訓，到重慶千鋒教育，千鋒重慶HTML5開發培訓怎么樣？千鋒提供兩周免費試聽課程，歡迎你來試聽。
果圖：
我這里用的是圖標代替，圖片也是一樣的。
最關鍵的是：:render-header=“renderHeader” ，他是將列標題替換為其他內容。
話不多說，代碼來了！
HTML：
<el-table-column
prop="xxx"
:render-header="renderHeader"
label="鎖"
width="55"
fixed="left"
></el-table-column>
JS：
methods:{
renderHeader() {
return(
<i class="el-icon-lock"></i>
)
}
注釋：
prop=“xxx” 是字段名
:render-header=“renderHeader” 將列標題替換為其他內容
label=“鎖” 列標題，加了上面那行代碼這行可以不加
width=“55” 列寬
fixed=“left” 固定定位，當表格有很多列時，出現x軸滾動條，往右滑，這列會固定在最左側，不會被頁面遮住。
如果想要換成圖片，return里面換成圖片就可以了。
沒了，結束了，是不是很簡單吶，如有問題，歡迎留言。
如果此篇博文對您有幫助，還請動動小手點點關注 點點贊 收藏 ?留言吶~，謝謝 ~ ~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
