整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是 網絡系統技藝者，點擊右上方“關注”，每天和大家分享 關于 網絡設備及系統和企業組網 方面干貨。碼字不易，如果您覺得文章還可以，就點贊+關注+收藏吧，也許在以后某個時間能夠用得到。
要使瀏覽器在輸入網址時自動跳轉到 HTTPS，你可以通過幾種方式來實現：
1、使用服務器端重定向：這是最常見的方法。你可以配置服務器，使其在接收到 HTTP 請求時，將請求重定向到對應的 HTTPS 地址。具體實現方式取決于你使用的服務器軟件（例如 Apache、Nginx、IIS 等），可以通過配置文件來完成這個設置。
2、使用 HSTS（HTTP Strict Transport Security）：HSTS 是一個安全策略，它告訴瀏覽器在一段時間內強制使用 HTTPS 連接。在服務器響應的 HTTP 頭中包含 HSTS 頭信息，瀏覽器會記住并在指定的時間內自動將 HTTP 請求轉為 HTTPS。但請注意，一旦啟用 HSTS，客戶端瀏覽器將會記住這個設置，即使服務器停止發送 HSTS 頭信息，客戶端仍然會強制使用 HTTPS。因此，在啟用 HSTS 之前，請確保你的網站已經完全支持 HTTPS，并且你愿意承擔由此帶來的長期影響。
3、JavaScript 重定向：雖然不是最佳的，但你也可以使用 JavaScript 在頁面加載時檢測協議，并將頁面重定向到 HTTPS 版本。這種方法不如服務器端重定向或 HSTS 安全可靠，因為它依賴于客戶端瀏覽器執行 JavaScript。在 HTML <head> 標簽中插入如下代碼可以實現簡單的 JavaScript 重定向：
<script>
if (location.protocol !=='https:') {
location.replace(`https:${location.href.substring(location.protocol.length)}`);
}
</script>
無論選擇哪種方法，始終確保你的網站服務器已正確配置，并且已經在你的網站上使用了有效的 SSL/TLS 證書。
我是“網絡系統技藝者”，系統運維工程師一枚，持續分享【網絡技術+系統運維技術】干貨。碼字不易，如果您覺得文章還可以，就關注+收藏吧，也許在以后某個時間能夠用得到。
本文主要記錄常用的html標簽使用說明，用起來的時候偶爾查查。
標簽 | 英文全拼 | 作用 | 特點 |
?<html></html>?? | html | 網頁的根標簽 | 所有的標簽都要寫在這一對根標簽里面 |
??<head></head>?? | head | 網頁的頭標簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網頁的主題 | 包含文檔的所有內容 |
??<div></div>?? | division | 定義一個區域 | 瀏覽器通常會在??<div>??前后放置一個換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標簽 |
??<br>或<br/>?? | break | 換行 | 單標簽，不會在其前后創建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標簽 |
??<img src="">?? | image | 添加圖片 | 單標簽 |
??<embed src="">?? | embed | 嵌入外部應用 | 單標簽 |
??<meta>?? | meta | 提供有關頁面的元信息 | 單標簽，??<meta>???標簽通常位于??<head>??區域內 |
??<link>?? | link | 定義文檔與外部資源的關系 | 單標簽，??<link>???標簽只能存在于??<head>??區域內，不過它可出現任何次數。 |
??<p></p>?? | paragraph | 定義段落 | 自動在其前后創建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標題 | h1在一個頁面里只能出現一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標簽一起使用 |
??<li></li>?? | list item | 創建列表項 | 可與各種列表定義標簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項目 |
??<dd></dd>?? | definition description | 定義描述 | 對描述列表中的項目進行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽 |
??<th></th>?? | table headline | 定義表格每一列的標題 | 該標簽的文本通常呈現為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數據 | 該標簽的文本呈現為普通且左對齊 |
??<caption>表格標題</caption>?? | caption | 定義整個表格的標題 | ??<caption>???標簽必須直接放在??<table>??標簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標簽定義了列表中的可用選項 |
??<option></option>?? | option | 定義下拉列表中的可用項 | ??<option>??標簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項組 | ??<optgroup>??標簽用于把相關的選項組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標題 | ??<legend>??通過css設定樣式 |
??<progress></progress>?? | progress | 定義運行中的任務進度 | ??<progress>???是HTML5中的新標簽，??<progress>??標簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標簽，??<meter>??標簽不適合用來表示進度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標簽是HTML5的新標簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標簽是HTML5的新標簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標簽是HTML5中的新標簽 |
普通用法
錨點鏈接
錨點鏈接通過點擊超鏈接，自動跳轉到我們設置錨點的位置，類似于word的目錄導航。建立錨點的元素必須要有id或name屬性，最好兩個都有。這里只跳轉本頁面元素，其他頁面跳轉自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動生成隨機文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設置
在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網頁自動跳轉
無序列表
無序列表使用粗體圓點進行標記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數字進行標記，我們可以通過整數值start指定列表編號的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標題 -->
<dd>A1</dd> <!-- 解釋標題 -->
<dd>A2</dd> <!-- 解釋標題 -->
<dt>B</dt> <!-- 小標題 -->
<dd>B1</dd> <!-- 解釋標題 -->
<dd>B2</dd> <!-- 解釋標題 -->
</dl>基礎表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標題</caption> <!-- 定義表格標題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數據 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個單選框只能有一個被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網址控件
<input type="date">日期控件
<input type="time">時間控件
<!--email提供了郵箱的完整驗證，必須包含@和后綴，如果不滿足驗證，會阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對照表??
薦使用gulp-rev + gulp-rev-collector是比較方便的方法，結果如下:
"/css/style.css"=> "/dist/css/style-1d87bebe.css"
"/js/script1.js"=> "/dist/script1-61e0be79.js"
"cdn/image.gif"=> "http://cdn8.example.dot/img/image-35c3af8134.gif"
但是由于公司發布系統限制，如果用上面方法實現，每次更新都會積壓過多過期無用的文件，我們預期效果是:
"/css/style.css"=> "/dist/css/style.css?v=1d87bebe"
"/js/script1.js"=> "/dist/script1.js?v=61e0be79"
"cdn/image.gif"=> "http://cdn8.example.dot/img/image.gif?v=35c3af8134"
怎么破?改上面兩個Gulp插件是最高效的方法了。
1.安裝Gulp
npm install --save-dev gulp
2.分別安裝gulp-rev、gulp-rev-collerctor
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
3.打開node_modules\gulp-rev\index.js
第133行 manifest[originalFile]=revisionedFile;
更新為: manifest[originalFile]=originalFile + '?v=' + file.revHash;
4.打開node_modules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新為: return filename + ext;
5.打開node_modules\gulp-rev-collector\index.js
31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==path.basename(key) ) {
更新為: if ( path.basename(json[key]).split('?')[0] !==path.basename(key) ) {
6.配置gulpfile.js, 可參考下面gulpfile.js代碼
7.結果達到預期，如下：
Css
background: url('../img/one.jpg?v=28bd4f6d18');
src: url('/fonts/icomoon.eot?v=921bbb6f59');
Html
href="css/main.css?v=885e0e1815"
src="js/main.js?v=10ba7be289"
src="img/one.jpg?v=28bd4f6d18"
目錄
├── package.json
├── gulpfile.js
├── src/
│ ├── css/
│ │ ├── main.less
│ │ └── normalize.less
│ ├── js/
│ │ ├── xx.js
│ │ └── xx.js
│ ├── img/
│ │ ├── xx.jpg
│ │ └── xx.png
│ ├── fonts/
│ │ ├── xx.svg
│ │ └── xx.ttf
│ ├── rev/
│ ├── index.html
package.json:
{
"devDependencies": {
"apache-server-configs": "2.14.0",
"archiver": "^0.14.3",
"del": "^1.1.1",
"glob": "^5.0.5",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-changed": "^1.2.1",
"gulp-csslint": "^0.1.5",
"gulp-header": "^1.2.2",
"gulp-if": "^1.2.5",
"gulp-jshint": "^1.11.2",
"gulp-less": "^3.0.3",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-minify-html": "^1.0.4",
"gulp-rev": "^5.1.0",
"gulp-rev-collector": "^1.0.0",
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.6",
"jquery": "1.11.3",
"jshint": "^2.8.0",
"jshint-stylish": "^2.0.1",
"mocha": "^2.2.4",
"normalize.css": "3.0.3",
"run-sequence": "^1.0.2"
},
"engines": {
"node": ">=0.10.0"
},
"h5bp-configs": {
"directories": {
"archive": "archive",
"dist": "dist",
"src": "src",
"test": "test"
}
},
"homepage": "",
"license": {
"type": "MIT",
"url": ""
},
"name": "gulp-auto-version",
"private": true,
"scripts": {
"build": "gulp build",
"test": ""
},
"version": "1.0.0",
"dependencies": {}
}
gulpfile.js
var gulp=require('gulp'),
runSequence=require('run-sequence'),
gulpif=require('gulp-if'),
uglify=require('gulp-uglify'),
less=require('gulp-less'),
csslint=require('gulp-csslint'),
rev=require('gulp-rev'),
minifyCss=require('gulp-minify-css'),
changed=require('gulp-changed'),
jshint=require('gulp-jshint'),
stylish=require('jshint-stylish'),
revCollector=require('gulp-rev-collector'),
minifyHtml=require('gulp-minify-html'),
autoprefixer=require('gulp-autoprefixer'),
del=require('del');
var cssSrc=['main.less', 'layer-box.less', 'tag.less'],
cssDest='dist/css',
jsSrc='src/js/*.js',
jsDest='dist/js',
fontSrc='src/fonts/*',
fontDest='dist/font',
imgSrc='src/img/*',
imgDest='dist/img',
cssRevSrc='src/css/revCss',
condition=true;
function changePath(basePath){
var nowCssSrc=[];
for (var i=0; i < cssSrc.length; i++) {
nowCssSrc.push(cssRevSrc + '/' + cssSrc[i]);
}
return nowCssSrc;
}
//Fonts & Images 根據MD5獲取版本號
gulp.task('revFont', function(){
return gulp.src(fontSrc)
.pipe(rev())
.pipe(gulp.dest(fontDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/font'));
});
gulp.task('revImg', function(){
return gulp.src(imgSrc)
.pipe(rev())
.pipe(gulp.dest(imgDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/img'));
});
//檢測JS
gulp.task('lintJs', function(){
return gulp.src(jsSrc)
//.pipe(jscs()) //檢測JS風格
.pipe(jshint({
"undef": false,
"unused": false
}))
//.pipe(jshint.reporter('default')) //錯誤默認提示
.pipe(jshint.reporter(stylish)) //高亮提示
.pipe(jshint.reporter('fail'));
});
//壓縮JS/生成版本號
gulp.task('miniJs', function(){
return gulp.src(jsSrc)
.pipe(gulpif(
condition, uglify()
))
.pipe(rev())
.pipe(gulp.dest(jsDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/js'));
});
//CSS里更新引入文件版本號
gulp.task('revCollectorCss', function () {
return gulp.src(['src/rev/**/*.json', 'src/css/*.less'])
.pipe(revCollector())
.pipe(gulp.dest(cssRevSrc));
});
//檢測CSS
gulp.task('lintCss', function(){
return gulp.src(cssSrc)
.pipe(csslint())
.pipe(csslint.reporter())
.pipe(csslint.failReporter());
});
//壓縮/合并CSS/生成版本號
gulp.task('miniCss', function(){
return gulp.src(changePath(cssRevSrc))
.pipe(less())
.pipe(gulpif(
condition, minifyCss({
compatibility: 'ie7'
})
))
.pipe(rev())
.pipe(gulpif(
condition, changed(cssDest)
))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false,
remove: false
}))
.pipe(gulp.dest(cssDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/css'));
});
//壓縮Html/更新引入文件版本
gulp.task('miniHtml', function () {
return gulp.src(['src/rev/**/*.json', 'src/*.html'])
.pipe(revCollector())
.pipe(gulpif(
condition, minifyHtml({
empty: true,
spare: true,
quotes: true
})
))
.pipe(gulp.dest('dist'));
});
gulp.task('delRevCss', function(){
del([cssRevSrc,cssRevSrc.replace('src/', 'dist/')]);
})
//意外出錯？清除緩存文件
gulp.task('clean', function(){
del([cssRevSrc ,cssRevSrc.replace('src/', 'dist/')]);
})
//開發構建
gulp.task('dev', function (done) {
condition=false;
runSequence(
['revFont', 'revImg'],
['lintJs'],
['revCollectorCss'],
['miniCss', 'miniJs'],
['miniHtml', 'delRevCss'],
done);
});
//正式構建
gulp.task('build', function (done) {
runSequence(
['revFont', 'revImg'],
['lintJs'],
['revCollectorCss'],
['miniCss', 'miniJs'],
['miniHtml', 'delRevCss'],
done);
});
gulp.task('default', ['build']);
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
